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. • [n.n.n] refers to sections in the WebGL 1.0 specification.
• [n.n.n] refers to sections in the WebGL 2.0 specification.
The WebGL 2 specification shows differences from the WebGL 1 specification.
Both WebGL specifications are available at khronos.org/webgl. Unless otherwise • Content in blue is newly added with WebGL 2.0.
specified, the behavior of each method is defined by the OpenGL ES 3.0 • Content in purple or marked with • has no corresponding OpenGL ES 3.0 function.
specification. The OpenGL ES specification is at khr.io/glesregistry.

Interfaces WebGLObject [5.3] WebGLQuery [3.2] Created by createQuery, made active by

This is the parent interface for all WebGL resource objects: beginQuery, concluded by endQuery,
WebGLContextAttributes [5.2] destroyed by deleteQuery
This interface contains requested drawing surface attributes WebGLBuffer [5.4] Created by createBuffer, bound by bindBuffer,
and is passed as the second parameter to getContext. Some destroyed by deleteBuffer WebGLSampler [3.3] Created by createSampler, bound
of these are optional requests and may be ignored by an by bindSampler, destroyed by
WebGLFramebuffer [5.5] Created by createFramebuffer, bound deleteSampler
implementation. by bindFramebuffer, destroyed by
alpha Default: true deleteFramebuffer WebGLSync [3.4] Created by fenceSync, blocked on by
If true, requests a drawing buffer with an alpha channel for the clientWaitSync, waited on internal GL
purposes of performing OpenGL destination alpha operations WebGLProgram [5.6] Created by createProgram, used by
by waitSync, queried by getSynciv,
and compositing with the page. useProgram, destroyed by deleteProgram
destroyed by deleteSync
depth Default: true WebGLRenderbuffer [5.7] Created by createRenderbuffer, bound
If true, requests drawing buffer with a depth buffer of at least by bindRenderbuffer, destroyed by WebGLTransformFeedback Created by createTransformFeedback,
16 bits. Must obey. deleteRenderbuffer [3.5] bound by bindTransformFeedback,
destroyed by deleteTransformFeedback
stencil Default: false WebGLShader [5.8] Created by createShader, attached to program
If true, requests a stencil buffer of at least 8 bits. Must obey. by attachShader, destroyed by deleteShader WebGLVertexArrayObject Created by createVertexArray,
antialias Default: true [3.6] bound by bindVertexArray,
If true, requests drawing buffer with antialiasing using its choice WebGLTexture [5.9] Created by createTexture, bound by destroyed by deleteVertexArray
of technique (multisample/supersample) and quality. Must obey. bindTexture, destroyed by deleteTexture
premultipliedAlpha Default: true WebGLUniformLocation Location of a uniform variable in a shader
If true, requests drawing buffer which contains colors with [5.10] program.
premultiplied alpha. (Ignored if alpha is false.)
preserveDrawingBuffer Default: false
WebGLActiveInfo [5.11] Information returned from calls to
getActiveAttrib and getActiveUniform. The
WebGL Context Creation [2.1]
If true, requests that contents of the drawing buffer remain read-only attributes are: To use WebGL, the author must obtain a WebGL rendering
in between frames, at potential performance cost. May have int size enum type DOMstring name context for a given HTMLCanvasElement. This context
significant performance implications on some hardware. manages the OpenGL state and renders to the drawing buffer.
WebGLShaderPrecision- Information returned from calls to [canvas].getContext(
preferLowPowerToHighPerformance Default: false Format [5.12] getShaderPrecisionFormat.
Provides a hint suggesting that implementation create a context "webgl", WebGLContextAttributes? optionalAttribs)
that optimizes for power consumption over performance. The read-only attributes are:
Returns a WebGL 1.0 rendering context
int rangeMin
failIfMajorPerformanceCaveat Default: false int rangeMax [canvas].getContext(
If true, context creation will fail if the performance of the int precision "webgl2", WebGLContextAttributes? optionalAttribs)
created WebGL context would be dramatically lower than that Returns a WebGL 2.0 rendering context
of a native application making equivalent OpenGL calls.

Per-Fragment Operations [5.14.3] ArrayBuffer and Typed Arrays [5.13] ViewType(ArrayBuffer buffer, [optional] ulong byteOffset,
[optional] ulong length);
void blendColor(clampf red, clampf green, clampf blue, Data is transferred to WebGL using ArrayBuffer and views.
Buffers represent unstructured binary data, which can be Create a new view of given buffer, starting at optional byte
clampf alpha); offset, extending for optional length elements.
modified using one or more typed array views. Consult the
void blendEquation(enum mode); ECMAScript specification for more details on Typed Arrays. buffer: Read-only, buffer backing this view
mode: See modeRGB for blendEquationSeparate byteOffset: Read-only, byte offset of view start in buffer
void blendEquationSeparate(enum modeRGB, Buffers length: Read-only, number of elements in this view
enum modeAlpha); ArrayBuffer(ulong byteLength);
byteLength: read-only, length of view in bytes. Other Properties
modeRGB, and modeAlpha: FUNC_ADD, FUNC_SUBTRACT,
FUNC_REVERSE_SUBTRACT Creates a new buffer. To modify the data, create one or more byteLength: Read-only, length of view in bytes.
views referencing it. const ulong BYTES_PER_ELEMENT: element size in bytes.
void blendFunc(enum sfactor, enum dfactor);
sfactor: Same as for dfactor, plus SRC_ALPHA_SATURATE Views Methods
dfactor: ZERO, ONE, [ONE_MINUS_]SRC_COLOR, In the following, ViewType may be Int8Array, Int16Array,
[ONE_MINUS_]DST_COLOR, [ONE_MINUS_]SRC_ALPHA, view[i] = get/set element i
[ONE_MINUS_]DST_ALPHA, [ONE_MINUS_]CONSTANT_COLOR,
Int32Array, Uint8Array, Uint16Array, Uint32Array, Float32Array.
set(ViewType other[, ulong offset]);
[ONE_MINUS_]CONSTANT_ALPHA ViewType(ulong length);
sfactor and dfactor may not both reference constant color Creates a view and a new underlying buffer. set(type[] other[, ulong offset]);
length: Read-only, number of elements in this view. Replace elements in this view with those from other, starting
void blendFuncSeparate(enum srcRGB, enum dstRGB, at optional offset.
enum srcAlpha, enum dstAlpha); ViewType(ViewType other);
srcRGB, srcAlpha: See sfactor for blendFunc Creates new underlying buffer and copies other array. ViewType subArray(long begin[, long end]);
dstRGB, dstAlpha: See dfactor for blendFunc Return a subset of this view, referencing the same underlying
ViewType(type[] other); buffer.
void depthFunc(enum func); Creates new underlying buffer and copies other array.
func: NEVER, ALWAYS, LESS, [NOT]EQUAL, {GE, LE}QUAL, GREATER
void sampleCoverage(float value, bool invert);
void stencilFunc(enum func, int ref, uint mask); Buffer Objects [5.14.5] [3.7.3] void bufferData(enum target, BufferDataSource data,
enum usage);
func: NEVER, ALWAYS, LESS, LEQUAL, [NOT]EQUAL, GREATER, Once bound, buffers may not be rebound with a different target.
GEQUAL target and usage: Same as for bufferData above
void bindBuffer(enum target, WebGLBuffer? buffer); void bufferSubData(enum target, long offset,
void stencilFuncSeparate(enum face, enum func, int ref, target: ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER,
uint mask); PIXEL_[UN]PACK_BUFFER, COPY_{READ, WRITE}_BUFFER, BufferDataSource data);
face: FRONT, BACK, FRONT_AND_BACK TRANSFORM_FEEDBACK_BUFFER, UNIFORM_BUFFER target: See target for bindBuffer
func: NEVER, ALWAYS, LESS, LEQUAL, [NOT]EQUAL, GREATER, void bufferSubData(enum target, intptr dstByteOffset,
GEQUAL typedef (ArrayBuffer or ArrayBufferView) BufferDataSource
ArrayBufferView srcData, uint srcOffset[, uint length=0]);
void stencilOp(enum fail, enum zfail, enum zpass); void bufferData(enum target, long size, enum usage); target: See target for bindBuffer
fail, zfail, and zpass: KEEP, ZERO, REPLACE, INCR, DECR, INVERT, target: See target for bindBuffer void copyBufferSubData(enum readTarget, enum writeTarget,
INCR_WRAP, DECR_WRAP usage: STREAM_{DRAW, READ, COPY}, STATIC_{DRAW, READ, COPY},
DYNAMIC_{DRAW, READ, COPY} intptr readOffset, intptr writeOffset, sizeiptr size);
void stencilOpSeparate(enum face, enum fail, enum zfail,
enum zpass); void bufferData(enum target, ArrayBufferView srcData, • void getBufferSubData(enum target, intptr srcByteOffset,
face: FRONT, BACK, FRONT_AND_BACK enum usage, uint srcOffset[, uint length=0]); ArrayBufferView dstBuffer[, uint dstOffset=0[,
fail, zfail, and zpass: See fail, zfail, and zpass for stencilOp target and usage: Same as for bufferData above uint length=0]]);

