Two different size canvases issue

Questions
1

I have a page with two canvases. Large canvas is main canvas (passed to engine constructor) and canvas on the left side is registered view.

const view = engine.registerView(canvas, camera);

As you see main canvas becomes streched. It renders view from second canvas just scaled up.

multi canvas
multi canvas1901×877 279 KB

So I have hidden this ugly large canvas and replaced it with another registered view. Now I have 3 canvases: main which is hidden and 2 registered views.
multi canvas 2
multi canvas 21915×859 306 KB

It looks much better, but there’s still a problem. It behaves not as expected. I try to pick mesh with scene.pick method, but whenever I click on canvas it wont pick any mesh. When I check scene.pointerX and scene.pointerY it always returns 0, 0.
Any ideas how to fix this?

2

Do you mind reproducing the issue in the PG or on jsfiddle?
(your game looks great btw)

3

For your picking issue, make sure to do this:

4

Hey @Deltakosh thanks alot :slight_smile:
Changing input element helped a little bit, at least now I’m getting real pointer coordinates. Unfortunately results returned by pick method is slightly off. It looks like scene picking ray is being projected from the last registered view. I can’t explain it acuratelly but if I register the big canvas last then everything is fine. It would be OK if view registration order would be always constant, but it’s not. Views registered dynamically and depends on other processes.
I tried to replicate current state in Playground, but it behaves strangley with multiple canvas. I’ll try to do it on different online platform.

1 Like