WebGL Playground

Master WebGL through interactive lessons with live code previews

Lesson 1

Introduction to WebGL

Learn the basics of WebGL and render your first triangle

beginner
Lesson 2

Animating with WebGL

Create smooth animations using requestAnimationFrame

beginner
Lesson 3

Working with Textures

Apply images to 3D geometry using texture mapping

intermediate
Lesson 4

3D Transformations

Master perspective projection and 3D matrix transformations

intermediate
Lesson 5

Lighting and Shading

Implement realistic lighting with normal vectors and the Phong model

advanced
Lesson 6

Particle Systems

Create dynamic particle effects with thousands of particles

intermediate
Lesson 7

Post-Processing Effects

Apply screen-space effects using framebuffers and render-to-texture

advanced
Lesson 8

Normal Mapping

Add surface detail using normal maps and tangent space calculations

advanced
Lesson 9

Ray Marching and SDFs

Render complex 3D shapes using ray marching and signed distance functions

advanced
Lesson 10

Realistic Water Simulation

Create realistic water with waves, reflections, and refraction

advanced