Same scene GPU pick with Multi-view scene

Questions
, ,
1

Hi there, hope you had a great weekend!

I have set up an multi-view scene based on this: https://threejs.org/examples/?q=mult#webgl_multiple_views, where the left view would be the main view, and the right ones are helpers.
I would like to do same scene picking, let’s say to pick the sphere in the left view. I have set up the pick material and everything, and it worked well if there is only the main scene (i.e. main scene takes the whole screen). once I add the helper scenes, the main scene gets ‘compressed’ to the left, but the gpu-picking function is treating it as if the main scene is still taking up the whole screen, so there is offset

The code I use to render the scene is:

function updateSize() {
        if ( windowWidth != window.innerWidth || windowHeight != window.innerHeight) {
            windowWidth  = window.innerWidth;
            windowHeight = window.innerHeight;
            renderer.setSize ( windowWidth, windowHeight );
            for ( var ii = 0; ii < views.length; ++ii ){
                var view = views[ii];
                var width  = Math.floor( windowWidth  * view.width );
                var height = Math.floor( windowHeight * view.height );
                var left   = Math.floor( windowWidth  * view.left );
                var top    = Math.floor( windowHeight * (1-view.top) - height );
                view.windowLeft = left;
                view.windowTop = windowHeight * view.top;
                view.windowWidth = width;
                view.windowHeight = height;
            }
        }
    }


    function render() {
        updateSize();
        for ( var ii = 0; ii < views.length; ++ii ) {
            var view = views[ii];
            var camera = view.camera;
            var width  = Math.floor( windowWidth  * view.width );
            var height = Math.floor( windowHeight * view.height );
            var left   = Math.floor( windowWidth  * view.left );
            var top    = Math.floor( windowHeight * (1-view.top) - height );

            view.windowLeft = left;
            view.windowTop = windowHeight * view.top;
            view.windowWidth = width;
            view.windowHeight = height;
            renderer.setViewport( left, top, width, height );
            renderer.setScissor( left, top, width, height );
            renderer.setScissorTest( true );
            renderer.setClearColor( 0xffffff, 1 ); // border color
            renderer.clearColor(); // clear color buffer
            renderer.setClearColor( view.background, view.backgroundAlpha);
            camera.aspect = width / height;
            camera.updateProjectionMatrix();
            renderer.clear();
            renderer.render( view.scene, camera );
        }
    }

and for the picking part

export function gpuPick(view, renderer, scene,mouseEvent, windowWidth, windowHeight) {
    var camera = view.camera;

    var pickingTexture = new THREE.WebGLRenderTarget(1, 1, { type: THREE.FloatType} );
    var pixelBuffer = new Float32Array(4);

    var width  = Math.floor( windowWidth  * view.width );
    var height = Math.floor( windowHeight * view.height );
    var left   = Math.floor( windowWidth  * view.left );
    var top    = Math.floor( windowHeight * view.top);
    camera.setViewOffset(renderer.domElement.width, renderer.domElement.height,
        mouseEvent.clientX * window.devicePixelRatio | 0,  mouseEvent.clientY * window.devicePixelRatio | 0, 1, 1 );
    camera.updateProjectionMatrix();
    renderer.setRenderTarget(pickingTexture);
    renderer.setViewport( left, top, width, height );
    renderer.setScissor( left, top, width, height );

    renderer.render(scene, camera);
    renderer.readRenderTargetPixels(pickingTexture, 0, 0, 1, 1, pixelBuffer);
    const pickingResult = parsePixelBuffer(pixelBuffer);
    console.log(pickingResult);
    camera.clearViewOffset();
    camera.updateProjectionMatrix();
    renderer.setRenderTarget(null);
    return pickingResult;
}

I vaguely know I need to set the viewport and scissor, and probably some offset correctly, but not sure exactly what I should do here. can you guys help me?