Inspect the relationship#
Spread a highlight, tint metal reflection, move the light, and separate a readable browser approximation from the native material design.
Light meets a surface This illustration uses canvas. The explanation below describes the same process.
Try these experiments#
- Set metalness to zero and vary roughness. The highlight spreads and its peak changes.
- Increase metalness with a copper base color. The specular contribution takes on the material tint while diffuse contribution decreases.
- Move the light angle. Highlight position depends on surface, light, and view, not only the object’s color.
What the illustration calculates#
The sphere is a triangle mesh with interpolated surface normals. Its browser shading uses diffuse response plus a Blinn–Phong specular approximation evaluated at vertices and interpolated over pixels. This is explicitly an illustration, not the reference engine’s GGX BRDF or an energy-conserving native benchmark. Roughness maps to a highlight exponent and amplitude in this simplified model. Metalness reduces diffuse contribution and interpolates the specular tint toward base color. These relationships make the controls meaningful while leaving production sampling and environment lighting to the rendering chapters.
Connect the controls to material data#
MaterialAsset stores base color, roughness, metalness, texture handles, and a shader family. Renderer copies the resolved parameters into a frame-safe material buffer. A parameter slider changes data; it normally does not require compiling a brand-new pipeline for every value.
Read the reference data shape
struct SurfaceParameters {
float baseColor[3];
float roughness;
float metalness;
};Textures can supply these channels, but data channels such as roughness are sampled linearly while authored base-color textures are decoded from sRGB. The native texture sample demonstrates that color transfer and binding without implementing a full lighting model.
What to inspect when it is wrong#
A normal map sampled as sRGB changes its numerical vector. A metallic object without environment illumination can appear dark even with a valid material. A sharp unexpected highlight can come from invalid normals or roughness interpretation. Debug normal, roughness, and light direction views independently. Read meshes and materials and shaders and lighting.