Jump to content

World to screen coordinates


Recommended Posts

Hello everybody!


I'd like to create a modelling application with babylon.js.

My problem is to transform the world coordinates (or position whatever) to screen coordinates. I don't find any page, objects, methods (lack of documentation?), which discuss this problem. I created my own algorithm to solve this problem,

but it gives back wrong numbers (-10000-3000).

Another problem: there is no function to handle the operations between matrixes and vectors (multiply?).

// to init every variablevar canvas =  document.getElementById('renderCanvas'),    engine = new BABYLON.Engine(canvas, true),    scene  = new BABYLON.Scene(engine),    camera = new BABYLON.ArcRotateCamera('Camera', 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene);// in mousedown event handlervar pickResult = scene.pick(evt.offsetX, evt.offsetY);					if (!pickResult.hit) {    return;}var vM = camera.getViewMatrix(), 		  // viewMatrix 4*4    pM = camera.getProjectionMatrix(),		  // projectionMatrix 4*4    vpA = pM.multiply(vM).asArray(), 		  // viewProjectionMatrix 4*4    posA = pickResult.pickedPoint.asArray(),	  // position 3    transform = [],				  // store the matrix mult vector    globalView = camera.viewport.toGlobal(engine),// globalViewPort store widht and height    width = globalView.width,			  // screen width    height = globalView.height;			  // screen heightposA.push(0); 					  // position 4for (var i = 0; i < 4; i++) { 			  // matrix row	var value = 0;				  // temp value					        for (var j = 0; j < 4; j++) {		  // matrix column		value += vpA[i*4 + j] * posA[i];  // multiply and add	}	transform.push(value);			  // store the tempvalue}var winX = Math.round((( transform[0] + 1 ) / 2.0) * width ),	// screenX    winY = Math.round((( 1 - transform[1] ) / 2.0) * height );	// screenYconsole.log(winX, winY);

My conclusion: i count with wrong variables, (which i can't know because of the lack of documentation).

So i beg for your help, what is the problem in my algorithm. (Sorry for that bad english)

Link to comment
Share on other sites


Enter minX into the console to get its value

Do the same for maxX


You should get values between 0 and 1 if the object always stays on the screen. That's the x coordinate on the screen when the object is on the left (minX) or on the right (maxX).


Here's the code:



BABYLON.Vector3.Project is what you're looking for.

Link to comment
Share on other sites

Thanks this example, i can use it (and calculate my numbers).


I use the BABYLON.Vector3.Project method in my code, and the x range was [-0.5, 1.5], if the picked object was on the left or right edge of the screen. I don't understand completely, what are these numbers.


My modest wish is to get the (mouse) event.offsetX from the position of a mesh (on the screen). Please tell me if i think wrong.

Link to comment
Share on other sites

If the center of the local space of your object is on the screen, the x will be between 0 and 1. It represents a percentage of the width of your canvas so if you know where your canvas is positioned in your page and you know its width, you only have to do something like canvas.left + canvas.width * x to get what you want.

Link to comment
Share on other sites

Some extension: my meshes are almost never in the center, but i can get the screen coordinates of the picked mesh between 0 and 1 if i don't use the worldmatrix of the mesh but the worldmatrix of the center (unit matrix). This is cool, but it will be a problem, when i move my camera, because i can't see my center (i think it will give back wrong results).


My project wanna be a house modelling application. It will be my thesis, so i want to make it nice. I hope it will be so good, i can share it without shame. :D

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...