©2019 The Khronos® Group Inc - Rev. 0619 www.khronos.org/webgl

WebGL 2.0 API Quick Reference Guide Page 2
Buffer Objects (continued) Special Functions [5.13.3] [3.7.2] MAX_TRANSFORM_FEEDBACK_INTERLEAVED_COMPONENTS,
MAX_TRANSFORM_FEEDBACK_SEPARATE_COMPONENTS,
Object createBuffer(); • contextStruct getContextAttributes() [5.13.2] MAX_TRANSFORM_FEEDBACK_SEPARATE_ATTRIBS,
Corresponding OpenGL ES function is GenBuffers MAX_UNIFORM_BLOCK_SIZE,
void disable(enum cap); MAX_UNIFORM_BUFFER_BINDINGS,
void deleteBuffer(WebGLBuffer? buffer); cap: BLEND, CULL_FACE, DEPTH_TEST, DITHER, MAX_{CUBE_MAP_TEXTURE, RENDERBUFFER, TEXTURE}_SIZE,
POLYGON_OFFSET_FILL, SAMPLE_ALPHA_TO_COVERAGE, MAX_VARYING_{COMPONENTS, VECTORS},
any getBufferParameter(enum target, enum pname); SAMPLE_COVERAGE, SCISSOR_TEST, STENCIL_TEST MAX_VERTEX_{ATTRIBS, TEXTURE_IMAGE_UNITS},
target: See target for bindBuffer MAX_VERTEX_UNIFORM_{BLOCKS, COMPONENTS, VECTORS},
pname: BUFFER_SIZE, BUFFER_USAGE void enable(enum cap);
cap: See cap for disable MAX_VIEWPORT_DIMS, PACK_ALIGNMENT,
bool isBuffer(WebGLBuffer? buffer); MIN_PROGRAM_TEXEL_OFFSET, PACK_ROW_LENGTH,
void finish(); [5.13.11] PACK_SKIP_{PIXELS, ROWS}, PIXEL_[UN]PACK_BUFFER_BINDING,
void flush(); [5.13.11] POLYGON_OFFSET_{FACTOR, FILL, UNITS},
RASTERIZER_DISCARD, READ_{BUFFER, FRAMEBUFFER_BINDING},
Detect and Enable Extensions [5.14] enum getError(); RENDERBUFFER_BINDING, RENDERER, SAMPLE_BUFFERS,
• string[ ] getSupportedExtensions(); Returns: OUT_OF_MEMORY, INVALID_{ENUM, OPERATION, SAMPLE_[ALPHA_TO_]COVERAGE,
FRAMEBUFFER_OPERATION, VALUE}, NO_ERROR, SAMPLE_COVERAGE_{INVERT, VALUE}, SAMPLES,
• object getExtension(string name); CONTEXT_LOST_WEBGL SCISSOR_{BOX, TEST}, SHADING_LANGUAGE_VERSION,
Available in the WebGLRenderingContext interface. STENCIL_{BITS, CLEAR_VALUE, TEST},
any getParameter(enum pname);
pname: {ALPHA, RED, GREEN, BLUE, SUBPIXEL}_BITS, STENCIL_[BACK_]{FAIL, FUNC, REF, VALUE_MASK, WRITEMASK},
Get information about the context STENCIL_[BACK_]PASS_DEPTH_{FAIL, PASS},
ACTIVE_TEXTURE, ALIASED_{LINE_WIDTH, POINT_SIZE}_RANGE,
• contextStruct getContextAttributes(); ARRAY_BUFFER_BINDING, BLEND_DST_{ALPHA, RGB}, TEXTURE_BINDING_{2D, CUBE_MAP, 3D,_2D_ARRAY},
BLEND_EQUATION_{ALPHA, RGB}, BLEND_SRC_{ALPHA, RGB}, TRANSFORM_FEEDBACK_{ACTIVE, BINDING, BUFFER_BINDING},
Set and get state BLEND[_COLOR], COLOR_{CLEAR_VALUE, WRITEMASK}, TRANSFORM_FEEDBACK_PAUSED, UNIFORM_BUFFER_BINDING,
Calls in this group behave identically to their OpenGL ES COPY_{READ, WRITE}_BUFFER_BINDING, UNIFORM_BUFFER_OFFSET_ALIGNMENT, UNPACK_ALIGNMENT,
counterparts unless otherwise noted. Source and destination [NUM_]COMPRESSED_TEXTURE_FORMATS, CULL_FACE[_MODE], UNPACK_{COLORSPACE_CONVERSION_WEBGL, FLIP_Y_WEBGL,
factors may not both reference constant color. CURRENT_PROGRAM, DEPTH_{BITS, CLEAR_VALUE, FUNC}, PREMULTIPLY_ALPHA_WEBGL},
DEPTH_{RANGE, TEST, WRITEMASK}, DRAW_BUFFERi, UNPACK_IMAGE_HEIGHT, UNPACK_ROW_LENGTH,
DRAW_FRAMEBUFFER_BINDING, UNPACK_SKIP_{IMAGES, PIXELS, ROWS},
ELEMENT_ARRAY_BUFFER_BINDING, DITHER, VENDOR, VERSION, VIEWPORT, VERTEX_ARRAY_BINDING
Programs and Shaders [5.14.9] [3.7.7] FRAMEBUFFER_BINDING, FRONT_FACE, any getIndexedParameter(enum target, uint index);
Shaders are loaded with a source string (shaderSource), FRAGMENT_SHADER_DERIVATIVE_HINT, target: TRANSFORM_FEEDBACK_BUFFER_{BINDING, SIZE, START},
compiled (compileShader), attached to a program GENERATE_MIPMAP_HINT, LINE_WIDTH, UNIFORM_BUFFER_{BINDING, SIZE, START}
(attachShader), linked (linkProgram), then used (useProgram). MAX_3D_TEXTURE_SIZE, MAX_ARRAY_TEXTURE_LAYERS,
MAX_CLIENT_WAIT_TIMEOUT_WEBGL, void hint(enum target, enum mode);
[WebGLHandlesContextLoss] int getFragDataLocation( MAX_COLOR_ATTACHMENTS, target: GENERATE_MIPMAP_HINT
WebGLProgram program, DOMString name); MAX_COMBINED_FRAGMENT_UNIFORM_COMPONENTS, hint: FASTEST, NICEST, DONT_CARE
void attachShader(Object program, Object shader); MAX_[COMBINED_]TEXTURE_IMAGE_UNITS, bool isEnabled(enum cap);
MAX_COMBINED_UNIFORM_BLOCKS, cap: RASTERIZER_DISCARD Also see cap for disable
void bindAttribLocation(Object program, uint index, MAX_COMBINED_VERTEX_UNIFORM_COMPONENTS,
string name); MAX_DRAW_BUFFERS, MAX_ELEMENT_INDEX, void pixelStorei(enum pname, int param);
MAX_ELEMENTS_{INDICES, VERTICES}, pname: PACK_ALIGNMENT, PACK_ROW_LENGTH,
void compileShader(Object shader); MAX_FRAGMENT_INPUT_COMPONENTS, PACK_SKIP_{PIXELS, ROWS}, UNPACK_ALIGNMENT,
UNPACK_COLORSPACE_CONVERSION_WEBGL,
Object createProgram(); MAX_FRAGMENT_UNIFORM_{BLOCKS, COMPONENTS}, UNPACK_{FLIP_Y_WEBGL, PREMULTIPLY_ALPHA_WEBGL},
MAX_PROGRAM_TEXEL_OFFSET, MAX_SAMPLES, UNPACK_IMAGE_HEIGHT, UNPACK_ROW_LENGTH,
Object createShader(enum type); MAX_SERVER_WAIT_TIMEOUT, MAX_TEXTURE_LOD_BIAS, UNPACK_SKIP_{PIXELS, ROWS, IMAGES}
type: VERTEX_SHADER, FRAGMENT_SHADER
void deleteProgram(Object program);
void deleteShader(Object shader); Rasterization [5.13.3] Writing to the Draw Buffer [5.14.11] [3.7.9]
void detachShader(Object program, Object shader); void cullFace(enum mode); When rendering is directed to drawing buffer, OpenGL ES
mode: BACK, FRONT, FRONT_AND_BACK rendering calls cause the drawing buffer to be presented to the
Object[ ] getAttachedShaders(Object program); HTML page compositor at start of next compositing operation.
void frontFace(enum mode);
any getProgramParameter(WebGLProgram? program, mode: CCW, CW void drawArrays(enum mode, int first, sizei count);
enum pname); void lineWidth(float width); mode: POINTS, LINE_STRIP, LINE_LOOP, LINES, TRIANGLE_STRIP,
Corresponding OpenGL ES function is GetProgramiv TRIANGLE_FAN, TRIANGLES
void polygonOffset(float factor, float units); first: May not be a negative value.
pname: DELETE_STATUS, LINK_STATUS, VALIDATE_STATUS,
ATTACHED_SHADERS, ACTIVE_{ATTRIBUTES, UNIFORMS}, void drawElements(enum mode, sizei count, enum type,
ACTIVE_UNIFORM_BLOCKS , intptr offset);
TRANSFORM_FEEDBACK_BUFFER_MODE, mode: POINTS, LINE_STRIP, LINE_LOOP, LINES, TRIANGLE_STRIP,
TRANSFORM_FEEDBACK_VARYINGS
View and Clip [5.13.3 - 5.13.4] TRIANGLE_FAN, TRIANGLES
type: UNSIGNED_BYTE, UNSIGNED_SHORT
string getProgramInfoLog(Object program); The viewport specifies the affine transformation of x and y from
any getShaderParameter(Object shader, enum pname); normalized device coordinates to window coordinates. Drawing void clear(bitfield mask);
Corresponding OpenGL ES function is GetShaderiv buffer size is determined by the HTMLCanvasElement. void vertexAttribDivisor(uint index, uint divisor);
pname: SHADER_TYPE, DELETE_STATUS, COMPILE_STATUS void depthRange(float zNear, float zFar); void drawArraysInstanced(enum mode, int first, sizei count,
zNear: Clamped to the range 0 to 1 Must be <= zFar sizei instanceCount);
string getShaderInfoLog(Object shader); zFar: Clamped to the range 0 to 1.
string getShaderSource(Object shader); void scissor(int x, int y, long width, long height); void drawElementsInstanced(enum mode, sizei count,
enum type, intptr offset, sizei instanceCount);
bool isProgram(Object program); void viewport(int x, int y, long width, long height);
bool isShader(Object shader); void drawRangeElements(enum mode, uint start, uint end,
sizei count, enum type, intptr offset);
void linkProgram(Object program);
void shaderSource(Object shader, string source);
void useProgram(Object program);
Detect context lost events [5.13.13]
bool isContextLost();
void validateProgram(Object program);

