Webgl20 Reference Guide

User Manual:

Open the PDF directly: View PDF .
Page Count: 8

Download
Open PDF In Browser	View PDF

WebGL 2.0 API Quick Reference Guide

Page 1

WebGLTM is an immediate-mode 3D rendering API from The Khronos® Group
designed for the web. It is derived from OpenGL® ES 3.0, and provides similar
rendering functionality, but in an HTML context. WebGL 2 is not entirely
backwards compatible with WebGL 1. Existing error-free content written against
the core WebGL 1 specification without extensions will often run in WebGL 2
without modification, but this is not always the case.
The WebGL 2 specification shows differences from the WebGL 1 specification.
Both WebGL specifications are available at khronos.org/webgl. Unless otherwise
specified, the behavior of each method is defined by the OpenGL ES 3.0
specification. The OpenGL ES specification is at khr.io/glesregistry.

Interfaces
WebGLContextAttributes [5.2]

• [n.n.n] refers to sections in the WebGL 1.0 specification.
• [n.n.n] refers to sections in the WebGL 2.0 specification.
• Content in blue is newly added with WebGL 2.0.
• Content in purple or marked with • has no corresponding OpenGL ES 3.0 function.

WebGLObject [5.3]

This is the parent interface for all WebGL resource objects:

WebGLQuery [3.2]

Created by createQuery, made active by
beginQuery, concluded by endQuery,
destroyed by deleteQuery

WebGLBuffer [5.4]

Created by createBuffer, bound by bindBuffer,
destroyed by deleteBuffer

WebGLSampler [3.3]

WebGLFramebuffer [5.5]

Created by createFramebuffer, bound
by bindFramebuffer, destroyed by
deleteFramebuffer

Created by createSampler, bound
by bindSampler, destroyed by
deleteSampler

WebGLSync [3.4]

WebGLProgram [5.6]

Created by createProgram, used by
useProgram, destroyed by deleteProgram

Created by fenceSync, blocked on by
clientWaitSync, waited on internal GL
by waitSync, queried by getSynciv,
destroyed by deleteSync

depth
Default: true
If true, requests drawing buffer with a depth buffer of at least
16 bits. Must obey.

WebGLRenderbuffer [5.7]

Created by createRenderbuffer, bound
by bindRenderbuffer, destroyed by
deleteRenderbuffer

WebGLTransformFeedback
[3.5]

stencil
Default: false
If true, requests a stencil buffer of at least 8 bits. Must obey.

Created by createTransformFeedback,
bound by bindTransformFeedback,
destroyed by deleteTransformFeedback

WebGLShader [5.8]

Created by createShader, attached to program
by attachShader, destroyed by deleteShader

antialias
Default: true
If true, requests drawing buffer with antialiasing using its choice
of technique (multisample/supersample) and quality. Must obey.

WebGLTexture [5.9]

Created by createTexture, bound by
bindTexture, destroyed by deleteTexture

WebGLVertexArrayObject
[3.6]

Created by createVertexArray,
bound by bindVertexArray,
destroyed by deleteVertexArray

WebGLUniformLocation
[5.10]

Location of a uniform variable in a shader
program.

WebGLActiveInfo [5.11]

Information returned from calls to
getActiveAttrib and getActiveUniform. The
read-only attributes are:
int size enum type DOMstring name

This interface contains requested drawing surface attributes
and is passed as the second parameter to getContext. Some
of these are optional requests and may be ignored by an
implementation.
alpha
Default: true
If true, requests a drawing buffer with an alpha channel for the
purposes of performing OpenGL destination alpha operations
and compositing with the page.

premultipliedAlpha
Default: true
If true, requests drawing buffer which contains colors with
premultiplied alpha. (Ignored if alpha is false.)
preserveDrawingBuffer
Default: false
If true, requests that contents of the drawing buffer remain
in between frames, at potential performance cost. May have
significant performance implications on some hardware.
preferLowPowerToHighPerformance
Default: false
Provides a hint suggesting that implementation create a context
that optimizes for power consumption over performance.

WebGLShaderPrecisionFormat [5.12]

failIfMajorPerformanceCaveat
Default: false
If true, context creation will fail if the performance of the
created WebGL context would be dramatically lower than that
of a native application making equivalent OpenGL calls.

Per-Fragment Operations [5.14.3]
void blendColor(clampf red, clampf green, clampf blue,
clampf alpha);
void blendEquation(enum mode);
mode: See modeRGB for blendEquationSeparate

void blendEquationSeparate(enum modeRGB,
enum modeAlpha);

modeRGB, and modeAlpha: FUNC_ADD, FUNC_SUBTRACT,
FUNC_REVERSE_SUBTRACT

void blendFunc(enum sfactor, enum dfactor);

sfactor: Same as for dfactor, plus SRC_ALPHA_SATURATE
dfactor: ZERO, ONE, [ONE_MINUS_]SRC_COLOR,
[ONE_MINUS_]DST_COLOR, [ONE_MINUS_]SRC_ALPHA,
[ONE_MINUS_]DST_ALPHA, [ONE_MINUS_]CONSTANT_COLOR,
[ONE_MINUS_]CONSTANT_ALPHA

sfactor and dfactor may not both reference constant color

void blendFuncSeparate(enum srcRGB, enum dstRGB,
enum srcAlpha, enum dstAlpha);
srcRGB, srcAlpha: See sfactor for blendFunc
dstRGB, dstAlpha: See dfactor for blendFunc

void depthFunc(enum func);

func: NEVER, ALWAYS, LESS, [NOT]EQUAL, {GE, LE}QUAL, GREATER

void sampleCoverage(float value, bool invert);
void stencilFunc(enum func, int ref, uint mask);

func: NEVER, ALWAYS, LESS, LEQUAL, [NOT]EQUAL, GREATER,
GEQUAL

void stencilFuncSeparate(enum face, enum func, int ref,
uint mask);
face: FRONT, BACK, FRONT_AND_BACK
func: NEVER, ALWAYS, LESS, LEQUAL, [NOT]EQUAL, GREATER,
GEQUAL

void stencilOp(enum fail, enum zfail, enum zpass);

fail, zfail, and zpass: KEEP, ZERO, REPLACE, INCR, DECR, INVERT,
INCR_WRAP, DECR_WRAP

void stencilOpSeparate(enum face, enum fail, enum zfail,
enum zpass);
face: FRONT, BACK, FRONT_AND_BACK
fail, zfail, and zpass: See fail, zfail, and zpass for stencilOp

©2019 The Khronos® Group Inc - Rev. 0219

Information returned from calls to
getShaderPrecisionFormat.
The read-only attributes are:
int rangeMin
int rangeMax
int precision

WebGL Context Creation [2.1]

To use WebGL, the author must obtain a WebGL rendering
context for a given HTMLCanvasElement. This context
manages the OpenGL state and renders to the drawing buffer.

[canvas].getContext(
"webgl", WebGLContextAttributes? optionalAttribs)
Returns a WebGL 1.0 rendering context

[canvas].getContext(
"webgl2", WebGLContextAttributes? optionalAttribs)
Returns a WebGL 2.0 rendering context

ArrayBuffer and Typed Arrays [5.13]

Data is transferred to WebGL using ArrayBuffer and views.
Buffers represent unstructured binary data, which can be
modified using one or more typed array views. Consult the
ECMAScript specification for more details on Typed Arrays.

Buffers

ArrayBuffer(ulong byteLength);

byteLength: read-only, length of view in bytes.

Creates a new buffer. To modify the data, create one or more
views referencing it.

Views

In the following, ViewType may be Int8Array, Int16Array,
Int32Array, Uint8Array, Uint16Array, Uint32Array, Float32Array.

ViewType(ulong length);

Creates a view and a new underlying buffer.

length: Read-only, number of elements in this view.

ViewType(ViewType other);

Creates new underlying buffer and copies other array.

ViewType(type[] other);

Creates new underlying buffer and copies other array.

ViewType(ArrayBuffer buffer, [optional] ulong byteOffset,
[optional] ulong length);

Create a new view of given buffer, starting at optional byte
offset, extending for optional length elements.
buffer: Read-only, buffer backing this view
byteOffset: Read-only, byte offset of view start in buffer
length: Read-only, number of elements in this view

Other Properties

byteLength: Read-only, length of view in bytes.
const ulong BYTES_PER_ELEMENT: element size in bytes.

Methods

view[i] = get/set element i
set(ViewType other[, ulong offset]);
set(type[] other[, ulong offset]);

Replace elements in this view with those from other, starting
at optional offset.

ViewType subArray(long begin[, long end]);

Return a subset of this view, referencing the same underlying
buffer.

Buffer Objects [5.14.5] [3.7.3]

void bufferData(enum target, BufferDataSource data,
enum usage);

void bindBuffer(enum target, WebGLBuffer? buffer);

void bufferSubData(enum target, long offset,
BufferDataSource data);

typedef (ArrayBuffer or ArrayBufferView) BufferDataSource
void bufferData(enum target, long size, enum usage);

void bufferSubData(enum target, intptr dstByteOffset,
ArrayBufferView srcData, uint srcOffset[, uint length=0]);

Once bound, buffers may not be rebound with a different target.
target: ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER,
PIXEL_[UN]PACK_BUFFER, COPY_{READ, WRITE}_BUFFER,
TRANSFORM_FEEDBACK_BUFFER, UNIFORM_BUFFER

