# Get a frame buffer with the world normals

**URL:** <https://forum.babylonjs.com/t/get-a-frame-buffer-with-the-world-normals/772>\
**Category:** Questions\
**Created:** [January 15, 2019, 7:39pm UTC](https://forum.babylonjs.com/t/get-a-frame-buffer-with-the-world-normals/772 "2019-01-15T19:39:24Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kheod](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kheod/32/425_2.png) [@Kheod](https://forum.babylonjs.com/u/Kheod)\
**Post date:** [January 15, 2019, 7:39pm UTC](https://forum.babylonjs.com/t/get-a-frame-buffer-with-the-world-normals/772/1 "2019-01-15T19:39:24Z")

</div>

Hello folks,

Following my previous topic an additional question remains : **how can I create a buffer with the fragment normal**? (using or not GeometryBufferRenderer)(please).  
I would like to _keep the normal shading_ on the mesh but I need the _data like when I use the flat shading_.

> **Previous topic**
>
> [Use GeometryBuffer to get normal sampler](https://forum.babylonjs.com/t/use-geometrybuffer-to-get-normal-sampler/694)

All my different attempts result in a black screen.  
I think it shows me the normal of like a plan in front of the camera because when I display the positions, I have the screen split into 4 with each quarter of the screen of a color (green, yellow, black, red in order) 🇯🇲.

> **Screenshot**
>
> ![reggae_yay](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/1X/bf413dc8162b6c0f17eef4bc53a615be2f31880e.png)

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [January 15, 2019, 11:57pm UTC](https://forum.babylonjs.com/t/get-a-frame-buffer-with-the-world-normals/772/2 "2019-01-15T23:57:22Z")

</div>

can you produce a repro of your current state on the pg so maybe @julien-moreau can give you a hand?

---

<div class="post-metadata">

**Author:** ![Kheod](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kheod/32/425_2.png) [@Kheod](https://forum.babylonjs.com/u/Kheod)\
**Post date:** [January 16, 2019, 8:13pm UTC](https://forum.babylonjs.com/t/get-a-frame-buffer-with-the-world-normals/772/3 "2019-01-16T20:13:15Z")

</div>

I chose to try one last thing before creating a playground.  
I use the positionSampler to calculate the normals in flat shading but I still keep the normal shading for rendering (so without using _mesh.convertToFlatShadedMesh()_ ).

The shader works very well in Babylon CYOS ([https://cyos.babylonjs.com/#Y4TI8V#2](https://cyos.babylonjs.com/#Y4TI8V#2)) but the rendering is awful (very pixelated) in my post processing :

 ![8bits%20art%20yeaaah](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/1X/401b9db4c7acffe5328fd9534a519f250695389f.png)

I think it’s related to the fact that I use a postprocess to do the calculation and I don’t understand this part in the postprocess.vertex.fx :

```
[...]

const vec2 madd = vec2(0.5, 0.5);

void main(void) {	

	vUV = (position * madd + madd) * scale;
	gl_Position = vec4(position, 0.0, 1.0);

}

```

Without this, the rendering is only done on a quarter of the screen. (Sorry if that question seems silly to you 😅)

Have a good evening! 🙂

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [January 17, 2019, 4:05pm UTC](https://forum.babylonjs.com/t/get-a-frame-buffer-with-the-world-normals/772/4 "2019-01-17T16:05:16Z")

</div>

the mad is just a way to move from position (with x and y between -0.5, 0.5) to uv which are between 0 and 1

Do you want to create a PG so we can discuss with a real example?

---

<div class="post-metadata">

**Author:** ![Kheod](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kheod/32/425_2.png) [@Kheod](https://forum.babylonjs.com/u/Kheod)\
**Post date:** [January 17, 2019, 5:51pm UTC](https://forum.babylonjs.com/t/get-a-frame-buffer-with-the-world-normals/772/5 "2019-01-17T17:51:16Z")

</div>

Ok thanks for the info 🙂.

Here is the example playground:  
[https://playground.babylonjs.com/#G9H8YV](https://playground.babylonjs.com/#G9H8YV)

---

<div class="post-metadata">

**Author:** ![julien-moreau](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/julien-moreau/32/12070_2.png) [@julien-moreau](https://forum.babylonjs.com/u/julien-moreau)\
**Post date:** [January 19, 2019, 2:51pm UTC](https://forum.babylonjs.com/t/get-a-frame-buffer-with-the-world-normals/772/6 "2019-01-19T14:51:47Z")

</div>

@Kheod,  
Reading this article ([http://www.aclockworkberry.com/shader-derivative-functions/](http://www.aclockworkberry.com/shader-derivative-functions/)) for more informations about deriatives, my comprehension is:

- only edges look “pixelated” because the difference in values is higher than its neighbors. So the result looks ok according to the usage of deriatives. We can see the diffrences, in your screenshot, in edges of the cubes and edges in your geometry in the middle of the screen
- It is not reproduced using the CYOS because when the pixel shader is executed, the position value is only and only according to the current triangle of the geometry being rendered. So you’ll not have huge difference in values compared to the post-process whch uses the position sampler that can sample positions from another object (neighbors pixels can be taken from another geometry).

I’m not sure to be clear, so don’t hesitate to argue ^^

---

<div class="post-metadata">

**Author:** ![Kheod](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kheod/32/425_2.png) [@Kheod](https://forum.babylonjs.com/u/Kheod)\
**Post date:** [January 19, 2019, 5:34pm UTC](https://forum.babylonjs.com/t/get-a-frame-buffer-with-the-world-normals/772/7 "2019-01-19T17:34:42Z")

</div>

First of all, thank you for the answer @julien-moreau.

Indeed, it makes sense. What is limiting in my case is the fact that post-processing applies to a 2D plane (image) and not to a 3D world.  
So I’m going to give up on that idea.

Do you have a suggestion for me regarding edge detection (internal and external) without tinkering with the 3D model please?  
Maybe I should try the multi pass shaders but I don’t know if it’s the most optimal solution.

---

<div class="post-metadata">

**Author:** ![nasimiasl](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nasimiasl/32/34_2.png) [@nasimiasl](https://forum.babylonjs.com/u/nasimiasl)\
**Post date:** [January 19, 2019, 7:26pm UTC](https://forum.babylonjs.com/t/get-a-frame-buffer-with-the-world-normals/772/8 "2019-01-19T19:26:11Z")

</div>

you can don’t use postprocess too  
[https://www.babylonjs-playground.com/#QQCJVC](https://www.babylonjs-playground.com/#QQCJVC)

---

<div class="post-metadata">

**Author:** ![julien-moreau](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/julien-moreau/32/12070_2.png) [@julien-moreau](https://forum.babylonjs.com/u/julien-moreau)\
**Post date:** [January 21, 2019, 8:05pm UTC](https://forum.babylonjs.com/t/get-a-frame-buffer-with-the-world-normals/772/9 "2019-01-21T20:05:18Z")

</div>

I also read this article and looks really promising  
[http://blog.ruofeidu.com/simplest-fatest-glsl-edge-detection-using-fwidth/](http://blog.ruofeidu.com/simplest-fatest-glsl-edge-detection-using-fwidth/)

I’m going to test it as I never tried edges detection and because I’m curious =D

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [January 21, 2019, 10:05pm UTC](https://forum.babylonjs.com/t/get-a-frame-buffer-with-the-world-normals/772/10 "2019-01-21T22:05:20Z")

</div>

Please, let us know 🙂