any getUniform(WebGLProgram? program, uint location); void uniformMatrix[234]fv(WebGLUniformLocation? location,

bool transpose, Float32List data[, uint srcOffset=0[,
WebGLUniformLocation? getUniformLocation( uint srcLength=0]]);
Object program, string name);
void uniformMatrix[234]x[234]fv(
Uniforms and Attributes [5.14.10] [3.7.8] any getVertexAttrib(uint index, enum pname);
pname: CURRENT_VERTEX_ATTRIB ,
WebGLUniformLocation? location, bool transpose,
Values used by the shaders are passed in as a uniform of vertex Float32List data[, uint srcOffset=0[, uint srcLength=0]]);
VERTEX_ATTRIB_ARRAY_{BUFFER_BINDING, ENABLED},
attributes. VERTEX_ATTRIB_ARRAY_{NORMALIZED, SIZE, STRIDE, TYPE}, void vertexAttrib[1234]f(uint index, ...);
void disableVertexAttribArray(uint index); VERTEX_ATTRIB_ARRAY_{INTEGER, DIVISOR}
index: [0, MAX_VERTEX_ATTRIBS - 1] void vertexAttrib[1234]fv(uint index, Array value);
long getVertexAttribOffset(uint index, enum pname);
void enableVertexAttribArray(uint index); Corresponding OpenGL ES function is GetVertexAttribPointerv void vertexAttribI4[u]i[v](uint index, ...);
index: [0, MAX_VERTEX_ATTRIBS - 1] pname: VERTEX_ATTRIB_ARRAY_POINTER void vertexAttribPointer(uint index, int size, enum type,
WebGLActiveInfo? getActiveAttrib(WebGLProgram program, void uniform[1234]fv(WebGLUniformLocation? location, bool normalized, long stride, long offset);
uint index); type: BYTE, SHORT, UNSIGNED_{BYTE, SHORT}, FIXED, FLOAT
Float32List data[, uint srcOffset=0[, uint srcLength=0]]); index: [0, MAX_VERTEX_ATTRIBS - 1]
WebGLActiveInfo? getActiveUniform( void uniform[1234]iv(WebGLUniformLocation? location, stride: [0, 255]
WebGLProgram program, uint index); Int32List data[, uint srcOffset=0[, uint srcLength=0]]); offset, stride: must be a multiple of the type size in WebGL
int getAttribLocation(WebGLProgram program, string name); void uniform[1234]uiv(WebGLUniformLocation? location, void vertexAttribIPointer(uint index, int size, enum type,
Uint32List data[, uint srcOffset=0[, uint srcLength=0]]); sizei stride, intptr offset);

©2019 The Khronos® Group Inc - Rev. 0619 www.khronos.org/webgl

