Scribd
Upload
200 views

Webgl Reference Card 1 - 0 PDF

Uploaded by

Marinos Giannoukakis
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
200 views

Webgl Reference Card 1 - 0 PDF

Uploaded by

Marinos Giannoukakis
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

WebGL 1.

0 API Quick Reference Card Page 1


WebGL® is a software interface for accessing graphics hardware The WebGL Context and getContext() [2.5]
from within a web browser. Based on OpenGL ES 2.0, WebGL allows a
programmer to specify the objects and operations involved in producing This object manages OpenGL state For example:
high-quality graphical images, specifically color images of 3D objects. and renders to a drawing buffer, <!DOCTYPE html>
which must is also be created at the <html><body>
• [n.n.n] refers to sections in the WebGL 1.0 specification, available at same time of as the context creation. <canvas id=”c”></canvas>
www.khronos.org/webgl Create the WebGLRenderingContext <script type=”text/javascript”>
• Content marked in purple does not have a corresponding function in object and drawing buffer by calling var canvas = document.getElementById(“c”);
var gl = canvas.getContext(“webgl”);
OpenGL ES. The OpenGL ES 2.0 specification is available at the getContext method of a given gl.clearColor(1.0, 0.0, 0.0, 1.0);
www.khronos.org/registry/gles HTMLCanvasElement object with the gl.clear(gl.COLOR_BUFFER_BIT);
WebGL function calls behave identically to their OpenGL ES counterparts exact string ‘webgl’. The drawing buffer </script>
unless otherwise noted. is also created by getContext. </body></html>

Interfaces WebGLObject [5.3] WebGLRenderingContext [5.13]


