Learn WebGPU
Advanced: Lighting and shading

The Phong lighting model

Implement a fundamental lighting model.

Learning steps

Lighting is what gives 3D objects their sense of volume.

The three Phong components:

  • Ambient — a cheap approximation of indirect light.
  • Diffuse — how rough surfaces scatter light.
  • Specular — highlights on smooth surfaces.

What you need:

  • Per-vertex/fragment normals.
  • Light position and direction.
  • Camera position.
  • Material properties.

Task

Render a 3D cube with only ambient light first.

Progress 0 / 3 completed

WebGPUを初期化中...

コンソール
コンソール出力がここに表示されます

Learn WebGPU — interactive tutorials for learning WebGPU

GitHub