WebGL 2.0 API Quick Reference Guide Page 3
Vertex Array Objects [3.7.17] Read Back Pixels [5.14.12] [3.7.10] Framebuffer Objects [5.14.6] [3.7.4]
VAOs encapsulate all state related to the definition of data Read pixels in current framebuffer into ArrayBufferView object. Framebuffer objects provide an alternative rendering target to
used by the vertex processor. void readPixels(int x, int y, void readPixels(int x, int y, the drawing buffer.
void bindVertexArray( long width, long height, sizei width, sizei height, void bindFramebuffer(enum target,
WebGLVertexArrayObject? vertexArray); enum format, enum type, enum format, enum type, WebGLFramebuffer? framebuffer);
WebGLVertexArrayObject? createVertexArray(); ArrayBufferView pixels); ArrayBufferView dstData, target: [READ_, DRAW_]FRAMEBUFFER
format: RGBA uint dstOffset);
void deleteVertexArray( type: UNSIGNED_BYTE [WebGLHandlesContextLoss] enum
WebGLVertexArrayObject? vertexArray); void readPixels(int x, int y, checkFramebufferStatus(enum target);
sizei width, sizei height, target: [READ_, DRAW_]FRAMEBUFFER
[WebGLHandlesContextLoss] boolean isVertexArray( enum format, enum type, Returns: FRAMEBUFFER_{COMPLETE, UNSUPPORTED},
WebGLVertexArrayObject? vertexArray); intptr offset); FRAMEBUFFER_INCOMPLETE_{ATTACHMENT, DIMENSIONS,
MULTISAMPLE, MISSING_ATTACHMENT},
FRAMEBUFFER_UNDEFINED
Object createFramebuffer();
Texture Objects [5.14.8] [3.7.6] void texSubImage2D(enum target, int level, int xoffset,
int yoffset, sizei width, sizei height, enum format, Corresponding OpenGL ES function is GenFramebuffers
Texture objects provide storage and state for texturing operations.
WebGL adds an error for operations relating to the currently bound enum type, ArrayBufferView srcData, uint srcOffset);
void deleteFramebuffer(Object buffer);
texture if no texture is bound. void texSubImage2D(enum target, int level, int xoffset,
int yoffset, sizei width, sizei height, enum format, void framebufferRenderbuffer(enum target,
void activeTexture(enum texture) [5.14.3] enum type, TexImageSource source); enum attachment, enum renderbuffertarget,
texture: [TEXTURE0..TEXTUREi] where i = WebGLRenderbuffer renderbuffer);
MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1 void texSubImage2D(enum target, int level, int xoffset, target: FRAMEBUFFER
void bindTexture(enum target, WebGLTexture? texture); int yoffset, sizei width, sizei height, enum format, attachment: COLOR_ATTACHMENT0, COLOR_ATTACHMENTn
target: TEXTURE_{2D, 3D, 2D_ARRAY}, TEXTURE_CUBE_MAP enum type, intptr offset); where n may be an integer from 1 to 15,
void texStorage2D(enum target, sizei levels, {DEPTH, STENCIL, DEPTH_STENCIL}_ATTACHMENT
void copyTexImage2D(enum target, int level, renderbuffertarget: RENDERBUFFER
enum internalformat, int x, int y, long width, enum internalformat, sizei width, sizei height);
long height, int border); void texStorage3D(enum target, sizei levels, bool isFramebuffer(WebGLFramebuffer framebuffer);
target: TEXTURE_2D, TEXTURE_CUBE_MAP_POSITIVE_{X,Y,Z} enum internalformat, sizei width, sizei height, sizei depth); void framebufferTexture2D(enum target, enum attachment,
TEXTURE_CUBE_MAP_NEGATIVE_{X,Y,Z}, TEXTURE_3D, texStorage3D may have lower memory costs than texImage3D enum textarget, WebGLTexture texture, int level);
TEXTURE_2D_ARRAY in some implementations and should be considered a preferred target and attachment: Same as for framebufferRenderbuffer
internalformat: See Tables 3.12, 3.13, 3.14 in the OpenGL ES 3 textarget: TEXTURE_2D, TEXTURE_CUBE_MAP_POSITIVE{X, Y, Z},
specification alternative to allocate three-dimensional textures.
TEXTURE_CUBE_MAP_NEGATIVE{X, Y, Z},
void copyTexSubImage2D(enum target, int level, void texImage3D(enum target, int level, int internalformat,
int xoffset, int yoffset, int x, int y, long width, sizei width, sizei height, sizei depth, int border, any getFramebufferAttachmentParameter(enum target,
long height); enum format, enum type, ArrayBufferView? srcData); enum attachment, enum pname);
target and attachment: Same as for framebufferRenderbuffer
target: See target for copyTexImage2D void texImage3D(enum target, int level, int internalformat, pname: FRAMEBUFFER_ATTACHMENT_OBJECT_{TYPE, NAME},
Object createTexture(); sizei width, sizei height, sizei depth, int border, FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL,
Corresponding OpenGL ES function is GenTextures enum format, enum type, ArrayBufferView srcData, FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE,
uint srcOffset); FRAMEBUFFER_ATTACHMENT_{ALPHA, BLUE, GREEN, RED}_SIZE,
void deleteTexture(Object texture); void texImage3D(enum target, int level, int internalformat,
FRAMEBUFFER_ATTACHMENT_COLOR_ENCODING,
FRAMEBUFFER_ATTACHMENT_COMPONENT_TYPE,
void generateMipmap(enum target); sizei width, sizei height, sizei depth, int border, FRAMEBUFFER_ATTACHMENT_{DEPTH, STENCIL}_SIZE,
target: see target for bindTexture enum format, enum type, TexImageSource source); FRAMEBUFFER_ATTACHMENT_TEXTURE_LAYER
any getTexParameter(enum target, enum pname); void texImage3D(enum target, int level, int internalformat, void blitFramebuffer(int srcX0, int srcY0, int srcX1, int srcY1,
target: TEXTURE_2D, TEXTURE_CUBE_MAP sizei width, sizei height, sizei depth, int border, int dstX0, int dstY0, int dstX1, int dstY1, bitfield mask,
pname: TEXTURE_BASE_LEVEL, enum format, enum type, intptr offset); enum filter);
TEXTURE_COMPARE_{FUNC, MODE},
TEXTURE_IMMUTABLE_{FORMAT, LEVELS}, void texSubImage3D(enum target, int level, int xoffset, void framebufferTextureLayer(enum target,
TEXTURE_MAX_{LEVEL, LOD}, TEXTURE_MIN_LOD, int yoffset, int zoffset, sizei width, sizei height, sizei depth, enum attachment, WebGLTexture? texture, int level,
TEXTURE_{MIN, MAG}_FILTER, TEXTURE_WRAP_{R, S, T} enum format, enum type, ArrayBufferView? srcData int layer);
bool isTexture(Object texture); [, uint srcOffset=0]);
void invalidateFramebuffer(enum target,
void texImage2D(enum target, int level, void texSubImage3D(enum target, int level, int xoffset, sequence<enum> attachments);
enum internalformat, long width, long height, int yoffset, int zoffset, sizei width, sizei height, sizei depth,
enum format, enum type, TexImageSource source); void invalidateSubFramebuffer (enum target,
int border, enum format, enum type, sequence<enum> attachments, int x, int y, sizei width,
ArrayBufferView? pixels); void texSubImage3D(enum target, int level, int xoffset, sizei height);
The following values apply to all variations of texImage2D. int yoffset, int zoffset, sizei width, sizei height, sizei depth,
enum format, enum type, intptr offset); void readBuffer(enum src);
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,
enum type, ArrayBufferView srcData, uint srcOffset);
ArrayBufferView srcData[, uint srcOffset=0[, Renderbuffer Objects [5.14.7] [3.7.5]
uint srcLengthOverride=0]]); Renderbuffer objects are used to provide storage for the
[throws] void texImage2D(enum target, int level, void compressedTexSubImage2D(enum target, int level, individual buffers used in a framebuffer object.
int internalformat, sizei width, sizei height, int border, int xoffset, int yoffset, sizei width, sizei height, enum format,
enum format, enum type, TexImageSource source); void bindRenderbuffer(enum target, Object renderbuffer);
ArrayBufferView srcData[, uint srcOffset=0[, target: RENDERBUFFER
void texImage2D(enum target, int level, int internalformat, uint srcLengthOverride=0]]);
sizei width, sizei height, int border, enum format, Object createRenderbuffer();
void compressedTexImage3D(enum target, int level,
enum type, intptr offset); enum internalformat, sizei width, sizei height, sizei depth, Corresponding OpenGL ES function is GenRenderbuffers
void texParameterf(enum target, enum pname, float param); int border, ArrayBufferView srcData[, uint srcOffset=0[, void deleteRenderbuffer(Object renderbuffer);
target: TEXTURE_2D, TEXTURE_CUBE_MAP uint srcLengthOverride=0]]);
pname: TEXTURE_BASE_LEVEL, void compressedTexSubImage3D(enum target, int level, any getRenderbufferParameter(enum target, enum pname);
TEXTURE_COMPARE_{FUNC, MODE}, target: RENDERBUFFER
int xoffset, int yoffset, int zoffset, sizei level, sizei level, pname: RENDERBUFFER_{WIDTH, HEIGHT, INTERNAL_FORMAT},
TEXTURE_MAX_{LEVEL, LOD}, TEXTURE_{MIN, MAG}_FILTER, sizei depth, enum format, ArrayBufferView srcData[,
TEXTURE_MIN_LOD, TEXTURE_WRAP_{R, S, T} RENDEDRBUFFER_{RED, GREEN, BLUE, ALPHA, DEPTH}_SIZE,
uint srcOffset=0[,uint srcLengthOverride=0]]); RENDERBUFFER_STENCIL_SIZE, RENDERBUFFER_SAMPLES
void texParameteri(enum target, enum pname, int param); void compressedTexImage2D(enum target, int level,
target: TEXTURE_2D, TEXTURE_CUBE_MAP any getInternalformatParameter(enum target,
pname: See pname for getTexParameter enum internalformat, sizei width, sizei height, int border, enum internalformat, enum pname);
sizei imageSize, intptr offset); pname: SAMPLES
void texSubImage2D(enum target, int level, int xoffset,
int yoffset, long width, long height, enum format, void compressedTexSubImage2D(enum target, int level, bool isRenderbuffer(Object renderbuffer);
enum type, ArrayBufferView? pixels); int xoffset, int yoffset, sizei width, sizei height, void renderbufferStorage(enum target,
enum format, sizei imageSize, intptr offset); enum internalformat, sizei width, sizei height);
Following values apply to all variations of texSubImage2D.
void compressedTexImage3D(enum target, int level, target: RENDERBUFFER
target: See target for copyTexImage2D enum internalformat, sizei width, sizei height, sizei depth, internalformat: Accepts internal formats from OpenGL ES 3.0, as
format and type: See format and type for texImage2D well as DEPTH_STENCIL
object: See object for texImage2D int border, sizei imageSize, intptr offset);
texStorage2D may have lower memory costs than texImage2D void compressedTexSubImage3D(enum target, int level, void renderbufferStorageMultisample(enum target,
in some implementations and should be considered a preferred int xoffset, int yoffset, int zoffset, width, sizei height, sizei samples, enum internalformat, sizei width,
alternative to texImage2D. sizei depth, enum format, sizei imageSize, intptr offset); sizei height);

