# Screen position accuracy problem in shader

**URL:** <https://discourse.threejs.org/t/screen-position-accuracy-problem-in-shader/22767>\
**Category:** Questions\
**Tags:** glsl\
**Created:** [January 24, 2021, 1:05pm UTC](https://discourse.threejs.org/t/screen-position-accuracy-problem-in-shader/22767 "2021-01-24T13:05:31Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Natch](https://avatars.discourse-cdn.com/v4/letter/n/858c86/32.png) [@Natch](https://discourse.threejs.org/u/Natch)\
**Post date:** [January 24, 2021, 1:05pm UTC](https://discourse.threejs.org/t/screen-position-accuracy-problem-in-shader/22767/1 "2021-01-24T13:05:31Z")

</div>

Hi,  
I’m trying to port this shadertoy lensflare effect to my three.js scene [Shader - Shadertoy BETA](https://www.shadertoy.com/view/4sX3Rs) by replacing the mouse coordinates with the light position of my scene converted to screen space using this method:

```
const sunPosition = light.position.clone();
sunPosition.project(camera);
lensflarePass.screen.material.uniforms.sunPosition.value.copy(sunPosition);

```

and I updated this part in the shadertoy code:  
vec2 uv = gl\_FragCoord.xy / (resolution.xy \* .5); //Add to change resolution.xy - 0.5 to resolution.xy \* .5  
uv.x \*= resolution.x / resolution.y;

```
  vec3 lightPos = vec3(sunPosition) + 1.;
  lightPos.x *= resolution.x / resolution.y;
  
  vec3 color = texDiffuse.rgb + lensflare(uv, lightPos.xy);

```

It works, the flare follows my light the way I want, but the effect jitter and shake a lots while I move the camera around, even at relatively low distance (in the range [1 - 800]).  
I tried setting logarithmicDepthBuffer to true but it doesn’t help in my case.

It looks like the calculation of the screenspace relative to the viewport in px in the fragment shader results in floating point precision issues.

My guess is that I need to get the actual pixel screen position calculated in the js code, and send it to the shader for better precision, but my GLSL knowledge is pretty limited, and since it’s really hard to debug the values in the shader, I’m a bit lost on how to adapt the shadertoy shader to use pre-calculated pixel view position instead of a [-1, 1] range as an input value for the light position.

Any tips ?

Thanks !

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [January 24, 2021, 2:44pm UTC](https://discourse.threejs.org/t/screen-position-accuracy-problem-in-shader/22767/2 "2021-01-24T14:44:47Z")

</div>

Without a demonstration with code (codepen or jsfiddle) it is hard to help. Also notice this shadertoy shader is quite expensive, about the same visual effect can be archived with textures slightly modified with the shader to not look static.

---

<div class="post-metadata">

**Author:** ![gonnavis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gonnavis/32/11428_2.png) [@gonnavis](https://discourse.threejs.org/u/gonnavis)\
**Post date:** [January 24, 2021, 3:35pm UTC](https://discourse.threejs.org/t/screen-position-accuracy-problem-in-shader/22767/3 "2021-01-24T15:35:59Z")

</div>

You can refer to [SSAOPass](https://github.com/mrdoob/three.js/blob/f4f930cd724d8aaae61fb5304cd917b75007b325/examples/jsm/shaders/SSAOShader.js#L112) to see how it got the precise screen space position. Related functions are `getDepth`, `getLinearDepth`, `getViewZ`, `getViewPosition`.

I also commented and linked some resources in this [SSRPass](https://github.com/mrdoob/three.js/pull/20156), might help a bit too.  
The main resources is [this tut](http://www.songho.ca/opengl/gl_projectionmatrix.html), and key steps `clip`, `NDC`, `view(eye)`, `screen` are [commented in code](https://github.com/mrdoob/three.js/pull/20156/files#diff-89ff4d72c84d19fa1bc5661f472c7a343614cf38534a33c17304db44cded2785R97).

---

<div class="post-metadata">

**Author:** ![Natch](https://avatars.discourse-cdn.com/v4/letter/n/858c86/32.png) [@Natch](https://discourse.threejs.org/u/Natch)\
**Post date:** [January 24, 2021, 9:01pm UTC](https://discourse.threejs.org/t/screen-position-accuracy-problem-in-shader/22767/4 "2021-01-24T21:01:25Z")

</div>

So after isolating the code for the lensflare effect, I wasn’t able to reproduce the problem.  
The effect appears to work correctly, so my code is apparently OK.  
[http://jsfiddle.net/vajhm7gt/47/](http://jsfiddle.net/vajhm7gt/47/)  
It must be related to something else in my code, but it’s pretty straightforward, the major difference is the use of ES Modules and a Class structure.  
Closing for now.  
Thanks for your replies.

---

<div class="post-metadata">

**Author:** ![Natch](https://avatars.discourse-cdn.com/v4/letter/n/858c86/32.png) [@Natch](https://discourse.threejs.org/u/Natch)\
**Post date:** [January 25, 2021, 7:23pm UTC](https://discourse.threejs.org/t/screen-position-accuracy-problem-in-shader/22767/5 "2021-01-25T19:23:27Z")

</div>

So I managed to reproduce the problem by updating the controls after sending the sun position to the shader: [http://jsfiddle.net/t4x1jLfg/](http://jsfiddle.net/t4x1jLfg/)

I also managed to fix this in my current code base by adding  
`camera.updateMatrixWorld();`  
before  
`sunPosition.project(camera);`

Updating the controls before the accessing the light position sounds like the cleanest way to solve my problem, but I was curious to know if there are any advantages to go with the `camera.updateMatrixWorld()` solution ?

Thanks