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

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

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

--> 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]))];
> };
>

-----------------------------------------------------------
You are currently subscribed to public_webgl@khronos.org.
To unsubscribe, send an email to majordomo@khronos.org with
the following command in the body of your email:

```