Phong and Blinn-Phong reflection models

Lambert’s law alone makes every surface look like chalk: a polished ball under one lamp needs a bright spot where the lamp’s reflection meets your eye. The Phong and Blinn-Phong reflection models add that highlight as a third term, Phong as (r · v)^α and Blinn-Phong as (n · h)^β, from the half vector, with an exponent about four times larger for a spot of the same size.

Both are still in daily use; three.js’s MeshPhongMaterial, for one, computes its highlights with Blinn-Phong. The sections below build both on one sphere and compare them pixel for pixel.

Phong adds a highlight where the reflected light meets the eye

A mirror sends a lamp’s light in one direction only: r, the vector l mirrored about the normal, r = 2 (n · l) n − l. A polished surface behaves like a blurred mirror, brightest where r points at the viewer and dimmer as v turns away from r. Bui Tuong Phong’s model of 1975 adds three terms for each light:

In words: a constant ambient termambient term: A constant added to every pixel by a classic reflection model, standing in for light bounced around the scene, so that the side facing away from every light is not black. ka for light bounced around the room, Lambert’s diffuse term, and a specularspecular reflection: Reflection gathered around the mirror direction, seen as a highlight that moves when the viewer moves; the Phong and Blinn-Phong models give it as a power of a cosine. term, ks times a factor that peaks at 1 when r points straight at the viewer. The exponent α, the shininessshininess: The exponent of a Phong or Blinn-Phong specular term: the larger it is, the faster the highlight falls away from its peak and the smaller it looks., decides how fast the highlight falls away: 0.9731 to the power 32 is 0.418. Phong chose his exponents from 1 to 10 and wrote that such values “are empirically adjusted for the picture”. The figure shows the vectors at one point:

Step through one pixel of the sphere below, from its three vectors to its value:

Blinn-Phong compares the half vector with the normal

James Blinn’s model of 1977 asks another question: how far is the normal from the one a perfect mirror would need to send the light to the viewer? That normal is the half vectorhalf vector: h = normalise(l + v), the direction halfway between the light and the viewer: the normal a perfect mirror would need to reflect the light into the eye. h, halfway between l and v, and the highlight becomes (n · h)^β:

In words: the same three terms, with n · h in place of r · v; at the pixel above n · h is 0.993 where r · v is 0.973. The angle between n and h is about half the angle between r and v, so β must be about four times α for a highlight of the same size. With the light and the viewer both far away, h is the same at every pixel and is computed once, where Phong needs a reflection per pixel; OpenGL 2.1’s fixed-function lighting used h this way. The program counts the samples where each highlight is above half its peak:

// The Phong and Blinn-Phong reflection models on one sphere: one directional light, a viewer far along +z.
// I = ka + kd max(0, n.l) + ks spec, where spec = max(0, r.v)^a for Phong and max(0, n.h)^b for Blinn-Phong.
// Both are 0 when the light is behind the surface (n.l <= 0).
const len = (v) => Math.hypot(v[0], v[1], v[2]);
const normalize = (v) => v.map((c) => c / len(v));
const dot = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
const fmt = (v) => `(${v.map((c) => c.toFixed(3)).join(', ')})`;

const l = normalize([-1, 1, 1]); // towards the light
const v = [0, 0, 1]; // towards the viewer, the same at every pixel
const h = normalize(l.map((c, k) => c + v[k])); // the half vector: also the same at every pixel
const KA = 0.1;
const KD = 0.6;
const KS = 0.4;

const reflect = (n) => n.map((c, k) => 2 * dot(n, l) * c - l[k]); // r = 2 (n.l) n - l
const phong = (n, a) => (dot(n, l) > 0 ? Math.max(0, dot(reflect(n), v)) ** a : 0);
const blinn = (n, b) => (dot(n, l) > 0 ? Math.max(0, dot(n, h)) ** b : 0);
const total = (n, spec) => KA + KD * Math.max(0, dot(n, l)) + KS * spec;

