# Re: [Public WebGL] Re: Get Viewport for converting coordinates

On Thu, Aug 19, 2010 at 4:56 AM, Mehmet Sirin wrote:
hi Gregg,

> If you're using these functions?
For matrix operations I use http://sylvester.jcoglan.com/api/matrix.

Hmm, still having problems here. actually I'm doing exactly the things
you posted in the recent emails..

Clearly you are not doing exactly the same things or you'd be getting exactly the same results :-D

maybe i should post the result which are calculated in the single
steps, somewhere must be the mistake:
I got some object coordinates like 3489860.0, 5557180.0,
457.0790023803711. Then I do the standard viewing pipeline with
perspective projection and see my scene on the screen.
Now I describe what the coordinates look like when i go backwards from
screen coordinates to object coordinates.

1.) Transform screen coordinates to normalized device (where the scene
is in a [1,1] cube):
//take the inverse of viewport matrix and multiply with screen coordinates

var v = Vector.create([xclick,yclick,0,1]);   //xclick,yclick=pixel
coordinates
var a=getViewportMatrix(canvas.clientWidth,canvas.clientHeight).inverse();
var npc_coord=a.x(v);

I don't quite follow the x function and if it's really a matrix multiply but assuming it is it's not dividing by W as the function I posted was doing.

--> value for clicking lower left of canvas: -1,1,0,1   //fixed values
in source code: xclick=canvas.clentWidth,..
--> value for clicking lower left of canvas: 1,-1,0,1
--> clicking in the middle of the scene: 0.0057, 0.1207, 0, 1
//without fixed values..
..strange.

2.) Transform normalized coordinates to view coordinates:
//take inverse projection matrix and multiply with normalized coordinates
var p_Inv=pMatrix.inverse();            //inverse projection matrix
var vrc_coord=p_Inv.x(npc_coord);

without dividing with 4dComponent
--> lower left: -0.5336,0.4040,-1, 5.0000
..i thought the view coordinates should look like object coordinates?

3.) ..makes no sense because stuff above is terribly wrong.
---------

All in one step:

var pixel = Vector.create([0,530,0,1]);
var view=getViewportMatrix(canvas.clientWidth,canvas.clientHeight);
var pM=pMatrix.dup();
var mvM=mvMatrix.dup();

var allMultiplied= view.multiply(pM).multiply(mvM);
var allInversed=allMultiplied.inverse();
var multiplyWithPixel=allInversed.multiply(pixel)

var w=multiplyWithPixel.flatten()[3];
var objectCoordinate=...;
--> lower left:  3489859.8932, 5557180.0808, 7236.7802
--> upper right: 3489860.1067, 5557179.9191, 7236.7802 but it should
be something like 3489940.00, ..
..and when clicking around on screen nothing but the values after the
dot of the number changes.

:)

thank you for reading (and thinking "what the **** is he doing?! ").

