webgl-expert

Files (5)

• SKILL.md
• basic-triangle.md · examples/
• textured-cube.md · examples/
• reference.md
• shader-template.glsl · templates/

SKILL.md (first lines)

# WebGL Expert

Expert guide for WebGL (Web Graphics Library) API development, covering both WebGL 1.0 and WebGL 2.0 for high-performance 2D and 3D graphics rendering in web browsers.

## Overview

WebGL is a JavaScript API that enables hardware-accelerated 3D graphics rendering within HTML canvas elements without requiring plugins. It closely conforms to OpenGL ES 2.0 (WebGL 1.0) and OpenGL ES 3.0 (WebGL 2.0) standards.

**Key capabilities:**
- Hardware-accelerated 2D and 3D rendering
- Programmable shader pipeline (GLSL)
- Texture mapping and advanced materials
- Lighting and transformation systems
- High-performance graphics for games and visualizations
- Cross-platform compatibility (all modern browsers)

## Core Interfaces

### WebGLRenderingContext (WebGL 1.0)

The foundational interface for WebGL operations, obtained via canvas context:

```javascript
const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

if (!gl) {
    console.error('WebGL not supported');
}
```

### WebGL2RenderingContext (WebGL 2.0)

Enhanced interface with advanced features:

```javascript
const gl = canvas.getContext('webgl2');

if (!gl) {
    console.log('WebGL 2 not supported, falling back to WebGL 1');
    gl = canvas.getContext('webgl');
}
```

**WebGL 2 exclusive features:**
- 3D textures
- Sampler objects
- Uniform Buffer Objects (UBO)
- Transform Feedback
- Vertex Array Objects (VAO) - core feature
- Instanced rendering
- Multiple render targets
- Integer textures and attributes
- Query objects
- Occlusion queries

## Rendering Pipeline

### 1. Shader Creation and Compilation

Shaders are programs written in GLSL (OpenGL Shading Language) that run on the GPU:

**Vertex Shader** - Processes each vertex:
```glsl
attribute vec3 aPosition;
attribute vec2 aTexCoord;
uniform mat4 uModelViewProjection;
varying vec2 vTexCoord;

void main() {
    gl_Position = uModelViewProjection * vec4(aPosition, 1.0);
    vTexCoord = aTexCoord;
}
```

**Fragment Shader** - Determines pixel colors:
```glsl
precision mediump float;
varying vec2 vTexCoord;
uniform sampler2D uTexture;

void main() {
    gl_FragColor = texture2D(uTexture, vTexCoord);
}
```

**JavaScript shader setup:**
```javascript
function createShader(gl, type, source) {
    const shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);

    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error('Shader compilation error:', gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
    }
    return shader;
}

function createProgram(gl, vertexShader, fragmentShader) {
    const program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);

    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
        console.error('Program linking error:', gl.getProgramInfoLog(program));
        gl.deleteProgram(program);
        return null;
    }
    return program;
}
```

### 2. Buffer Management

Buffers store vertex data (positions, colors, normals, texture coordinates):

From 12-Studio/Tackl, MIT.

More from 12-Studio/Tackl