Fundamentals

A living scene begins with a single draw call. Start with a triangle, add depth and light, then discover how the same rendering ideas scale into richer GPU-powered worlds. Every lesson includes a working example you can explore directly in your browser.

Start with Hello Triangle. No installation required.

When a feature supports both backends, its live example can switch between WebGPU and WebGL2. The source shown on each page comes directly from the runnable example, so you can move from what you see to how it works without leaving the lesson.

Curious where these fundamentals can take you? Getting Started shows complete scenes, simulations, visual effects, and GPU data workflows.

Rendering foundations

1 · Your first drawHello TriangleCreate a Model, supply portable shaders, and issue a draw inside a render pass.Model · shaders · render passes2 · Add a dimensionHello CubeAdd geometry, textures, depth testing, and uniforms that update every frame.Geometry · textures · uniforms3 · Shape with lightLightingCompose reusable shader functionality and supply material inputs.Shader modules · materials4 · Scale the sceneHello InstancingDraw many copies of one geometry using per-instance attributes.Buffers · layouts · instancing

Reusable shaders

• Shader Modules package reusable shader code and typed inputs.
• Shader Hooks expose deliberate extension points.
• Shader Plugins combine modules, injections, and application configuration.

GPU-driven updates

• Transform runs data transformations on portable GPU resources.
• Transform Feedback demonstrates the WebGL2-specific feedback path.
• External WebGL Context integrates luma.gl with an existing renderer.

What the examples guarantee

• Tutorial application sources are typechecked by the repository test setup.
• The backend selector reflects the backends supported by each example.
• Full source links point to the same files rendered in the documentation.

After the course, use What's Next? to choose a deeper API guide or a larger example. Ready to work with the code on your own machine? The Installing guide takes you from an empty project to your first rendered frame.