Jump to content

Translating a mesh's vertices to screen coords


Recommended Posts

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?

Link to comment
Share on other sites



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())
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...