WebGL2 Learning Exercises

This series of exercises introduces key WebGL2 concepts through step-by-step examples. Each step focuses on one fundamental technique to build your understanding of WebGL2 rendering pipeline.

Project 1 - Transformations

In this project, we display the vertices of an object using WebGL. This involves loading vertex data from an .obj file, creating vertex buffers, writing GLSL shaders, and applying transformations.

Requirements

• Load .obj files asynchronously
• Parse vertices for rendering
• Create vertex buffers and vertex array objects
• Simple GLSL vertex and fragment shaders
• Model-view-projection transformations
• Interactive camera control with mouse input (Optional)
• Perspective projection

---

Project 2 - Shading

Use WebGL to apply lighting and shading to 3D objects.

Requirements

• Load .obj files with positions and normals
• Normals transformed in vertex shader
• Lighting in fragment shader

---

Project 3 - Textures

Apply texture mapping to 3D models in WebGL using data from .obj and .mtl files.

Requirements

• Load diffuse texture from .mtl file
• Create buffer for texture coordinates
• Map texture correctly on object

Optional

• Load and apply specular texture
• Blinn-Phong lighting: ambient, diffuse, specular