// One pixel, step by step.
const n = normalize([-0.25, 0.25, Math.sqrt(0.875)]);
const r = reflect(n);
console.log(`n = ${fmt(n)}, n.l = ${dot(n, l).toFixed(3)}`);
console.log(`r = ${fmt(r)}, r.v = ${dot(r, v).toFixed(3)}`);
console.log(`h = ${fmt(h)}, n.h = ${dot(n, h).toFixed(3)}`);
for (const [name, spec] of [['Phong a=32', phong(n, 32)], ['Blinn b=32', blinn(n, 32)], ['Blinn b=128', blinn(n, 128)]]) {
  console.log(`${name.padEnd(11)} ${KA} + ${KD} x ${dot(n, l).toFixed(3)} + ${KS} x ${spec.toFixed(3)} = ${total(n, spec).toFixed(3)}`);
}

// The whole sphere, 400 x 400 samples: how large is each highlight?
console.log('\nsamples where spec is above 0.5:');
for (const [name, spec] of [['Phong a=32', (m) => phong(m, 32)], ['Blinn b=32', (m) => blinn(m, 32)], ['Blinn b=128', (m) => blinn(m, 128)]]) {
  let count = 0;
  for (let j = 0; j < 400; j++) {
    for (let i = 0; i < 400; i++) {
      const x = ((i + 0.5) / 400) * 2 - 1;
      const y = 1 - ((j + 0.5) / 400) * 2;
      if (x * x + y * y <= 1 && spec([x, y, Math.sqrt(1 - x * x - y * y)]) > 0.5) count++;
    }
  }
  console.log(`  ${name.padEnd(11)} ${String(count).padStart(5)}`);
}

// The sphere under Blinn-Phong, b = 128, in tenths; # is 1.0 or more.
console.log('\nBlinn-Phong, b = 128:');
for (let j = 0; j < 16; j++) {
  let row = '';
  for (let i = 0; i < 32; i++) {
    const x = ((i + 0.5) / 32) * 2.2 - 1.1;
    const y = 1.1 - ((j + 0.5) / 16) * 2.2;
    if (x * x + y * y > 1) {
      row += '.';
      continue;
    }
    const m = [x, y, Math.sqrt(1 - x * x - y * y)];
    const value = total(m, blinn(m, 128));
    row += value >= 1 ? '#' : String(Math.floor(value * 10));
  }
  console.log(row);
}

n = (-0.250, 0.250, 0.935), n.l = 0.829
r = (0.163, -0.163, 0.973), r.v = 0.973
h = (-0.325, 0.325, 0.888), n.h = 0.993
Phong a=32  0.1 + 0.6 x 0.829 + 0.4 x 0.418 = 0.764
Blinn b=32  0.1 + 0.6 x 0.829 + 0.4 x 0.805 = 0.919
Blinn b=128 0.1 + 0.6 x 0.829 + 0.4 x 0.420 = 0.765

samples where spec is above 0.5:
  Phong a=32   1342
  Blinn b=32   4729
  Blinn b=128  1204

Blinn-Phong, b = 128:
................................
.........56666555544432.........
......66666666665554443321......
.....6666666666555544433221.....
...66666667766655554443322111...
..566666679#865555444333221111..
..6666666677655544443332211111..
.455666655555554444333222111111.
.455555555554444433322211111111.
..4455554444444333322211111111..
..3444444443333322221111111111..
...23333333332222111111111111...
.....2222222221111111111111.....
......11111111111111111111......
.........11111111111111.........
................................

At β = 32 the Blinn-Phong highlight covers 4,729 samples, 3.5 times Phong’s 1,342; at β = 128 it covers 1,204, and the pixel’s value is 0.765 against Phong’s 0.764.

The table puts the two models side by side:

The Phong and Blinn-Phong reflection models both add a highlight to Lambert’s law, and four more things matter once either is in a renderer. At grazing angles the two highlights take different shapes. Three common shader bugs move or remove the highlight. Toon shadingtoon shading: A non-photorealistic shading style, also called cel shading, that cuts the lighting into a few flat bands of tone so that a rendered surface looks drawn rather than lit. cuts the same terms into flat bands. Neither model keeps the light it reflects below the light it receives.

Practise: both models in code

The exercise writes both models. Its sample tests use the pixel above, seen from straight ahead and from one side, a viewer at the mirror direction and a light behind the surface.

const dot = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
const normalize = (a) => {
  const d = Math.hypot(a[0], a[1], a[2]);
  return [a[0] / d, a[1] / d, a[2] / d];
};

