Phong's specular term reflects the direction to the light, L, about the normal N and compares the result, R, with the direction to the eye, V. The closer they align, the brighter the highlight; raising the cosine to a shininess power makes it fall off faster, so the spot shrinks:
vec3 r = reflect(-l, n); // l points toward the light
float phong = pow(max(dot(r, v), 0.0), uShininess); // v points toward the eye
specular += uLights[i].color * phong * fade;reflect(i, n) expects the incoming direction, so it takes -L. The highlight uses the light's color, not the surface's, which is how plastics and painted surfaces behave (metals tint their highlights, a difference Normal Maps and PBR's physically based model captures). Two mistakes to avoid: the view vector must be computed per fragment, normalize(uEye - vPosition), not taken as a constant (0, 0, 1), which is right only for an orthographic camera and slides the highlight as the object moves; and if the surface faces away from the light, dot(N, L) <= 0, skip the specular term, or a highlight can appear on the dark side.
<!doctype html>
<style>
body { margin: 0; font: 11px system-ui, sans-serif; background: #f7f4ee; color: #333; }
canvas { display: block; width: 100%; max-width: 600px; }
.names { display: flex; max-width: 600px; text-align: center; font-family: monospace; }
.names div { flex: 1; padding: 4px 2px; }
</style>
<canvas id="c" width="1200" height="360"></canvas>
<div class="names"><div>v = normalize(uEye - vPosition)</div><div>v = vec3(0, 0, 1): highlights stay put</div></div>
<script>
const m4 = {
perspective(fovy, aspect, near, far) {
const f = 1 / Math.tan(fovy * Math.PI / 360), d = near - far;
return [f / aspect, 0, 0, 0, 0, f, 0, 0, 0, 0, (far + near) / d, -1, 0, 0, 2 * far * near / d, 0];
},
lookAt(eye, target, up = [0, 1, 0]) {
const cross = (a, b) => [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]];
const unit = (v) => v.map((c) => c / Math.hypot(...v));
const dot = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
const z = unit(eye.map((c, i) => c - target[i])), x = unit(cross(up, z)), y = cross(z, x);
return [x[0], y[0], z[0], 0, x[1], y[1], z[1], 0, x[2], y[2], z[2], 0, -dot(x, eye), -dot(y, eye), -dot(z, eye), 1];
},
multiply(a, b) {
const out = new Array(16).fill(0);
for (let c = 0; c < 4; c++) for (let r = 0; r < 4; r++) for (let k = 0; k < 4; k++) out[c * 4 + r] += a[k * 4 + r] * b[c * 4 + k];
return out;
},
};
function sphere(rings, segments) {
const vertices = [], indices = [];
for (let i = 0; i <= rings; i++) for (let j = 0; j <= segments; j++) {
const t = i / rings * Math.PI, p = j / segments * 2 * Math.PI;
vertices.push(Math.sin(t) * Math.cos(p), Math.cos(t), -Math.sin(t) * Math.sin(p));
}
for (let i = 0; i < rings; i++) for (let j = 0; j < segments; j++) {
const a = i * (segments + 1) + j, b = a + segments + 1;
indices.push(a, b, a + 1, a + 1, b, b + 1);
}
return { vertices: new Float32Array(vertices), indices: new Uint16Array(indices) };
}
const gl = document.getElementById('c').getContext('webgl2');
const program = gl.createProgram();
for (const [type, src] of [[gl.VERTEX_SHADER, `#version 300 es
layout(location = 0) in vec3 aPosition;
uniform mat4 uViewProjection; uniform vec3 uCenter; out vec3 vPosition, vNormal;
void main() { vNormal = aPosition; vPosition = uCenter + aPosition * 0.45;
gl_Position = uViewProjection * vec4(vPosition, 1.0); }`], [gl.FRAGMENT_SHADER, `#version 300 es
precision highp float;
in vec3 vPosition, vNormal;
uniform vec3 uEye, uLight, uColor; uniform float uShininess; uniform bool uConstantView;
out vec4 outColor;
void main() {
vec3 n = normalize(vNormal);
vec3 l = normalize(uLight - vPosition); // toward the light
vec3 v = uConstantView ? vec3(0.0, 0.0, 1.0) : normalize(uEye - vPosition); // toward the eye
float lambert = max(dot(n, l), 0.0);
vec3 r = reflect(-l, n); // reflect() takes the incoming direction
float phong = lambert > 0.0 ? pow(max(dot(r, v), 0.0), uShininess) : 0.0; // none on the dark side
outColor = vec4(uColor * (0.15 + 0.85 * lambert) + vec3(phong), 1.0); // highlight in the light's colour
}`]]) {
const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s);
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s));
gl.attachShader(program, s);
}
gl.linkProgram(program); gl.useProgram(program);
const u = (n) => gl.getUniformLocation(program, n);
const globe = sphere(32, 48);
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, globe.vertices, gl.STATIC_DRAW);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, globe.indices, gl.STATIC_DRAW);
gl.enable(gl.DEPTH_TEST); gl.enable(gl.CULL_FACE); gl.enable(gl.SCISSOR_TEST);
const eye = [0, 0.4, 3.2];
gl.uniform3fv(u('uEye'), eye);
gl.uniform3f(u('uLight'), 0.0, 2.0, 3.0);
gl.uniform1f(u('uShininess'), 40);
gl.uniformMatrix4fv(u('uViewProjection'), false, m4.multiply(m4.perspective(50, 600 / 360, 0.1, 20), m4.lookAt(eye, [0, 0, 0])));
const colors = [[0.12, 0.37, 0.55], [0.71, 0.27, 0.18], [0.25, 0.49, 0.23]];
function frame(ms) {
const shift = Math.sin(ms * 0.0006) * 0.5; // the globes slide past the camera
for (let pane = 0; pane < 2; pane++) {
gl.viewport(pane * 600, 0, 600, 360); gl.scissor(pane * 600 + 3, 0, 594, 360);
gl.clearColor(0.93, 0.91, 0.87, 1);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.uniform1i(u('uConstantView'), pane);
colors.forEach((color, i) => {
gl.uniform3f(u('uCenter'), (i - 1) * 1.1 + shift, 0, 0);
gl.uniform3fv(u('uColor'), color);
gl.drawElements(gl.TRIANGLES, globe.indices.length, gl.UNSIGNED_SHORT, 0);
});
}
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
</script>