©2019 The Khronos® Group Inc - Rev. 0619 www.khronos.org/webgl

WebGL 2.0 API Quick Reference Guide Page 4
Whole Framebuffer Operations [5.14.3] Query Objects [3.7.12] Sync Objects [3.7.14]
void clear(bitfield mask); WebGLQuery? createQuery(); Synchronize execution between the GL server and the client.
mask: Bitwise OR of {COLOR, DEPTH, STENCIL}_BUFFER_BIT WebGLSync? fenceSync(enum condition, bitfield flags)
void deleteQuery(WebGLQuery? query);
void clearColor(clampf red, clampf green, clampf blue, [WebGLHandlesContextLoss] boolean isQuery( [WebGLHandlesContextLoss] boolean isSync(
clampf alpha); WebGLQuery? query); WebGLSync? sync);
void clearDepth(float depth); void deleteSync(WebGLSync? sync);
depth: Clamped to the range 0 to 1. void beginQuery(enum target, WebGLQuery query);
void endQuery(enum target) enum clientWaitSync(WebGLSync sync, bitfield flags,
void clearStencil(int s); uint64 timeout);
void colorMask(bool red, bool green, bool blue, bool alpha); WebGLQuery? getQuery(enum target, enum pname); flags: SYNC_FLUSH_COMMANDS_BIT
target: ANY_SAMPLES_PASSED[_CONSERVATIVE],
void depthMask(bool flag); TRANSFORM_FEEDBACK_PRIMITIVES_WRITTEN void waitSync(WebGLSync sync, bitfield flags, int64 timeout);
pname: CURRENT_QUERY timeout: TIMEOUT_IGNORED
void stencilMask(uint mask);
void stencilMaskSeparate(enum face, uint mask); any getQueryParameter(WebGLQuery query, enum pname); any getSyncParameter(WebGLSync sync, enum pname);
pname: QUERY_RESULT[_AVAILABLE] pname: OBJECT_TYPE, SYNC_{CONDITION, FLAGS, STATUS}
face: FRONT, BACK, FRONT_AND_BACK

Multiple Render Targets [3.7.11]

void drawBuffers(sequence<GLenum> buffers); Uniform Buffer Objects [3.7.16]
void clearBufferfv(enum buffer, int drawbuffer, Provides the storage for named uniform blocks.
Float32List values[, uint srcOffset=0]);
void bindBufferBase(enum target, uint index,
void clearBufferiv(enum buffer, int drawbuffer, WebGLBuffer? buffer);
Int32List values[, uint srcOffset=0]);
void bindBufferRange(enum target, uint index,
void clearBufferuiv(enum buffer, int drawbuffer, Transform Feedback [3.7.15] WebGLBuffer? buffer, intptr offset, sizeiptr size);
Uint32List values[, uint srcOffset=0]); Captures output variable values written by the vertex shader.
sequence<uint>? getUniformIndices(
void clearBufferfi(enum buffer, int drawbuffer, float depth, WebGLTransformFeedback? createTransformFeedback(); WebGLProgram program,
int stencil); sequence<DOMString> uniformNames);
void deleteTransformFeedback(
Use the function based on the color buffer type: WebGLTransformFeedback? transformFeedback); any getActiveUniforms(WebGLProgram program,
clearBufferfv: floating point; clearBufferfv: fixed point sequence<uint> uniformIndices, enum pname);
clearBufferiv: signed integer clearBufferiv: signed integer; [WebGLHandlesContextLoss] boolean isTransformFeedback( pname: UNIFORM_{BLOCK_INDEX, SIZE, TYPE, OFFSET},
clearBufferfi: DEPTH_STENCIL buffers WebGLTransformFeedback? transformFeedback); UNIFORM_{ARRAY, MATRIX}_STRIDE,
void bindTransformFeedback(enum target, UNIFORM_IS_ROW_MAJOR
WebGLTransformFeedback? transformFeedback); uint getUniformBlockIndex(WebGLProgram program,
Sampler Objects [3.7.13] void beginTransformFeedback(enum primitiveMode); DOMString uniformBlockName);
WebGLSampler? createSampler(); void endTransformFeedback(); any getActiveUniformBlockParameter(
WebGLProgram program, uint uniformBlockIndex,
void deleteSampler(WebGLSampler? sampler); void pauseTransformFeedback(); enum pname);
[WebGLHandlesContextLoss] boolean isSampler( void resumeTransformFeedback(); pname: UNIFORM_BLOCK_{BINDING, DATA_SIZE},
WebGLSampler? sampler); UNIFORM_BLOCK_ACTIVE_UNIFORMS,
void transformFeedbackVaryings(WebGLProgram program, UNIFORM_BLOCK_ACTIVE_UNIFORM_INDICES,
void bindSampler(uint unit, WebGLSampler? sampler); sequence<DOMString> varyings, enum bufferMode); UNIFORM_BLOCK_REFERENCED_BY_VERTEX_SHADER,
void samplerParameteri(WebGLSampler sampler, WebGLActiveInfo? getTransformFeedbackVarying( UNIFORM_BLOCK_REFERENCED_BY_FRAGMENT_SHADER
enum pname, int param); WebGLProgram program, uint index); DOMString? getActiveUniformBlockName(
void samplerParameterf(WebGLSampler sampler, WebGLProgram program, uint uniformBlockIndex);
enum pname, float param); void uniformBlockBinding(WebGLProgram program,
pname: TEXTURE_COMPARE_{FUNC, MODE}, uint uniformBlockIndex, uint uniformBlockBinding);
TEXTURE_MAG_FILTER, TEXTURE_MAX_LOD,
TEXTURE_MIN_{FILTER, LOD}, TEXTURE_WRAP_{R, S, T}
any getSamplerParameter(WebGLSampler sampler,
enum pname);
pname: See pname for samplerParameterf

OpenGL Texture Object and Sampler State

Sampler Parameters (mutable)

TEXTURE_COMPARE_{FUNC,MODE}
TEXTURE_{MAX,MIN}_LOD
T 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. 0619 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 Texture
Internal Format Format Type Renderable Filterable
R8 RED UNSIGNED_BYTE Y Y
R8_SNORM RED BYTE Y
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 Y
RG8_SNORM RG BYTE Y
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 Y
SRGB8 RGB UNSIGNED_BYTE Y
RGB565 RGB UNSIGNED_BYTE, UNSIGNED_SHORT_5_6_5 Y Y
RGB8_SNORM RGB BYTE Y
R11F_G11F_B10F RGB UNSIGNED_INT_10F_11F_11F_REV, HALF_FLOAT, FLOAT Y Y
RGB9_E5 RGB UNSIGNED_INT_5_9_9_9_REV, HALF_FLOAT, FLOAT Y
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 Y
UNSIGNED_BYTE, UNSIGNED_SHORT_5_5_5_1,
RGB5_A1 RGBA Y Y
UNSIGNED_INT_2_10_10_10_REV
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. 0619 www.khronos.org/webgl

