WebGL Programming

Interactive Examples

New Project! Complete collection of 90+ interactive WebGL examples from the famous book ‘WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL’ now available online!

About the Project

This project presents a complete collection of interactive WebGL examples from the book ‘WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL’ by Kouichi Matsuda and Rodger Lea. Each example is a ready-to-run HTML file demonstrating specific WebGL concepts and techniques.

Features

90+ Examples
Bilingual Support
Interactive Navigation
Responsive Design
Ready to Run

Chapters and Examples

Chapter 2 – WebGL Basics

  • Hello Canvas – Your first WebGL program
  • Clicked Points – Interactive point drawing
  • Colored Points – Adding colors to vertices
  • Draw Rectangle – Basic shape rendering

Chapter 3 – Primitives and Transformations

  • Hello Triangle – Basic triangle rendering
  • Rotated Triangle – Matrix transformations
  • MultiPoint – Drawing multiple primitives
  • Hello Quad – Quadrilateral rendering

Chapter 5 – Colors and Textures

  • Colored Triangle – Color interpolation
  • Textured Quad – Texture mapping
  • MultiTexture – Working with multiple textures
  • HelloTriangle FragCoord – Fragment coordinates

Chapter 7 – 3D Objects and Perspective

  • Hello Cube – 3D cube rendering
  • Perspective View – 3D perspective projection
  • LookAt Triangles – Camera positioning
  • Depth Buffer – Z-buffer handling

Chapter 8 – Lighting

  • Lighted Cube – Basic lighting
  • Point Lighted Cube – Point light sources
  • Per Fragment Lighting – Advanced lighting techniques
  • Ambient Lighting – Ambient illumination

Chapter 10 – Advanced Techniques

  • Shadows – Shadow mapping
  • Fog – Atmospheric effects
  • Picking – Object selection
  • HUD – Heads-up display

How to Get Started

  1. Open the project homepage – Navigate to index.html
  2. Select a chapter – Choose from the organized navigation
  3. Click on any example – Examples open in new tabs
  4. Explore and experiment – All code is well-commented

Books

The project is based on two editions of the book:

  • English: “WebGL Programming Guide” by Kouichi Matsuda, Rodger Lea (2013)
  • Russian: “WebGL программирование трехмерной графики” – Мацуда Коичи, Ли Роджер (2015)

Tip: All examples work in modern browsers with WebGL support. For the best experience, using a local web server is recommended.

Technical Requirements

  • Modern web browser with WebGL support
  • No additional dependencies required
  • Local web server recommended for some examples

Browser Compatibility

  • ✅ Chrome 9+
  • ✅ Firefox 4+
  • ✅ Safari 5.1+
  • ✅ Edge 12+

Try it out

Социальные сети

Ответить