Tutorial 09 Lighting
This tutorial introduces the use lighting/reflection model in WebGL applications. The Phong lighting/reflection model is implemented in the vertex shader. Because vertex shader performs per operations, the lighting evaluation will be carried out on each vertex, hence the name of per-vertex shading.
Figure A Figure B Figure C
These vectors are calculated: L, N, V and R, as shown in Figure C. They are used to evaluate the Phong reflection model. A single point light is used to illuminate the scene.
Copyright By PowCoder代写 加微信 powcoder
Colours cambient, cdiffucse, cspecular and the position of the point light are set via uniform variables: uniform vec3 uLightPosition;
uniform vec3 uAmbientLightColor;
uniform vec3 uDiffuseLightColor;
uniform vec3 uSpecularLightColor;
The diffuse term of the model is calculated from L dot N, as a (positive) weighting factor. diffuseLightWeighting = max(dot(normalEye, vectorToLightSource),
The specular term involves V dot R and a power operation:
rdotv = max(dot(reflectionVector, viewVectorEye), 0.0); specularLightWeighting = pow(rdotv, shininess);
The overall reflection at a vertex is the weighted sum of the colours cambient, cdiffucse, cspecular and is stored in a varying variable, vLightWeighting, to be send to the fragment shader:
vLightWeighting = uAmbientLightColor +
uDiffuseLightColor * diffuseLightWeighting +
uSpecularLightColor * specularLightWeighting;
In the fragment shader, the fragment colour obtained by interpolating the vertex colours, vLightWeighting, is used to modulate the texel colour for a fragment:
void main() {
vec4 texelColor = texture2D(uSampler, vTextureCoordinates); gl_FragColor = vec4(vLightWeighting.rgb * texelColor.rgb,
texelColor.a);
Notice that a special transformation uNMatrix, which equals the transpose of inverse of the modelview matrix, is used to transform vertex normals from local coordinate system to the camera coordinate system (see lecture note), normalEye.
uniform mat3 uNMatrix; …
vec3 normalEye = normalize(uNMatrix * aVertexNormal);
Exercise: Finish the partially finished program by adding the shader programs and the highlighted statements or functions.
texelColor.a);