Fragment shader on plane with modified vertices

Question

I have a PlaneGeometry and I'm randomly animating the vertices in order to create random spikes. I use this FragmentShader :

void main() {
       vec3 light = vec3(cos(time),sin(time),1.0);
       light = normalize(light);
       float dProd = max(0.0, dot(vNormal, light));
        gl_FragColor = vec4(dProd,dProd,dProd,1.0);
        }

I expected to have some faces of each spike colored in black, but instead I got a solid color. I placed a Sphere on my plane and applied the same shader:

When I turn the wireframe OFF :

Not sure I understand what's happening on the plane?! I thought that since each spike has different normals, they should have different lighting as well.

Live Demo

Answer 1

Your "spikes" do not have different vertex normals because you didn't change the vertex normals; they are all ( 0, 1, 0 ). This is something you could have checked yourself in the console.

Also, when you modify the vertices of a quad ( a face of the plane ), the four vertices are likely no longer planar. This will cause you all sorts of problems. ( google non-planar quads. )

You can avoid these problems by triangulating the PlaneGeometry first:

THREE.GeometryUtils.triangulateQuads( geometry );

Be advised that this function recomputes vertex normals. Have a look at the source so you understand what it is doing.

three.js r.58