Interfaces are optional requests and may be ignored by an This is the parent interface for all WebGL resource objects. This is the prinicpal interface in WebGL. The functions listed on
implementation. See getContextAttributes for actual values. Resource interface objects: this reference card are available within this interface.
WebGLBuffer [5.4] OpenGL Buffer Object. Attributes:
WebGLContextAttributes [5.2]
This interface contains requested drawing surface attributes WebGLProgram [5.6] OpenGL Program Object. canvas Type: HTMLCanvasElement
and is passed as the second parameter to getContext. WebGLRenderbuffer [5.7] OpenGL Renderbuffer Object. A reference to the canvas element which created this context.
Attributes: WebGLShader [5.8] OpenGL Shader Object. drawingBufferWidth Type: GLsizei
alpha Default: true WebGLTexture [5.9] OpenGL Texture Object. The actual width of the drawing buffer, which may differ from the
If true, requests a drawing buffer with an alpha channel for the width attribute of the HTMLCanvasElement if the implementation is
WebGLUniformLocation [5.10] Location of a uniform variable in a unable to satisfy the requested width or height.
purposes of performing OpenGL destination alpha operations
shader program.
and compositing with the page. drawingBufferHeight Type: GLsizei
WebGLActiveInfo [5.11] Information returned from calls to
depth Default: true getActiveAttrib and getActiveUniform. The actual height of the drawing buffer, which may differ from the
If true, requests drawing buffer with a depth buffer of at least Has the following read-only height attribute of the HTMLCanvasElement if the implementation is
16 bits. properties: name, size, type. unable to satisfy the requested width or height
stencil Default: false
If true, requests a stencil buffer of at least 8 bits.
antialias Default: true
If true, requests drawing buffer with antialiasing using its choice ArrayBuffer and Typed Arrays [5.12] ViewType(ArrayBuffer buffer, [optional] ulong byteOffset,
[optional] ulong length)
of technique (multisample/supersample) and quality. 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
premultipliedAlpha Default: true modified using one or more typed array views. offset, extending for optional length elements.
If true, requests drawing buffer which contains colors with ArrayBuffer buffer: Read-only, buffer backing this view
premultiplied alpha. (Ignored if Alpha is false.) Buffers ulong byteOffset: Read-only, byte offset of view start in buffer
preserveDrawingBuffer Default: false ArrayBuffer(ulong byteLength) ulong length: Read-only, number of elements in this view
If true, requests that contents of the drawing buffer remain in ulong byteLength: read-only, length of view in bytes. Other Properties
between frames, at potential performance cost. Creates a new buffer. To modify the data, create one or more ulong byteLength: Read-only, length of view in bytes.
views referencing it. const ulong BYTES_PER_ELEMENT: element size in bytes.
Views Methods
Per-Fragment Operations [5.13.3] In the following, ViewType may be Int8Array, Int16Array,
void blendColor(float red, float green, float blue, float alpha) Int32Array, Uint8Array, Uint16Array, Uint32Array, Float32Array. view[i] = get/set element i
void blendEquation(enum mode) ViewType(ulong length) set(ViewType other, [optional] ulong offset)
mode: See modeRGB for blendEquationSeparate Creates a view and a new underlying buffer. set(type[] other, [optional] ulong offset)
void blendEquationSeparate(enum modeRGB, ulong length: Read-only, number of elements in this view. Replace elements in this view with those from other, starting
enum modeAlpha) ViewType(ViewType other) at optional offset.
modeRGB, and modeAlpha: FUNC_ADD, FUNC_SUBTRACT,
FUNC_REVERSE_SUBTRACT Creates new underlying buffer and copies ‘other’ array. ViewType subset(long begin, [optional] long end)
void blendFunc(enum sfactor, enum dfactor) ViewType(type[] other) Return a subset of this view, referencing the same underlying
sfactor: Same as for dfactor, plus SRC_ALPHA_SATURATE Creates new underlying buffer and copies ‘other’ array. buffer.
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 Whole Framebuffer Operations [5.13.3] void clearStencil(int s)
Note: Src and dst factors may not both reference constant color void colorMask(bool red, bool green, bool blue, bool alpha)
void clear(ulong mask) [5.13.11]
void blendFuncSeparate(enum srcRGB, enum dstRGB, mask: Bitwise OR of {COLOR, DEPTH, STENCIL}_BUFFER_BIT void depthMask(bool flag)
enum srcAlpha, enum dstAlpha)
srcRGB, srcAlpha: See sfactor for blendFunc void clearColor(float red, float green, float blue, float alpha) void stencilMask(uint mask)
dstRGB, dstAlpha: See dfactor for blendFunc void clearDepth(float depth) void stencilMaskSeparate(enum face, uint mask)
Note: Src and dst factors may not both reference constant color depth: Clamped to the range 0 to 1. face: FRONT, BACK, FRONT_AND_BACK
void depthFunc(enum func)
func: NEVER, ALWAYS, LESS, EQUAL, LEQUAL, GREATER,
GEQUAL, NOTEQUAL
void sampleCoverage(float value, bool invert)
Buffer Objects [5.13.5] void bufferSubData(enum target, long offset, Object data)
target: ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER
Once bound, buffers may not be rebound with a different Target.
void stencilFunc(enum func, int ref, uint mask) Object createBuffer()
func: NEVER, ALWAYS, LESS, LEQUAL, [NOT]EQUAL, GREATER, void bindBuffer(enum target, Object buffer)
target: ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER Note: Corresponding OpenGL ES function is GenBuffers
GEQUAL
void stencilFuncSeparate(enum face, enum func, int ref, void bufferData(enum target, long size, enum usage) void deleteBuffer(Object buffer)
uint mask) target: ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER any getBufferParameter(enum target, enum pname)
face: FRONT, BACK, FRONT_AND_BACK usage: STATIC_DRAW, STREAM_DRAW, DYNAMIC_DRAW target: ARRAY_BUFFER, ELEMENT_ ARRAY_BUFFER
func: NEVER, ALWAYS, LESS, LEQUAL, [NOT]EQUAL, GREATER, pname: BUFFER_SIZE, BUFFER_USAGE
GEQUAL void bufferData(enum target, Object data, enum usage)
target and usage: Same as for bufferData above bool isBuffer(Object buffer)
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, View and Clip [5.13.3 - 5.13.4] Rasterization [5.13.3] void frontFace(enum mode)
mode: CCW, CW
enum zpass) The viewport specifies the affine transformation of x void cullFace(enum mode)
face: FRONT, BACK, FRONT_AND_BACK and y from normalized device coordinates to window mode: BACK, FRONT_AND_BACK, void lineWidth(float width)
fail, zfail, and zpass: See fail, zfail, and zpass for stencilOp coordinates. Drawing buffer size is determined by the FRONT void polygonOffset(float factor,
HTMLCanvasElement. float units)
void depthRange(float zNear, float zFar)
Detect and Enable Extensions [5.13.14] zNear: Clamped to the range 0 to 1 Must be <= zFar
zFar: Clamped to the range 0 to 1.
string[ ] getSupportedExtensions()
void scissor(int x, int y, long width, long height) Detect context lost events [5.13.13]
object getExtension(string name) void viewport(int x, int y, long width, long height) bool isContextLost()

©2011 Khronos Group - Rev. 0618 www.khronos.org/webgl


