WebGL API Documentation

WebGL Context

The WebGL context is the core object for rendering 3D graphics in the browser.

const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

Buffers

Buffers are used to store data for rendering, such as vertex positions and indices.

const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

Shaders

Shaders are small programs that run on the GPU to perform tasks like transforming vertices and coloring pixels.

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderCode);
gl.compileShader(vertexShader);

Textures

Textures are used to store image data for rendering.

const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

Rendering

Rendering is the process of generating an image from 3D data.

gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);