> Then I'd guess it's something like
> var projection = M4x4.makePerspective(45, canvas.clientWidth /
> canvas.clientHeight,  0.1, 20000000.0);
> var view = M4x4.makeLookAt(eye, center, up);
> var viewProjection = M4x4.mul(view, projection);  (or is it projection,
> view?)
> It doesn't appear he provided an matrix inverse function
> var viewInverseProjection = inverse(viewProjection);
> where inverse is
> function inverse(m) {
>   var tmp_0 = m[2*4+2] * m[3*4+3];
>   var tmp_1 = m[3*4+2] * m[2*4+3];
>   var tmp_2 = m[1*4+2] * m[3*4+3];
>   var tmp_3 = m[3*4+2] * m[1*4+3];
>   var tmp_4 = m[1*4+2] * m[2*4+3];
>   var tmp_5 = m[2*4+2] * m[1*4+3];
>   var tmp_6 = m[0*4+2] * m[3*4+3];
>   var tmp_7 = m[3*4+2] * m[0*4+3];
>   var tmp_8 = m[0*4+2] * m[2*4+3];
>   var tmp_9 = m[2*4+2] * m[0*4+3];
>   var tmp_10 = m[0*4+2] * m[1*4+3];
>   var tmp_11 = m[1*4+2] * m[0*4+3];
>   var tmp_12 = m[2*4+0] * m[3*4+1];
>   var tmp_13 = m[3*4+0] * m[2*4+1];
>   var tmp_14 = m[1*4+0] * m[3*4+1];
>   var tmp_15 = m[3*4+0] * m[1*4+1];
>   var tmp_16 = m[1*4+0] * m[2*4+1];
>   var tmp_17 = m[2*4+0] * m[1*4+1];
>   var tmp_18 = m[0*4+0] * m[3*4+1];
>   var tmp_19 = m[3*4+0] * m[0*4+1];
>   var tmp_20 = m[0*4+0] * m[2*4+1];
>   var tmp_21 = m[2*4+0] * m[0*4+1];
>   var tmp_22 = m[0*4+0] * m[1*4+1];
>   var tmp_23 = m[1*4+0] * m[0*4+1];
>   var t0 = (tmp_0 * m[1*4+1] + tmp_3 * m[2*4+1] + tmp_4 * m[3*4+1]) -
>       (tmp_1 * m[1*4+1] + tmp_2 * m[2*4+1] + tmp_5 * m[3*4+1]);
>   var t1 = (tmp_1 * m[0*4+1] + tmp_6 * m[2*4+1] + tmp_9 * m[3*4+1]) -
>       (tmp_0 * m[0*4+1] + tmp_7 * m[2*4+1] + tmp_8 * m[3*4+1]);
>   var t2 = (tmp_2 * m[0*4+1] + tmp_7 * m[1*4+1] + tmp_10 * m[3*4+1]) -
>       (tmp_3 * m[0*4+1] + tmp_6 * m[1*4+1] + tmp_11 * m[3*4+1]);
>   var t3 = (tmp_5 * m[0*4+1] + tmp_8 * m[1*4+1] + tmp_11 * m[2*4+1]) -
>       (tmp_4 * m[0*4+1] + tmp_9 * m[1*4+1] + tmp_10 * m[2*4+1]);
>   var d = 1.0 / (m[0*4+0] * t0 + m[1*4+0] * t1 + m[2*4+0] * t2 + m[3*4+0] *
> t3);
>   return [d * t0, d * t1, d * t2, d * t3,
>        d * ((tmp_1 * m[1*4+0] + tmp_2 * m[2*4+0] + tmp_5 * m[3*4+0]) -
>           (tmp_0 * m[1*4+0] + tmp_3 * m[2*4+0] + tmp_4 * m[3*4+0])),
>        d * ((tmp_0 * m[0*4+0] + tmp_7 * m[2*4+0] + tmp_8 * m[3*4+0]) -
>           (tmp_1 * m[0*4+0] + tmp_6 * m[2*4+0] + tmp_9 * m[3*4+0])),
>        d * ((tmp_3 * m[0*4+0] + tmp_6 * m[1*4+0] + tmp_11 * m[3*4+0]) -
>           (tmp_2 * m[0*4+0] + tmp_7 * m[1*4+0] + tmp_10 * m[3*4+0])),
>        d * ((tmp_4 * m[0*4+0] + tmp_9 * m[1*4+0] + tmp_10 * m[2*4+0]) -
>           (tmp_5 * m[0*4+0] + tmp_8 * m[1*4+0] + tmp_11 * m[2*4+0])),
>        d * ((tmp_12 * m[1*4+3] + tmp_15 * m[2*4+3] + tmp_16 * m[3*4+3]) -
>           (tmp_13 * m[1*4+3] + tmp_14 * m[2*4+3] + tmp_17 * m[3*4+3])),
>        d * ((tmp_13 * m[0*4+3] + tmp_18 * m[2*4+3] + tmp_21 * m[3*4+3]) -
>           (tmp_12 * m[0*4+3] + tmp_19 * m[2*4+3] + tmp_20 * m[3*4+3])),
>        d * ((tmp_14 * m[0*4+3] + tmp_19 * m[1*4+3] + tmp_22 * m[3*4+3]) -
>           (tmp_15 * m[0*4+3] + tmp_18 * m[1*4+3] + tmp_23 * m[3*4+3])),
>        d * ((tmp_17 * m[0*4+3] + tmp_20 * m[1*4+3] + tmp_23 * m[2*4+3]) -
>           (tmp_16 * m[0*4+3] + tmp_21 * m[1*4+3] + tmp_22 * m[2*4+3])),
>        d * ((tmp_14 * m[2*4+2] + tmp_17 * m[3*4+2] + tmp_13 * m[1*4+2]) -
>           (tmp_16 * m[3*4+2] + tmp_12 * m[1*4+2] + tmp_15 * m[2*4+2])),
>        d * ((tmp_20 * m[3*4+2] + tmp_12 * m[0*4+2] + tmp_19 * m[2*4+2]) -
>           (tmp_18 * m[2*4+2] + tmp_21 * m[3*4+2] + tmp_13 * m[0*4+2])),
>        d * ((tmp_18 * m[1*4+2] + tmp_23 * m[3*4+2] + tmp_15 * m[0*4+2]) -
>           (tmp_22 * m[3*4+2] + tmp_14 * m[0*4+2] + tmp_19 * m[1*4+2])),
>        d * ((tmp_22 * m[2*4+2] + tmp_16 * m[0*4+2] + tmp_21 * m[1*4+2]) -
>           (tmp_20 * m[1*4+2] + tmp_23 * m[2*4+2] + tmp_17 * m[0*4+2]))];
> };
>