WebGL 1.0 API Quick Reference Card - Page 2 Page 2
Programs and Shaders [5.13.9] Texture Objects [5.13.8] Special Functions [5.13.3]
Rendering with OpenGL ES 2.0 requires the use of shaders. Texture objects provide storage and state for texturing contextStruct getContextAttributes() [5.13.2]
Shaders must be loaded with a source string (shaderSource), operations. WebGL adds an error for operations relating to the
compiled (compileShader), and attached to a program currently bound texture if no texture is bound. void disable(enum cap)
(attachShader) which must be linked (linkProgram) and then cap: BLEND, CULL_FACE, DEPTH_TEST, DITHER,
used (useProgram). void activeTexture(enum texture) [5.13.3] POLYGON_OFFSET_FILL, SAMPLE_ALPHA_TO_COVERAGE,
texture: [TEXTURE0..TEXTUREi] where i = SAMPLE_COVERAGE, SCISSOR_TEST, STENCIL_TEST
void attachShader(Object program, Object shader) MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1
void enable(enum cap)
void bindAttribLocation(Object program, uint index, void bindTexture(enum target, Object texture) cap: See cap for disable
string name) target: TEXTURE_2D, TEXTURE_CUBE_MAP
void finish() [5.13.11]
void compileShader(Object shader) void copyTexImage2D(enum target, int level,
enum internalformat, int x, int y, long width, void flush() [5.13.11]
Object createProgram() long height, int border) enum getError()
Object createShader(enum type) target: TEXTURE_2D, TEXTURE_CUBE_MAP_POSITIVE_{X,Y,Z} Returns: OUT_OF_MEMORY, INVALID_{ENUM, OPERATION,
type: VERTEX_SHADER, FRAGMENT_SHADER TEXTURE_CUBE_MAP_NEGATIVE_{X,Y,Z} FRAMEBUFFER_OPERATION, VALUE}, NO_ERROR,
internalformat: ALPHA, LUMINANCE, LUMINANCE_ALPHA, RGB[A] CONTEXT_LOST_WEBGL
void deleteProgram(Object program)
void copyTexSubImage2D(enum target, int level, any getParameter(enum pname)
void deleteShader(Object shader) int xoffset, int yoffset, int x, int y, long width, pname: {ALPHA, RED, GREEN, BLUE, SUBPIXEL}_BITS,
long height) ACTIVE_TEXTURE, ALIASED_{LINE_WIDTH, POINT_SIZE}_RANGE,
void detachShader(Object program, Object shader) ARRAY_BUFFER_BINDING, BLEND_DST_{ALPHA, RGB},
target: See target for copyTexImage2D
Object[ ] getAttachedShaders(Object program) BLEND_EQUATION_{ALPHA, RGB}, BLEND_SRC_{ALPHA, RGB},
Object createTexture() BLEND[_COLOR], COLOR_{CLEAR_VALUE, WRITEMASK},
any getProgramParameter(Object program, enum pname) Note: Corresponding OpenGL ES function is GenTextures [NUM_]COMPRESSED_TEXTURE_FORMATS, CULL_FACE[_MODE],
Note: Corresponding OpenGL ES function is GetProgramiv void deleteTexture(Object texture) CURRENT_PROGRAM, DEPTH_{BITS, CLEAR_VALUE, FUNC,
pname: DELETE_STATUS, LINK_STATUS, VALIDATE_STATUS, RANGE, TEST, WRITEMASK}, ELEMENT_ARRAY_BUFFER_BINDING,
ATTACHED_SHADERS, ACTIVE_{ATTRIBUTES, UNIFORMS} void generateMipmap(enum target) DITHER, FRAMEBUFFER_BINDING, FRONT_FACE,
target: TEXTURE_2D, TEXTURE_CUBE_MAP GENERATE_MIPMAP_HINT, LINE_WIDTH,
string getProgramInfoLog(Object program) MAX_[COMBINED_]TEXTURE_IMAGE_UNITS,
any getTexParameter(enum target, enum pname) MAX_{CUBE_MAP_TEXTURE, RENDERBUFFER, TEXTURE}_SIZE,
any getShaderParameter(Object shader, enum pname) target: TEXTURE_2D, TEXTURE_CUBE_MAP MAX_VARYING_VECTORS, MAX_VERTEX_{ATTRIBS,
Note: Corresponding OpenGL ES function is GetShaderiv pname: TEXTURE_WRAP_{S, T}, TEXTURE_{MIN, MAG}_FILTER TEXTURE_IMAGE_UNITS, UNIFORM_VECTORS},
pname: SHADER_TYPE, DELETE_STATUS, COMPILE_STATUS bool isTexture(Object texture) MAX_VIEWPORT_DIMS, PACK_ALIGNMENT,
string getShaderInfoLog(Object shader) POLYGON_OFFSET_{FACTOR, FILL, UNITS},
void texImage2D(enum target, int level, RENDERBUFFER_BINDING, RENDERER, SAMPLE_BUFFERS,
string getShaderSource(Object shader) enum internalformat, long width, long height, SAMPLE_COVERAGE_{INVERT, VALUE}, SAMPLES,
bool isProgram(Object program) int border, enum format, enum type, Object pixels) SCISSOR_{BOX, TEST}, SHADING_LANGUAGE_VERSION,
void texImage2D(enum target, int level, STENCIL_{BITS, CLEAR_VALUE, TEST}, STENCIL_[BACK_]{FAIL,
bool isShader(Object shader) FUNC, REF,VALUE_MASK, WRITEMASK},
enum internalformat, enum format, enum type, STENCIL_[BACK_]PASS_DEPTH_{FAIL, PASS},
void linkProgram(Object program) Object object) TEXTURE_BINDING_{2D, CUBE_MAP}, UNPACK_ALIGNMENT,
void shaderSource(Object shader, string source) Note: The following values apply to all variations of texImage2D. UNPACK_{COLORSPACE_CONVERSION_WEBGL, FLIP_Y_WEBGL,
void useProgram(Object program) target: See target for copyTexImage2D PREMULTIPLY_ALPHA_WEBGL}, VENDOR, VERSION, VIEWPORT
void validateProgram(Object program) internalformat: See internalformat for copyTexImage2D void hint(enum target, enum mode)
format: ALPHA, RGB, RGBA, LUMINANCE, LUMINANCE_ALPHA target: GENERATE_MIPMAP_HINT
type: UNSIGNED_BYTE, UNSIGNED_SHORT_5_6_5, hint: FASTEST, NICEST, DONT_CARE
UNSIGNED_SHORT_4_4_4_4, UNSIGNED_SHORT_5_5_5_1
Uniforms and Attributes [5.13.10] object: pixels of type ImageData, image of type HTMLImageElement, bool isEnabled(enum cap)
cap: cap: See cap for disable
Values used by the shaders are passed in as uniform of vertex canvas of type HTMLCanvasElement,
attributes. video of type HTMLVideoElement void pixelStorei(enum pname, int param)
pname: UNPACK_ALIGNMENT, PACK_ALIGNMENT,
void disableVertexAttribArray(uint index) void texParameterf(enum target, enum pname, float param) UNPACK_{FLIP_Y_WEBGL, PREMULTIPLY_ALPHA_WEBGL},
index: [0, MAX_VERTEX_ATTRIBS - 1] target: TEXTURE_2D, TEXTURE_CUBE_MAP UNPACK_COLORSPACE_CONVERSION_WEBGL
pname: TEXTURE_WRAP_{S, T}, TEXTURE_{MIN, MAG}_FILTER
void enableVertexAttribArray(uint index) void texParameteri(enum target, enum pname, int param)
index: [0, MAX_VERTEX_ATTRIBS - 1]
Object getActiveAttrib(Object program, uint index)
target: TEXTURE_2D, TEXTURE_CUBE_MAP
pname: TEXTURE_WRAP_{S, T}, TEXTURE_{MIN, MAG}_FILTER Renderbuffer Objects [5.13.7]
Renderbuffer objects are used to provide storage for the
Object getActiveUniform(Object program, uint index) void texSubImage2D(enum target, int level, int xoffset, individual buffers used in a framebuffer object.
int yoffset, long width, long height, enum format,
ulong getAttribLocation(Object program, string name) enum type, Object pixels) void bindRenderbuffer(enum target, Object renderbuffer)
target: RENDERBUFFER
any getUniform(Object program, uint location) void texSubImage2D(enum target, int level, int xoffset,
int yoffset, enum format, enum type, Object object) Object createRenderbuffer()
uint getUniformLocation(Object program, string name)
Note: Following values apply to all variations of Note: Corresponding OpenGL ES function is GenRenderbuffers
any getVertexAttrib(uint index, enum pname) texSubImage2D.
pname: CURRENT_VERTEX_ATTRIB , VERTEX_ATTRIB_ARRAY_ void deleteRenderbuffer(Object renderbuffer)
target: TEXTURE_CUBE_MAP_POSITIVE_{X, Y, Z},
{BUFFER_BINDING, ENABLED, SIZE, STRIDE, TYPE, NORMALIZED} TEXTURE_CUBE_MAP_NEGATIVE_{X, Y, Z} any getRenderbufferParameter(enum target, enum pname)
long getVertexAttribOffset(uint index, enum pname) format and type: See format and type for texImage2D target: RENDERBUFFER
object: Same as for texImage2D pname: RENDERBUFFER_{WIDTH,HEIGHT,INTERNAL_FORMAT},
Note: Corres. OpenGL ES function is GetVertexAttribPointerv
pname: VERTEX_ATTRIB_ARRAY_POINTER RENDEDRBUFFER_{RED,GREEN,BLUE,ALPHA,DEPTH,STENCIL}_SIZE
bool isRenderbuffer(Object renderbuffer)
void uniform[1234][fi](uint location, ...)
void renderbufferStorage(enum target,
void uniform[1234][fi]v(uint location, Array value) Writing to the Draw Buffer [5.13.11] enum internalformat, long width, long height)
void uniformMatrix[234]fv(uint location, bool transpose, Array) When rendering is directed to drawing buffer, OpenGL ES 2.0 target: RENDERBUFFER
transpose: FALSE rendering calls cause the drawing buffer to be presented to the internalformat: DEPTH_COMPONENT16, RGBA4, RGB5_A1,
HTML page compositor at start of next compositing operation. RGB565, STENCIL_INDEX8
void vertexAttrib[1234]f(uint index, ...)
void drawArrays(enum mode, int first, long count)
void vertexAttrib[1234]fv(uint index, Array value) mode: POINTS, LINE_STRIP, LINE_LOOP, LINES, TRIANGLE_STRIP,
TRIANGLE_FAN, TRIANGLES Read Back Pixels [5.13.12]
void vertexAttribPointer(uint index, int size, enum type, first: May not be a negative value. Pixels in the current framebuffer can be read back into an
bool normalized, long stride, long offset) ArrayBufferView object.
type: BYTE, SHORT, UNSIGNED_{BYTE, SHORT}, FIXED, FLOAT void drawElements(enum mode, long count, enum type,
index: [0, MAX_VERTEX_ATTRIBS - 1] long offset) void readPixels(int x, int y, long width, long height,
stride: [0, 255] mode: POINTS, LINE_STRIP, LINE_LOOP, LINES, TRIANGLE_STRIP, enum format, enum type, Object pixels)
offset, stride: must be a multiple of the type size in WebGL TRIANGLE_FAN, TRIANGLES format: RGBA
type: UNSIGNED_BYTE, UNSIGNED_SHORT type: UNSIGNED_BYTE

