Webgl20 Reference Guide

User Manual:

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

WebGL 2.0 API Quick Reference Guide Page 1

ArrayBuer and Typed Arrays [5.13]

Data is transferred to WebGL using ArrayBuer and views.

Buers represent unstructured binary data, which can be

modied using one or more typed array views. Consult the

ECMAScript specicaon for more details on Typed Arrays.

Buers

ArrayBuer(ulong byteLength);

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

Creates a new buer. 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 buer.

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

ViewType(ViewType other);

Creates new underlying buer and copies other array.

ViewType(type[] other);

Creates new underlying buer and copies other array.

ViewType(ArrayBuer buer, [oponal] ulong byteOset,

[oponal] ulong length);

Create a new view of given buer, starng at oponal byte

oset, extending for oponal length elements.

buer: Read-only, buer backing this view

byteOset: Read-only, byte oset of view start in buer

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

Other Properes

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

const ulong BYTES_PER_ELEMENT: element size in bytes.

Methods

view[i] = get/set element i

et(ViewType

other

[, ulong

oset

]);

t(type[] other

ulong oset

]

);

Replace elements in this view with those from other, starng

at oponal oset.

ViewType subArray(long begin

long end

]

);

Return a subset of this view, referencing the same underlying

buer.

WebGLQuery [3.2]

Created by createQuery, made acve by

beginQuery, concluded by endQuery,

destroyed by deleteQuery

WebGLSampler [3.3]

Created by createSampler, bound

by bindSampler, destroyed by

deleteSampler

WebGLSync [3.4]

Created by fenceSync, blocked on by

clientWaitSync, waited on internal GL

by waitSync, queried by getSynciv,

destroyed by deleteSync

WebGLTransformFeedback

[3.5]

Created by createTransformFeedback,

bound by bindTransformFeedback,

destroyed by deleteTransformFeedback

WebGLVertexArrayObject

[3.6]

Created by createVertexArray,

bound by bindVertexArray,

destroyed by deleteVertexArray

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 funconality, but in an HTML context. WebGL 2 is not enrely

backwards compable with WebGL 1. Exisng error-free content wrien against

the core WebGL 1 specicaon without extensions will oen run in WebGL 2

without modicaon, but this is not always the case.

The WebGL 2 specicaon shows dierences from the WebGL 1 specicaon.

Both WebGL specicaons are available at khronos.org/webgl. Unless otherwise

specied, the behavior of each method is dened by the OpenGL ES 3.0

specicaon. The OpenGL ES specicaon is at khr.io/glesregistry.

• [n.n.n] refers to secons in the WebGL 1.0 specicaon.

• [n.n.n] refers to secons in the WebGL 2.0 specicaon.

• Content in blue is newly added with WebGL 2.0.

• Content in purple or marked with

•

has no corresponding OpenGL ES 3.0 funcon.

Per-Fragment Operaons [5.14.3]

void blendColor(clampf red, clampf green, clampf blue,

clampf alpha);

void blendEquaon(enum mode);

mode: See modeRGB for blendEquaonSeparate