target: See target for bindBuffer
usage: STREAM_{DRAW, READ, COPY}, STATIC_{DRAW, READ, COPY},
DYNAMIC_{DRAW, READ, COPY}

void bufferData(enum target, ArrayBufferView srcData,
enum usage, uint srcOffset[, uint length=0]);
target and usage: Same as for bufferData above

target and usage: Same as for bufferData above
target: See target for bindBuffer
target: See target for bindBuffer

void copyBufferSubData(enum readTarget, enum writeTarget,
intptr readOffset, intptr writeOffset, sizeiptr size);
• void getBufferSubData(enum target, intptr srcByteOffset,
ArrayBufferView dstBuffer[, uint dstOffset=0[,
uint length=0]]);
www.khronos.org/webgl

WebGL 2.0 API Quick Reference Guide
Buffer Objects (continued)
Object createBuffer();
Corresponding OpenGL ES function is GenBuffers

void deleteBuffer(WebGLBuffer? buffer);
any getBufferParameter(enum target, enum pname);
target: See target for bindBuffer
pname: BUFFER_SIZE, BUFFER_USAGE

bool isBuffer(WebGLBuffer? buffer);

Detect and Enable Extensions [5.14]
• string[ ] getSupportedExtensions();
• object getExtension(string name);
Available in the WebGLRenderingContext interface.

Get information about the context

• contextStruct getContextAttributes();
Set and get state

Calls in this group behave identically to their OpenGL ES
counterparts unless otherwise noted. Source and destination
factors may not both reference constant color.

Programs and Shaders [5.14.9] [3.7.7]

Shaders are loaded with a source string (shaderSource),
compiled (compileShader), attached to a program
(attachShader), linked (linkProgram), then used (useProgram).

[WebGLHandlesContextLoss] int getFragDataLocation(
WebGLProgram program, DOMString name);
void attachShader(Object program, Object shader);
void bindAttribLocation(Object program, uint index,
string name);
void compileShader(Object shader);
Object createProgram();
Object createShader(enum type);
type: VERTEX_SHADER, FRAGMENT_SHADER

void deleteProgram(Object program);
void deleteShader(Object shader);
void detachShader(Object program, Object shader);
Object[ ] getAttachedShaders(Object program);
any getProgramParameter(WebGLProgram? program,
enum pname);
Corresponding OpenGL ES function is GetProgramiv
pname: DELETE_STATUS, LINK_STATUS, VALIDATE_STATUS,
ATTACHED_SHADERS, ACTIVE_{ATTRIBUTES, UNIFORMS},
ACTIVE_UNIFORM_BLOCKS ,
TRANSFORM_FEEDBACK_BUFFER_MODE,
TRANSFORM_FEEDBACK_VARYINGS

string getProgramInfoLog(Object program);
any getShaderParameter(Object shader, enum pname);
Corresponding OpenGL ES function is GetShaderiv
pname: SHADER_TYPE, DELETE_STATUS, COMPILE_STATUS

string getShaderInfoLog(Object shader);
string getShaderSource(Object shader);
bool isProgram(Object program);
bool isShader(Object shader);
void linkProgram(Object program);
void shaderSource(Object shader, string source);
void useProgram(Object program);
void validateProgram(Object program);

Uniforms and Attributes [5.14.10] [3.7.8]

Values used by the shaders are passed in as a uniform of vertex
attributes.

void disableVertexAttribArray(uint index);
index: [0, MAX_VERTEX_ATTRIBS - 1]

void enableVertexAttribArray(uint index);
index: [0, MAX_VERTEX_ATTRIBS - 1]

WebGLActiveInfo? getActiveAttrib(WebGLProgram program,
uint index);
WebGLActiveInfo? getActiveUniform(
WebGLProgram program, uint index);
int getAttribLocation(WebGLProgram program, string name);

©2019 The Khronos® Group Inc - Rev. 0219

Special Functions [5.13.3] [3.7.2]
• contextStruct getContextAttributes() [5.13.2]
void disable(enum cap);

cap: BLEND, CULL_FACE, DEPTH_TEST, DITHER,
POLYGON_OFFSET_FILL, SAMPLE_ALPHA_TO_COVERAGE,
SAMPLE_COVERAGE, SCISSOR_TEST, STENCIL_TEST

void enable(enum cap);
cap: See cap for disable

void finish(); [5.13.11]
void flush(); [5.13.11]
enum getError();

Returns: OUT_OF_MEMORY, INVALID_{ENUM, OPERATION,
FRAMEBUFFER_OPERATION, VALUE}, NO_ERROR,
CONTEXT_LOST_WEBGL

any getParameter(enum pname);

pname: {ALPHA, RED, GREEN, BLUE, SUBPIXEL}_BITS,
ACTIVE_TEXTURE, ALIASED_{LINE_WIDTH, POINT_SIZE}_RANGE,
ARRAY_BUFFER_BINDING, BLEND_DST_{ALPHA, RGB},
BLEND_EQUATION_{ALPHA, RGB}, BLEND_SRC_{ALPHA, RGB},
BLEND[_COLOR], COLOR_{CLEAR_VALUE, WRITEMASK},
COPY_{READ, WRITE}_BUFFER_BINDING,
[NUM_]COMPRESSED_TEXTURE_FORMATS, CULL_FACE[_MODE],
CURRENT_PROGRAM, DEPTH_{BITS, CLEAR_VALUE, FUNC},
DEPTH_{RANGE, TEST, WRITEMASK}, DRAW_BUFFERi,
DRAW_FRAMEBUFFER_BINDING,
ELEMENT_ARRAY_BUFFER_BINDING, DITHER,
FRAMEBUFFER_BINDING, FRONT_FACE,
FRAGMENT_SHADER_DERIVATIVE_HINT,
GENERATE_MIPMAP_HINT, LINE_WIDTH,
MAX_3D_TEXTURE_SIZE, MAX_ARRAY_TEXTURE_LAYERS,
MAX_CLIENT_WAIT_TIMEOUT_WEBGL,
MAX_COLOR_ATTACHMENTS,
MAX_COMBINED_FRAGMENT_UNIFORM_COMPONENTS,
MAX_[COMBINED_]TEXTURE_IMAGE_UNITS,
MAX_COMBINED_UNIFORM_BLOCKS,
MAX_COMBINED_VERTEX_UNIFORM_COMPONENTS,
MAX_DRAW_BUFFERS, MAX_ELEMENT_INDEX,
MAX_ELEMENTS_{INDICES, VERTICES},
MAX_FRAGMENT_INPUT_COMPONENTS,
MAX_FRAGMENT_UNIFORM_{BLOCKS, COMPONENTS},
MAX_PROGRAM_TEXEL_OFFSET, MAX_SAMPLES,
MAX_SERVER_WAIT_TIMEOUT, MAX_TEXTURE_LOD_BIAS,

Rasterization [5.13.3]
void cullFace(enum mode);

mode: BACK, FRONT, FRONT_AND_BACK

void frontFace(enum mode);
mode: CCW, CW

void lineWidth(float width);
void polygonOffset(float factor, float units);

Page 2
MAX_TRANSFORM_FEEDBACK_INTERLEAVED_COMPONENTS,
MAX_TRANSFORM_FEEDBACK_SEPARATE_COMPONENTS,
MAX_TRANSFORM_FEEDBACK_SEPARATE_ATTRIBS,
MAX_UNIFORM_BLOCK_SIZE,
MAX_UNIFORM_BUFFER_BINDINGS,
MAX_{CUBE_MAP_TEXTURE, RENDERBUFFER, TEXTURE}_SIZE,
MAX_VARYING_{COMPONENTS, VECTORS},
MAX_VERTEX_{ATTRIBS, TEXTURE_IMAGE_UNITS},
MAX_VERTEX_UNIFORM_{BLOCKS, COMPONENTS, VECTORS},
MAX_VIEWPORT_DIMS, PACK_ALIGNMENT,
MIN_PROGRAM_TEXEL_OFFSET, PACK_ROW_LENGTH,
PACK_SKIP_{PIXELS, ROWS}, PIXEL_[UN]PACK_BUFFER_BINDING,
POLYGON_OFFSET_{FACTOR, FILL, UNITS},
RASTERIZER_DISCARD, READ_{BUFFER, FRAMEBUFFER_BINDING},
RENDERBUFFER_BINDING, RENDERER, SAMPLE_BUFFERS,
SAMPLE_[ALPHA_TO_]COVERAGE,
SAMPLE_COVERAGE_{INVERT, VALUE}, SAMPLES,
SCISSOR_{BOX, TEST}, SHADING_LANGUAGE_VERSION,
STENCIL_{BITS, CLEAR_VALUE, TEST},
STENCIL_[BACK_]{FAIL, FUNC, REF, VALUE_MASK, WRITEMASK},
STENCIL_[BACK_]PASS_DEPTH_{FAIL, PASS},
TEXTURE_BINDING_{2D, CUBE_MAP, 3D,_2D_ARRAY},
TRANSFORM_FEEDBACK_{ACTIVE, BINDING, BUFFER_BINDING},
TRANSFORM_FEEDBACK_PAUSED, UNIFORM_BUFFER_BINDING,
UNIFORM_BUFFER_OFFSET_ALIGNMENT, UNPACK_ALIGNMENT,
UNPACK_{COLORSPACE_CONVERSION_WEBGL, FLIP_Y_WEBGL,
PREMULTIPLY_ALPHA_WEBGL},
UNPACK_IMAGE_HEIGHT, UNPACK_ROW_LENGTH,
UNPACK_SKIP_{IMAGES, PIXELS, ROWS},
VENDOR, VERSION, VIEWPORT, VERTEX_ARRAY_BINDING