Framebuffer Objects [5.13.6] Object createFramebuffer() void framebufferTexture2D(enum target, enum attachment,
enum textarget, Object texture, int level)
Framebuffer objects provide an alternative rendering target to Note: Corresponding OpenGL ES function is GenFramebuffers
target and attachment: Same as for framebufferRenderbuffer
the drawing buffer. void deleteFramebuffer(Object buffer) textarget: TEXTURE_2D, TEXTURE_CUBE_MAP_POSITIVE{X, Y, Z},
void bindFramebuffer(enum target, Object framebuffer) TEXTURE_CUBE_MAP_NEGATIVE{X, Y, Z},
void framebufferRenderbuffer(enum target, enum attachment,
target: FRAMEBUFFER enum renderbuffertarget, Object renderbuffer) any getFramebufferAttachmentParameter(enum target,
enum checkFramebufferStatus(enum target) target: FRAMEBUFFER enum attachment, enum pname)
target: FRAMEBUFFER attachment: COLOR_ATTACHMENT0, {DEPTH, STENCIL}_ATTACHMENT target and attachment: Same as for framebufferRenderbuffer
Returns: FRAMEBUFFER_{COMPLETE, UNSUPPORTED}, renderbuffertarget: RENDERBUFFER pname: FRAMEBUFFER_ATTACHMENT_OBJECT_{TYPE, NAME},
FRAMEBUFFER_INCOMPLETE_{ATTACHMENT, DIMENSIONS, bool isFramebuffer(Object framebuffer) FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL,
MISSING_ATTACHMENT} FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE

