Keep planes facing camera, yet right side up relative to view

[sparkbuzz]

I have a bit of a tricky one, at least for me...

 

I'm trying to draw 4 points representing a vertex each, where each vertex is visualised as a small square plane. Billboard mode is set to BABYLON.Mesh.BILLBOARDMODE_ALL to keep these planes facing the camera. I'm also scaling the squares depending on the camera distance, to keep them a constant size in relation to the canvas size.

 

I'm using an ArcRotateCamera, but as the camera goes higher up, the square billboards are rotating somewhat inward, so their edges aren't parallel to the edges of the canvas, and I would like to keep them perfectly parallel with the view.

 

 

 

Does anyone know how I can achieve this?

 

I tried setting billboard mode like so, as well:

points[i].billboardMode = BABYLON.Mesh.BILLBOARDMODE_X | BABYLON.Mesh.BILLBOARDMODE_Z;

but it doesn't appear that the billboard mode is working this way, the planes simply rotate once, and never again, after the camera position changes.

 

 

[sparkbuzz]

Just an idea, is there a way I can get the ArcRotateCamera rotation and assign that to the planes rotation?

 

Fiddling with camera.alpha and camera.beta...

[jerome]

The BILLBOARD mode actually apply a rotation to the mesh. The _X, _Z sub-modes are just options : if you want to limit the mesh rotation around X, Y or Z axis.

 

So, as a plane is rotated... it won't keep alignement to the canvas.

 

If I were you, I would investigate to define a plane rotation from your initial constraints : having the plane aligned to the canvas and its Z axis aligned to the mesh-camera axis

The tool for this would be Vector3.RotationFromAxis(axis1, axis2, axis3)

documentation ("generating a rotation from a target system" part) : http://doc.babylonjs.com/page.php?p=22411

API : http://doc.babylonjs.com/page.php?p=25239 (bottom)

[sparkbuzz]

I think I've found a fix:

this.scene.beforeRender = function () {    var origin_distance:number = BABYLON.Vector3.Distance(camera.position, new BABYLON.Vector3(0, 0, 0));    axis_x.scaling.x = origin_distance * 0.00005;    axis_z.scaling.x = origin_distance * 0.00005;    for (var i in points) {        points[i].rotation.y = -camera.alpha - (Math.PI / 2);        points[i].rotation.x = -camera.beta + (Math.PI / 2);        // Calculate distance scalar between camera and point        var distance:number = BABYLON.Vector3.Distance(camera.position, points[i].position);        points[i].scaling.x = distance * 0.03;        points[i].scaling.y = distance * 0.03;    }}

Here's the result:

 

 

Now I can scale them down and evolve them into selector handles for vertices.