Sign in to follow this  
UP_AND_ATOM

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?

Share this post


Link to post
Share on other sites

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())

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.