©2011 Khronos Group - Rev. 0618


0211 www.khronos.org/webgl
WebGL 1.0 API Quick Reference Card Page 3
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.
OpenGL ES processing pipeline. # #define #undef #if #ifdef #ifndef #else
#elif #endif #error #pragma #extension #version #line
[n.n.n] refers to sections in the OpenGL ES
Shading Language 1.0 specification at Examples of Preprocessor Directives
www.khronos.org/registry/gles • “#version 100” in a shader program specifies that the program is written in GLSL ES version 1.00. It is optional. If used, it must occur before
anything else in the program other than whitespace or comments.
• #extension extension_name : behavior, where behavior can be require, enable, warn, or disable; and where extension_name is the
extension supported by the compiler
Types [4.1] Predefined Macros
A shader can aggregate these using arrays and structures to build
more complex types. There are no pointer types. Decimal integer constant that is one more than the number of preceding new-lines in the current
__LINE__ source string
Basic Types
__VERSION__ Decimal integer, e.g.: 100
void no function return value or empty parameter list
GL_ES Defined and set to integer 1 if running on an OpenGL-ES Shading Language.
bool Boolean
GL_FRAGMENT_PRECISION_HIGH 1 if highp is supported in the fragment language, else undefined [4.5.4]
int signed integer
float floating scalar
vec2, vec3, vec4 n-component floating point vector
Qualifiers Precision and Precision Qualifiers [4.5]
Any floating point, integer, or sampler declaration can have the
bvec2, bvec3, bvec4 Boolean vector
Storage Qualifiers [4.3] type preceded by one of these precision qualifiers:
ivec2, ivec3, ivec4 signed integer vector Variable declarations may be preceded by one storage highp Satisfies minimum requirements for the vertex language.
mat2, mat3, mat4 2x2, 3x3, 4x4 float matrix qualifier. Optional in the fragment language.
none (Default) local read/write memory, or input parameter mediump Satisfies minimum requirements for the fragment
sampler2D access a 2D texture language. Its range and precision is between that
const Compile-time constant, or read-only function provided by lowp and highp.
samplerCube access cube mapped texture parameter lowp Range and precision can be less than mediump, but still
attribute Linkage between a vertex shader and OpenGL ES for represents all color values for any color channel.
Structures and Arrays [4.1.8, 4.1.9]
per-vertex data For example:
Structures struct type-name {
members lowp float color;
uniform Value does not change across the primitive being
} struct-name[]; // optional variable declaration, processed, uniforms form the linkage between a varying mediump vec2 Coord;
// optionally an array shader, OpenGL ES, and the application lowp ivec2 foo(lowp mat3);
Arrays float foo[3]; highp mat4 m;
* structures and blocks can be arrays varying Linkage between a vertex shader and fragment shader
for interpolated data Ranges & precisions for precision qualifiers (FP=floating point):
* only 1-dimensional arrays supported
* structure members can be arrays FP Magnitude Integer
Uniform [4.3.4] FP Range Range FP Precision Range
Use to declare global variables whose values are the same highp (−262 , 262) (2–62 , 262) Relative 2–16 (−216 , 216)
across the entire primitive being processed. All uniform
variables are read-only. Use uniform qualifiers with any basic (−2 , 2 ) (2 , 2 ) Relative 2
Operators and Expressions mediump (−210 , 210)
14 14 –14 14 –10
data types, to declare a variable whose type is a structure, or
Operators [5.1] Numbered in order of precedence. The an array of any of these. For example: lowp (−2, 2) (2–8 , 2) Absolute 2–8 (−28 , 28)
relational and equality operators > < <= >= == != evaluate to a uniform vec4 lightPosition;
Boolean. To compare vectors component-wise, use functions such as A precision statement establishes a default precision qualifier
lessThan(), equal(), etc. for subsequent int, float, and sampler declarations, e.g.:
Varying [4.3.5]
precision highp int;
Operator Description Associativity The varying qualifier can be used only with the data types
float, vec2, vec3, vec4, mat2, mat3, mat4, or arrays of these. Invariant Qualifiers Examples [4.6]
1. () parenthetical grouping N/A Structures cannot be varying. Varying variables are required
#pragma STDGL invariant(all) Force all output variables to be
[] array subscript to have global scope. Declaration is as follows:
invariant
2.
() function call & constructor structure
L-R
varying vec3 normal; invariant gl_Position; Qualify a previously declared
. field or method selector, swizzler variable
++ -- postfix increment and decrement Parameter Qualifiers [4.4]
Input values are copied in at function call time, output values invariant varying mediump Qualify as part of a variable
++ -- prefix increment and decrement are copied out at function return time. vec3 Color; declaration
3. R-L
+- ! unary
none (Default) same as in
4. * / multiplicative L-R in For function parameters passed into a function
Order of Qualification [4.7]
When multiple qualifications are present, they must follow a
5. +- additive L-R out For function parameters passed back out of a function, but strict order. This order is as follows.
not initialized for use when passed in invariant, storage, precision
7. < > <= >= relational L-R
inout For function parameters passed both into and out of a storage, parameter, precision
8. == != equality L-R function
12. && logical and L-R
13. ^^ logical exclusive or L-R
14. || logical inclusive or L-R
Aggregate Operations and Constructors
selection (Selects one entire operand.
Matrix Constructor Examples [5.4] m = m +/- m; // matrix component-wise addition/subtraction
15. ?: Use mix() to select individual components L-R mat2(float) // init diagonal m = m * m; // linear algebraic multiply
of vectors.) mat2(vec2, vec2); // column-major order m = v * m; // row vector * matrix linear algebraic multiply
mat2(float, float, float, float); // column-major order m = m * v; // matrix * column vector linear algebraic multiply
= f = dot(v, v); // vector dot product
assignment
16. += -= L-R Structure Constructor Example [5.4.3] v = cross(v, v); // vector cross product
arithmetic assignments
*= /= struct light {float intensity; vec3 pos; }; m = matrixCompMult(m, m); // component-wise multiply
17. , sequence L-R light lightVar = light(3.0, vec3(1.0, 2.0, 3.0));
Structure Operations [5.7]
Matrix Components [5.6] Select structure fields using the period (.) operator. Other
Vector Components [5.5] Access components of a matrix with array subscripting syntax. operators include:
In addition to array numeric subscript syntax, names of vector For example: . field selector
components are denoted by a single letter. Components can be mat4 m; // m represents a matrix == != equality
swizzled and replicated, e.g.: pos.xx, pos.zy m[1] = vec4(2.0); // sets second column to all 2.0
= assignment
{x, y, z, w} Use when accessing vectors that represent points or m[0][0] = 1.0; // sets upper left element to 1.0
normals m[2][3] = 2.0; // sets 4th element of 3rd column to 2.0
Array Operations [4.1.9]
{r, g, b, a} Use when accessing vectors that represent colors Examples of operations on matrices and vectors: Array elements are accessed using the array subscript
{s, t, p, q} Use when accessing vectors that represent texture m = f * m; // scalar * matrix component-wise operator “[ ]”. For example:
coordinates v = f * v; // scalar * vector component-wise
v = v * v; // vector * vector component-wise
diffuseColor += lightIntensity[3] * NdotL;

