Webgl 1.0 API Quick Reference Card Page 1

WebGL 1.0 API QuiCk ReferenCe Card Page 1 WebGL® is a sofware 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 operatons involved in producing This object manages OpenGL state For example: high-quality graphical images, specifcally color images of 3D objects. and renders to a drawing bufer, <!DOCTYPE html> which must is also be created at the <html><body> • [n.n.n] refers to sectons in the WebGL 1.0 specifcaton, available at same tme of as the context creaton. <canvas id=”c”></canvas> www.khronos.org/webgl Create the WebGLRenderingContext <script type=”text/javascript”> • Content marked in purple does not have a corresponding functon in object and drawing bufer by calling var canvas = document.getElementById(“c”); OpenGL ES. The OpenGL ES 2.0 specifcaton is available at the getContext method of a given var gl = canvas.getContext(“webgl”); 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 functon calls behave identcally to their OpenGL ES counterparts exact string ‘webgl’. The drawing bufer </script> unless otherwise noted. is also created by getContext. </body></html> Interfaces WebGLObject [5.3] WebGLRenderingContext [5.13] Interfaces are optonal 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 functons listed on implementaton. See getContextAtributes for actual values. Resource interface objects: this reference card are available within this interface. Atributes: WebGLContextAtributes [5.2] WebGLBufer [5.4] OpenGL Bufer Object. This interface contains requested drawing surface atributes WebGLProgram [5.6] OpenGL Program Object. canvas Type: HTMLCanvasElement and is passed as the second parameter to getContext. WebGLRenderbufer [5.7] OpenGL Renderbufer Object. A reference to the canvas element which created this context. Atributes: WebGLShader [5.8] OpenGL Shader Object. drawingBuferWidth Type: GLsizei alpha Default: true WebGLTexture [5.9] OpenGL Texture Object. The actual width of the drawing bufer, which may difer from the If true, requests a drawing bufer with an alpha channel for the width atribute of the HTMLCanvasElement if the implementaton is WebGLUniformLocaton [5.10] Locaton of a uniform variable in a purposes of performing OpenGL destnaton alpha operatons unable to satsfy the requested width or height. shader program. and compositng with the page. drawingBuferHeight Type: GLsizei WebGLActveInfo [5.11] Informaton returned from calls to depth Default: true getActveAtrib and getActveUniform. The actual height of the drawing bufer, which may difer from the If true, requests drawing bufer with a depth bufer of at least Has the following read-only height atribute of the HTMLCanvasElement if the implementaton is 16 bits. propertes: name, size, type. unable to satsfy the requested width or height stencil Default: false If true, requests a stencil bufer of at least 8 bits. antalias Default: true [5.12] ViewType(ArrayBufer bufer, [optonal] ulong byteOfset, If true, requests drawing bufer with antaliasing using its choice ArrayBufer and Typed Arrays [optonal] ulong length) of technique (multsample/supersample) and quality. Data is transferred to WebGL using ArrayBufer and views. Bufers represent unstructured binary data, which can be Create a new view of given bufer, startng at optonal byte premultpliedAlpha Default: true modifed using one or more typed array views. ofset, extending for optonal length elements. If true, requests drawing bufer which contains colors with ArrayBufer bufer: Read-only, bufer backing this view premultplied alpha. (Ignored if Alpha is false.) Bufers ulong byteOfset: Read-only, byte ofset of view start in bufer preserveDrawingBufer Default: false ArrayBufer(ulong byteLength) ulong length: Read-only, number of elements in this view If true, requests that contents of the drawing bufer remain in ulong byteLength: read-only, length of view in bytes. Other Propertes between frames, at potental performance cost. Creates a new bufer. 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 Operatons [5.13.3] In the following, ViewType may be Int8Array, Int16Array, void blendColor(foat red, foat green, foat blue, foat alpha) Int32Array, Uint8Array, Uint16Array, Uint32Array, Float32Array. view[i] = get/set element i void blendEquaton(enum mode) ViewType(ulong length) set(ViewType other, [optonal] ulong ofset) mode: See modeRGB for blendEquatonSeparate Creates a view and a new underlying bufer. set(type[] other, [optonal] ulong ofset) void blendEquatonSeparate(enum modeRGB, ulong length: Read-only, number of elements in this view. Replace elements in this view with those from other, startng enum modeAlpha) ViewType(ViewType other) at optonal ofset. modeRGB, and modeAlpha: FUNC_ADD, FUNC_SUBTRACT, FUNC_REVERSE_SUBTRACT Creates new underlying bufer and copies ‘other’ array. ViewType subset(long begin, [optonal] 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 bufer and copies ‘other’ array. bufer. 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 Framebufer Operatons [5.13.3] void clearStencil(int s) Note: Src and dst factors may not both reference constant color void clear(ulong mask) [5.13.11] void colorMask(bool red, bool green, bool blue, bool alpha) void blendFuncSeparate(enum srcRGB, enum dstRGB, mask: Bitwise OR of {COLOR, DEPTH, STENCIL}_BUFFER_BIT void depthMask(bool fag) enum srcAlpha, enum dstAlpha) srcRGB, srcAlpha: See sfactor for blendFunc void clearColor(foat red, foat green, foat blue, foat alpha) void stencilMask(uint mask) dstRGB, dstAlpha: See dfactor for blendFunc void clearDepth(foat 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 [5.13.5] void buferSubData(enum target, long ofset, Object data) void sampleCoverage(foat value, bool invert) Bufer Objects target: ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER Once bound, bufers may not be rebound with a diferent Target. void stencilFunc(enum func, int ref, uint mask) void bindBufer(enum target, Object bufer) Object createBufer() func: NEVER, ALWAYS, LESS, LEQUAL, [NOT]EQUAL, GREATER, Note: Corresponding OpenGL ES functon is GenBufers GEQUAL target: ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER void stencilFuncSeparate(enum face, enum func, int ref, void buferData(enum target, long size, enum usage) void deleteBufer(Object bufer) uint mask) target: ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER any getBuferParameter(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 buferData(enum target, Object data, enum usage) target and usage: Same as for buferData above bool isBufer(Object bufer) void stencilOp(enum fail, enum zfail, enum zpass) fail, zfail, and zpass: KEEP, ZERO, REPLACE, INCR, DECR, INVERT, INCR_WRAP, DECR_WRAP [5.13.3 - 5.13.4] [5.13.3] void frontFace(enum mode) void stencilOpSeparate(enum face, enum fail, enum zfail, View and Clip Rasterizaton mode: CCW, CW enum zpass) The viewport specifes the afne transformaton 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(foat width) fail, zfail, and zpass: See fail, zfail, and zpass for stencilOp coordinates. Drawing bufer size is determined by the FRONT void polygonOfset(foat factor, HTMLCanvasElement. foat units) void depthRange(foat zNear, foat 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 QuiCkQuick ReferenCeReference Card - Page 2 Page 2 Programs and Shaders [5.13.9] Texture Objects [5.13.8] Special Functons [5.13.3] Rendering with OpenGL ES 2.0 requires the use of shaders. Texture objects provide storage and state for texturing contextStruct getContextAtributes() [5.13.2] Shaders must be loaded with a source string (shaderSource), operatons. WebGL adds an error for operatons relatng to the compiled (compileShader), and atached to a program currently bound texture if no texture is bound. void disable(enum cap) (atachShader) which must be linked (linkProgram) and then cap: BLEND, CULL_FACE, DEPTH_TEST, DITHER, used (useProgram). void actveTexture(enum texture) [5.13.3] POLYGON_OFFSET_FILL, SAMPLE_ALPHA_TO_COVERAGE, texture: [TEXTURE0..TEXTUREi] where i = SAMPLE_COVERAGE, SCISSOR_TEST,

Webgl 1.0 API Quick Reference Card Page 1

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support