Create a Graph that doesn't rotate to avoid parallax error

Hi All,

We are trying to create a Graph that doesn't rotate whereas other elements in the scene does move based on mouse movement. I found Display Grid 

https://playground.babylonjs.com/#747U9T#13

Above is a display grid I have created and I want to plot a graph with the same. Idea is to set color to the pixel based on the parameters. Reason to go with this is it will avoid people rotating the graph and avoid misinterpretation of the same.

rgds
Balaji

Hello!

You can use Layer Masks to have one camera that moves and one that doesn’t, and render the appropriate meshes for each camera: Layer Masks and Multi-Cam Textures | Babylon.js Documentation (babylonjs.com)

Layer masks with multiple cameras | Babylon.js Playground (babylonjs.com)

3 Likes

@carolhmj You guys are awesome exactly what I was looking for

3 Likes

@carolhmj just one observation I want to keep this object in the right corner irrespective of screen size. But if I give vector it keeps moving from the right corner towards center based on screen size which is understandable. Any solution to this ?.

You can use GUI alignments! :smiley: The Babylon GUI | Babylon.js Documentation (babylonjs.com)
Graph Plot | Babylon.js Playground (babylonjs.com)

@carolhmj I am drawing lines , Which will specify vector position. If its rectangle / sphere yes its sticking but not for CreateLines… How can we give relative vectors so on resizing it would take care ?

Ooh, if you’re using meshes, then the solution will be to use Vector3.Unproject Vector3 | Babylon.js Documentation (babylonjs.com) to get the mesh’s position in screen coordinates and adjust it accordingly. But if you’re just going to use 2D elements, I’d recommend using GUI, it will be easier.

1 Like

Thanks @carolhmj Yes its 2D so I started using GUI Lines…

1 Like