Hi!
I have a Babylon canvas embedded into an HTML layout with a header and a sidebar overlaying the rendering canvas. I’d like to offset the scene’s main ArcRotateCamera relative to the canvas according to the following schematic:
I tried using the camera’s targetScreenOffset property, which seems to work, but I’m not sure how to get the appropriate values for the correct offset.
Any help would be greatly appreciated!
Thanks,
Michael
targetoffset changes viewMatrix and hence, is a world 2d offset applied in camera local space. I’m not sure that will be easy to set as is depends on the distance from camera to target.
Instead, I would suggest to change the viewport size like this:
https://playground.babylonjs.com/#7QD3Z3
I would set the value so the view port (0,0) coordinates corresponds to the 2D position you want in the canvas.
Thanks for the suggestion!
Hoewever, extending the viewport above 1.0 messes with scaling and framing. In order to have a positive Y offset of 0.15, I need to vertically extend the viewport by 30%, making the negative effects very noticable.
what do you mean by messing with scaling and framing?
Sorry for the confusion.
Scaling the viewport up is like “zooming in”, messing with my camera settings (distance, framing-behavior, etc).
This will probably also have some performance implications?
no, performance should be the same.
Another possiblity is to transform projection matrix by adding an X,Y translation:
That looks promising! However, that brings me back to my initial problem: how do I calculate the numbers? 
Maybe I’ll just dial in the values via trial and error for both of my scenes.
Edit: oh wait, I’m an idiot. The values are -1 to 1, exactly what I need. Thank you very much, I’ll try to implement that!
yes, it’s in clipspace coordinates to [-1…1] on both axis.
Works perfectly, thank you so much!