/** Phong: ka + kd max(0, n.l) + ks max(0, r.v)^shininess, r = 2 (n.l) n - l; no specular when n.l <= 0. */
export function phong(n, l, v, m) {
  // Only ambient and diffuse so far: the highlight is missing.
  return m.ka + m.kd * Math.max(0, dot(n, l));
}

/** Blinn-Phong: the same, with max(0, n.h)^shininess and h = normalize(l + v). */
export function blinnPhong(n, l, v, m) {
  // The half vector is not normalised, and nothing stops the highlight on the dark side.
  const h = [l[0] + v[0], l[1] + v[1], l[2] + v[2]];
  return m.ka + m.kd * Math.max(0, dot(n, l)) + m.ks * Math.max(0, dot(n, h)) ** m.shininess;
}

import { test, assert } from 'mysmartcopilot:test';
import { phong, blinnPhong } from './models.mjs';

const near = (got, want, what) => assert.ok(Math.abs(got - want) <= 1e-9 * Math.max(1, Math.abs(want)), `${what}: expected ${want}, got ${got}`);
const unit = (a) => {
  const d = Math.hypot(a[0], a[1], a[2]);
  return [a[0] / d, a[1] / d, a[2] / d];
};
const M = { ka: 0.1, kd: 0.6, ks: 0.4, shininess: 32 };

test("the lesson's pixel under both models", () => {
  const n = unit([-0.25, 0.25, Math.sqrt(0.875)]);
  const l = unit([-1, 1, 1]);
  const v = [0, 0, 1];
  near(phong(n, l, v, M), 0.7642488106803615, 'Phong, shininess 32');
  near(blinnPhong(n, l, v, M), 0.9192567013305534, 'Blinn-Phong, shininess 32');
  near(blinnPhong(n, l, v, { ...M, shininess: 128 }), 0.7652471130101057, 'Blinn-Phong, shininess 128');
  const aside = unit([0.2, -0.3, 0.9]);
  near(phong(n, l, aside, M), 0.8632785277264826, 'Phong, a viewer off the z axis');
  near(blinnPhong(n, l, aside, M), 0.9546921902737963, 'Blinn-Phong, the same viewer');
});

test('a viewer at the mirror direction sees the full highlight under both', () => {
  const n = [0, 0, 1];
  const l = [0.6, 0, 0.8];
  const v = [-0.6, 0, 0.8];
  near(phong(n, l, v, M), 0.98, 'Phong: ka + kd x 0.8 + ks');
  near(blinnPhong(n, l, v, M), 0.98, 'Blinn-Phong: h is n itself');
  const off = unit([-0.6, 0.3, 0.8]);
  near(phong(n, l, off, M), 0.6807479050690338, 'Phong, viewer off the plane of incidence');
  near(blinnPhong(n, l, off, M), 0.8145718870334656, 'Blinn-Phong, the same viewer');
});

test('no highlight and no diffuse light from a light behind the surface', () => {
  const n = [0, 0, 1];
  const behind = [0.6, 0, -0.8];
  const v = [-0.6, 0, 0.8];
  near(phong(n, behind, v, M), 0.1, 'Phong keeps only the ambient term');
  near(blinnPhong(n, behind, v, M), 0.1, 'Blinn-Phong keeps only the ambient term');
});

Matching the two highlights, with the exponents measured Pro: opens with a Pro, Premium or Ultimate pass

Three shader bugs that move or remove the highlight, reproduced Pro: opens with a Pro, Premium or Ultimate pass

Toon bands and the energy the classic models lose, with numbers Pro: opens with a Pro, Premium or Ultimate pass

Interview questions

Start with the warm-up, answered here in full. Three harder questions follow, on highlights that appear, vanish or shrink when they should not; each row leads to its opening move on the module’s question page:

Key takeaways

• Phong adds ka, Lambert’s diffuse term and ks max(0, r · v)^α, where r is l mirrored about the normal.
• Blinn-Phong compares the half vector h = normalise(l + v) with the normal, computed once per frame when the light and the viewer are far away.
• The angle from n to h is about half the angle from r to v, so a Blinn-Phong highlight needs an exponent about four times larger: 128 matches Phong’s 32 on the lesson’s sphere.