# Help with Matrices and View Stuff

**URL:** <https://forum.babylonjs.com/t/help-with-matrices-and-view-stuff/7014>\
**Category:** Questions\
**Created:** [November 15, 2019, 10:31pm UTC](https://forum.babylonjs.com/t/help-with-matrices-and-view-stuff/7014 "2019-11-15T22:31:10Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [November 15, 2019, 10:31pm UTC](https://forum.babylonjs.com/t/help-with-matrices-and-view-stuff/7014/1 "2019-11-15T22:31:10Z")

</div>

So I am hot on the trail of volumetric systems for us though after this weekend I will have to shift focus to paying work… but that’s another story.

ANYWAYS I got this:  
[https://playground.babylonjs.com/#6Z7SIZ](https://playground.babylonjs.com/#6Z7SIZ)

Where it like 95% works… I am having some trouble with my maths…

If you notice the raymached sphere (the blue one) scales differently then the rest of the scene. I have a sneaking suspicion it has to do with:

```auto
    vec3 ssToPos(){                
        vec4 ndc = vec4(
                (vUV.x - 0.5) * 2.0,
                (vUV.y - 0.5) * 2.0,
                1.0,
                1.0
        );	
            
        mat4 invMat = inverse(camProjection*camView);
        vec4 clip = invMat * ndc;
        return (clip / clip.w).xyz;	
    }

```

which is added to the direction of my camera to give me a ray direction, which without it seems to really extend the distortion effect. Maybe I need a transform calculation too or something?

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [November 15, 2019, 10:47pm UTC](https://forum.babylonjs.com/t/help-with-matrices-and-view-stuff/7014/2 "2019-11-15T22:47:45Z")

</div>

I have narrowed it down to Camera MinZ and Camera MaxZ being changed.

Is there a Matrix that reflects those changes that I need to apply?  
[https://playground.babylonjs.com/#6Z7SIZ#1](https://playground.babylonjs.com/#6Z7SIZ#1)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [November 15, 2019, 11:48pm UTC](https://forum.babylonjs.com/t/help-with-matrices-and-view-stuff/7014/3 "2019-11-15T23:48:26Z")

</div>

Here’s something that should be ok:

[https://playground.babylonjs.com/#6Z7SIZ#2](https://playground.babylonjs.com/#6Z7SIZ#2)

I did not really understand your `getRayDir` + `ssToPos` functions, so I grabbed a `getRayFromScreenSpace` from [here](https://stackoverflow.com/questions/7692988/opengl-math-projecting-screen-space-to-world-space-coords) that seems to fit the bill 🙂

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [November 15, 2019, 11:58pm UTC](https://forum.babylonjs.com/t/help-with-matrices-and-view-stuff/7014/4 "2019-11-15T23:58:43Z")

</div>

[https://playground.babylonjs.com/#6Z7SIZ#7](https://playground.babylonjs.com/#6Z7SIZ#7)

🙂 all right, now I need to combine in the BJS standard materials Lighting calculations and this is promising!

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [November 16, 2019, 12:14am UTC](https://forum.babylonjs.com/t/help-with-matrices-and-view-stuff/7014/5 "2019-11-16T00:14:45Z")

</div>

You have a problem with the depth you calculate in the ray marching function.  
If I set `camMinZ=10` I get:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/0/06afb13778b8ddca27862bc30520e7ab1fd156df.png)  
Use this instead:

```javascript
        return vec4(col, (t-camMinZ)/(camMaxZ - camMinZ));

```

[https://playground.babylonjs.com/#6Z7SIZ#6](https://playground.babylonjs.com/#6Z7SIZ#6)

Note that there’s still some problems with the depth computation even with that change, because if you rotate the scene, you have a bad intersection between the two spheres (I moved the second sphere 1 unit below so that it intersects the first sphere):

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/3/3b020056f26543fcba065b80d8662039b2b780c1.png)

It should be something like that instead (it’s the scene when first rendered, without moving/rotation):

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/4/4da32022993ca108aa4f22c2a55edc19e5d1af26.png)

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [November 16, 2019, 12:17am UTC](https://forum.babylonjs.com/t/help-with-matrices-and-view-stuff/7014/6 "2019-11-16T00:17:14Z")

</div>

Looks like there is some depth error as you approach the edges of the screen as well.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/d/dde0d9e8537ed860d86974b59d13f6d2c5f3c021.png)

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [November 16, 2019, 1:54am UTC](https://forum.babylonjs.com/t/help-with-matrices-and-view-stuff/7014/7 "2019-11-16T01:54:22Z")

</div>

[https://playground.babylonjs.com/#6Z7SIZ#12](https://playground.babylonjs.com/#6Z7SIZ#12)

got the lighting started

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [November 16, 2019, 4:35pm UTC](https://forum.babylonjs.com/t/help-with-matrices-and-view-stuff/7014/8 "2019-11-16T16:35:09Z")

</div>

Here’s a PG with corrected depth calculation:

[https://playground.babylonjs.com/#6Z7SIZ#16](https://playground.babylonjs.com/#6Z7SIZ#16)

The key point was to notice that all calculations are done in world space, whereas the depth read from the depth map against which we check our calculated depth is in screen space. So we have to project the world coordinate point we find through ray marching to screen space to be able to extract the right z value to compare with.

What I did:

- removed references to `camMinZ` and `camMaxZ` from `rayMarch`, because calculations are done in world space whereas camMinZ / camMaxZ are data given in view space.
- modified `render` to calculate the right z value for comparison with `depth` in the `main` function
- modified `applyFog` to take the distance value “as is” (dist is now already between 0 and 1)

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [November 16, 2019, 4:58pm UTC](https://forum.babylonjs.com/t/help-with-matrices-and-view-stuff/7014/9 "2019-11-16T16:58:20Z")

</div>

So when we opening a game studio? hahah you are totally the jelly to my peanut butter!

Most people do not understand all this as well as you do! We are blessed to have you in the community.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [November 16, 2019, 8:22pm UTC](https://forum.babylonjs.com/t/help-with-matrices-and-view-stuff/7014/10 "2019-11-16T20:22:58Z")

</div>

Not really, I struggled to make this work, whereas it was not so difficult once you see the solution!

Also, I should have said “clip space” and not “screen space” in my explanation.

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [November 16, 2019, 9:22pm UTC](https://forum.babylonjs.com/t/help-with-matrices-and-view-stuff/7014/11 "2019-11-16T21:22:06Z")

</div>

I was really close with my script too, just was not making the correct shifts to accommodate for the cliping! You have opened my eyes to which matrix is which now though.
