Render multiple views

I set renderer’s autoClear to false and use multiple viewports. Before rendering I clear renderer’s color and in a for loop, before rendering each viewport, I clear the depth buffer:

        this.renderer.clearColor();
        for (let i = this.visibleViewportCameras.length - 1; i >= 0; i--) { // Primary viewports must be rendered in reverse order: the topmost visible one will be rendered last
            const camera = this.visibleViewportCameras[i];
            this.renderer.setViewport(camera.viewport.x, camera.viewport.y, camera.viewport.width, camera.viewport.height);
            this.renderer.clearDepth();
            this.renderer.render(this.scene, camera.activeProjection); // Render the scene
        }

It works with both perspective and orthographic projection cameras. Check this:

https://www.dei.isep.ipp.pt/~jpp/threeJS/Thumb_Raiser%20-%20Merged/Thumb_Raiser_Loquitas_10x10.html

3 Likes