any getIndexedParameter(enum target, uint index);

target: TRANSFORM_FEEDBACK_BUFFER_{BINDING, SIZE, START},
UNIFORM_BUFFER_{BINDING, SIZE, START}

void hint(enum target, enum mode);
target: GENERATE_MIPMAP_HINT
hint: FASTEST, NICEST, DONT_CARE

bool isEnabled(enum cap);

cap: RASTERIZER_DISCARD Also see cap for disable

void pixelStorei(enum pname, int param);

pname: PACK_ALIGNMENT, PACK_ROW_LENGTH,
PACK_SKIP_{PIXELS, ROWS}, UNPACK_ALIGNMENT,
UNPACK_COLORSPACE_CONVERSION_WEBGL,
UNPACK_{FLIP_Y_WEBGL, PREMULTIPLY_ALPHA_WEBGL},
UNPACK_IMAGE_HEIGHT, UNPACK_ROW_LENGTH,
UNPACK_SKIP_{PIXELS, ROWS, IMAGES}

Writing to the Draw Buffer [5.14.11] [3.7.9]

When rendering is directed to drawing buffer, OpenGL ES
rendering calls cause the drawing buffer to be presented to the
HTML page compositor at start of next compositing operation.

void drawArrays(enum mode, int first, sizei count);

mode: POINTS, LINE_STRIP, LINE_LOOP, LINES, TRIANGLE_STRIP,
TRIANGLE_FAN, TRIANGLES
first: May not be a negative value.

void drawElements(enum mode, sizei count, enum type,
intptr offset);

View and Clip [5.13.3 - 5.13.4]

The viewport specifies the affine transformation of x and y from
normalized device coordinates to window coordinates. Drawing
buffer size is determined by the HTMLCanvasElement.

void depthRange(float zNear, float zFar);

zNear: Clamped to the range 0 to 1 Must be <= zFar
zFar: Clamped to the range 0 to 1.

void scissor(int x, int y, long width, long height);
void viewport(int x, int y, long width, long height);

mode: POINTS, LINE_STRIP, LINE_LOOP, LINES, TRIANGLE_STRIP,
TRIANGLE_FAN, TRIANGLES
type: UNSIGNED_BYTE, UNSIGNED_SHORT

void clear(bitfield mask);
void vertexAttribDivisor(uint index, uint divisor);
void drawArraysInstanced(enum mode, int first, sizei count,
sizei instanceCount);
void drawElementsInstanced(enum mode, sizei count,
enum type, intptr offset, sizei instanceCount);
void drawRangeElements(enum mode, uint start, uint end,
sizei count, enum type, intptr offset);

Detect context lost events [5.13.13]

bool isContextLost();

any getUniform(WebGLProgram? program, uint location);
WebGLUniformLocation? getUniformLocation(
Object program, string name);
any getVertexAttrib(uint index, enum pname);
pname: CURRENT_VERTEX_ATTRIB ,
VERTEX_ATTRIB_ARRAY_{BUFFER_BINDING, ENABLED},
VERTEX_ATTRIB_ARRAY_{NORMALIZED, SIZE, STRIDE, TYPE},
VERTEX_ATTRIB_ARRAY_{INTEGER, DIVISOR}

long getVertexAttribOffset(uint index, enum pname);
Corresponding OpenGL ES function is GetVertexAttribPointerv
pname: VERTEX_ATTRIB_ARRAY_POINTER

void uniform[1234]fv(WebGLUniformLocation? location,
Float32List data[, uint srcOffset=0[, uint srcLength=0]]);
void uniform[1234]iv(WebGLUniformLocation? location,
Int32List data[, uint srcOffset=0[, uint srcLength=0]]);
void uniform[1234]uiv(WebGLUniformLocation? location,
Uint32List data[, uint srcOffset=0[, uint srcLength=0]]);

void uniformMatrix[234]fv(WebGLUniformLocation? location,
bool transpose, Float32List data[, uint srcOffset=0[,
uint srcLength=0]]);
void uniformMatrix[234]x[234]fv(
WebGLUniformLocation? location, bool transpose,
Float32List data[, uint srcOffset=0[, uint srcLength=0]]);
void vertexAttrib[1234]f(uint index, ...);
void vertexAttrib[1234]fv(uint index, Array value);
void vertexAttribI4[u]i[v](uint index, ...);
void vertexAttribPointer(uint index, int size, enum type,
bool normalized, long stride, long offset);
type: BYTE, SHORT, UNSIGNED_{BYTE, SHORT}, FIXED, FLOAT
index: [0, MAX_VERTEX_ATTRIBS - 1]
stride: [0, 255]
offset, stride: must be a multiple of the type size in WebGL

void vertexAttribIPointer(uint index, int size, enum type,
sizei stride, intptr offset);
www.khronos.org/webgl

WebGL 2.0 API Quick Reference Guide
Vertex Array Objects [3.7.17]

VAOs encapsulate all state related to the definition of data
used by the vertex processor.

void bindVertexArray(
WebGLVertexArrayObject? vertexArray);
WebGLVertexArrayObject? createVertexArray();
void deleteVertexArray(
WebGLVertexArrayObject? vertexArray);
[WebGLHandlesContextLoss] boolean isVertexArray(
WebGLVertexArrayObject? vertexArray);

Read Back Pixels [5.14.12] [3.7.10]

Read pixels in current framebuffer into ArrayBufferView object.

void readPixels(int x, int y,
void readPixels(int x, int y,
long width, long height,
sizei width, sizei height,
enum format, enum type,
enum format, enum type,
ArrayBufferView pixels);
ArrayBufferView dstData,
format: RGBA
uint dstOffset);
type: UNSIGNED_BYTE
void readPixels(int x, int y,
sizei width, sizei height,
enum format, enum type,
intptr offset);

Texture Objects [5.14.8] [3.7.6]

void texSubImage2D(enum target, int level, int xoffset,

void activeTexture(enum texture) [5.14.3]

int yoffset, sizei width, sizei height, enum format,
enum type, TexImageSource source);
void texSubImage2D(enum target, int level, int xoffset,
int yoffset, sizei width, sizei height, enum format,
enum type, intptr offset);
void texStorage2D(enum target, sizei levels,
enum internalformat, sizei width, sizei height);
void texStorage3D(enum target, sizei levels,
enum internalformat, sizei width, sizei height, sizei depth);

