Context & Capabilities
| Method / Constant | Description |
|---|---|
| canvas.getContext('webgl2') |
Get WebGL 2 context; falls back to 'webgl' for
WebGL 1
|
| gl.getParameter(pname) |
Query state: MAX_TEXTURE_SIZE,
MAX_VERTEX_ATTRIBS,
MAX_TEXTURE_IMAGE_UNITS, etc.
|
| gl.getSupportedExtensions() | Array of available extension strings |
| gl.getExtension(name) | Enable and return extension object, or null |
| gl.viewport(x, y, w, h) | Set the drawing viewport in pixels |
| gl.scissor(x, y, w, h) | Restrict rendering to a scissor rectangle (enable with gl.enable(gl.SCISSOR_TEST)) |
Shaders & Programs
| Method | Description |
|---|---|
| gl.createShader(type) |
type: gl.VERTEX_SHADER or
gl.FRAGMENT_SHADER
|
| gl.shaderSource(s, src) | Set GLSL source string on shader |
| gl.compileShader(s) |
Compile; check with
gl.getShaderParameter(s, gl.COMPILE_STATUS)
|
| gl.getShaderInfoLog(s) | Compilation error messages with line numbers |
| gl.createProgram() | Create a program object |
| gl.attachShader(prog, s) | Attach compiled vertex or fragment shader |
| gl.transformFeedbackVaryings(prog, names, mode)GL2 |
Declare TF outputs before linking. mode:
INTERLEAVED_ATTRIBS or
SEPARATE_ATTRIBS
|
| gl.linkProgram(prog) |
Link; check
gl.getProgramParameter(prog, gl.LINK_STATUS)
|
| gl.useProgram(prog) | Activate program for subsequent draw calls |
| gl.getUniformLocation(prog, name) | Get uniform handle |
| gl.uniform1f / 2f / 3f / 4f | Set float uniforms (variants: 1i, 2i, Matrix4fv, etc.) |
| gl.getAttribLocation(prog, name) | Get attribute index |
Buffer Objects
| Method | Description |
|---|---|
| gl.createBuffer() | Create GPU buffer object |
| gl.bindBuffer(target, buf) |
Bind. Targets: ARRAY_BUFFER,
ELEMENT_ARRAY_BUFFER,
UNIFORM_BUFFERGL2,
TRANSFORM_FEEDBACK_BUFFERGL2
|
| gl.bufferData(target, data, usage) |
Upload. usage hints: STATIC_DRAW,
DYNAMIC_DRAW, DYNAMIC_COPYGL2,
STREAM_DRAW
|
| gl.bufferSubData(target, offset, data) | Partial update — faster than full re-upload |
| gl.vertexAttribPointer(idx, size, type, norm, stride, offset) | Describe attribute layout in bound ARRAY_BUFFER |
| gl.enableVertexAttribArray(idx) | Enable reading of this attribute from buffer |
| gl.vertexAttribDivisor(idx, div)GL2 | div=0: per-vertex; div=1: per-instance (instancing) |
| gl.createVertexArray()GL2 | VAO: encapsulates all attribute state |
| gl.bindVertexArray(vao)GL2 | Activate VAO — restores all attribute state saved in it |
Textures
| Method / Constant | Description |
|---|---|
| gl.createTexture() | Create texture object |
| gl.bindTexture(target, tex) |
Targets: TEXTURE_2D,
TEXTURE_CUBE_MAP, TEXTURE_3DGL2,
TEXTURE_2D_ARRAYGL2
|
| gl.texImage2D(target, level, internalFmt, w, h, 0, fmt, type, data) |
Upload 2D texture. internalFmt options: RGBA8,
RGBA16F, RGBA32F,
DEPTH24_STENCIL8
|
| gl.texParameteri(target, pname, value) |
Set filtering and wrap: TEXTURE_MIN_FILTER,
TEXTURE_MAG_FILTER,
TEXTURE_WRAP_S/T/R. Values:
LINEAR, NEAREST,
CLAMP_TO_EDGE, REPEAT
|
| gl.generateMipmap(target) | Auto-generate full mipmap chain from level 0 |
| gl.activeTexture(gl.TEXTURE0 + n) | Select texture unit before binding |
| gl.uniform1i(loc, n) | Set sampler uniform to texture unit n |
Framebuffers & Renderbuffers
| Method | Description |
|---|---|
| gl.createFramebuffer() | Create off-screen framebuffer (FBO) |
| gl.bindFramebuffer(target, fb) |
target: FRAMEBUFFER,
READ_FRAMEBUFFERGL2,
DRAW_FRAMEBUFFERGL2
|
| gl.framebufferTexture2D(target, attach, texTarget, tex, level) |
Attach texture to FB. attach:
COLOR_ATTACHMENT0,
DEPTH_ATTACHMENT,
DEPTH_STENCIL_ATTACHMENT
|
| gl.drawBuffers(bufs)GL2 |
Multiple render targets. e.g.
[gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1]
|
| gl.checkFramebufferStatus(target) |
Returns FRAMEBUFFER_COMPLETE if FB is valid for
rendering
|
| gl.blitFramebuffer(…)GL2 | Copy pixels from READ_FRAMEBUFFER to DRAW_FRAMEBUFFER (fast AA resolve) |
Draw Calls
| Method | Description |
|---|---|
| gl.drawArrays(mode, first, count) |
Draw primitives from vertex buffers. mode:
TRIANGLES, POINTS,
LINES, TRIANGLE_STRIP
|
| gl.drawElements(mode, count, type, offset) |
Indexed draw using bound ELEMENT_ARRAY_BUFFER. type:
UNSIGNED_SHORT or UNSIGNED_INT
|
| gl.drawArraysInstanced(mode, first, count, instances)GL2 |
Instanced draw — renders instances copies with
per-instance attributes
|
| gl.drawElementsInstanced(mode, count, type, offset, instances)GL2 | Indexed + instanced draw |
| gl.clear(mask) |
mask:
COLOR_BUFFER_BIT | DEPTH_BUFFER_BIT |
STENCIL_BUFFER_BIT
|
| gl.clearColor(r, g, b, a) | Set color used by gl.clear(COLOR_BUFFER_BIT) |
State Machine
| State | Enable / Configure |
|---|---|
| Depth test |
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LESS);
gl.depthMask(true)
|
| Blending |
gl.enable(gl.BLEND);
gl.blendFunc(src, dst). Common:
(SRC_ALPHA, ONE_MINUS_SRC_ALPHA) or
(SRC_ALPHA, ONE) for additive
|
| Face culling |
gl.enable(gl.CULL_FACE);
gl.cullFace(gl.BACK) (default);
gl.frontFace(gl.CCW)
|
| Polygon offset |
gl.enable(gl.POLYGON_OFFSET_FILL);
gl.polygonOffset(factor, units) — prevents
z-fighting for decals
|
| Stencil test |
gl.enable(gl.STENCIL_TEST);
gl.stencilFunc(func, ref, mask);
gl.stencilOp(fail, zfail, zpass)
|
| Rasterizer discardGL2 |
gl.enable(gl.RASTERIZER_DISCARD) — skip
fragment processing (used with transform feedback)
|
WebGL state is global per context — changing blend mode, depth test,
or cull face for one draw call affects all subsequent calls. Always
restore state or explicitly re-set it before each draw call group.