Shaders and how appearance is calculated

Combine shape, surface, light and camera

Suggested reading time: about 8 minutes. This is an editorial production guide. Generation, performance and pricing comparison experiments have not been run.

Learning goals

• Keep geometry, material, texture and shader distinct.
• Explain the roles of light and normals.
• Choose between a built-in material and a custom shader.

Isolate geometry and lighting

1. 1Geometry and vertex position
2. 2Surface normal
3. 3Light relationship
4. 4Fragment color
5. 5Rendered image

1. 1Fixed camera and light
2. 2Change one material parameter
3. 3Compare the same object

This original conceptual diagram distinguishes deformation from shading and shows the controlled comparison alongside it. A normal-map change affects the lighting calculation; changing the silhouette needs geometry to move.

Who does this work?

• Look-development artist: refine the appearance of materials and lighting.
• Shader developer: create rendering calculations.
• Lighting artist: shape light and shadow.

Inputs

• A simple sphere and plane.
• A fixed camera and light.
• One parameter to change.

Production workflow

1. Display the same sphere in a solid color.
2. Switch to a standard material and change only roughness.
3. Keep the light fixed and compare with and without a texture.
4. Visualize surface directions by displaying normals.
5. Extract only the effects that need custom calculations into a custom shader.

Outputs

• A material-comparison scene.
• A record of the relationship between variables and appearance.

Understand eight components

Geometry is the shape of an object. A material defines how its surface appears. A texture is an image or data that supplies color, bumps or other information at different locations. A shader is a small program that runs on the GPU to calculate shape, color and other values. Light determines illumination. A camera determines where and how the scene is viewed. Rendering calculates an image from those components. Compositing combines and adjusts the calculated images or layers. A material is more than an image pasted onto a surface: it uses shaders and parameters to define appearance.

You use shaders even before you know their name

When you choose a built-in material in Three.js, internal rendering programs calculate how the surface looks. You write a shader yourself when the existing settings are insufficient, for example for a particular water effect or a custom deformation. Understanding shape and light with standard materials first, then moving to custom calculations, makes it easier to isolate problems.

Vertices and the color of rendered fragments

For an introduction, think of the vertex shader as the stage that calculates vertex positions, and the fragment shader as the stage that calculates color and other values for small rendered regions. A uniform is a shared setting passed in from outside, such as time or wave height. Increasing time, for example, advances a wave’s phase. The GLSL ShaderMaterial examples in this course assume WebGLRenderer; they are separate from the methods used for WebGPU.

Visible bumps and moving geometry

A normal is the direction a surface faces. A normal map changes the direction used in lighting calculations so that small bumps appear, but it normally does not change the silhouette by itself. Moving a horizon or an object’s outline with large waves requires deforming the geometry. Roughness controls the spread of reflections, and metalness controls the treatment of metallic reflections; both are common material parameters.

Quality checklist

• Avoid changing geometry, material, light and camera simultaneously.
• Distinguish color textures from data textures.
• Normals and coordinate systems agree.
• Confirm behavior with the target renderer.

Diagnose failures

Symptom	Likely cause	Next step
The shader renders black.	Compilation failure, insufficient lighting, inconsistent coordinates or values, among other possibilities.	Read the errors, return to a minimal example that outputs a constant color, and restore complexity in stages.
There are visible bumps, but the wave silhouette remains flat.	Only the normals are changing.	Consider vertex deformation and the required geometry subdivisions.

Exercise: Compare materials on the same sphere

Status: not run (not-run). This is a planned exercise, not a measured result.

Task: Keep lighting and camera fixed and compare matte, glossy and metallic settings. Always display which variables changed.

Deliverable: Three settings and a comparison view.

Completion criteria: Explain the effects of material and lighting separately.

Related Catalog candidates and practice

Prerequisite chapters: Map the work and production process · Turn a 3D model into a usable asset

The browser-local ocean shader lab uses Three.js 0.186.1 with WebGLRenderer and a local vendored module; it makes no model API calls. Its stages are a flat plane, vertex waves, and approximate light and color. It does not implement physical ocean simulation, true reflection or refraction, or shoreline foam. Opening it does not complete the comparison exercise or establish performance on other devices.

Open the procedural ocean shader lab

Use the experiment worksheet for your plan and evidence

Open the experiment notebook

Primary sources

• Three.js Mesh — verified: 2026-10-03
• Three.js MeshStandardMaterial — verified: 2026-10-03
• Three.js Texture — verified: 2026-10-03
• Three.js ShaderMaterial — verified: 2026-10-03
• MDN Lighting in WebGL — verified: 2026-10-03

Source scope checked on 2026-10-04

ShaderMaterial is for WebGLRenderer. MeshStandardMaterial uses metalness and roughness; roughness is 0–1, defaults to 1, and multiplies the roughness-map value when a map is present. Hold the map fixed during a parameter comparison.

The linked ocean lab is a separate practice asset. Keep its version, device and actual stage names with any later measurements. The chapter’s planned exercises and capstones remain not run.