Three.js: What Is The Exact Difference Between Lambert and Phong?

by

Shane, it’s not your fault that you’re confused.

Lambert is an illumination model (with a physical basis) for the light reflected off a surface, expressed in terms of the incoming illumination’s direction with respect to the surface normal at the point of incidence.

Phong is a more nuanced shading model (albeit a more hacky one) which says that light is composed of ambient + diffuse + specular components. It treats the ambient component as constant everywhere (hack!), the diffuse component using the Lambertian model above, and the specular component using a power-law falloff (which is a clever hack, roughly approximating actual BRDFs).

The word “Phong” is also an interpolation method (when used in the context of modern triangle-based rendering pipelines). When computing the illumination at a pixel in the interior of a triangle, you have two choices:

  1. Gouraud shading: Compute the color at the three vertices and interpolate in the interior, using barycentric coordinates, or

  2. Phong shading: Using the normal at the three vertices, interpolate the normal in the interior and compute the shading using this interpolated normal at each pixel.

This is why (as @RayToal pointed out), if your specular “highlight” falls in the interior of a triangle, none of the vertices will be bright, but Phong shading will interpolate the normal and there will be a bright spot in the interior of your rendered triangle.

More Related Contents:

  1. Transformation of 3D objects related to vanishing points and horizon line
  2. Bouncing Ball. Making it slow down at peak of height
  3. Ball to Ball Collision – Detection and Handling
  4. Does anyone know of a low level (no frameworks) example of a drag & drop, re-order-able list?
  5. Three.js – Orthographic camera
  6. Mathematically compute a simple graphics pipeline
  7. How to convert a 3D point into 2D perspective projection?
  8. Converting 3D position to 2d screen position [r69!]
  9. How to print R graphics to multiple pages of a PDF and multiple PDFs?
  10. Rotate object on specific axis anywhere in Three.js – including outside of mesh
  11. Calculating a LookAt matrix
  12. Closest point on a cubic Bezier curve?
  13. Three JS – Find all points where a mesh intersects a plane
  14. Why doesn’t hue rotation by +180deg and -180deg yield the original color?
  15. Three.js Projector and Ray objects
  16. Creating a Movie from a Series of Plots in R [closed]
  17. extracting a quadrilateral image to a rectangle
  18. How to recognize rectangles in this image?
  19. Blackberry – how to resize image?
  20. How to test if a line segment intersects an axis-aligned rectange in 2D?
  21. Three.js: Adding and Removing Children of Rotated Objects
  22. How to offset a cubic bezier curve?
  23. How do you check for intersection between a line segment and a line ray emanating from a point at an angle from horizontal?
  24. Algorithm for drawing a 4-connected line
  25. How to render clipped surfaces as solid objects
  26. Bump-map a sphere with a texture map
  27. In MATLAB, how do I plot to an image and save the result without displaying it?
  28. Texture splatting with Three.js
  29. Polygon Triangulation with Holes
  30. How to mix two ARGB pixels?

Leave a Comment