©2011 Khronos Group - Rev. 0618 www.khronos.org/webgl


WebGL 1.0 API Quick Reference Card Page 4
Built-In Inputs, Outputs, and Constants [7] Built-In Constants With Minimum Values [7.4]
Shader programs use Special Variables to communicate with fixed-function parts of the pipeline. Output Special Variables Built-in Constant Minimum value
may be read back after writing. Input Special Variables are read-only. All Special Variables have global scope. const mediump int gl_MaxVertexAttribs 8
Vertex Shader Special Variables [7.1] const mediump int gl_MaxVertexUniformVectors 128
Outputs: const mediump int gl_MaxVaryingVectors 8
Variable Description Units or coordinate system const mediump int gl_MaxVertexTextureImageUnits 0
highp vec4 gl_Position; transformed vertex position clip coordinates const mediump int gl_MaxCombinedTextureImageUnits 8
mediump float gl_PointSize; transformed point size (point rasterization only) pixels const mediump int gl_MaxTextureImageUnits 8
Fragment Shader Special Variables [7.2] const mediump int gl_MaxFragmentUniformVectors 16
Fragment shaders may write to gl_FragColor or to one or more elements of gl_FragData[], but not both. const mediump int gl_MaxDrawBuffers 1
The size of the gl_FragData array is given by the built-in constant gl_MaxDrawBuffers.
Inputs: Built-In Uniform State [7.5]
Variable Description Units or coordinate system Specifies depth range in window coordinates. If an implementation does
mediump vec4 gl_FragCoord; fragment position within frame buffer window coordinates
not support highp precision in the fragment language, and state is listed as
highp, then that state will only be available as mediump in the fragment
bool gl_FrontFacing; fragment belongs to a front-facing primitive Boolean language.
mediump vec2 gl_PointCoord; fragment position within a point (point rasterization only) 0.0 to 1.0 for each component
struct gl_DepthRangeParameters {
Outputs: highp float near; // n
Variable Description Units or coordinate system highp float far; // f
highp float diff; // f - n
mediump vec4 gl_FragColor; fragment color RGBA color };
mediump vec4 gl_FragData[n] fragment color for color attachment n RGBA color uniform gl_DepthRangeParameters gl_DepthRange;