void blendEquaonSeparate(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(oat 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

WebGL Context Creaon [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 buer.

[canvas].getContext(

"webgl", WebGLContextAributes? oponalAribs)

Returns a WebGL 1.0 rendering context

[canvas].getContext(

"webgl2", WebGLContextAributes? oponalAribs)

Returns a WebGL 2.0 rendering context

Interfaces

WebGLContextAributes

[5.2]

This interface contains requested drawing surface aributes

and is passed as the second parameter to getContext. Some

of these are oponal requests and may be ignored by an

implementaon.

alpha Default: true

If true, requests a drawing buer with an alpha channel for the

purposes of performing OpenGL desnaon alpha operaons

and composing with the page.

depth Default: true

If true, requests drawing buer with a depth buer of at least

16 bits. Must obey.

stencil Default: false

If true, requests a stencil buer of at least 8 bits. Must obey.

analias Default: true

If true, requests drawing buer with analiasing using its choice

of technique (mulsample/supersample) and quality. Must obey.

premulpliedAlpha Default: true

If true, requests drawing buer which contains colors with

premulplied alpha. (Ignored if alpha is false.)

preserveDrawingBuer Default: false

If true, requests that contents of the drawing buer remain

in between frames, at potenal performance cost. May have

signicant performance implicaons on some hardware.

preferLowPowerToHighPerformance Default: false

Provides a hint suggesng that implementaon create a context

that opmizes for power consumpon over performance.

failIfMajorPerformanceCaveat Default: false

If true, context creaon will fail if the performance of the

created WebGL context would be dramacally lower than that

of a nave applicaon making equivalent OpenGL calls.

Buer Objects

[5.14.5] [3.7.3]

Once bound, buers may not be rebound with a dierent target.

void bindBuer(enum target, WebGLBuer? buer);

target: ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER,

PIXEL_[UN]PACK_BUFFER, COPY_{READ, WRITE}_BUFFER,

TRANSFORM_FEEDBACK_BUFFER, UNIFORM_BUFFER

typedef (ArrayBuer or ArrayBuerView) BuerDataSource

void buerData(enum target, long size, enum usage);

target: See target for bindBuer

usage: STREAM_{DRAW, READ, COPY}, STATIC_{DRAW, READ, COPY},

DYNAMIC_{DRAW, READ, COPY}

void buerData(enum target, ArrayBuerView srcData,

enum usage, uint srcOset[, uint length=0]);

target and usage: Same as for buerData above

void buerData(enum target, BuerDataSource data,

enum usage);

target and usage: Same as for buerData above

void buerSubData(enum target, long oset,

BuerDataSource data);

target: See target for bindBuer

void buerSubData(enum target, intptr dstByteOset,

ArrayBuerView srcData, uint srcOset[, uint length=0]);

target: See target for bindBuer

void copyBuerSubData(enum readTarget, enum writeTarget,

intptr readOset, intptr writeOset, sizeiptr size);

•

void getBuerSubData(enum target, intptr srcByteOset,

ArrayBuerView dstBuer[, uint dstOset=0[,

uint length=0]]);

WebGLObject [5.3]

This is the parent interface for all WebGL resource objects:

WebGLBuer [5.4]

Created by createBuer, bound by bindBuer,

destroyed by deleteBuer

WebGLFramebuer [5.5]

Created by createFramebuer, bound

by bindFramebuer, destroyed by

deleteFramebuer

WebGLProgram [5.6]

Created by createProgram, used by

useProgram, destroyed by deleteProgram

WebGLRenderbuer [5.7]

Created by createRenderbuer, bound

by bindRenderbuer, destroyed by

deleteRenderbuer

WebGLShader [5.8]

Created by createShader, aached to program

by aachShader, destroyed by deleteShader

WebGLTexture [5.9]

Created by createTexture, bound by

bindTexture, destroyed by deleteTexture

WebGLUniformLocaon

[5.10]

Locaon of a uniform variable in a shader

program.

WebGLAcveInfo [5.11] Informaon returned from calls to

getAcveArib and getAcveUniform. The

read-only aributes are:

int size enum type DOMstring name

WebGLShaderPrecision-

Format [5.12]

Informaon returned from calls to

getShaderPrecisionFormat.

The read-only aributes are:

int rangeMin

int rangeMax

int precision

WebGL 2.0 API Quick Reference Guide Page 2

Special Funcons [5.13.3]

[3.7.2]

•

contextStruct getContextAributes()

[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 nish();

[5.13.11]

void ush();

[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,

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}

Wring to the Draw Buer

[5.14.11] [3.7.9]

When rendering is directed to drawing buer, OpenGL ES

rendering calls cause the drawing buer to be presented to the

HTML page compositor at start of next composing operaon.

void drawArrays(enum mode, int rst, sizei count);

mode: POINTS, LINE_STRIP, LINE_LOOP, LINES, TRIANGLE_STRIP,

TRIANGLE_FAN, TRIANGLES

rst: May not be a negave value.

void drawElements(enum mode, sizei count, enum type,

intptr oset);

mode: POINTS, LINE_STRIP, LINE_LOOP, LINES, TRIANGLE_STRIP,

TRIANGLE_FAN, TRIANGLES

type: UNSIGNED_BYTE, UNSIGNED_SHORT

void clear(biield mask);

void vertexAribDivisor(uint index, uint divisor);

void drawArraysInstanced(enum mode, int rst, sizei count,

sizei instanceCount);

void drawElementsInstanced(enum mode, sizei count,

enum type, intptr oset, sizei instanceCount);

void drawRangeElements(enum mode, uint start, uint end,

sizei count, enum type, intptr oset);

View and Clip

[5.13.3 - 5.13.4]

The viewport species the ane transformaon of x and y from

normalized device coordinates to window coordinates. Drawing

buer size is determined by the HTMLCanvasElement.

void depthRange(oat zNear, oat 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);

Detect and Enable Extensions [5.14]

•

string[ ] getSupportedExtensions();

•

object getExtension(string name);

Available in the WebGLRenderingContext interface.

Get informaon about the context

•

contextStruct getContextAributes();

Set and get state

Calls in this group behave idencally to their OpenGL ES

counterparts unless otherwise noted. Source and desnaon

factors may not both reference constant color.

Rasterizaon

[5.13.3]

void cullFace(enum mode);

mode: BACK, FRONT, FRONT_AND_BACK

void frontFace(enum mode);

mode: CCW, CW

void lineWidth(oat width);

void polygonOset(oat factor, oat units);

Detect context lost events [5.13.13]

bool isContextLost();

Programs and Shaders

[5.14.9] [3.7.7]

Shaders are loaded with a source string (shaderSource),

compiled (compileShader), aached to a program

(aachShader), linked (linkProgram), then used (useProgram).

[WebGLHandlesContextLoss] int getFragDataLocaon(

WebGLProgram program, DOMString name);

void aachShader(Object program, Object shader);

void bindAribLocaon(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[ ] getAachedShaders(Object program);

any getProgramParameter(WebGLProgram? program,

enum pname);

Corresponding OpenGL ES funcon 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 funcon 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 Aributes

[5.14.10] [3.7.8]

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

aributes.

void disableVertexAribArray(uint index);

index: [0, MAX_VERTEX_ATTRIBS - 1]

void enableVertexAribArray(uint index);

index: [0, MAX_VERTEX_ATTRIBS - 1]

WebGLAcveInfo? getAcveArib(WebGLProgram program,

uint index);

WebGLAcveInfo? getAcveUniform(

WebGLProgram program, uint index);

int getAribLocaon(WebGLProgram program, string name);

any getUniform(WebGLProgram? program, uint locaon);

WebGLUniformLocaon? getUniformLocaon(

Object program, string name);

any getVertexArib(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 getVertexAribOset(uint index, enum pname);

Corresponding OpenGL ES funcon is GetVertexAribPointerv

pname: VERTEX_ATTRIB_ARRAY_POINTER

void uniform[1234]fv(WebGLUniformLocaon? locaon,

Float32List data[, uint srcOset=0[, uint srcLength=0]]);

void uniform[1234]iv(WebGLUniformLocaon? locaon,

Int32List data[, uint srcOset=0[, uint srcLength=0]]);

void uniform[1234]uiv(WebGLUniformLocaon? locaon,

Uint32List data[, uint srcOset=0[, uint srcLength=0]]);

void uniformMatrix[234]fv(WebGLUniformLocaon? locaon,

bool transpose, Float32List data[, uint srcOset=0[,

uint srcLength=0]]);

void uniformMatrix[234]x[234]fv(

WebGLUniformLocaon? locaon, bool transpose,

Float32List data[, uint srcOset=0[, uint srcLength=0]]);

void vertexArib[1234]f(uint index, ...);

void vertexArib[1234]fv(uint index, Array value);

void vertexAribI4[u]i[v](uint index, ...);

void vertexAribPointer(uint index, int size, enum type,

bool normalized, long stride, long oset);

type: BYTE, SHORT, UNSIGNED_{BYTE, SHORT}, FIXED, FLOAT

index: [0, MAX_VERTEX_ATTRIBS - 1]

stride: [0, 255]

oset, stride: must be a mulple of the type size in WebGL

void vertexAribIPointer(uint index, int size, enum type,

sizei stride, intptr oset);

Buer Objects (connued)

Object createBuer();

Corresponding OpenGL ES funcon is GenBuers

void deleteBuer(WebGLBuer? buer);

any getBuerParameter(enum target, enum pname);

target: See target for bindBuer

pname: BUFFER_SIZE, BUFFER_USAGE

bool isBuer(WebGLBuer? buer);

WebGL 2.0 API Quick Reference Guide Page 3

Framebuer Objects

[5.14.6] [3.7.4]

Framebuer objects provide an alternave rendering target to

the drawing buer.

void bindFramebuer(enum target,

WebGLFramebuer? framebuer);

target: [READ_, DRAW_]FRAMEBUFFER

[WebGLHandlesContextLoss] enum

checkFramebuerStatus(

enum

target);

target: [READ_, DRAW_]FRAMEBUFFER

Returns: FRAMEBUFFER_{COMPLETE, UNSUPPORTED},

FRAMEBUFFER_INCOMPLETE_{ATTACHMENT, DIMENSIONS,

MULTISAMPLE, MISSING_ATTACHMENT},

FRAMEBUFFER_UNDEFINED

Object createFramebuer();

Corresponding OpenGL ES funcon is GenFramebuers

void

deleteFramebuer(

Object

buer);

void

framebuerRenderbuer(

enum

target,

enum

aachment,

enum

renderbuertarget,

WebGLRenderbuer

renderbuer);

target: FRAMEBUFFER

aachment: COLOR_ATTACHMENT0, COLOR_ATTACHMENTn

where n may be an integer from 1 to 15,

{DEPTH, STENCIL, DEPTH_STENCIL}_ATTACHMENT

renderbuertarget: RENDERBUFFER

bool isFramebuer(WebGLFramebuer framebuer);

void

framebuerTexture2D(

enum

target,

enum

aachment,

enum

textarget,

WebGLTexture

texture,

int

level);

target and aachment: Same as for framebuerRenderbuer

textarget: TEXTURE_2D, TEXTURE_CUBE_MAP_POSITIVE{X, Y, Z},

TEXTURE_CUBE_MAP_NEGATIVE{X, Y, Z},

any getFramebuerAachmentParameter(

enum

target,

enum

aachment,

enum

pname);

target and aachment: Same as for framebuerRenderbuer

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 blitFramebuer(int srcX0, int srcY0, int srcX1, int srcY1,

int dstX0, int dstY0, int dstX1, int dstY1, biield mask,

enum lter);

void framebuerTextureLayer(enum target,

enum aachment, WebGLTexture? texture, int level,

int layer);

void invalidateFramebuer(enum target,

sequence<enum> aachments);

void invalidateSubFramebuer (enum target,

sequence<enum> aachments, int x, int y, sizei width,

sizei height);

void readBuer(enum src);

Texture Objects

[5.14.8] [3.7.6]

Texture objects provide storage and state for texturing operaons.

WebGL adds an error for operaons relang to the currently bound

texture if no texture is bound.

void acveTexture(enum texture)

[5.14.3]

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

specicaon

void copyTexSubImage2D(enum target, int level,

int xoset, int yoset, int x, int y, long width,

long height);

target: See target for copyTexImage2D

Object createTexture();

Corresponding OpenGL ES funcon is GenTextures

void deleteTexture(Object texture);

void generateMipmap(enum target);

target: see target for bindTexture

any getTexParameter(enum target, enum pname);

target: TEXTURE_2D, TEXTURE_CUBE_MAP

pname: TEXTURE_BASE_LEVEL,

TEXTURE_COMPARE_{FUNC, MODE},

TEXTURE_IMMUTABLE_{FORMAT, LEVELS},

TEXTURE_MAX_{LEVEL, LOD}, TEXTURE_MIN_LOD,

TEXTURE_{MIN, MAG}_FILTER, TEXTURE_WRAP_{R, S, T}

bool isTexture(Object texture);

void texImage2D(enum target, int level,

enum internalformat, long width, long height,

int border, enum format, enum type,

ArrayBuerView? pixels);

The following values apply to all variaons of texImage2D.

target: See target for copyTexImage2D

source: pixels of type ImageData, image of type HTMLImageElement,

canvas of type HTMLCanvasElement,

video of type HTMLVideoElement

void texImage2D(enum target, int level, int internalformat,

sizei width, sizei height, int border, enum format,

enum type, ArrayBuerView srcData, uint srcOset);

[throws] void texImage2D(enum

target, int level,

int internalformat

, sizei

width, sizei height, int border,

enum format, enum type

, TexImageSource source);

void texImage2D(enum

target, int level, int internalformat

sizei

width, sizei height, int border, enum format,

enum type

, intptr oset);

void texParameterf(enum target, enum pname, oat param);

target: TEXTURE_2D, TEXTURE_CUBE_MAP

pname: TEXTURE_BASE_LEVEL,

TEXTURE_COMPARE_{FUNC, MODE},

TEXTURE_MAX_{LEVEL, LOD}, TEXTURE_{MIN, MAG}_FILTER,

TEXTURE_MIN_LOD, TEXTURE_WRAP_{R, S, T}

void texParameteri(enum target, enum pname, int param);

target: TEXTURE_2D, TEXTURE_CUBE_MAP

pname: See pname for getTexParameter

void texSubImage2D(enum target, int level, int xoset,

int yoset, long width, long height, enum format,

enum type, ArrayBuerView? pixels);

Following values apply to all variaons of

texSubImage2D.

target:

See target for copyTexImage2D

format and type: See format and type for texImage2D

object: See object for texImage2D

texStorage2D may have lower memory costs than texImage2D

in some implementaons and should be considered a preferred

alternave to texImage2D.

void texSubImage2D(enum target, int level, int xoset,

int yoset, sizei width, sizei height, enum format,

enum type, ArrayBuerView srcData, uint srcOset);

void texSubImage2D(enum target, int level, int xoset,

int yoset, sizei width, sizei height, enum format,

enum type, TexImageSource source);

void texSubImage2D(enum target, int level, int xoset,

int yoset, sizei width, sizei height, enum format,

enum type, intptr oset);

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);

texStorage3D may have lower memory costs than texImage3D

in some implementaons and should be considered a preferred

alternave 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, ArrayBuerView? srcData);

void texImage3D(enum target, int level, int internalformat,

sizei width, sizei height, sizei depth, int border,

enum format, enum type, ArrayBuerView srcData,

uint srcOset);

void texImage3D(enum target, int level, int internalformat,

sizei width, sizei height, sizei depth, int border,

enum format, enum type, TexImageSource source);

void texImage3D(enum target, int level, int internalformat,

sizei width, sizei height, sizei depth, int border,

enum format, enum type, intptr oset);

void texSubImage3D(enum target, int level, int xoset,

int yoset, int zoset, sizei width, sizei height, sizei depth,

enum format, enum type, ArrayBuerView? srcData

[, uint srcOset=0]);

void texSubImage3D(enum target, int level, int xoset,

int yoset, int zoset, sizei width, sizei height, sizei depth,

enum format, enum type, TexImageSource source);

void texSubImage3D(enum target, int level, int xoset,

int yoset, int zoset, sizei width, sizei height, sizei depth,

enum format, enum type, intptr oset);

void copyTexSubImage3D(enum target, int level, int xoset,

int yoset, int zoset, int x, int y, sizei width, sizei height);

void compressedTexImage2D(enum target, int level,

enum internalformat, sizei width, sizei height, int border,

ArrayBuerView srcData[, uint srcOset=0[,

uint srcLengthOverride=0]]);

void compressedTexSubImage2D(enum target, int level,

int xoset, int yoset, sizei width, sizei height, enum format,

ArrayBuerView srcData[, uint srcOset=0[,

uint srcLengthOverride=0]]);

void compressedTexImage3D(enum target, int level,

enum internalformat, sizei width, sizei height, sizei depth,

int border, ArrayBuerView srcData[, uint srcOset=0[,

uint srcLengthOverride=0]]);

void compressedTexSubImage3D(enum target, int level,

int xoset, int yoset, int zoset, sizei level, sizei level,

sizei depth, enum format, ArrayBuerView srcData[,

uint srcOset=0[,uint srcLengthOverride=0]]);

void compressedTexImage2D(enum target, int level,

enum internalformat, sizei width, sizei height, int border,

sizei imageSize, intptr oset);

void compressedTexSubImage2D(enum target, int level,

int xoset, int yoset, sizei width, sizei height,

enum format, sizei imageSize, intptr oset);

void compressedTexImage3D(enum target, int level,

enum internalformat, sizei width, sizei height, sizei depth,

int border, sizei imageSize, intptr oset);

void compressedTexSubImage3D(enum target, int level,

int xoset, int yoset, int zoset, width, sizei height,

sizei depth, enum format, sizei imageSize, intptr oset);

Read Back Pixels [5.14.12] [3.7.10]

Read pixels in current framebuer into ArrayBuerView object.

void readPixels(int x, int y,

long width, long height,

enum format, enum type,

ArrayBuerView pixels);

format: RGBA

type: UNSIGNED_BYTE

void readPixels(int x, int y,

sizei width, sizei height,

enum format, enum type,

ArrayBuerView dstData,

uint dstOset);

void readPixels(int x, int y,

sizei width, sizei height,

enum format, enum type,

intptr oset);

Renderbuer Objects

[5.14.7]

[3.7.5]

Renderbuer objects are used to provide storage for the

individual buers used in a framebuer object.

void

bindRenderbuer(enum target, Object renderbuer);

target: RENDERBUFFER

Object createRenderbuer();

Corresponding OpenGL ES funcon is GenRenderbuers

void deleteRenderbuer(

Object

renderbuer);

any getRenderbuerParameter(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 isRenderbuer(

Object

renderbuer);

void renderbuerStorage(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 renderbuerStorageMulsample(enum target,

enum internalformat, sizei width, sizei height);

Vertex Array Objects [3.7.17]

VAOs encapsulate all state related to the denion of data

used by the vertex processor.

void bindVertexArray(

WebGLVertexArrayObject? vertexArray);

WebGLVertexArrayObject? createVertexArray();

void deleteVertexArray(

WebGLVertexArrayObject? vertexArray);

[WebGLHandlesContextLoss] boolean isVertexArray(

WebGLVertexArrayObject? vertexArray);

WebGL 2.0 API Quick Reference Guide Page 4

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]

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, oat param);

pname: TEXTURE_COMPARE_{FUNC, MODE},

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

Sync Objects [3.7.14]

Synchronize execuon between the GL server and the client.

WebGLSync? fenceSync(enum condion, biield ags)

[WebGLHandlesContextLoss] boolean isSync(

WebGLSync? sync);

void deleteSync(WebGLSync? sync);

enum clientWaitSync(WebGLSync sync, biield ags,

uint64 meout);

ags: SYNC_FLUSH_COMMANDS_BIT

void waitSync(WebGLSync sync, biield ags, int64 meout);

meout: TIMEOUT_IGNORED

any getSyncParameter(WebGLSync sync, enum pname);

pname: OBJECT_TYPE, SYNC_{CONDITION, FLAGS, STATUS}

Transform Feedback [3.7.15]

Captures output variable values wrien by the vertex shader.

WebGLTransformFeedback? createTransformFeedback();

void deleteTransformFeedback(

WebGLTransformFeedback? transformFeedback);

[WebGLHandlesContextLoss] boolean isTransformFeedback(

WebGLTransformFeedback? transformFeedback);

void bindTransformFeedback(enum target,

WebGLTransformFeedback? transformFeedback);

void beginTransformFeedback(enum primiveMode);

void endTransformFeedback();

void pauseTransformFeedback();

void resumeTransformFeedback();

void transformFeedbackVaryings(WebGLProgram program,

sequence<DOMString> varyings, enum buerMode);

WebGLAcveInfo? getTransformFeedbackVarying(

WebGLProgram program, uint index);

Uniform Buer Objects [3.7.16]

Provides the storage for named uniform blocks.

void bindBuerBase(enum target, uint index,

WebGLBuer? buer);

void bindBuerRange(enum target, uint index,

WebGLBuer? buer, intptr oset, sizeiptr size);

sequence<uint>? getUniformIndices(

WebGLProgram program,

sequence<DOMString> uniformNames);

any getAcveUniforms(WebGLProgram program,

sequence<uint> 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 getAcveUniformBlockParameter(

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? getAcveUniformBlockName(

WebGLProgram program, uint uniformBlockIndex);

void uniformBlockBinding(WebGLProgram program,

uint uniformBlockIndex, uint uniformBlockBinding);

Mulple Render Targets [3.7.11]

void drawBuers(sequence<GLenum> buers);

void clearBuerfv(enum buer, int drawbuer,

Float32List values[, uint srcOset=0]);

void clearBueriv(enum buer, int drawbuer,

Int32List values[, uint srcOset=0]);

void clearBueruiv(enum buer, int drawbuer,

Uint32List values[, uint srcOset=0]);

void clearBuer(enum buer, int drawbuer, oat depth,

int stencil);

Use the funcon based on the color buer type:

clearBuerfv: oang point; clearBuerfv: xed point

clearBueriv: signed integer clearBueriv: signed integer;

clearBuer: DEPTH_STENCIL buers

Whole Framebuer Operaons

[5.14.3]

void clear(biield mask);

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

void clearColor(

clampf

red,

clampf

green,

clampf

blue,

clampf

alpha);

void clearDepth(

oat

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 ag);

void stencilMask(uint mask);

void stencilMaskSeparate(enum face, uint mask);

face: FRONT, BACK, FRONT_AND_BACK

OpenGL Texture Object and Sampler State

Texture Parameters (immutable)

TEXTURE_IMMUTABLE_FORMAT

TEXTURE_IMMUTABLE_LEVELS

Texture Parameters (mutable)

TEXTURE_BASE_LEVEL

TEXTURE_MAX_LEVEL

Sampler Parameters (mutable)

TEXTURE_COMPARE_{FUNC,MODE}

TEXTURE_{MAX,MIN}_LOD

TEXTURE_{MAG,MIN}_FILTER

TEXTURE_WRAP_{S,T,R}

WebGL 2.0 API Quick Reference Guide Page 5

Sized Texture Color Formats [3.7.11]

If an applicaon wants to store the texture at a certain resoluon or in a certain format, it can request the resoluon and format with internalFormat. The following table shows the sized internal

formats indicang whether they are color renderable or texture lterable.

In Color Renderable column, a red Y means the ai extension EXT_color_buer_oat is enabled. In Texture Filterable column, a red Y means the i extension OES_texture_oat_linear is enabled.

Internal Format Format Type Color

Renderable Texture

Filterable

R8 RED UNSIGNED_BYTE Y Y

R8_SNORM RED BYTE Y

R16F RED HALF_FLOAT, FLOAT YY

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 YY

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 YY

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

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 YY

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

OpenGL ES Shading Language 3.0 API Quick Reference Guide Page 6

Preprocessor

[3.4]

Preprocessor Direcves

The number sign (#) can be immediately preceded or followed in its line by spaces or horizontal tabs.

# #dene #undef #if #ifdef #ifndef #else

#elif #endif #error #pragma #extension #line

Examples of Preprocessor Direcves

• “#version 300 es” must appear in the rst line of a shader program wrien in GLSL ES version 3.00. If omied, the shader will be treated

as targeng 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 opmize

({on, o}) - enable or disable shader opmizaon (default on)

#pragma debug

({on, o}) - enable or disable compiling shaders with debug informaon (default o)

Predened Macros

__LINE__

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

__FILE__

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

__VERSION__

Decimal integer, e.g.: 300

GL_ES

Dened and set to integer 1 if running on an OpenGL-ES Shading Language.

The OpenGL® ES Shading Language is two closely-

related 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 secons and tables

in the OpenGL ES Shading Language 3.0 specicaon 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.

Basic Types

void no funcon return value or empty parameter list

bool Boolean

int, uint signed, unsigned integer

oat oang scalar

vec2, vec3, vec4 n-component oang point vector

bvec2, bvec3, bvec4 Boolean vector

ivec2, ivec3, ivec4 signed integer vector

uvec2, uvec3, uvec4 unsigned integer vector

mat2, mat3, mat4 2x2, 3x3, 4x4 oat matrix

mat2x2, mat2x3, mat2x4 2x2, 2x3, 2x4 oat matrix

mat3x2, mat3x3, mat3x4 3x2, 3x3, 3x4 oat matrix

mat4x2, mat4x3, mat4x4 4x2, 4x3, 4x4 oat matrix

Floang Point Sampler Types (opaque)

sampler2D, sampler3D access a 2D or 3D texture

samplerCube access cube mapped texture

samplerCubeShadow access cube map depth texture with comparison

sampler2DShadow access 2D depth texture with comparison

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

Unsigned Integer Sampler Types (opaque)

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

usamplerCube access unsigned integer cube mapped texture

usampler2DArray access unsigned integer 2D array texture

Structures and Arrays [4.1.8, 4.1.9]

Structures struct type-name {

members

} struct-name[]; // oponal variable declaraon,

// oponally an array

Arrays oat foo[3];

Structures, blocks, and structure members can be arrays.

Only 1-dimensional arrays supported.

Operators and Expressions

Operators [5.1]

Numbered in order of precedence. The

relaonal and equality operators > < <= >= == != evaluate to a

Boolean. To compare vectors component-wise, use funcons

such as lessThan(), equal(), etc. [8.7].

Operator Descripon Assoc.

1. ( ) parenthecal grouping N/A

[ ]

( )

++ --

array subscript

funcon call & constructor structure

eld or method selector, swizzler

posix increment and decrement

L - R

3 . ++ --

+ - ~ !

prex increment and decrement

unary R - L

4 . * % / mulplicave L - R

5. + - addive L - R

6. << >> bit-wise shi L - R

7. < > <= >= relaonal L - R

8. == != equality L - R

9. &bit-wise and L - R

10. ^bit-wise exclusive or L - R

11. |bit-wise inclusive or L - R

12. && logical and L - R

13. ^^ logical exclusive or L - R

14. | | logical inclusive or L - R

15. ? :

selecon (Selects an enre operand.

Use mix() to select individual

components of vectors.)

L - R

16.

=assignment L - R

+= -= *= /=

%= <<= >>=

&= ^= |=

arithmec assignments L - R

17. ,sequence L - R

Vector Components [5.5]

In addion to array numeric subscript syntax, names of vector

components are denoted by a single leer. 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

Qualiers

Storage Qualiers [4.3]

Variable declaraons may be preceded by one storage

qualier.

none

(Default) local read/write memory, or input parameter

const

Compile-me constant, or read-only funcon

parameter

centroid in Linkage into a shader from a previous stage

out

centroid out Linkage out of a shader to a subsequent stage

uniform

Value does not change across the primive being

processed, uniforms form the linkage between a

shader, OpenGL ES, and the applicaon

The following interpolaon qualiers for shader outputs

and inputs may procede in, centroid in, out, or

centroid out.

smooth

Perspecve correct interpolaon

at

No interpolaon

Interface Blocks [4.3.7]

Uniform variable declaraons can be grouped into named

interface blocks, for example:

uniform Transform {

mat4 ModelViewProjeconMatrix;

uniform mat3 NormalMatrix;

// restatement of qualier

oat Deformaon;

}

Layout Qualiers [4.3.8]

layout(layout-qualier) block-declaraon

layout(layout-qualier) in/out/uniform

declaraon

Input Layout Qualiers [4.3.8.1]

For all shader stages:

locaon = integer-constant

Output Layout Qualiers [4.3.8.2]

For all shader stages:

locaon = integer-constant

Uniform Block Layout Qualiers [4.3.8.3]

Layout qualier ideners for uniform blocks:

shared, packed, std140, {row, column}_major

Parameter Qualiers [4.4]

Input values are copied in at funcon call me, output values are

copied out at funcon return me.

none (Default) same as in

in For funcon parameters passed into a funcon

out For funcon parameters passed back out of a funcon, but

not inialized for use when passed in

inout For funcon parameters passed both into and out of a funcon

Precision and Precision Qualiers [4.5]

Any oang point, integer, or sampler declaraon can have the

type preceded by one of these precision qualiers:

highp

Sases 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 sll

represents all color values for any color channel.

Ranges and precisions for precision qualiers (FP=oang point):

FP Range

FP Magnitude

Range FP Precision

Integer Range

Signed Unsigned

highp

(−2

126

, 2

127

)0.0, (2

–126

, 2

127

)

Relave

–24

[−2

, 2

−1] [0, 2

−1]

mediump

(−2

, 2

)(2

–14

, 2

)

Relave

–10

[−2

, 2

−1] [0, 2

−1]

lowp

(−2, 2)

–8

, 2)

Absolute

–8

[−2

, 2

−1] [0, 2

−1]

A precision statement establishes a default precision qualier for

subsequent int, oat, and sampler declaraons, e.g.:

precision highp int;

Invariant Qualiers Examples [4.6]

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

invariant gl_Posion; Qualify a previously declared variable

invariant centroid out

vec3 Color; Qualify as part of a variable declaraon

Order of Qualicaon [4.7]

When mulple qualicaons are present, they must follow a

strict order. This order is either:

invariant, interpolaon, storage, precision

or:

storage, parameter, precision

OpenGL ES Shading Language 3.0 API Quick Reference Guide Page 7

Built-In Funcons

Angle & Trigonometry Funcons [8.1]

Component-wise operaon. Parameters specied as angle are

assumed to be in units of radians. T is oat, vec2, vec3, vec4.

T radians (T degrees); degrees to radians

T degrees (T radians); radians to degrees

T sin (T angle); sine

T cos (T angle); cosine

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-negave inverse of cosh

T atanh (T x); arc hyperbolic tangent; inverse of tanh

Exponenal Funcons [8.2]

Component-wise operaon. T is oat, vec2, vec3, vec4.

T pow (T x, T y); xy

T exp (T x); ex

T log (T x); ln

T exp2 (T x); 2x

T log2 (T x); log2

T sqrt (T x); square root

T inversesqrt (T x); inverse square root

Common Funcons [8.3]

Component-wise operaon. T is oat and vecn, TI is int and ivecn,

TU is uint and uvecn, and TB is bool and bvecn, where n is 2, 3,

or 4.

T abs(T x);

TI abs(TI x); absolute value

T sign(T x);

TI sign(TI x); returns -1.0, 0.0, or 1.0

T oor(T x); nearest integer <= x

T trunc (T x); nearest integer a such that

|a| <= |x|

T round (T x); round to nearest integer

T roundEven (T x); round to nearest integer

T ceil(T x); nearest integer >= x

T fract(T x); x - oor(x)

T mod(T x, T y);

T mod(T x, oat y);

T modf(T x, out T i);

modulus

T min(T x, T y);

TI min(TI x, TI y);

TU min(TU x, TU y);

T min(T x, oat y);

TI min(TI x, int y);

TU min(TU x, uint y);

minimum value

T max(T x, T y);

TI max(TI x, TI y);

TU max(TU x, TU y);

T max(T x, oat y);

TI max(TI x, int y);

TU max(TU x, uint y);

maximum value

T clamp(TI x, T minVal, T maxVal);

TI clamp(V x, TI minVal, TI maxVal);

TU clamp(TU x, TU minVal, TU maxVal);

T clamp(T x, oat minVal, oat maxVal);

TI clamp(TI x, int minVal, int maxVal);

TU clamp(TU x, uint minVal, uint maxVal);

min(max(x, minVal), maxVal)

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

T mix(T x, T y, oat a); linear blend of x and y

T mix(T x, T y, TB a); Selects vector source for each

returned component

T step(T edge, T x);

T step(oat edge, T x); 0.0 if x < edge, else 1.0

(more Common Funcons ↗)

Aggregate Operaons and Constructors

Matrix Constructor Examples [5.4.2]

mat2(oat) // init diagonal

mat2(vec2, vec2); // column-major order

mat2(oat, oat,

oat, oat); // column-major order

Structure Constructor Example [5.4.3]

struct light {

oat intensity;

vec3 pos;

};

light lightVar = light

(3.0, vec3(1.0, 2.0, 3.0));

Matrix Components [5.6]

Access components of a matrix with array subscripng 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 le element to 1.0

m[2][3] = 2.0; // sets 4th element of 3rd column to 2.0

Examples of operaons 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 +/-

(more examples ↗)

Statements and Structure

Iteraon and Jumps [6]

Entry void main()

Iteraon for (;;) { break, connue }

while ( ) { break, connue }

do { break, connue } while ( );

Jump break, connue, return

discard // Fragment shader only

Selecon if ( ) { }

if ( ) { } else { }

switch ( ) { break, case }

m = m * m; // linear algebraic mulply

m = v * m; // row vector * matrix linear algebraic mulply

m = m * v; // matrix * column vector linear algebraic mulply

f = dot(v, v); // vector dot product

v = cross(v, v); // vector cross product

m = matrixCompMult(m, m); // component-wise mulply

Structure Operaons [5.7]

Select structure elds using the period (.) operator. Valid operators

are:

.eld selector

== != equality

=assignment

Array Operaons [5.7]

Array elements are accessed using the array subscript operator

“[ ]”. For example:

diuseColor += lightIntensity[3] * NdotL;

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]

Shader programs use special variables to communicate with xed-funcon parts of the pipeline. Output special

variables may be read back aer wring. Input special variables are read-only. All special variables have global scope.

Vertex Shader Special Variables [7.1]

Inputs:

int gl_VertexID; // integer index

int gl_InstanceID; // instance number

Outputs:

out gl_PerVertex {

vec4 gl_Posion; // transformed vertex posion in clip coordinates

oat gl_PointSize; // transformed point size in pixels (point rasterizaon only)

};

Fragment Shader Special Variables [7.2]

Inputs:

ighp vec4

gl_FragCoord

; //

fragment posion within frame buer

bool

gl_FrontFacing

; //

fragment belongs to a front-facing primive

mediump vec2 gl_PointCoord; // 0.0 to 1.0 for each component

Outputs:

ighp oat

gl_FragDepth

; //

depth range

Built-In Constants With Minimum Values [7.3]

Built-in Constant Minimum value

const mediump int gl_MaxVertexAribs 16

const mediump int gl_MaxVertexUniformVectors 256

const mediump int gl_MaxVertexOutputVectors 16

const mediump int gl_MaxFragmentInputVectors 15

const mediump int gl_MaxVertexTextureImageUnits 16

const mediump int gl_MaxCombinedTextureImageUnits 32

const mediump int gl_MaxTextureImageUnits 16

const mediump int gl_MaxFragmentUniformVectors 224

const mediump int gl_MaxDrawBuers 4

const mediump int gl_MinProgramTexelOset -8

const mediump int gl_MaxProgramTexelOset 7

Built-In Uniform State [7.4]

As an aid to accessing OpenGL ES processing state, the following uniform

variables are built into the OpenGL ES Shading Language.

struct gl_DepthRangeParameters {

oat near;

// n

oat far; // f

oat di; // f - n

};

uniform gl_DepthRangeParameters gl_DepthRange;

OpenGL ES Shading Language 3.0 API Quick Reference Guide Page 8

Built-In Funcons (connued)

Common Funcons (connued)

T smoothstep(T edge0, T edge1, T x);

T smoothstep(oat edge0,

oat edge1, T x);

clamp and smooth

TB isnan(T x); true if x is a NaN

TB isinf(T x); true if x is posive or negave

innity

TI oatBitsToInt(T value);

TU oatBitsToUint(T value);

highp integer, preserving oat

bit level representaon

T intBitsToFloat(TI value);

T uintBitsToFloat(TU value);

highp oat, preserving integer

bit level representaon

Floang-point Pack and Unpack Funcons [8.4]

uint packSnorm2x16(vec2 v);

uint packUnorm2x16(vec2 v);

convert two oats to xed point and pack

into an integer

vec2 unpackSnorm2x16(uint p);

vec2 unpackUnorm2x16(uint p);

unpack xed point value pair into oats

uint packHalf2x16(vec2 v); convert two oats into half-precision oats

and pack into an integer

vec2 unpackHalf2x16(uint v); unpack half value pair into full oats

Geometric Funcons [8.5]

These funcons operate on vectors as vectors, not

component-wise. T is oat, vec2, vec3, vec4.

oat length(T x); length of vector

oat distance(T p0, T p1); distance between points

oat 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 reect(T I, T N); reecon direcon I - 2 * dot(N,I) * N

T refract(T I, T N, oat eta); refracon vector

Matrix Funcons [8.6]

Type mat is any matrix type.

mat matrixCompMult(mat x, mat y); mulply x by y component-wise

mat2 outerProduct(vec2 c, vec2 r);

mat3 outerProduct(vec3 c, vec3 r);

mat4 outerProduct(vec4 c, vec4 r);

linear algebraic column vector *

row vector

mat2x3 outerProduct(vec3 c, vec2 r);

mat3x2 outerProduct(vec2 c, vec3 r);

mat2x4 outerProduct(vec4 c, vec2 r);

mat4x2 outerProduct(vec2 c, vec4 r);

mat3x4 outerProduct(vec4 c, vec3 r);

mat4x3 outerProduct(vec3 c, vec4 r);

linear algebraic column vector *

row vector

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

oat determinant(mat2 m);

oat determinant(mat3 m);

oat determinant(mat4 m);

determinant of matrix m

mat2 inverse(mat2 m);

mat3 inverse(mat3 m);

mat4 inverse(mat4 m);

inverse of matrix m

Vector Relaonal Funcons [8.7]

Compare x and y component-wise. Input and return vector sizes for

a parcular 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);

bvec lessThan(uvec x, uvec y); x < y

bvec lessThanEqual(T x, T y);

bvec lessThanEqual(uvec x, uvec y); x <= y

bvec greaterThan(T x, T y);

bvec greaterThan(uvec x, uvec y); x > y

bvec greaterThanEqual(T x, T y);

bvec greaterThanEqual(uvec x, uvec y); x >= 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 Funcons [8.8]

The funcon 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 specicaon, under “Texture Size Query”. The inial “g” in a type

name is a placeholder for nothing, “i”, or “u”.

highp ivec{2,3} textureSize(gsampler{2,3}D sampler, int lod);

highp ivec2 textureSize(gsamplerCube sampler, int lod);

highp ivec2 textureSize(sampler2DShadow sampler, int lod);

highp ivec2 textureSize(samplerCubeShadow sampler, int lod);

highp ivec3 textureSize(gsampler2DArray sampler, int lod);

highp ivec3 textureSize(sampler2DArrayShadow sampler, int lod);

Texture lookup funcons using samplers are available to vertex and

fragment shaders. The inial “g” in a type name is a placeholder for

nothing, “i”, or “u”.

gvec4 texture(gsampler{2,3}D sampler, vec{2,3} P [, oat bias]);

gvec4 texture(gsamplerCube sampler, vec3 P [, oat bias]);

oat texture(sampler2DShadow sampler, vec3 P [, oat bias]);

oat texture(samplerCubeShadow sampler, vec4 P [, oat bias]);

gvec4 texture(gsampler2DArray sampler, vec3 P [, oat bias]);

oat texture(sampler2DArrayShadow sampler, vec4 P);

gvec4 textureProj(gsampler2D sampler, vec{3,4} P [, oat bias]);

gvec4 textureProj(gsampler3D sampler, vec4 P [, oat bias]);

oat textureProj(sampler2DShadow sampler, vec4 P [, oat bias]);

gvec4 textureLod(gsampler{2,3}D sampler, vec{2,3} P, oat lod);

gvec4 textureLod(gsamplerCube sampler, vec3 P, oat lod);

oat textureLod(sampler2DShadow sampler, vec3 P, oat lod);

gvec4 textureLod(gsampler2DArray sampler, vec3 P, oat lod);

gvec4 textureOset(gsampler2D sampler, vec2 P, ivec2 oset [, oat

bias

]);

gvec4 textureOset(gsampler3D sampler, vec3 P, ivec3 oset [, oat

bias

]);

oat textureOset

(sampler2DShadow sampler, vec3 P, ivec2 oset [, oat

bias

]);

gvec4 textureOset

(gsampler2DArray sampler, vec3 P, ivec2 oset [, oat bias

]);

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 texelFetchOset(gsampler2D sampler, ivec2 P, int lod, ivec2 oset);

gvec4 texelFetchOset(gsampler3D sampler, ivec3 P, int lod, ivec3 oset);

gvec4 texelFetchOset(gsampler2DArray sampler, ivec3 P, int lod, ivec2 oset);

gvec4 textureProjOset

(gsampler2D sampler, vec3 P, ivec2 oset [, oat bias

]);

gvec4 textureProjOset

(gsampler2D sampler, vec4 P, ivec2 oset [, oat bias

]);

gvec4 textureProjOset

(gsampler3D sampler, vec4 P, ivec3 oset [, oat bias

]);

oat textureProjOset(sampler2DShadow sampler, vec4 P, ivec2 oset [,

oat bias]);

Texture Lookup Funcons (connued)

gvec4 textureLodOset(gsampler2D sampler, vec2 P, oat lod, ivec2 oset);

gvec4 textureLodOset(gsampler3D sampler, vec3 P, oat lod, ivec3 oset);

oat textureLodOset(sampler2DShadow sampler, vec3 P, oat lod,

ivec2 oset);

gvec4 textureLodOset(gsampler2DArray sampler, vec3 P, oat lod,

ivec2 oset);

gvec4 textureProjLod(gsampler2D sampler, vec3 P, oat lod);

gvec4 textureProjLod(gsampler2D sampler, vec4 P, oat lod);

gvec4 textureProjLod(gsampler3D sampler, vec4 P, oat lod);

oat textureProjLod(sampler2DShadow sampler, vec4 P, oat lod);

gvec4 textureProjLodOset(gsampler2D sampler, vec3 P, oat lod, ivec2 oset);

gvec4 textureProjLodOset(gsampler2D sampler, vec4 P, oat lod, ivec2 oset);

gvec4 textureProjLodOset(gsampler3D sampler, vec4 P, oat lod, ivec3 oset);

oat textureProjLodOset(sampler2DShadow sampler, vec4 P, oat lod,

ivec2 oset);

gvec4 textureGrad(gsampler2D sampler, vec2 P, vec2 dPdx, vec2 dPdy);

gvec4 textureGrad(gsampler3D sampler, vec3 P, vec3 dPdx, vec3 dPdy);

gvec4 textureGrad(gsamplerCube sampler, vec3 P, vec3 dPdx, vec3 dPdy);

oat textureGrad(sampler2DShadow sampler, vec3 P, vec2 dPdx, vec2 dPdy);

oat textureGrad(samplerCubeShadow sampler, vec4 P, vec3 dPdx,

vec3 dPdy);

gvec4 textureGrad(gsampler2DArray sampler, vec3 P, vec2 dPdx, vec2 dPdy);

oat textureGrad(sampler2DArrayShadow sampler, vec4 P, vec2 dPdx,

vec2 dPdy);

gvec4 textureGradOset(gsampler2D sampler, vec2 P, vec2 dPdx, vec2 dPdy,

ivec2 oset);

gvec4 textureGradOset(gsampler3D sampler, vec3 P, vec3 dPdx, vec3 dPdy,

ivec3 oset);

oat textureGradOset(sampler2DShadow sampler, vec3 P, vec2 dPdx,

vec2 dPdy, ivec2 oset);

gvec4 textureGradOset(gsampler2DArray sampler, vec3 P, vec2 dPdx,

vec2 dPdy, ivec2 oset);

oat textureGradOset(sampler2DArrayShadow sampler, vec4 P,

vec2 dPdx, vec2 dPdy, ivec2 oset);

gvec4 textureProjGrad(gsampler2D sampler, vec3 P, vec2 dPdx, vec2 dPdy);

gvec4 textureProjGrad(gsampler2D sampler, vec4 P, vec2 dPdx, vec2 dPdy);

gvec4 textureProjGrad(gsampler3D sampler, vec4 P, vec3 dPdx, vec3 dPdy);

oat textureProjGrad(sampler2DShadow sampler, vec4 P, vec2 dPdx,

vec2 dPdy);

gvec4 textureProjGradOset(gsampler2D sampler, vec3 P, vec2 dPdx,

vec2 dPdy, ivec2 oset);

gvec4 textureProjGradOset(gsampler2D sampler, vec4 P, vec2 dPdx,

vec2 dPdy, ivec2 oset);

gvec4 textureProjGradOset(gsampler3D sampler, vec4 P, vec3 dPdx,

vec3 dPdy, ivec3 oset);

oat textureProjGradOset(sampler2DShadow sampler, vec4 P, vec2 dPdx,

vec2 dPdy, ivec2 oset);

Fragment Processing Funcons [8.9]

Approximated using local dierencing.

T dFdx(T p); Derivave in x

T dFdy(T p); Derivave in y

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

Reference card producon by Miller & Mattson www.millermason.com

WebGL and OpenGL ES are trademarks of Khronos Group. The Khronos Group is an

industry consorum creang open standards for the authoring and acceleraon of

parallel compung, graphics and dynamic media on a wide variety of plaorms 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.

Webgl20 Reference Guide

Navigation menu

Versions of this User Manual:

Views

Navigation