I’m trying to port this shadertoy lensflare effect to my three.js scene Shader - Shadertoy BETA 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 ?