int yoffset, sizei width, sizei height, enum format,
Texture objects provide storage and state for texturing operations.
enum type, ArrayBufferView srcData, uint srcOffset);
WebGL adds an error for operations relating to the currently bound
void texSubImage2D(enum target, int level, int xoffset,
texture if no texture is bound.
texture: [TEXTURE0..TEXTUREi] where i =
MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1

void bindTexture(enum target, WebGLTexture? texture);
target: TEXTURE_{2D, 3D, 2D_ARRAY}, TEXTURE_CUBE_MAP

void copyTexImage2D(enum target, int level,
enum internalformat, int x, int y, long width,
long height, int border);

target: TEXTURE_2D, TEXTURE_CUBE_MAP_POSITIVE_{X,Y,Z}
TEXTURE_CUBE_MAP_NEGATIVE_{X,Y,Z}, TEXTURE_3D,
TEXTURE_2D_ARRAY
internalformat: See Tables 3.12, 3.13, 3.14 in the OpenGL ES 3
specification

texStorage3D may have lower memory costs than texImage3D
in some implementations and should be considered a preferred
alternative to allocate three-dimensional textures.

void texImage3D(enum target, int level, int internalformat,
sizei width, sizei height, sizei depth, int border,
enum format, enum type, ArrayBufferView? srcData);
target: See target for copyTexImage2D
void texImage3D(enum target, int level, int internalformat,
sizei width, sizei height, sizei depth, int border,
Object createTexture();
enum format, enum type, ArrayBufferView srcData,
Corresponding OpenGL ES function is GenTextures
uint srcOffset);
void deleteTexture(Object texture);
void texImage3D(enum target, int level, int internalformat,
void generateMipmap(enum target);
sizei width, sizei height, sizei depth, int border,
target: see target for bindTexture
enum format, enum type, TexImageSource source);
any getTexParameter(enum target, enum pname);
void texImage3D(enum target, int level, int internalformat,
target: TEXTURE_2D, TEXTURE_CUBE_MAP
sizei width, sizei height, sizei depth, int border,
pname: TEXTURE_BASE_LEVEL,
enum format, enum type, intptr offset);
TEXTURE_COMPARE_{FUNC, MODE},
void texSubImage3D(enum target, int level, int xoffset,
TEXTURE_IMMUTABLE_{FORMAT, LEVELS},
int yoffset, int zoffset, sizei width, sizei height, sizei depth,
TEXTURE_MAX_{LEVEL, LOD}, TEXTURE_MIN_LOD,
enum format, enum type, ArrayBufferView? srcData
TEXTURE_{MIN, MAG}_FILTER, TEXTURE_WRAP_{R, S, T}
[, uint srcOffset=0]);
bool isTexture(Object texture);
void
texSubImage3D(enum target, int level, int xoffset,
void texImage2D(enum target, int level,
int yoffset, int zoffset, sizei width, sizei height, sizei depth,
enum internalformat, long width, long height,
enum format, enum type, TexImageSource source);
int border, enum format, enum type,
void texSubImage3D(enum target, int level, int xoffset,
ArrayBufferView? pixels);
int yoffset, int zoffset, sizei width, sizei height, sizei depth,
The following values apply to all variations of texImage2D.
enum format, enum type, intptr offset);
target: See target for copyTexImage2D
source: pixels of type ImageData, image of type HTMLImageElement,
void copyTexSubImage3D(enum target, int level, int xoffset,
canvas of type HTMLCanvasElement,
int yoffset, int zoffset, int x, int y, sizei width, sizei height);
video of type HTMLVideoElement
void compressedTexImage2D(enum target, int level,
void texImage2D(enum target, int level, int internalformat,
enum internalformat, sizei width, sizei height, int border,
sizei width, sizei height, int border, enum format,
ArrayBufferView srcData[, uint srcOffset=0[,
enum type, ArrayBufferView srcData, uint srcOffset);
uint srcLengthOverride=0]]);
[throws] void texImage2D(enum target, int level,
void compressedTexSubImage2D(enum target, int level,
int internalformat, sizei width, sizei height, int border,
int xoffset, int yoffset, sizei width, sizei height, enum format,
enum format, enum type, TexImageSource source);
ArrayBufferView srcData[, uint srcOffset=0[,
uint srcLengthOverride=0]]);
void texImage2D(enum target, int level, int internalformat,
sizei width, sizei height, int border, enum format,
void compressedTexImage3D(enum target, int level,
enum type, intptr offset);
enum internalformat, sizei width, sizei height, sizei depth,
int border, ArrayBufferView srcData[, uint srcOffset=0[,
void texParameterf(enum target, enum pname, float param);
uint srcLengthOverride=0]]);
target: TEXTURE_2D, TEXTURE_CUBE_MAP
pname: TEXTURE_BASE_LEVEL,
void compressedTexSubImage3D(enum target, int level,
TEXTURE_COMPARE_{FUNC, MODE},
int xoffset, int yoffset, int zoffset, sizei level, sizei level,
TEXTURE_MAX_{LEVEL, LOD}, TEXTURE_{MIN, MAG}_FILTER,
sizei depth, enum format, ArrayBufferView srcData[,
TEXTURE_MIN_LOD, TEXTURE_WRAP_{R, S, T}
uint srcOffset=0[,uint srcLengthOverride=0]]);
void texParameteri(enum target, enum pname, int param);
void
compressedTexImage2D(enum target, int level,
target: TEXTURE_2D, TEXTURE_CUBE_MAP
enum internalformat, sizei width, sizei height, int border,
pname: See pname for getTexParameter
sizei imageSize, intptr offset);
void texSubImage2D(enum target, int level, int xoffset,
void compressedTexSubImage2D(enum target, int level,
int yoffset, long width, long height, enum format,
int xoffset, int yoffset, sizei width, sizei height,
enum type, ArrayBufferView? pixels);
enum format, sizei imageSize, intptr offset);
Following values apply to all variations of texSubImage2D.
void compressedTexImage3D(enum target, int level,
target: See target for copyTexImage2D
enum internalformat, sizei width, sizei height, sizei depth,
format and type: See format and type for texImage2D
int border, sizei imageSize, intptr offset);
object: See object for texImage2D
texStorage2D may have lower memory costs than texImage2D void compressedTexSubImage3D(enum target, int level,
int xoffset, int yoffset, int zoffset, width, sizei height,
in some implementations and should be considered a preferred
sizei depth, enum format, sizei imageSize, intptr offset);
alternative to texImage2D.
void copyTexSubImage2D(enum target, int level,
int xoffset, int yoffset, int x, int y, long width,
long height);

©2019 The Khronos® Group Inc - Rev. 0219

Page 3
Framebuffer Objects [5.14.6] [3.7.4]

Framebuffer objects provide an alternative rendering target to
the drawing buffer.

void bindFramebuffer(enum target,
WebGLFramebuffer? framebuffer);
target: [READ_, DRAW_]FRAMEBUFFER

[WebGLHandlesContextLoss] enum
checkFramebufferStatus(enum target);

target: [READ_, DRAW_]FRAMEBUFFER
Returns: FRAMEBUFFER_{COMPLETE, UNSUPPORTED},
FRAMEBUFFER_INCOMPLETE_{ATTACHMENT, DIMENSIONS,
MULTISAMPLE, MISSING_ATTACHMENT},
FRAMEBUFFER_UNDEFINED

Object createFramebuffer();
Corresponding OpenGL ES function is GenFramebuffers

void deleteFramebuffer(Object buffer);
void framebufferRenderbuffer(enum target,
enum attachment, enum renderbuffertarget,
WebGLRenderbuffer renderbuffer);

target: FRAMEBUFFER
attachment: COLOR_ATTACHMENT0, COLOR_ATTACHMENTn
where n may be an integer from 1 to 15,
{DEPTH, STENCIL, DEPTH_STENCIL}_ATTACHMENT
renderbuffertarget: RENDERBUFFER

bool isFramebuffer(WebGLFramebuffer framebuffer);
void framebufferTexture2D(enum target, enum attachment,
enum textarget, WebGLTexture texture, int level);
target and attachment: Same as for framebufferRenderbuffer
textarget: TEXTURE_2D, TEXTURE_CUBE_MAP_POSITIVE{X, Y, Z},
TEXTURE_CUBE_MAP_NEGATIVE{X, Y, Z},

any getFramebufferAttachmentParameter(enum target,
enum attachment, enum pname);

target and attachment: Same as for framebufferRenderbuffer
pname: FRAMEBUFFER_ATTACHMENT_OBJECT_{TYPE, NAME},
FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL,
FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE,
FRAMEBUFFER_ATTACHMENT_{ALPHA, BLUE, GREEN, RED}_SIZE,
FRAMEBUFFER_ATTACHMENT_COLOR_ENCODING,
FRAMEBUFFER_ATTACHMENT_COMPONENT_TYPE,
FRAMEBUFFER_ATTACHMENT_{DEPTH, STENCIL}_SIZE,
FRAMEBUFFER_ATTACHMENT_TEXTURE_LAYER

void blitFramebuffer(int srcX0, int srcY0, int srcX1, int srcY1,
int dstX0, int dstY0, int dstX1, int dstY1, bitfield mask,
enum filter);
void framebufferTextureLayer(enum target,
enum attachment, WebGLTexture? texture, int level,
int layer);
void invalidateFramebuffer(enum target,
sequence attachments);
void invalidateSubFramebuffer (enum target,
sequence attachments, int x, int y, sizei width,
sizei height);
void readBuffer(enum src);

Renderbuffer Objects [5.14.7] [3.7.5]

Renderbuffer objects are used to provide storage for the
individual buffers used in a framebuffer object.

void bindRenderbuffer(enum target, Object renderbuffer);
target: RENDERBUFFER

Object createRenderbuffer();
Corresponding OpenGL ES function is GenRenderbuffers

void deleteRenderbuffer(Object renderbuffer);
any getRenderbufferParameter(enum target, enum pname);
target: RENDERBUFFER
pname: RENDERBUFFER_{WIDTH, HEIGHT, INTERNAL_FORMAT},
RENDEDRBUFFER_{RED, GREEN, BLUE, ALPHA, DEPTH}_SIZE,
RENDERBUFFER_STENCIL_SIZE, RENDERBUFFER_SAMPLES

any getInternalformatParameter(enum target,
enum internalformat, enum pname);
pname: SAMPLES

bool isRenderbuffer(Object renderbuffer);
void renderbufferStorage(enum target,
enum internalformat, sizei width, sizei height);

target: RENDERBUFFER
internalformat: Accepts internal formats from OpenGL ES 3.0, as
well as DEPTH_STENCIL

void renderbufferStorageMultisample(enum target,
enum internalformat, sizei width, sizei height);

www.khronos.org/webgl

WebGL 2.0 API Quick Reference Guide
Whole Framebuffer Operations [5.14.3]
void clear(bitfield mask);

mask: Bitwise OR of {COLOR, DEPTH, STENCIL}_BUFFER_BIT

void clearColor(clampf red, clampf green, clampf blue,
clampf alpha);
void clearDepth(float depth);
depth: Clamped to the range 0 to 1.

void clearStencil(int s);
void colorMask(bool red, bool green, bool blue, bool alpha);
void depthMask(bool flag);
void stencilMask(uint mask);
void stencilMaskSeparate(enum face, uint mask);
face: FRONT, BACK, FRONT_AND_BACK

Multiple Render Targets [3.7.11]
void drawBuffers(sequence buffers);
void clearBufferfv(enum buffer, int drawbuffer,
Float32List values[, uint srcOffset=0]);
void clearBufferiv(enum buffer, int drawbuffer,
Int32List values[, uint srcOffset=0]);
void clearBufferuiv(enum buffer, int drawbuffer,
Uint32List values[, uint srcOffset=0]);
void clearBufferfi(enum buffer, int drawbuffer, float depth,
int stencil);
Use the function based on the color buffer type:
clearBufferfv: floating point; clearBufferfv: fixed point
clearBufferiv: signed integer clearBufferiv: signed integer;
clearBufferfi: DEPTH_STENCIL buffers

Sampler Objects [3.7.13]
WebGLSampler? createSampler();
void deleteSampler(WebGLSampler? sampler);
[WebGLHandlesContextLoss] boolean isSampler(
WebGLSampler? sampler);
void bindSampler(uint unit, WebGLSampler? sampler);
void samplerParameteri(WebGLSampler sampler,
enum pname, int param);
void samplerParameterf(WebGLSampler sampler,
enum pname, float param);
pname: TEXTURE_COMPARE_{FUNC, MODE},
TEXTURE_MAG_FILTER, TEXTURE_MAX_LOD,
TEXTURE_MIN_{FILTER, LOD}, TEXTURE_WRAP_{R, S, T}

Query Objects [3.7.12]
WebGLQuery? createQuery();
void deleteQuery(WebGLQuery? query);
[WebGLHandlesContextLoss] boolean isQuery(
WebGLQuery? query);
void beginQuery(enum target, WebGLQuery query);
void endQuery(enum target)
WebGLQuery? getQuery(enum target, enum pname);
target: ANY_SAMPLES_PASSED[_CONSERVATIVE],
TRANSFORM_FEEDBACK_PRIMITIVES_WRITTEN
pname: CURRENT_QUERY

any getQueryParameter(WebGLQuery query, enum pname);
pname: QUERY_RESULT[_AVAILABLE]

Page 4
Sync Objects [3.7.14]

Synchronize execution between the GL server and the client.

WebGLSync? fenceSync(enum condition, bitfield flags)
[WebGLHandlesContextLoss] boolean isSync(
WebGLSync? sync);
void deleteSync(WebGLSync? sync);
enum clientWaitSync(WebGLSync sync, bitfield flags,
uint64 timeout);
flags: SYNC_FLUSH_COMMANDS_BIT

void waitSync(WebGLSync sync, bitfield flags, int64 timeout);
timeout: TIMEOUT_IGNORED

any getSyncParameter(WebGLSync sync, enum pname);
pname: OBJECT_TYPE, SYNC_{CONDITION, FLAGS, STATUS}

Uniform Buffer Objects [3.7.16]

Provides the storage for named uniform blocks.

Transform Feedback [3.7.15]

Captures output variable values written by the vertex shader.

WebGLTransformFeedback? createTransformFeedback();
void deleteTransformFeedback(
WebGLTransformFeedback? transformFeedback);
[WebGLHandlesContextLoss] boolean isTransformFeedback(
WebGLTransformFeedback? transformFeedback);
void bindTransformFeedback(enum target,
WebGLTransformFeedback? transformFeedback);
void beginTransformFeedback(enum primitiveMode);
void endTransformFeedback();
void pauseTransformFeedback();
void resumeTransformFeedback();
void transformFeedbackVaryings(WebGLProgram program,
sequence varyings, enum bufferMode);
WebGLActiveInfo? getTransformFeedbackVarying(
WebGLProgram program, uint index);

void bindBufferBase(enum target, uint index,
WebGLBuffer? buffer);
void bindBufferRange(enum target, uint index,
WebGLBuffer? buffer, intptr offset, sizeiptr size);
sequence? getUniformIndices(
WebGLProgram program,
sequence uniformNames);
any getActiveUniforms(WebGLProgram program,
sequence uniformIndices, enum pname);
pname: UNIFORM_{BLOCK_INDEX, SIZE, TYPE, OFFSET},
UNIFORM_{ARRAY, MATRIX}_STRIDE,
UNIFORM_IS_ROW_MAJOR

uint getUniformBlockIndex(WebGLProgram program,
DOMString uniformBlockName);
any getActiveUniformBlockParameter(
WebGLProgram program, uint uniformBlockIndex,
enum pname);
pname: UNIFORM_BLOCK_{BINDING, DATA_SIZE},
UNIFORM_BLOCK_ACTIVE_UNIFORMS,
UNIFORM_BLOCK_ACTIVE_UNIFORM_INDICES,
UNIFORM_BLOCK_REFERENCED_BY_VERTEX_SHADER,
UNIFORM_BLOCK_REFERENCED_BY_FRAGMENT_SHADER

DOMString? getActiveUniformBlockName(
WebGLProgram program, uint uniformBlockIndex);
void uniformBlockBinding(WebGLProgram program,
uint uniformBlockIndex, uint uniformBlockBinding);

any getSamplerParameter(WebGLSampler sampler,
enum pname);
pname: See pname for samplerParameterf

OpenGL Texture Object and Sampler State

Sampler Parameters (mutable)
		

T

TEXTURE_COMPARE_{FUNC,MODE}
TEXTURE_{MAX,MIN}_LOD
TEXTURE_{MAG,MIN}_FILTER
TEXTURE_WRAP_{S,T,R}

Texture Parameters (immutable)
TEXTURE_IMMUTABLE_FORMAT
TEXTURE_IMMUTABLE_LEVELS

Texture Parameters (mutable)
TEXTURE_BASE_LEVEL
TEXTURE_MAX_LEVEL

©2019 The Khronos® Group Inc - Rev. 0219

www.khronos.org/webgl

WebGL 2.0 API Quick Reference Guide

Page 5

Sized Texture Color Formats [3.7.11]

If an application wants to store the texture at a certain resolution or in a certain format, it can request the resolution and format with internalFormat. The following table shows the sized internal
formats indicating whether they are color renderable or texture filterable.
In Color Renderable column, a red Y means the aiff extension EXT_color_buffer_float is enabled. In Texture Filterable column, a red Y means the iff extension OES_texture_float_linear is enabled.

Color
Renderable

Texture
Filterable

Y

Y

Internal Format

Format

Type

R8

RED

UNSIGNED_BYTE

R8_SNORM

RED

BYTE

R16F

RED

HALF_FLOAT, FLOAT

Y

Y

R32F

RED

FLOAT

Y

Y

R8UI

RED_INTEGER

UNSIGNED_BYTE

Y

R8I

RED_INTEGER

BYTE

Y

R16UI

RED_INTEGER

UNSIGNED_SHORT

Y

R16I

RED_INTEGER

SHORT

Y

R32UI

RED_INTEGER

UNSIGNED_INT

Y

R32I

RED_INTEGER

INT

Y

RG8

RG

UNSIGNED_BYTE

Y

RG8_SNORM

RG

BYTE

RG16F

RG

HALF_FLOAT,FLOAT

Y

Y

RG32F

RG

FLOAT

Y

Y

RG8UI

RG_INTEGER

UNSIGNED_BYTE

Y

RG8I

RG_INTEGER

BYTE

Y

RG16UI

RG_INTEGER

UNSIGNED_SHORT

Y

RG16I

RG_INTEGER

SHORT

Y

RG32UI

RG_INTEGER

UNSIGNED_INT

Y

RG32I

RG_INTEGER

INT

Y

RGB8

RGB

UNSIGNED_BYTE

Y

SRGB8

RGB

UNSIGNED_BYTE

RGB565

RGB

UNSIGNED_BYTE, UNSIGNED_SHORT_5_6_5

RGB8_SNORM

RGB

BYTE

R11F_G11F_B10F

RGB

UNSIGNED_INT_10F_11F_11F_REV, HALF_FLOAT, FLOAT

RGB9_E5

RGB

UNSIGNED_INT_5_9_9_9_REV, HALF_FLOAT, FLOAT

RGB16F

RGB

HALF_FLOAT, FLOAT

Y

RGB32F

RGB

FLOAT

Y

RGB8UI

RGB_INTEGER

UNSIGNED_BYTE

RGB8I

RGB_INTEGER

BYTE

RGB16UI

RGB_INTEGER

UNSIGNED_SHORT

RGB16I

RGB_INTEGER

SHORT

RGB32UI

RGB_INTEGER

UNSIGNED_INT

RGB32I

RGB_INTEGER

INT

RGBA8

RGBA

UNSIGNED_BYTE

Y

Y

SRGB8_ALPHA8

RGBA

UNSIGNED_BYTE

Y

Y

RGBA8_SNORM

RGBA

BYTE

RGB5_A1

RGBA

UNSIGNED_BYTE, UNSIGNED_SHORT_5_5_5_1,
UNSIGNED_INT_2_10_10_10_REV

Y

Y

RGBA4

RGBA

UNSIGNED_BYTE, UNSIGNED_SHORT_4_4_4_4

Y

Y

RGB10_A2

RGBA

UNSIGNED_INT_2_10_10_10_REV

Y

Y

RGBA16F

RGBA

HALF_FLOAT, FLOAT

Y

Y

RGBA32F

RGBA

FLOAT

Y

Y

RGBA8UI

RGBA_INTEGER

UNSIGNED_BYTE

Y

RGBA8I

RGBA_INTEGER

BYTE

Y

RGB10_A2UI

RGBA_INTEGER

UNSIGNED_INT_2_10_10_10_REV

Y

RGBA16UI

RGBA_INTEGER

UNSIGNED_SHORT

Y

RGBA16I

RGBA_INTEGER

SHORT

Y

RGBA32I

RGBA_INTEGER

INT

Y

RGBA32UI

RGBA_INTEGER

UNSIGNED_INT

Y

©2019 The Khronos® Group Inc - Rev. 0219

Y

Y
Y

Y
Y

Y

Y
Y

Y

Y
Y

Y

www.khronos.org/webgl

OpenGL ES Shading Language 3.0 API Quick Reference Guide
The OpenGL® ES Shading Language is two closelyrelated languages which are used to create shaders for
the vertex and fragment processors contained in the
WebGL, OpenGL, and OpenGL ES processing pipelines.
WebGL 2.0 is based on OpenGL ES 3.0.
[n.n.n] and [Table n.n] refer to sections and tables
in the OpenGL ES Shading Language 3.0 specification at
www.khronos.org/registry/gles/

Types [4.1]

A shader can aggregate these using arrays and structures to build
more complex types. There are no pointer types.

Page 6

Preprocessor [3.4]

Preprocessor Directives

The number sign (#) can be immediately preceded or followed in its line by spaces or horizontal tabs.
#
#define
#undef
#if
#ifdef
#ifndef
#else
#elif
#endif
#error
#pragma
#extension
#line
Examples of Preprocessor Directives
• “#version 300 es” must appear in the first line of a shader program written in GLSL ES version 3.00. If omitted, the shader will be treated
as targeting version 1.00.
• #extension extension_name : behavior, where behavior can be require, enable, warn, or disable; and where extension_name is the
extension supported by the compiler
• #pragma optimize({on, off}) - enable or disable shader optimization (default on)
#pragma debug({on, off}) - enable or disable compiling shaders with debug information (default off)

Predefined Macros
__LINE__

Decimal integer constant that is one more than the number of preceding newlines in the current source string

Basic Types

__FILE__

Decimal integer constant that says which source string number is currently being processed.

void

no function return value or empty parameter list

__VERSION__

Decimal integer, e.g.: 300

bool

Boolean

GL_ES

Defined and set to integer 1 if running on an OpenGL-ES Shading Language.

int, uint

signed, unsigned integer

float

floating scalar

Qualifiers

vec2, vec3, vec4

n-component floating point vector

Storage Qualifiers [4.3]

bvec2, bvec3, bvec4

Boolean vector

ivec2, ivec3, ivec4

signed integer vector

uvec2, uvec3, uvec4

unsigned integer vector

mat2, mat3, mat4

2x2, 3x3, 4x4 float matrix

Parameter Qualifiers [4.4]

Variable declarations may be preceded by one storage
qualifier.
none
(Default) local read/write memory, or input parameter
Compile-time constant, or read-only function
const
parameter
in
Linkage into a shader from a previous stage
centroid in

mat2x2, mat2x3, mat2x4 2x2, 2x3, 2x4 float matrix
mat3x2, mat3x3, mat3x4 3x2, 3x3, 3x4 float matrix
mat4x2, mat4x3, mat4x4 4x2, 4x3, 4x4 float matrix

Floating Point Sampler Types (opaque)

out
centroid out

Linkage out of a shader to a subsequent stage

uniform

Value does not change across the primitive being
processed, uniforms form the linkage between a
shader, OpenGL ES, and the application

sampler2D, sampler3D

access a 2D or 3D texture

samplerCube

access cube mapped texture

samplerCubeShadow

access cube map depth texture with comparison

The following interpolation qualifiers for shader outputs
and inputs may procede in, centroid in, out, or
centroid out.
smooth
Perspective correct interpolation

sampler2DShadow

access 2D depth texture with comparison

flat

sampler2DArray

access 2D array texture

sampler2DArrayShadow access 2D array depth texture with comparison

Signed Integer Sampler Types (opaque)
isampler2D, isampler3D access an integer 2D or 3D texture
isamplerCube

access integer cube mapped texture

isampler2DArray

access integer 2D array texture

usampler2D, usampler3D access unsigned integer 2D or 3D texture
usamplerCube

access unsigned integer cube mapped texture

usampler2DArray

access unsigned integer 2D array texture

inout

For function parameters passed both into and out of a function

Precision and Precision Qualifiers [4.5]

Any floating point, integer, or sampler declaration can have the
type preceded by one of these precision qualifiers:
highp

Satisfies minimum requirements for the vertex language.

mediump

Range and precision is between that provided by lowp
and highp.

lowp

Range and precision can be less than mediump, but still
represents all color values for any color channel.

Ranges and precisions for precision qualifiers (FP=floating point):
Uniform variable declarations can be grouped into named
Integer Range
interface blocks, for example:
FP Magnitude
uniform Transform {
FP Range
Range
FP Precision Signed
Unsigned
mat4 ModelViewProjectionMatrix;
(−2126 , 2127) 0.0, (2–126 , 2127) Relative 2–24 [−231, 231 −1] [0, 232 −1]
uniform mat3 NormalMatrix; // restatement of qualifier highp
float Deformation;
mediump (−214 , 214) (2–14 , 214) Relative 2–10 [−215, 215 −1] [0, 216 −1]
}
lowp

layout(layout-qualifier) block-declaration
layout(layout-qualifier) in/out/uniform
layout(layout-qualifier) in/out/uniform
declaration

(−2, 2)

(2–8 , 2)

Absolute 2–8 [−27, 27 −1]

[0, 28 −1]

A precision statement establishes a default precision qualifier for
subsequent int, float, and sampler declarations, e.g.:
precision highp int;

invariant gl_Position;

Qualify a previously declared variable

invariant centroid out
vec3 Color;

Qualify as part of a variable declaration

float foo[3];
Structures, blocks, and structure members can be arrays.
Only 1-dimensional arrays supported.

Uniform Block Layout Qualifiers [4.3.8.3]
Layout qualifier identifiers for uniform blocks:
shared, packed, std140, {row, column}_major

Numbered in order of precedence. The
relational and equality operators > < <= >= == != evaluate to a
Boolean. To compare vectors component-wise, use functions
such as lessThan(), equal(), etc. [8.7].
Operator
Description
Assoc.

4.
5.
6.

For function parameters passed back out of a function, but
not initialized for use when passed in

Output Layout Qualifiers [4.3.8.2]
For all shader stages:
location = integer-constant

Operators and Expressions

3.

out

struct type-name {
members
} struct-name[]; // optional variable declaration,

Operators [5.1]

2.

For function parameters passed into a function

Invariant Qualifiers Examples [4.6]

// optionally an array

1.

(Default) same as in

in

Input Layout Qualifiers [4.3.8.1]
For all shader stages:
location = integer-constant

Structures and Arrays [4.1.8, 4.1.9]

Arrays

none

Interface Blocks [4.3.7]

Layout Qualifiers [4.3.8]

Unsigned Integer Sampler Types (opaque)

Structures

No interpolation

Input values are copied in at function call time, output values are
copied out at function return time.

()
[]
()
.
++ -++ -+ - ~ !
* % /
+ << >>

parenthetical grouping
array subscript
function call & constructor structure
field or method selector, swizzler
postfix increment and decrement
prefix increment and decrement
unary
multiplicative
additive
bit-wise shift

©2019 The Khronos® Group Inc - Rev. 0219

N/A
L-R
R-L
L-R
L-R
L-R

7. < > <= >= relational
== !=
8.
equality
&
9.
bit-wise and
^
10.
bit-wise exclusive or
|
11.
bit-wise inclusive or
&&
12.
logical and
^^
13.
logical exclusive or
||
14.
logical inclusive or
selection (Selects an entire operand.
?:
15.
Use mix() to select individual
components of vectors.)
=
assignment
16. += -= *= /=
%= <<= >>= arithmetic assignments
&= ^= |=
,
17.
sequence

#pragma STDGL invariant(all) Force all output variables to be invariant

Order of Qualification [4.7]

L-R
L-R
L-R
L-R
L-R
L-R
L-R
L-R
L-R
L-R

When multiple qualifications are present, they must follow a
strict order. This order is either:
invariant, interpolation, storage, precision
or:
storage, parameter, precision

Vector Components [5.5]

In addition to array numeric subscript syntax, names of vector
components are denoted by a single letter. Components can be
swizzled and replicated, e.g.: pos.xx, pos.zy
{x, y, z, w} Use when accessing vectors that represent points or normals
{r, g, b, a} Use when accessing vectors that represent colors
{s, t, p, q} Use when accessing vectors that represent texture coordinates

L-R
L-R

khr.io/glesregistry

OpenGL ES Shading Language 3.0 API Quick Reference Guide
Aggregate Operations and Constructors
Matrix Constructor Examples [5.4.2]
mat2(float)
mat2(vec2, vec2);
mat2(float, float,
float, float);

// init diagonal
// column-major order
// column-major order

Structure Constructor Example [5.4.3]

struct light {
float intensity;
vec3 pos;
};
light lightVar = light(3.0, vec3(1.0, 2.0, 3.0));

Page 7

Matrix Components [5.6]

Access components of a matrix with array subscripting syntax.
For example:
mat4 m;
// m represents a matrix
m[1] = vec4(2.0); // sets second column to all 2.0
m[0][0] = 1.0;
// sets upper left element to 1.0
m[2][3] = 2.0;
// sets 4th element of 3rd column to 2.0

m = m * m;
// linear algebraic multiply
m = v * m;
// row vector * matrix linear algebraic multiply
m = m * v;
// matrix * column vector linear algebraic multiply
f = dot(v, v);
// vector dot product
v = cross(v, v); // vector cross product
m = matrixCompMult(m, m);
// component-wise multiply

Structure Operations [5.7]

Examples of operations on matrices and vectors:
m = f * m;
// scalar * matrix component-wise
v = f * v;
// scalar * vector component-wise
v = v * v;
// vector * vector component-wise
m = m +/- m;
// matrix component-wise +/-

Select structure fields using the period (.) operator. Valid operators
are:
.
== !=
=

(more examples ↗)

Array Operations [5.7]

Statements and Structure

Array elements are accessed using the array subscript operator
“[ ]”. For example:
diffuseColor += lightIntensity[3] * NdotL;

Iteration and Jumps [6]
Entry

void main()

Jump

break, continue, return
discard
// Fragment shader only

Iteration

for (;;) { break, continue }
while ( ) { break, continue }
do { break, continue } while ( );

Selection

if ( ) { }
if ( ) { } else { }
switch ( ) { break, case }

The size of an array can be determined using the .length() operator.
For example:
for (i = 0; i < a.length(); i++)
a[i] = 0.0;

Built-In Inputs, Outputs, and Constants [7]

Built-In Constants With Minimum Values [7.3]
Built-in Constant

Shader programs use special variables to communicate with fixed-function parts of the pipeline. Output special
variables may be read back after writing. Input special variables are read-only. All special variables have global scope.

gl_VertexID;
gl_InstanceID;

Outputs:
out gl_PerVertex {
vec4
gl_Position;
float
gl_PointSize;
};

// integer index
// instance number

// transformed vertex position in clip coordinates
// transformed point size in pixels (point rasterization only)

gl_FragCoord;
gl_FrontFacing;
gl_PointCoord;

// fragment position within frame buffer
// fragment belongs to a front-facing primitive
// 0.0 to 1.0 for each component

gl_FragDepth;

// depth range

As an aid to accessing OpenGL ES processing state, the following uniform
variables are built into the OpenGL ES Shading Language.
struct gl_DepthRangeParameters {
float near;
// n
float far;
// f
float diff;
// f - n
};
uniform gl_DepthRangeParameters gl_DepthRange;

Built-In Functions

Exponential Functions [8.2]

Component-wise operation. Parameters specified as angle are
assumed to be in units of radians. T is float, vec2, vec3, vec4.

T pow (T x, T y);

xy

T exp (T x);

ex

Angle & Trigonometry Functions [8.1]

256
16
15
16
32
16
224
4
-8
7

Built-In Uniform State [7.4]

Fragment Shader Special Variables [7.2]
Inputs:
highp vec4
bool
mediump vec2
Outputs:
highp float

Minimum value
16

const mediump int gl_MaxVertexAttribs
const mediump int gl_MaxVertexUniformVectors
const mediump int gl_MaxVertexOutputVectors
const mediump int gl_MaxFragmentInputVectors
const mediump int gl_MaxVertexTextureImageUnits
const mediump int gl_MaxCombinedTextureImageUnits
const mediump int gl_MaxTextureImageUnits
const mediump int gl_MaxFragmentUniformVectors
const mediump int gl_MaxDrawBuffers
const mediump int gl_MinProgramTexelOffset
const mediump int gl_MaxProgramTexelOffset

Vertex Shader Special Variables [7.1]
Inputs:
int
int

field selector
equality
assignment

Component-wise operation. T is float, vec2, vec3, vec4.

T mod(T x, T y);
T mod(T x, float y);
T modf(T x, out T i);

modulus

T
TI
TU
T
TI
TU

min(T x, T y);
min(TI x, TI y);
min(TU x, TU y);
min(T x, float y);
min(TI x, int y);
min(TU x, uint y);

minimum value

max(T x, T y);
max(TI x, TI y);
max(TU x, TU y);
max(T x, float y);
max(TI x, int y);
max(TU x, uint y);

maximum value

T radians (T degrees);

degrees to radians

T degrees (T radians);

radians to degrees

T log (T x);

ln

T sin (T angle);

sine

T exp2 (T x);

2x

T cos (T angle);

cosine

T log2 (T x);

log2

T tan (T angle);

tangent

T asin (T x);

arc sine

T acos (T x);

arc cosine

T atan (T y, T x);
T atan (T y_over_x);

arc tangent

T sinh (T x);

hyperbolic sine

T cosh (T x);

hyperbolic cosine

T tanh (T x);

hyperbolic tangent

T asinh (T x);

arc hyperbolic sine; inverse of sinh

T acosh (T x);

arc hyperbolic cosine; non-negative inverse of cosh

T atanh (T x);

arc hyperbolic tangent; inverse of tanh

T
TI
T inversesqrt (T x);
inverse square root
TU
T
Common Functions [8.3]
Component-wise operation. T is float and vecn, TI is int and ivecn, TI
TU is uint and uvecn, and TB is bool and bvecn, where n is 2, 3,
TU
or 4.
T
T abs(T x);
absolute value
TI
TI abs(TI x);
TU
T sign(T x);
returns -1.0, 0.0, or 1.0
T
TI sign(TI x);
TI
T floor(T x);
nearest integer <= x
TU
nearest integer a such that
T trunc (T x);
T
|a| <= |x|
T
round to nearest integer
T round (T x);
T
round to nearest integer
T roundEven (T x);
T sqrt (T x);

square root

T ceil(T x);

nearest integer >= x

T fract(T x);

x - floor(x)

clamp(TI x, T minVal, T maxVal);
clamp(V x, TI minVal, TI maxVal);
clamp(TU x, TU minVal, TU maxVal);
min(max(x, minVal), maxVal)
clamp(T x, float minVal, float maxVal);
clamp(TI x, int minVal, int maxVal);
clamp(TU x, uint minVal, uint maxVal);
mix(T x, T y, T a);
mix(T x, T y, float a);

linear blend of x and y

mix(T x, T y, TB a);

Selects vector source for each
returned component

T step(T edge, T x);
T step(float edge, T x);

0.0 if x < edge, else 1.0
(more Common Functions ↗)

©2019 The Khronos® Group Inc - Rev. 0219

khr.io/glesregistry

OpenGL ES Shading Language 3.0 API Quick Reference Guide
Built-In Functions (continued)
Common Functions (continued)
T smoothstep(T edge0, T edge1, T x);
T smoothstep(float edge0,
float edge1, T x);

clamp and smooth

TB isnan(T x);

true if x is a NaN

TB isinf(T x);

true if x is positive or negative
infinity

TI floatBitsToInt(T value);
TU floatBitsToUint(T value);

highp integer, preserving float
bit level representation

T intBitsToFloat(TI value);
T uintBitsToFloat(TU value);

highp float, preserving integer
bit level representation

Floating-point Pack and Unpack Functions [8.4]
uint packSnorm2x16(vec2 v);
uint packUnorm2x16(vec2 v);

convert two floats to fixed point and pack
into an integer

vec2 unpackSnorm2x16(uint p);
unpack fixed point value pair into floats
vec2 unpackUnorm2x16(uint p);
uint packHalf2x16(vec2 v);
vec2 unpackHalf2x16(uint v);

convert two floats into half-precision floats
and pack into an integer
unpack half value pair into full floats

Geometric Functions [8.5]

These functions operate on vectors as vectors, not
component-wise. T is float, vec2, vec3, vec4.
float length(T x);

length of vector

float distance(T p0, T p1);

distance between points

float dot(T x, T y);

dot product

vec3 cross(vec3 x, vec3 y);

cross product

T normalize(T x);

normalize vector to length 1

T faceforward(T N, T I, T Nref); returns N if dot(Nref, I) < 0, else -N
T reflect(T I, T N);

reflection direction I - 2 * dot(N,I) * N

T refract(T I, T N, float eta);

refraction vector

Matrix Functions [8.6]

Type mat is any matrix type.
mat matrixCompMult(mat x, mat y);

multiply x by y component-wise

mat2 outerProduct(vec2 c, vec2 r);
linear algebraic column vector *
mat3 outerProduct(vec3 c, vec3 r);
row vector
mat4 outerProduct(vec4 c, vec4 r);
mat2x3 outerProduct(vec3 c, vec2 r);
mat3x2 outerProduct(vec2 c, vec3 r);
mat2x4 outerProduct(vec4 c, vec2 r); linear algebraic column vector *
mat4x2 outerProduct(vec2 c, vec4 r);
row vector
mat3x4 outerProduct(vec4 c, vec3 r);
mat4x3 outerProduct(vec3 c, vec4 r);
mat2 transpose(mat2 m);
mat3 transpose(mat3 m);
mat4 transpose(mat4 m);
mat2x3 transpose(mat3x2 m);
mat3x2 transpose(mat2x3 m);
mat2x4 transpose(mat4x2 m);
mat4x2 transpose(mat2x4 m);
mat3x4 transpose(mat4x3 m);
mat4x3 transpose(mat3x4 m);

transpose of matrix m

float
float
float

determinant of matrix m

determinant(mat2 m);
determinant(mat3 m);
determinant(mat4 m);

mat2 inverse(mat2 m);
mat3 inverse(mat3 m);
mat4 inverse(mat4 m);

inverse of matrix m

Page 8

Vector Relational Functions [8.7]

Compare x and y component-wise. Input and return vector sizes for
a particular call must match. Type bvec is bvecn; vec is vecn; ivec is
ivecn; uvec is uvecn; (where n is 2, 3, or 4). T is union of vec and ivec.
bvec lessThan(T x, T y);
xy

bvec greaterThanEqual(T x, T y);
x >= y
bvec greaterThanEqual(uvec x, uvec y);
bvec equal(T x, T y);
bvec equal(bvec x, bvec y);
bvec equal(uvec x, uvec y);

x == y

bvec notEqual(T x, T y);
bvec notEqual(bvec x, bvec y);
bvec notEqual(uvec x, uvec y);

x!= y

bool any(bvec x);

true if any component of x is true

bool all(bvec x);

true if all components of x are true

bvec not(bvec x);

logical complement of x

Texture Lookup Functions [8.8]

Texture Lookup Functions (continued)
gvec4 textureLodOffset(gsampler2D sampler, vec2 P, float lod, ivec2 offset);
gvec4 textureLodOffset(gsampler3D sampler, vec3 P, float lod, ivec3 offset);
float textureLodOffset(sampler2DShadow sampler, vec3 P, float lod,
ivec2 offset);
gvec4 textureLodOffset(gsampler2DArray sampler, vec3 P, float lod,
ivec2 offset);
gvec4
gvec4
gvec4
float

textureProjLod(gsampler2D sampler, vec3 P, float lod);
textureProjLod(gsampler2D sampler, vec4 P, float lod);
textureProjLod(gsampler3D sampler, vec4 P, float lod);
textureProjLod(sampler2DShadow sampler, vec4 P, float lod);

gvec4
gvec4
gvec4
float

textureProjLodOffset(gsampler2D sampler, vec3 P, float lod, ivec2 offset);
textureProjLodOffset(gsampler2D sampler, vec4 P, float lod, ivec2 offset);
textureProjLodOffset(gsampler3D sampler, vec4 P, float lod, ivec3 offset);
textureProjLodOffset(sampler2DShadow sampler, vec4 P, float lod,
ivec2 offset);

gvec4
gvec4
gvec4
float
float

textureGrad(gsampler2D sampler, vec2 P, vec2 dPdx, vec2 dPdy);
textureGrad(gsampler3D sampler, vec3 P, vec3 dPdx, vec3 dPdy);
textureGrad(gsamplerCube sampler, vec3 P, vec3 dPdx, vec3 dPdy);
textureGrad(sampler2DShadow sampler, vec3 P, vec2 dPdx, vec2 dPdy);
textureGrad(samplerCubeShadow sampler, vec4 P, vec3 dPdx,
vec3 dPdy);
gvec4 textureGrad(gsampler2DArray sampler, vec3 P, vec2 dPdx, vec2 dPdy);
float textureGrad(sampler2DArrayShadow sampler, vec4 P, vec2 dPdx,
vec2 dPdy);

The function textureSize returns the dimensions of level lod for the
texture bound to sampler, as described in [2.11.9] of the OpenGL ES
3.0 specification, under “Texture Size Query”. The initial “g” in a type gvec4
name is a placeholder for nothing, “i”, or “u”.
gvec4
highp ivec{2,3} textureSize(gsampler{2,3}D sampler, int lod);
highp ivec2
textureSize(gsamplerCube sampler, int lod);
float
highp ivec2
textureSize(sampler2DShadow sampler, int lod);
highp ivec2
textureSize(samplerCubeShadow sampler, int lod);
gvec4
highp ivec3
textureSize(gsampler2DArray sampler, int lod);
highp ivec3
textureSize(sampler2DArrayShadow sampler, int lod);
float
Texture lookup functions using samplers are available to vertex and
fragment shaders. The initial “g” in a type name is a placeholder for
nothing, “i”, or “u”.
gvec4
gvec4
float
float
gvec4
float

texture(gsampler{2,3}D sampler, vec{2,3} P [, float bias]);
texture(gsamplerCube sampler, vec3 P [, float bias]);
texture(sampler2DShadow sampler, vec3 P [, float bias]);
texture(samplerCubeShadow sampler, vec4 P [, float bias]);
texture(gsampler2DArray sampler, vec3 P [, float bias]);
texture(sampler2DArrayShadow sampler, vec4 P);

gvec4 textureProj(gsampler2D sampler, vec{3,4} P [, float bias]);
gvec4 textureProj(gsampler3D sampler, vec4 P [, float bias]);
float textureProj(sampler2DShadow sampler, vec4 P [, float bias]);
gvec4
gvec4
float
gvec4

textureLod(gsampler{2,3}D sampler, vec{2,3} P, float lod);
textureLod(gsamplerCube sampler, vec3 P, float lod);
textureLod(sampler2DShadow sampler, vec3 P, float lod);
textureLod(gsampler2DArray sampler, vec3 P, float lod);

gvec4
gvec4
float
gvec4

textureOffset(gsampler2D sampler, vec2 P, ivec2 offset [, float bias]);
textureOffset(gsampler3D sampler, vec3 P, ivec3 offset [, float bias]);
textureOffset(sampler2DShadow sampler, vec3 P, ivec2 offset [, float bias]);
textureOffset(gsampler2DArray sampler, vec3 P, ivec2 offset [, float bias]);

gvec4
gvec4
gvec4
float

textureGradOffset(gsampler2D sampler, vec2 P, vec2 dPdx, vec2 dPdy,
ivec2 offset);
textureGradOffset(gsampler3D sampler, vec3 P, vec3 dPdx, vec3 dPdy,
ivec3 offset);
textureGradOffset(sampler2DShadow sampler, vec3 P, vec2 dPdx,
vec2 dPdy, ivec2 offset);
textureGradOffset(gsampler2DArray sampler, vec3 P, vec2 dPdx,
vec2 dPdy, ivec2 offset);
textureGradOffset(sampler2DArrayShadow sampler, vec4 P,
vec2 dPdx, vec2 dPdy, ivec2 offset);
textureProjGrad(gsampler2D sampler, vec3 P, vec2 dPdx, vec2 dPdy);
textureProjGrad(gsampler2D sampler, vec4 P, vec2 dPdx, vec2 dPdy);
textureProjGrad(gsampler3D sampler, vec4 P, vec3 dPdx, vec3 dPdy);
textureProjGrad(sampler2DShadow sampler, vec4 P, vec2 dPdx,
vec2 dPdy);

gvec4 textureProjGradOffset(gsampler2D sampler, vec3 P, vec2 dPdx,
vec2 dPdy, ivec2 offset);
gvec4 textureProjGradOffset(gsampler2D sampler, vec4 P, vec2 dPdx,
vec2 dPdy, ivec2 offset);
gvec4 textureProjGradOffset(gsampler3D sampler, vec4 P, vec3 dPdx,
vec3 dPdy, ivec3 offset);
float textureProjGradOffset(sampler2DShadow sampler, vec4 P, vec2 dPdx,
vec2 dPdy, ivec2 offset);

Fragment Processing Functions [8.9]
Approximated using local differencing.
T dFdx(T p);
Derivative in x
T dFdy(T p);

Derivative in y

T fwidth(T p);

abs (dFdx (p)) + abs (dFdy (p));

gvec4 texelFetch(gsampler2D sampler, ivec2 P, int lod);
gvec4 texelFetch(gsampler3D sampler, ivec3 P, int lod);
gvec4 texelFetch(gsampler2DArray sampler, ivec3 P, int lod);
gvec4 texelFetchOffset(gsampler2D sampler, ivec2 P, int lod, ivec2 offset);
gvec4 texelFetchOffset(gsampler3D sampler, ivec3 P, int lod, ivec3 offset);
gvec4 texelFetchOffset(gsampler2DArray sampler, ivec3 P, int lod, ivec2 offset);
gvec4
gvec4
gvec4
float

textureProjOffset(gsampler2D sampler, vec3 P, ivec2 offset [, float bias]);
textureProjOffset(gsampler2D sampler, vec4 P, ivec2 offset [, float bias]);
textureProjOffset(gsampler3D sampler, vec4 P, ivec3 offset [, float bias]);
textureProjOffset(sampler2DShadow sampler, vec4 P, ivec2 offset [,
float bias]);

WebGL and OpenGL ES are trademarks of Khronos Group. The Khronos Group is an
industry consortium creating open standards for the authoring and acceleration of
parallel computing, graphics and dynamic media on a wide variety of platforms and
devices.
See khronos.org to learn about the Khronos Group. See khronos.org/webgl to learn
about WebGL. See khronos.org/opengles to learn about OpenGL ES.

©2019 The Khronos® Group Inc - Rev. 0219

Reference card production by Miller & Mattson www.millermattson.com

khr.io/glesregistry



---

Source Exif Data:

File Type                       : PDF
File Type Extension             : pdf
MIME Type                       : application/pdf
PDF Version                     : 1.5
Linearized                      : No
Has XFA                         : No
Language                        : en-US
Tagged PDF                      : Yes
XMP Toolkit                     : Adobe XMP Core 5.6-c016 91.163616, 2018/10/29-16:58:49
Create Date                     : 2019:02:23 07:42:35-08:00
Metadata Date                   : 2019:02:23 07:46:51-08:00
Modify Date                     : 2019:02:23 07:46:51-08:00
Creator Tool                    : Adobe InDesign CC 13.0 (Macintosh)
Instance ID                     : uuid:62e79fcb-177b-1341-85eb-40d2c927e19c
Original Document ID            : xmp.did:3195D91657CDDD11841EF19E5A285EBE
Document ID                     : xmp.id:3eb429c3-0370-419a-bf42-1362ae6eb175
Rendition Class                 : proof:pdf
Derived From Instance ID        : xmp.iid:764c6207-66bf-4ad5-b209-1ad1a1327aa9
Derived From Document ID        : xmp.did:d3389a7e-7f58-41f2-982e-c498beb25d9d
Derived From Original Document ID: xmp.did:3195D91657CDDD11841EF19E5A285EBE
Derived From Rendition Class    : default
History Action                  : converted
History Parameters              : from application/x-indesign to application/pdf
History Software Agent          : Adobe InDesign CC 13.0 (Macintosh)
History Changed                 : /
History When                    : 2019:02:23 07:42:35-08:00
Format                          : application/pdf
Producer                        : Adobe PDF Library 15.0
Trapped                         : False
Page Count                      : 8
Creator                         : Adobe InDesign CC 13.0 (Macintosh)

EXIF Metadata provided by EXIF.tools