Built-In Functions Statements and Structure


Angle & Trigonometry Functions [8.1] Geometric Functions [8.4] Iteration and Jumps [6]
Component-wise operation. Parameters specified as angle are These functions operate on vectors as vectors, not
Function Call call by value-return
assumed to be in units of radians. T is float, vec2, vec3, vec4. component-wise. T is float, vec2, vec3, vec4.
float length(T x) length of vector Iteration for (;;) { break, continue }
T radians(T degrees) degrees to radians while ( ) { break, continue }
T degrees(T radians) radians to degrees float distance(T p0, T p1) distance between points do { break, continue } while ( );
T sin(T angle) sine float dot(T x, T y) dot product Selection if ( ) { }
vec3 cross(vec3 x, vec3 y) cross product if ( ) { } else { }
T cos(T angle) cosine
T normalize(T x) normalize vector to length 1 Jump break, continue, return
T tan(T angle) tangent
T faceforward(T N, T I, T Nref) returns N if dot(Nref, I) < 0, else -N discard // Fragment shader only
T asin(T x) arc sine
T reflect(T I, T N) reflection direction I - 2 * dot(N,I) * N Entry void main()
T acos(T x) arc cosine
T refract(T I, T N, float eta) refraction vector
T atan(T y, T x) arc tangent
T atan(T y_over_x) Matrix Functions [8.5] Sample Program
Type mat is any matrix type.
A shader pair that applies diffuse and ambient lighting to a
Exponential Functions [8.2] mat matrixCompMult(mat x, mat y) multiply x by y component-wise textured object.
Component-wise operation. T is float, vec2, vec3, vec4.
T pow(T x, T y) xy Vector Relational Functions [8.6]
Compare x and y component-wise. Sizes of input and return vectors Vertex Shader
T exp(T x) ex for a particular call must match. Type bvec is bvecn; vec is vecn; ivec uniform mat4 mvp_matrix; // model-view-projection matrix
T log(T x) ln is ivecn (where n is 2, 3, or 4). T is the union of vec and ivec. uniform mat3 normal_matrix; // normal matrix
bvec lessThan(T x, T y) x<y uniform vec3 ec_light_dir; // light direction in eye coords
T exp2(T x) 2x
bvec lessThanEqual(T x, T y) x <= y attribute vec4 a_vertex; // vertex position
T log2(T x) log2 attribute vec3 a_normal; // vertex normal
bvec greaterThan(T x, T y) x>y
T sqrt(T x) square root bvec greaterThanEqual(T x, T y) x >= y attribute vec2 a_texcoord; // texture coordinates
T inversesqrt(T x) inverse square root bvec equal(T x, T y) x == y varying float v_diffuse;
bvec equal(bvec x, bvec y) varying vec2 v_texcoord;
Common Functions [8.3] bvec notEqual(T x, T y) x!= y
Component-wise operation. T is float, vec2, vec3, vec4. bvec notEqual(bvec x, bvec y) void main(void)
T abs(T x) absolute value bool any(bvec x) true if any component of x is true {
T sign(T x) returns -1.0, 0.0, or 1.0 bool all(bvec x) true if all components of x are true // put vertex normal into eye coords
vec3 ec_normal = normalize(normal_matrix * a_normal);
T floor(T x) nearest integer <= x bvec not(bvec x) logical complement of x
T ceil(T x) nearest integer >= x // emit diffuse scale factor, texcoord, and position
Texture Lookup Functions [8.7]
T fract(T x) x - floor(x) Available only in vertex shaders. v_diffuse = max(dot(ec_light_dir, ec_normal), 0.0);
vec4 texture2DLod(sampler2D sampler, vec2 coord, float lod) v_texcoord = a_texcoord;
T mod(T x, T y) gl_Position = mvp_matrix * a_vertex;
modulus
T mod(T x, float y) vec4 texture2DProjLod(sampler2D sampler, vec3 coord, float lod) }
T min(T x, T y) vec4 texture2DProjLod(sampler2D sampler, vec4 coord, float lod)
minimum value
T min(T x, float y)
vec4 textureCubeLod(samplerCube sampler, vec3 coord, float lod) Fragment Shader
T max(T x, T y)
maximum value Available only in fragment shaders. precision mediump float;
T max(T x, float y)
vec4 texture2D(sampler2D sampler, vec2 coord, float bias)
T clamp(T x, T minVal, T maxVal) uniform sampler2D t_reflectance;
T clamp(T x, float minVal, min(max(x, minVal), maxVal) vec4 texture2DProj(sampler2D sampler, vec3 coord, float bias) uniform vec4 i_ambient;
float maxVal) vec4 texture2DProj(sampler2D sampler, vec4 coord, float bias)
varying float v_diffuse;
T mix(T x, T y, T a) vec4 textureCube(samplerCube sampler, vec3 coord, float bias) varying vec2 v_texcoord;
linear blend of x and y
T mix(T x, T y, float a)
Available in vertex and fragment shaders. void main (void)
T step(T edge, T x) vec4 texture2D(sampler2D sampler, vec2 coord)
0.0 if x < edge, else 1.0 {
T step(float edge, T x)
vec4 texture2DProj(sampler2D sampler, vec3 coord) vec4 color = texture2D(t_reflectance, v_texcoord);
T smoothstep(T edge0, T edge1, T x)
T smoothstep(float edge0, clip and smooth vec4 texture2DProj(sampler2D sampler, vec4 coord) gl_FragColor = color * (vec4(v_diffuse) + i_ambient);
float edge1, T x) vec4 textureCube(samplerCube sampler, vec3 coord) }

WebGL and OpenGL ES are registered 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 www.khronos.org to learn about the Khronos Group. See www.khronos.org/webgl to learn about WebGL.
See www.khronos.org/opengles to learn about OpenGL ES.

©2011 Khronos Group - Rev. 0618 Reference card production by Miller & Mattson www.millermattson.com www.khronos.org/webgl

You might also like