Help with a fragment shader to create patterns normal to a plane mesh and not the camera

Questions
1

Hi. I have a fragment shader applied to a plane geometry creating a box patterns. When the camera is dead on the mesh, the shader creates the correct pattern but when I move the camera off axis, the shader creates colors still aligned to the camera and not the plane normal.

This is a lack of camera/shader knowledge on my part. Would you mind taking a peek at the code and giving me a pointer?

In essence I want to make the shader create colors normal to the mesh and not directed? at the camera.

Greatly appreciated.
Please note the code is adapted from the book of shaders and august.js.
P.S. If you have a category of knowledge I could read about to help me grasp the concept, I’ve love that.

2

Your fragment shader is using gl_FragCoord.xy as its input, which is window-relative coordinates of the fragment. What you’ll want instead is to store a varying variable in your vertex shader, then access it in your fragment shader. Storing vPosition or vUV would be common choices, see: https://dev.to/maniflames/creating-a-custom-shader-in-threejs-3bhi. Not sure if the Book of Shaders exactly covers that, since its section on 3D Graphics is unfinished.

2 Likes