Custom Phong Shader for THREE.JS Object

Question

Goal: Calculate normals in the vertex shader for displaced vertices.

Current State: Some hacky code that I don't believe is 100% correct.

--- progress ---

vert is the modified position of the vertex

vertNormal is the modified position of the vertex applied to the normals ( basically a clone )

vec3 objectNormal = normalize(cross(vert-position,vertNormal-position)); 
vec3 transformedNormal = normalMatrix * objectNormal;
vNormal = normalize( transformedNormal );

http://fallingcode.com/servedFiles/normals.jpg

I just need some feedback about that part of the vertex shader code at this point.

(1) What does "doesn't work" mean? (2) You are displacing the vertices. You will have to handle the normals, too, somehow. (3) You need to displace the vertices/normals first-thing, so the lighting calculations are computed using the modified vertices and normals. — WestLangley
(1) Doesn't work as in the envmap is not visible on the waving plane. (2) I figured that, but would that stop the envmap from showing on the plane? (3) Can I displace the normals in the same way I displaced the vertices? — M1ke
(re: 2) Your normals all point in the same direction, so the lighting will be incorrect. Presumably, you'd still see something, however. (re: 3) Since you have analytical formulas for the displaced vertices, there is an implied analytical formula for the normals, too. What are you trying to create -- flat (faceted) shading or smooth shading? — WestLangley
Yea, I see something, but I can tell it isn't correct. I want smooth shading. I'm guessing there's an equation I can put in the shaders to handle this. I've been googling.. — M1ke
West, I added a picture to show the progress I made with the equation. It's not so great, LOL.. — M1ke

M1ke M1ke · Accepted Answer · 2015-07-16T05:45:57

After @WestLangley's help, I've reached my goal. The waves in the image are just to show the result. I'll have to research equations to make them more natural looking.

So, the normals are being calculated correctly and the environment reflection (a THREE.JS cubemap) is working correctly too.

http://www.fallingcode.com/servedFiles/calculatedNormals.jpg

The following code in the vertex shader is what calculates the normals after vertices have been moved along the normal (the z axis in this case).

// the displacement function
float displace( vec3 pos ) {
    float amplitude;
    amplitude = sin( pos.y + time ) * 0.1;
    return amplitude;
}

float df = displace( position );
vec3 displacedPosition = position + normalize( normal ) * df;

float delta = 0.01;
vec3 newNormal = vec3( df - displace( position + vec3( delta, 0, 0 ) ), df - displace( position + vec3( 0, delta, 0  ) ), delta );
newNormal = normalize( newNormal );

vNormal = normalize( normalMatrix * newNormal );

Custom Phong Shader for THREE.JS Object

1 Answers