Skip to content

same-scene, multi-camera rendering #507

Closed

Description

@xuchaozou

Is your feature request related to a problem?

Now we need to do the three-view function,

// render first view
  renderer.setViewport(0, 0, window.innerWidth / 3, window.innerHeight);
  renderer.setScissor(0, 0, window.innerWidth / 3, window.innerHeight);
  renderer.setScissorTest(true);
  renderer.render(scene, camera1);


  //  render second view
  renderer.setViewport(window.innerWidth / 3, 0, window.innerWidth / 3, window.innerHeight);
  renderer.setScissor(window.innerWidth / 3, 0, window.innerWidth / 3, window.innerHeight);
  renderer.setScissorTest(true);
  renderer.render(scene, camera2);


  //render thrid view
  renderer.setViewport((window.innerWidth / 3) * 2, 0, window.innerWidth / 3, window.innerHeight);
  renderer.setScissor((window.innerWidth / 3) * 2, 0, window.innerWidth / 3, window.innerHeight);
  renderer.setScissorTest(true);
  renderer.render(scene, camera3);

May I ask how the configuration can support this new requirement,
i need to you help
thanks!!!

Describe the solution you'd like

A clear and concise description of what you want to happen.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Additional context

Add any other context or screenshots about the feature request here.

Activity

  1. vanruesc commented on Jun 24, 2023

    @vanruesc
    Member

    Duplicate of #386.

    Support for scissor/viewport is planned but not there yet.

  2. xuchaozou commented on Jun 25, 2023

    @xuchaozou
    Author

    do you mean multiple camera
    example:

    // render first view
      renderer.setViewport(0, 0, window.innerWidth / 3, window.innerHeight);
      renderer.setScissor(0, 0, window.innerWidth / 3, window.innerHeight);
      renderer.setScissorTest(true);
      renderer.render(scene, camera1);
    
    
      //  render second view
      renderer.setViewport(window.innerWidth / 3, 0, window.innerWidth / 3, window.innerHeight);
      renderer.setScissor(window.innerWidth / 3, 0, window.innerWidth / 3, window.innerHeight);
      renderer.setScissorTest(true);
      renderer.render(scene, camera2);
    
    
      //render thrid view
      renderer.setViewport((window.innerWidth / 3) * 2, 0, window.innerWidth / 3, window.innerHeight);
      renderer.setScissor((window.innerWidth / 3) * 2, 0, window.innerWidth / 3, window.innerHeight);
      renderer.setScissorTest(true);
      renderer.render(scene, camera3);
    
  3. xuchaozou commented on Jun 25, 2023

    @xuchaozou
    Author

    i see the code , it's always only a camera

  4. vanruesc commented on Jun 25, 2023

    @vanruesc
    Member

    Oh, have you tried using multiple RenderPass instances with different cameras? You can change scissor/viewport settings in-between passes with the LambdaPass. Also make sure to disable auto clear of the render passes: renderPass.clearPass.enabled = false.

  5. xuchaozou commented on Jun 26, 2023

    @xuchaozou
    Author

    But I end up using EffectPass, and the first parameter of effectPass can only be the camera parameter, and I don't know how to render different parts of the same dom with multiple cameras
    image
    To achieve this effect, look at a model different camera different view, their post-processing is the same

  6. vanruesc commented on Jun 28, 2023

    @vanruesc
    Member

    Scissor/viewport is not supported by postprocessing yet.

    Applying image effects to different viewports requires API changes that will be included in the next major version v7.

  7. xuchaozou commented on Jun 29, 2023

    @xuchaozou
    Author

    When will the v7 version be released? I urgently need this feature support, thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions