Potential bug with multi canvas views and mesh picking?

Bugs
#1

When I have multi canvas views on a page and canvases differ in size or camera then scene mesh picking is not aligned with the actual meshes. See live demo here and code here (based on multi canvas demo code). There’s an opacity change on hover for the red cube, but you’ll see the pick target doesn’t align with the mesh.

If canvases are the same size and only the one camera is in use across multiple views then mesh picking seems to be aligned.

@Evgeni_Popov @PolygonalSun
Related to Trouble switching inputs with multi-canvas views

#2

@Evgeni_Popov might be on the road at the moment but I am sure he ll have a look soon-ish :slight_smile:

2 Likes
#3
#4

So, I don’t think it will be possible to make picking work with your current code.

The problem is that the ray picking code is using engine.getRenderWidth() / engine.getRenderHeight() to create the viewport in pixel coordinates (from the camera.viewport property). But this code is executed outside of the main render loop (even outside of the requestFrameAnimation handler) for pointer events, so at that time engine.getRenderWidth/Height are the dimensions of the currently bound framebuffer, which is the latest that had been drawn into (canvas2 in your case).

I think what you should do is calling scene.pick yourself in the appropriate context, meaning when the scene is rendered with cam1. You can do this in the render loop:

engine.runRenderLoop(function() {
    if (scene.activeCamera) {
        scene.render();
        if (scene.activeCamera.name === "cam1") {
            const pickResult = scene.pick(scene.pointerX, scene.pointerY, undefined, false, scene.activeCamera);
            if (pickResult.pickedMesh) {
                console.log("picked", pickResult.pickedMesh.name);
            }

        }
    }
});
3 Likes
#5
#6

Ok thanks for investigating the issue @Evgeni_Popov and I’ll employ your suggested workaround.