OpenGL ES Shading Language 3.0 API Quick Reference Guide Page 6
The OpenGL® ES Shading Language is two closely- Preprocessor [3.4]
related languages which are used to create shaders for Preprocessor Directives
the vertex and fragment processors contained in the The number sign (#) can be immediately preceded or followed in its line by spaces or horizontal tabs.
WebGL, OpenGL, and OpenGL ES processing pipelines. # #define #undef #if #ifdef #ifndef #else
WebGL 2.0 is based on OpenGL ES 3.0. #elif #endif #error #pragma #extension #line
Examples of Preprocessor Directives
[n.n.n] and [Table n.n] refer to sections and tables • “#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
in the OpenGL ES Shading Language 3.0 specification at as targeting version 1.00.
www.khronos.org/registry/gles/ • #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)
Types [4.1] Predefined Macros
A shader can aggregate these using arrays and structures to build
more complex types. There are no pointer types. __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 Parameter Qualifiers [4.4]
vec2, vec3, vec4 n-component floating point vector Input values are copied in at function call time, output values are
Storage Qualifiers [4.3] copied out at function return time.
bvec2, bvec3, bvec4 Boolean vector Variable declarations may be preceded by one storage
qualifier. none (Default) same as in
ivec2, ivec3, ivec4 signed integer vector none (Default) local read/write memory, or input parameter
Compile-time constant, or read-only function in For function parameters passed into a function
uvec2, uvec3, uvec4 unsigned integer vector const
parameter For function parameters passed back out of a function, but
mat2, mat3, mat4 2x2, 3x3, 4x4 float matrix out
in not initialized for use when passed in
mat2x2, mat2x3, mat2x4 2x2, 2x3, 2x4 float matrix Linkage into a shader from a previous stage
centroid in
inout For function parameters passed both into and out of a function
mat3x2, mat3x3, mat3x4 3x2, 3x3, 3x4 float matrix out
Linkage out of a shader to a subsequent stage
centroid out
mat4x2, mat4x3, mat4x4 4x2, 4x3, 4x4 float matrix
Value does not change across the primitive being Precision and Precision Qualifiers [4.5]
uniform processed, uniforms form the linkage between a Any floating point, integer, or sampler declaration can have the
Floating Point Sampler Types (opaque) shader, OpenGL ES, and the application type preceded by one of these precision qualifiers:
sampler2D, sampler3D access a 2D or 3D texture The following interpolation qualifiers for shader outputs
and inputs may procede in, centroid in, out, or highp Satisfies minimum requirements for the vertex language.
samplerCube access cube mapped texture
centroid out. Range and precision is between that provided by lowp
samplerCubeShadow access cube map depth texture with comparison mediump
smooth Perspective correct interpolation and highp.
sampler2DShadow access 2D depth texture with comparison flat No interpolation Range and precision can be less than mediump, but still
lowp
sampler2DArray access 2D array texture represents all color values for any color channel.
Interface Blocks [4.3.7]
sampler2DArrayShadow access 2D array depth texture with comparison Uniform variable declarations can be grouped into named Ranges and precisions for precision qualifiers (FP=floating point):
interface blocks, for example: FP Magnitude Integer Range
Signed Integer Sampler Types (opaque) uniform Transform { FP Range Range FP Precision Signed Unsigned
mat4 ModelViewProjectionMatrix;
isampler2D, isampler3D access an integer 2D or 3D texture uniform mat3 NormalMatrix; // restatement of qualifier highp (−2126 , 2127) 0.0, (2–126 , 2127) Relative 2–24 [−231, 231 −1] [0, 232 −1]
isamplerCube access integer cube mapped texture float Deformation;
} mediump (−214 , 214) (2–14 , 214) Relative 2–10 [−215, 215 −1] [0, 216 −1]
isampler2DArray access integer 2D array texture
Layout Qualifiers [4.3.8] lowp (−2, 2) (2–8 , 2) Absolute 2–8 [−27, 27 −1] [0, 28 −1]
Unsigned Integer Sampler Types (opaque) layout(layout-qualifier) block-declaration A precision statement establishes a default precision qualifier for
usampler2D, usampler3D access unsigned integer 2D or 3D texture layout(layout-qualifier) in/out/uniform subsequent int, float, and sampler declarations, e.g.:
layout(layout-qualifier) in/out/uniform
usamplerCube access unsigned integer cube mapped texture declaration precision highp int;

usampler2DArray access unsigned integer 2D array texture Input Layout Qualifiers [4.3.8.1] Invariant Qualifiers Examples [4.6]
For all shader stages:
location = integer-constant #pragma STDGL invariant(all) Force all output variables to be invariant
Structures and Arrays [4.1.8, 4.1.9]
Structures struct type-name { Output Layout Qualifiers [4.3.8.2] invariant gl_Position; Qualify a previously declared variable
members For all shader stages:
} struct-name[]; // optional variable declaration, invariant centroid out
// optionally an array
location = integer-constant vec3 Color;
Qualify as part of a variable declaration

Arrays float foo[3]; Uniform Block Layout Qualifiers [4.3.8.3]

Structures, blocks, and structure members can be arrays. Layout qualifier identifiers for uniform blocks:
Only 1-dimensional arrays supported. Order of Qualification [4.7]
shared, packed, std140, {row, column}_major When multiple qualifications are present, they must follow a
strict order. This order is either:
invariant, interpolation, storage, precision
Operators and Expressions 7. < > <= >= relational L-R or:
Operators [5.1] Numbered in order of precedence. The 8. == != equality L-R storage, parameter, precision
relational and equality operators > < <= >= == != evaluate to a 9. & bit-wise and L-R
Boolean. To compare vectors component-wise, use functions 10. ^ bit-wise exclusive or L-R
such as lessThan(), equal(), etc. [8.7].
11. | bit-wise inclusive or L-R
Operator Description Assoc.
12. && logical and L-R Vector Components [5.5]
1. () parenthetical grouping N/A 13. ^^ logical exclusive or L-R In addition to array numeric subscript syntax, names of vector
[] array subscript 14. || logical inclusive or L-R
components are denoted by a single letter. Components can be
() function call & constructor structure swizzled and replicated, e.g.: pos.xx, pos.zy
2. L-R selection (Selects an entire operand.
. field or method selector, swizzler {x, y, z, w} Use when accessing vectors that represent points or normals
++ -- postfix increment and decrement 15. ?: Use mix() to select individual L-R
components of vectors.) {r, g, b, a} Use when accessing vectors that represent colors
++ -- prefix increment and decrement
3. R-L = assignment L-R {s, t, p, q} Use when accessing vectors that represent texture coordinates
+ - ~ ! unary
4. * % / multiplicative L-R 16. += -= *= /=
%= <<= >>= arithmetic assignments L-R
5. + - additive L-R &= ^= |=
6. << >> bit-wise shift L-R 17. , sequence L-R

©2019 The Khronos® Group Inc - Rev. 0619 khr.io/glesregistry

OpenGL ES Shading Language 3.0 API Quick Reference Guide Page 7
Aggregate Operations and Constructors Matrix Components [5.6]
Access components of a matrix with array subscripting syntax.
m = m * m;
m = v * m;
// linear algebraic multiply
// row vector * matrix linear algebraic multiply
Matrix Constructor Examples [5.4.2] For example: m = m * v; // matrix * column vector linear algebraic multiply
mat2(float) // init diagonal mat4 m; // m represents a matrix
mat2(vec2, vec2); // column-major order f = dot(v, v); // vector dot product
m[1] = vec4(2.0); // sets second column to all 2.0 v = cross(v, v); // vector cross product
mat2(float, float,
m[0][0] = 1.0; // sets upper left element to 1.0 m = matrixCompMult(m, m); // component-wise multiply
float, float); // column-major order
m[2][3] = 2.0; // sets 4th element of 3rd column to 2.0
Structure Constructor Example [5.4.3] Structure Operations [5.7]
struct light { Examples of operations on matrices and vectors: Select structure fields using the period (.) operator. Valid operators
float intensity; m = f * m; // scalar * matrix component-wise are:
vec3 pos; v = f * v; // scalar * vector component-wise
}; . field selector
light lightVar = light(3.0, vec3(1.0, 2.0, 3.0)); v = v * v; // vector * vector component-wise == != equality
m = m +/- m; // matrix component-wise +/-
= assignment
(more examples ↗)
Array Operations [5.7]
Statements and Structure Array elements are accessed using the array subscript operator
“[ ]”. For example:
Iteration and Jumps [6]
diffuseColor += lightIntensity[3] * NdotL;
Entry void main() Jump break, continue, return
discard // Fragment shader only The size of an array can be determined using the .length() operator.
For example:
Iteration for (;;) { break, continue } Selection if ( ) { } for (i = 0; i < a.length(); i++)
while ( ) { break, continue } if ( ) { } else { } a[i] = 0.0;
do { break, continue } while ( ); switch ( ) { break, case }

Built-In Inputs, Outputs, and Constants [7] Built-In Constants With Minimum Values [7.3]
Shader programs use special variables to communicate with fixed-function parts of the pipeline. Output special Built-in Constant Minimum value
variables may be read back after writing. Input special variables are read-only. All special variables have global scope. const mediump int gl_MaxVertexAttribs 16
Vertex Shader Special Variables [7.1] const mediump int gl_MaxVertexUniformVectors 256
Inputs: const mediump int gl_MaxVertexOutputVectors 16
int gl_VertexID; // integer index const mediump int gl_MaxFragmentInputVectors 15
int gl_InstanceID; // instance number const mediump int gl_MaxVertexTextureImageUnits 16
const mediump int gl_MaxCombinedTextureImageUnits 32
Outputs: const mediump int gl_MaxTextureImageUnits 16
out gl_PerVertex { const mediump int gl_MaxFragmentUniformVectors 224
vec4 gl_Position; // transformed vertex position in clip coordinates const mediump int gl_MaxDrawBuffers 4
float gl_PointSize; // transformed point size in pixels (point rasterization only) const mediump int gl_MinProgramTexelOffset -8
const mediump int gl_MaxProgramTexelOffset 7
};
Built-In Uniform State [7.4]
Fragment Shader Special Variables [7.2] As an aid to accessing OpenGL ES processing state, the following uniform
Inputs: variables are built into the OpenGL ES Shading Language.
highp vec4 gl_FragCoord; // fragment position within frame buffer struct gl_DepthRangeParameters {
bool gl_FrontFacing; // fragment belongs to a front-facing primitive float near; // n
mediump vec2 gl_PointCoord; // 0.0 to 1.0 for each component float far; // f
Outputs: float diff; // f - n
highp float gl_FragDepth; // depth range };
uniform gl_DepthRangeParameters gl_DepthRange;

Built-In Functions Exponential Functions [8.2] T mod(T x, T y);

Component-wise operation. T is float, vec2, vec3, vec4. T mod(T x, float y); modulus
Angle & Trigonometry Functions [8.1]
Component-wise operation. Parameters specified as angle are T modf(T x, out T i);
T pow (T x, T y); xy
assumed to be in units of radians. T is float, vec2, vec3, vec4. T min(T x, T y);
T exp (T x); ex TI min(TI x, TI y);
T radians (T degrees); degrees to radians
T log (T x); ln TU min(TU x, TU y);
T degrees (T radians); radians to degrees minimum value
T min(T x, float y);
T sin (T angle); sine T exp2 (T x); 2x
TI min(TI x, int y);
T cos (T angle); cosine T log2 (T x); log2 TU min(TU x, uint y);
T tan (T angle); tangent T sqrt (T x); square root T max(T x, T y);
T asin (T x); arc sine TI max(TI x, TI y);
T inversesqrt (T x); inverse square root TU max(TU x, TU y);
T acos (T x); arc cosine maximum value
Common Functions [8.3] T max(T x, float y);
T atan (T y, T x); Component-wise operation. T is float and vecn, TI is int and ivecn, TI max(TI x, int y);
arc tangent TU is uint and uvecn, and TB is bool and bvecn, where n is 2, 3,
T atan (T y_over_x); TU max(TU x, uint y);
or 4.
T sinh (T x); hyperbolic sine T clamp(TI x, T minVal, T maxVal);
T abs(T x); absolute value
TI abs(TI x); TI clamp(V x, TI minVal, TI maxVal);
T cosh (T x); hyperbolic cosine
TU clamp(TU x, TU minVal, TU maxVal);
T sign(T x); returns -1.0, 0.0, or 1.0 min(max(x, minVal), maxVal)
T tanh (T x); hyperbolic tangent TI sign(TI x); T clamp(T x, float minVal, float maxVal);
T asinh (T x); arc hyperbolic sine; inverse of sinh TI clamp(TI x, int minVal, int maxVal);
T floor(T x); nearest integer <= x
TU clamp(TU x, uint minVal, uint maxVal);
T acosh (T x); arc hyperbolic cosine; non-negative inverse of cosh nearest integer a such that
T trunc (T x); T mix(T x, T y, T a);
|a| <= |x| linear blend of x and y
T atanh (T x); arc hyperbolic tangent; inverse of tanh T mix(T x, T y, float a);
T round (T x); round to nearest integer
Selects vector source for each
T roundEven (T x); round to nearest integer T mix(T x, T y, TB a); returned component
T ceil(T x); nearest integer >= x T step(T edge, T x);
0.0 if x < edge, else 1.0
T fract(T x); x - floor(x) T step(float edge, T x);
(more Common Functions ↗)

©2019 The Khronos® Group Inc - Rev. 0619 khr.io/glesregistry

OpenGL ES Shading Language 3.0 API Quick Reference Guide Page 8
Vector Relational Functions [8.7] Texture Lookup Functions (continued)
Built-In Functions (continued) Compare x and y component-wise. Input and return vector sizes for
Common Functions (continued) a particular call must match. Type bvec is bvecn; vec is vecn; ivec is gvec4 textureLodOffset(gsampler2D sampler, vec2 P, float lod, ivec2 offset);
ivecn; uvec is uvecn; (where n is 2, 3, or 4). T is union of vec and ivec. gvec4 textureLodOffset(gsampler3D sampler, vec3 P, float lod, ivec3 offset);
T smoothstep(T edge0, T edge1, T x);
bvec lessThan(T x, T y); float textureLodOffset(sampler2DShadow sampler, vec3 P, float lod,
T smoothstep(float edge0, clamp and smooth x<y
float edge1, T x); bvec lessThan(uvec x, uvec y); ivec2 offset);
gvec4 textureLodOffset(gsampler2DArray sampler, vec3 P, float lod,
TB isnan(T x); true if x is a NaN bvec lessThanEqual(T x, T y);
x <= y ivec2 offset);
true if x is positive or negative bvec lessThanEqual(uvec x, uvec y);
TB isinf(T x); gvec4 textureProjLod(gsampler2D sampler, vec3 P, float lod);
infinity
bvec greaterThan(T x, T y);
TI floatBitsToInt(T value); x>y gvec4 textureProjLod(gsampler2D sampler, vec4 P, float lod);
highp integer, preserving float bvec greaterThan(uvec x, uvec y);
TU floatBitsToUint(T value); bit level representation gvec4 textureProjLod(gsampler3D sampler, vec4 P, float lod);
bvec greaterThanEqual(T x, T y); float textureProjLod(sampler2DShadow sampler, vec4 P, float lod);
T intBitsToFloat(TI value); highp float, preserving integer x >= y
T uintBitsToFloat(TU value); bit level representation bvec greaterThanEqual(uvec x, uvec y);
gvec4 textureProjLodOffset(gsampler2D sampler, vec3 P, float lod, ivec2 offset);
bvec equal(T x, T y); gvec4 textureProjLodOffset(gsampler2D sampler, vec4 P, float lod, ivec2 offset);
Floating-point Pack and Unpack Functions [8.4] bvec equal(bvec x, bvec y); x == y gvec4 textureProjLodOffset(gsampler3D sampler, vec4 P, float lod, ivec3 offset);
uint packSnorm2x16(vec2 v); convert two floats to fixed point and pack bvec equal(uvec x, uvec y); float textureProjLodOffset(sampler2DShadow sampler, vec4 P, float lod,
uint packUnorm2x16(vec2 v); into an integer ivec2 offset);
bvec notEqual(T x, T y);
vec2 unpackSnorm2x16(uint p); bvec notEqual(bvec x, bvec y); x!= y
unpack fixed point value pair into floats gvec4 textureGrad(gsampler2D sampler, vec2 P, vec2 dPdx, vec2 dPdy);
vec2 unpackUnorm2x16(uint p); bvec notEqual(uvec x, uvec y); gvec4 textureGrad(gsampler3D sampler, vec3 P, vec3 dPdx, vec3 dPdy);
convert two floats into half-precision floats gvec4 textureGrad(gsamplerCube sampler, vec3 P, vec3 dPdx, vec3 dPdy);
uint packHalf2x16(vec2 v); bool any(bvec x); true if any component of x is true
and pack into an integer float textureGrad(sampler2DShadow sampler, vec3 P, vec2 dPdx, vec2 dPdy);
bool all(bvec x); true if all components of x are true float textureGrad(samplerCubeShadow sampler, vec4 P, vec3 dPdx,
vec2 unpackHalf2x16(uint v); unpack half value pair into full floats
bvec not(bvec x); logical complement of x vec3 dPdy);
gvec4 textureGrad(gsampler2DArray sampler, vec3 P, vec2 dPdx, vec2 dPdy);
Geometric Functions [8.5]
These functions operate on vectors as vectors, not Texture Lookup Functions [8.8] float textureGrad(sampler2DArrayShadow sampler, vec4 P, vec2 dPdx,
component-wise. T is float, vec2, vec3, vec4. The function textureSize returns the dimensions of level lod for the vec2 dPdy);
texture bound to sampler, as described in [2.11.9] of the OpenGL ES
float length(T x); length of vector 3.0 specification, under “Texture Size Query”. The initial “g” in a type gvec4 textureGradOffset(gsampler2D sampler, vec2 P, vec2 dPdx, vec2 dPdy,
name is a placeholder for nothing, “i”, or “u”. ivec2 offset);
float distance(T p0, T p1); distance between points
highp ivec{2,3} textureSize(gsampler{2,3}D sampler, int lod); gvec4 textureGradOffset(gsampler3D sampler, vec3 P, vec3 dPdx, vec3 dPdy,
float dot(T x, T y); dot product highp ivec2 textureSize(gsamplerCube sampler, int lod); ivec3 offset);
highp ivec2 textureSize(sampler2DShadow sampler, int lod); float textureGradOffset(sampler2DShadow sampler, vec3 P, vec2 dPdx,
vec3 cross(vec3 x, vec3 y); cross product vec2 dPdy, ivec2 offset);
highp ivec2 textureSize(samplerCubeShadow sampler, int lod);
T normalize(T x); normalize vector to length 1 highp ivec3 textureSize(gsampler2DArray sampler, int lod); gvec4 textureGradOffset(gsampler2DArray sampler, vec3 P, vec2 dPdx,
highp ivec3 textureSize(sampler2DArrayShadow sampler, int lod); vec2 dPdy, ivec2 offset);
T faceforward(T N, T I, T Nref); returns N if dot(Nref, I) < 0, else -N float textureGradOffset(sampler2DArrayShadow sampler, vec4 P,
T reflect(T I, T N); reflection direction I - 2 * dot(N,I) * N Texture lookup functions using samplers are available to vertex and vec2 dPdx, vec2 dPdy, ivec2 offset);
fragment shaders. The initial “g” in a type name is a placeholder for
T refract(T I, T N, float eta); refraction vector nothing, “i”, or “u”. gvec4 textureProjGrad(gsampler2D sampler, vec3 P, vec2 dPdx, vec2 dPdy);
gvec4 textureProjGrad(gsampler2D sampler, vec4 P, vec2 dPdx, vec2 dPdy);
gvec4 texture(gsampler{2,3}D sampler, vec{2,3} P [, float bias]); gvec4 textureProjGrad(gsampler3D sampler, vec4 P, vec3 dPdx, vec3 dPdy);
Matrix Functions [8.6] gvec4 texture(gsamplerCube sampler, vec3 P [, float bias]);
Type mat is any matrix type. float textureProjGrad(sampler2DShadow sampler, vec4 P, vec2 dPdx,
float texture(sampler2DShadow sampler, vec3 P [, float bias]);
vec2 dPdy);
mat matrixCompMult(mat x, mat y); multiply x by y component-wise float texture(samplerCubeShadow sampler, vec4 P [, float bias]);
gvec4 texture(gsampler2DArray sampler, vec3 P [, float bias]); gvec4 textureProjGradOffset(gsampler2D sampler, vec3 P, vec2 dPdx,
mat2 outerProduct(vec2 c, vec2 r); float texture(sampler2DArrayShadow sampler, vec4 P); vec2 dPdy, ivec2 offset);
linear algebraic column vector *
mat3 outerProduct(vec3 c, vec3 r); gvec4 textureProjGradOffset(gsampler2D sampler, vec4 P, vec2 dPdx,
row vector
mat4 outerProduct(vec4 c, vec4 r); gvec4 textureProj(gsampler2D sampler, vec{3,4} P [, float bias]); vec2 dPdy, ivec2 offset);
gvec4 textureProj(gsampler3D sampler, vec4 P [, float bias]); gvec4 textureProjGradOffset(gsampler3D sampler, vec4 P, vec3 dPdx,
mat2x3 outerProduct(vec3 c, vec2 r); float textureProj(sampler2DShadow sampler, vec4 P [, float bias]); vec3 dPdy, ivec3 offset);
mat3x2 outerProduct(vec2 c, vec3 r);
gvec4 textureLod(gsampler{2,3}D sampler, vec{2,3} P, float lod); float textureProjGradOffset(sampler2DShadow sampler, vec4 P, vec2 dPdx,
mat2x4 outerProduct(vec4 c, vec2 r); linear algebraic column vector *
mat4x2 outerProduct(vec2 c, vec4 r); row vector gvec4 textureLod(gsamplerCube sampler, vec3 P, float lod); vec2 dPdy, ivec2 offset);
mat3x4 outerProduct(vec4 c, vec3 r); float textureLod(sampler2DShadow sampler, vec3 P, float lod);
mat4x3 outerProduct(vec3 c, vec4 r); gvec4 textureLod(gsampler2DArray sampler, vec3 P, float lod); Fragment Processing Functions [8.9]
Approximated using local differencing.
mat2 transpose(mat2 m); gvec4 textureOffset(gsampler2D sampler, vec2 P, ivec2 offset [, float bias]);
T dFdx(T p); Derivative in x
mat3 transpose(mat3 m); gvec4 textureOffset(gsampler3D sampler, vec3 P, ivec3 offset [, float bias]);
mat4 transpose(mat4 m); float textureOffset(sampler2DShadow sampler, vec3 P, ivec2 offset [, float bias]); T dFdy(T p); Derivative in y
mat2x3 transpose(mat3x2 m); gvec4 textureOffset(gsampler2DArray sampler, vec3 P, ivec2 offset [, float bias]); T fwidth(T p); abs (dFdx (p)) + abs (dFdy (p));
mat3x2 transpose(mat2x3 m); transpose of matrix m
gvec4 texelFetch(gsampler2D sampler, ivec2 P, int lod);
mat2x4 transpose(mat4x2 m);
gvec4 texelFetch(gsampler3D sampler, ivec3 P, int lod);
mat4x2 transpose(mat2x4 m);
gvec4 texelFetch(gsampler2DArray sampler, ivec3 P, int lod);
mat3x4 transpose(mat4x3 m);
mat4x3 transpose(mat3x4 m); gvec4 texelFetchOffset(gsampler2D sampler, ivec2 P, int lod, ivec2 offset);
gvec4 texelFetchOffset(gsampler3D sampler, ivec3 P, int lod, ivec3 offset);
float determinant(mat2 m); gvec4 texelFetchOffset(gsampler2DArray sampler, ivec3 P, int lod, ivec2 offset);
float determinant(mat3 m); determinant of matrix m
float determinant(mat4 m); gvec4 textureProjOffset(gsampler2D sampler, vec3 P, ivec2 offset [, float bias]);
gvec4 textureProjOffset(gsampler2D sampler, vec4 P, ivec2 offset [, float bias]);
mat2 inverse(mat2 m); gvec4 textureProjOffset(gsampler3D sampler, vec4 P, ivec3 offset [, float bias]);
mat3 inverse(mat3 m); inverse of matrix m float textureProjOffset(sampler2DShadow sampler, vec4 P, ivec2 offset [,
mat4 inverse(mat4 m); 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. 0619 Reference card production by Miller & Mattson www.millermattson.com khr.io/glesregistry