Learn WEBGL with Real Code Examples

# webgl/demo/triangle.js
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

// Setup shaders, buffers, and render a triangle
// ... shader setup and buffer code ...
gl.drawArrays(gl.TRIANGLES, 0, 3);

A basic WebGL program in JavaScript that renders a triangle to a canvas element.

# webgl/demo/clear_color.js
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

gl.clearColor(0.0, 0.5, 0.5, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

Sets the clear color and clears the canvas with WebGL.

# webgl/demo/animated_triangle.js
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

// Setup shaders and buffers
// ... setup code ...
let offset = 0;
function render() {
    offset += 0.01;
    // update vertex positions with offset
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
    requestAnimationFrame(render);
}
requestAnimationFrame(render);

Animates a triangle by updating vertex positions every frame.

# webgl/demo/colored_triangle.js
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

// Setup shaders with color attributes
// ... shader and buffer code ...
gl.drawArrays(gl.TRIANGLES, 0, 3);

Renders a triangle with vertex colors.

# webgl/demo/texture.js
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

// Load image and create texture
const texture = gl.createTexture();
// ... texture setup ...
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

Loads a texture and applies it to a square.

# webgl/demo/cube.js
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

// Setup cube vertices, indices, shaders
// ... setup code ...
function render() {
    // apply rotation
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
    requestAnimationFrame(render);
}
requestAnimationFrame(render);

Renders a rotating cube using perspective projection.

# webgl/demo/wireframe_cube.js
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

// Setup cube vertices and edges
// ... buffer and shader code ...
gl.drawElements(gl.LINES, 24, gl.UNSIGNED_SHORT, 0);

Draws a cube in wireframe mode.

# webgl/demo/lighting.js
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

// Setup shaders with normal and light uniforms
// ... setup code ...
gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);

Applies a simple directional light to a cube.

# webgl/demo/orbit_camera.js
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

// Setup scene and cube
// ... setup code ...
let angle = 0;
function render() {
    drawScene(angle);
    angle += 0.01;
    requestAnimationFrame(render);
}
requestAnimationFrame(render);

Implements a camera that orbits around the scene.

# webgl/demo/postprocess.js
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

// Setup framebuffer and render scene to texture
// ... setup code ...
gl.drawArrays(gl.TRIANGLES, 0, 6);

Applies a simple post-processing effect using a framebuffer.