World to screen coordinates

[csakbalint]

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)

[gwenael]

http://jsfiddle.net/gwenaelhagenmuller/fwd5Y/show/

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:

http://jsfiddle.net/gwenaelhagenmuller/fwd5Y/

 

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

[csakbalint]

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.

[gwenael]

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.

[csakbalint]

Thanks the answers really, you helped me a lot, i get the (right) numbers!

[gwenael]

My pleasure.

[gwenael]

Do not hesitate to share your work. That could be another cool demo.

[csakbalint]

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.