WebGL-Triangle: A Journey Through 3D Web Abstraction Layers

An educational and not perfect project from raw WebGL to high-level React components.

Project Overview

This project is my comprehensive exploration of the three main abstraction levels available for 3D graphics programming in web browsers. By implementing the same simple colored triangle using three different approaches, I can see how each abstraction layer builds upon the previous one. I used existing examples and IA Agent to build what is inside this repository.

The goal is not just to see how to render a triangle, but to understand what happens at each level of abstraction and appreciate the underlying mechanisms.

Project Structure

WebGL-Triangle/
├── webgl/          # Raw WebGL implementation (~250 lines)
├── threejs/        # Three.js implementation (~50 lines)
├── r3f/            # React Three Fiber implementation (~25 lines)

The Abstraction Pyramid

        REACT THREE FIBER
    Maximum Abstraction Level
    Declarative JSX Approach

        THREE.JS
    Medium Abstraction Level
    Object-Oriented API

        RAW WEBGL
    Zero Abstraction
    Full Control, Maximum Complexity

Comparative Analysis

Code Volume Reduction

Approach	Lines of Code	Reduction	Complexity
WebGL	~250	Baseline	Very High
Three.js	~50	-80%	Medium
React Three Fiber	~25	-90%	Low

Feature Comparison

Feature	WebGL	Three.js	React Three Fiber
Shader Writing	✅ Required (GLSL)	⚠️ Optional	⚠️ Optional
Buffer Management	✅ Manual	✅ Automatic	✅ Automatic
Render Loop	❌ Manual	⚠️ Semi-auto	✅ Fully Automatic
Learning Curve	🔴 Very Steep	🟡 Moderate	🟢 Easy (if React known)

Educational Objectives

Understanding Abstraction Layers

This project help me understand:

1. What Abstraction Hides: Each layer hides complexity from the previous one

   • Three.js hides shader compilation and buffer management
   • React Three Fiber hides scene setup and render loops

2. What Abstraction Provides: Each layer adds new capabilities

   • Three.js provides a scene graph and material system
   • React Three Fiber provides component reusability and React integration

3. When to Use Each Level: Understanding trade-offs helps make informed decisions

   • WebGL: Custom engines, extreme optimization, learning GPU programming
   • Three.js: Most 3D web projects, games, visualizations
   • React Three Fiber: React applications, component-based 3D UIs

Behind the Scenes

By studying all three implementations, I understand:

• How shaders are generated: Three.js materials automatically create GLSL shaders
• How buffers are managed: Both Three.js and R3F handle GPU memory automatically
• How the render loop works: R3F's <Canvas> component manages requestAnimationFrame
• How React integrates with 3D: R3F bridges React's declarative model with Three.js's imperative API

🔬 Technical Deep Dive

The Same Triangle, Three Ways

All three implementations render the exact same result:

• A triangle with vertices at (-0.5, -0.5), (0.5, -0.5), and (0.0, 0.5)
• Vertex colors: Red, Green, Blue (interpolated across the triangle)
• Dark background (#1a1a26)
• 600x600 pixel canvas
• Orthographic projection

What Changes Between Implementations

1. Initialization: From manual context setup to automatic <Canvas> configuration
2. Shaders: From handwritten GLSL to automatically generated shaders
3. Geometry: From manual buffer creation to declarative JSX attributes
4. Rendering: From manual draw calls to automatic render loops

What Stays the Same

• The underlying WebGL API (all three use it)
• The vertex data (same Float32Arrays)
• The GPU operations (same shader programs, same buffers)
• The final rendered output (identical visual result)

Good Reading during development

WebGL Resources

• WebGL Fundamentals

Three.js Resources

• Three.js Documentation
• Three.js Journey

React Three Fiber Resources

• React Three Fiber Documentation

Acknowledgments

Thanks to IA Agent for the writing of this Readme