Translating a mesh's vertices to screen coords

[UP_AND_ATOM]

I'm very new to Babylon.js and have spent a few days reading through the docs and forums, but I haven't been able to find a good answer for this. 

 

Let's say I have a rotating and scaled cube in my scene and I want to get the absolute position of each vertex. I found this topic for translating world coords to screen coords: http://www.html5gamedevs.com/topic/9584-converting-3d-vertex-to-2d-point-on-screen/ but so far I can only figure out how to get the position of the mesh itself, not for its vertices. In fact, even after digging around in the mesh object, I can't even find where the vertices are stored.

 

How do I get the coordinates of a mesh's vertices so that I can translate them to screen coords so I can draw debug lines on a canvas?

[GameMonetize]

Hey!

 

To get vertices' position:

var arr = mesh.getVertexBuffer(BABYLON.VertexBuffer.PositionKind)

This will be an array of floats. so 3 floats per vertex.

 

Then you can use var vertex = BABYLON.Vector3.FromArray(arr, 0) to get the first one and BABYLON.Vector3.FromArray(arr, 3) to get the second and so on

 

to get the world coordinate of the vertex:

BABYLON.Vector3.TransformCoordinates(vertex, mesh.getWorldMatrix())

[UP_AND_ATOM]

Great, this is very helpful. The results I'm seeing are slightly off, but much closer than what I had before.

 

I've got two canvases positioned on top of each other, one for 2D and one for 3D. The 3D one has a cube that's being translated, rotated, and scaled, and attached to a parent sphere that is rotating along the X axis. The camera is bobbing up and down. I wanted to get as many things changing the on-screen coordinates of the cube as possible so I could be sure I didn't leave anything out of the equation.

 

The coordinates I get from TransformCoordinates are all very small, though. I tried multiplying them by 50 and when I do, it looks like they're mirrored from what is being rendered on the 

 

Here's the relevant function:

var sphere = BABYLON.Mesh.CreateSphere("Sphere", 16, 1, scene);  var box = BABYLON.Mesh.CreateBox('Box', 2, scene);  box.parent = sphere;  var cameraMovingUp = true;  box.position.x = 2.5;    engine.beginFrame = function() {    if(cameraMovingUp) {      camera.rotation.x += 0.0025;      box.scaling.x += 0.01;      box.scaling.y += 0.005;      box.position.x += 0.025;      if(camera.rotation.x > 0.15) {        cameraMovingUp = false;      }    } else {      camera.rotation.x -= 0.0025;      box.scaling.x -= 0.01;      box.scaling.y -= 0.005;      box.position.x -= 0.025;      if(camera.rotation.x < -0.15) {        cameraMovingUp = true;      }    }    sphere.rotation.y += 0.05;    ctx.clearRect(0, 0, drawCanvas.width, drawCanvas.height);    ctx.beginPath();       ctx.fillStyle = '#ff4500';        var arr = box.getVertexBuffer(BABYLON.VertexBuffer.PositionKind)._data;    var len = arr.length;        for (var i=0; i<len; i+=3) {      var vertex = BABYLON.Vector3.FromArray(arr, i);      var coords = BABYLON.Vector3.TransformCoordinates(vertex, box.getWorldMatrix());      ctx.fillRect(coords.x - 2, coords.y - 2, 4, 4);    }    ctx.strokeStyle = '#FF4500';    ctx.stroke();  };

And a screenshot: http://i.imgur.com/qAMsh8Z.png

 

You can see the red rectangles grouped together in the upper-left corner.

 

I know I'm missing something important, but I can't figure out what. Can you point me in the right direction?

[UP_AND_ATOM]

Wait, I got it! I had to do this with the results:
 

BABYLON.Vector3.Project(coords,          BABYLON.Matrix.Identity(),   scene.getTransformMatrix(),   camera.viewport.toGlobal(engine));

It's working perfectly now. Thanks so much for your help.

[GameMonetize]

I was about to mention that WorldMatrix was not enough but you figured out by yourself