【WebGL】WebGL API 详解

基于 WebGL Specifications 最全面的API释疑。

类型以及对象定义

这部分内容主要定义一部分类型和数据结构。

typedef unsigned long  GLenum;

typedef boolean        GLboolean;

typedef unsigned long  GLbitfield;

typedef byte           GLbyte;

typedef short          GLshort;

typedef long           GLint;

typedef long           GLsizei;

typedef long long      GLintptr;

typedef long long      GLsizeiptr;

// 这个类型应该是 无符号整型 8位

// 但是Web IDL中并不存在这种类型

// 所以用 octet 代替 占位

typedef octet          GLubyte;

typedef unsigned short GLushort;

typedef unsigned long  GLuint;

typedef unrestricted float GLfloat;

typedef unrestricted float GLclampf;

// 由 WebGLContextAttributes 引用

enum WebGLPowerPreference { "default", "low-power", "high-performance" };

// 获取上下文时支持的参数

// getContext('webgl', <WebGLContextAttributes>)

dictionary WebGLContextAttributes {

    boolean alpha = true;

    boolean depth = true;

    boolean stencil = false;

    boolean antialias = true;

    boolean premultipliedAlpha = true;

    boolean preserveDrawingBuffer = false;

    WebGLPowerPreference powerPreference = "default";

    boolean failIfMajorPerformanceCaveat = false;

};

// [Exposed=(Window,Worker)] 代表可以同时在主线程和后台线程使用本对象

[Exposed=(Window,Worker)]

interface WebGLObject {};

[Exposed=(Window,Worker)]

interface WebGLBuffer : WebGLObject {};

[Exposed=(Window,Worker)]

interface WebGLFramebuffer : WebGLObject {};

[Exposed=(Window,Worker)]

interface WebGLProgram : WebGLObject {};

[Exposed=(Window,Worker)]

interface WebGLRenderbuffer : WebGLObject {};

[Exposed=(Window,Worker)]

interface WebGLShader : WebGLObject {};

[Exposed=(Window,Worker)]

interface WebGLTexture : WebGLObject {};

[Exposed=(Window,Worker)]

interface WebGLUniformLocation {};

[Exposed=(Window,Worker)]

interface WebGLActiveInfo {

    readonly attribute GLint size;

    readonly attribute GLenum type;

    readonly attribute DOMString name;

};

[Exposed=(Window,Worker)]

interface WebGLShaderPrecisionFormat {

    readonly attribute GLint rangeMin;

    readonly attribute GLint rangeMax;

    readonly attribute GLint precision;

};

typedef (ImageBitmap or

         ImageData or

         HTMLImageElement or

         HTMLCanvasElement or

         HTMLVideoElement or

         OffscreenCanvas) TexImageSource;

typedef ([AllowShared] Float32Array or sequence<GLfloat>) Float32List;

typedef ([AllowShared] Int32Array or sequence<GLint>) Int32List;

interface mixin WebGLRenderingContextBase {

    // 内容整理到 'WebGLRenderingContext 对象'

}

interface mixin WebGLRenderingContextOverloads {

    // 内容整理到 'WebGLRenderingContext 对象'

}

[Exposed=(Window,Worker)]

interface WebGLRenderingContext {

    // 内容整理到 'WebGLRenderingContext 对象'

};

WebGLRenderingContext includes WebGLRenderingContextBase;

WebGLRenderingContext includes WebGLRenderingContextOverloads;

[Exposed=(Window,Worker),

 Constructor(DOMString type,

 optional WebGLContextEventInit eventInit)]

interface WebGLContextEvent : Event {

    readonly attribute DOMString statusMessage;

};

// EventInit is defined in the DOM4 specification.

dictionary WebGLContextEventInit : EventInit {

    DOMString statusMessage = "";

};

WebGLRenderingContext 对象

属性数据

[Exposed=Window] readonly attribute (HTMLCanvasElement or OffscreenCanvas) canvas;

// 可以在 Web Work 上使用 canvas api

// 需要调用 canvas.transferControlToOffscreen() 将渲染权转移给后台线程

[Exposed=Worker] readonly attribute OffscreenCanvas canvas;

readonly attribute GLsizei drawingBufferWidth;

readonly attribute GLsizei drawingBufferHeight;

缓冲区相关方法

清理渲染缓冲区。

// 缓冲区类型

// 为 gl.clear 的参数

const GLenum DEPTH_BUFFER_BIT               = 0x00000100;

const GLenum STENCIL_BUFFER_BIT             = 0x00000400;

const GLenum COLOR_BUFFER_BIT               = 0x00004000;

// 清理指定缓存内容, 可以通过或运算符一次清理多个缓冲区

// @param mask 颜色缓冲区（COLOR_BUFFER_BIT） | 深度缓冲区（DEPTH_BUFFER_BIT） | 模板缓冲区（STENCIL_BUFFER_BIT）

void clear(GLbitfield mask);

// 将指定缓冲区设置为指定的值（参数范围都是 0.0 - 1.0）

// clearColor 指定的值 默认 0.0, 0.0, 0.0, 0.0

// clearDepth 指定的值 默认 1.0

// clearStencil 指定的值 默认 0

void clearColor(GLclampf red, GLclampf green, GLclampf blue, GLclampf alpha);

void clearDepth(GLclampf depth);

void clearStencil(GLint s);

绘制相关方法

绘制缓存中的顶点数据。

// 绘制的类型

// 为 gl.drawArrays、gl.drawElements 第一个参数

const GLenum POINTS                         = 0x0000;

const GLenum LINES                          = 0x0001;

const GLenum LINE_LOOP                      = 0x0002;

const GLenum LINE_STRIP                     = 0x0003;

const GLenum TRIANGLES                      = 0x0004;

const GLenum TRIANGLE_STRIP                 = 0x0005;

const GLenum TRIANGLE_FAN                   = 0x0006;

// 执行绘制， 按照mode参数指定的方式绘制图形

// @param model 绘制模式。

// @param first 指定从哪个定点开始绘制

// @param count 指定绘制需要用到多少个顶点

void drawArrays(GLenum mode, GLint first, GLsizei count);

// 执行绘制，按照mode参数制定的方式，根据绑定到 ELEMENT_ARRAY_BUFFER 的缓冲区中的顶点索引绘制图形

// @param model 绘制模式。

// @param count 指定绘制顶点的个数

// @param type 指定索引值数据类型。包括：UNSIGNED_BYTE、UNSIGNED_SHORT、UNSIGNED_INT

// @param offset 指定索引数组中绘制的偏移位置，以字节为单位

void drawElements(GLenum mode, GLsizei count, GLenum type, GLintptr offset);

着色器 attribute 相关

// 获取由 name 参数指定的 attribute 变量存储地址

// @param program 指定包含顶点或者片元着色器的程序对象

// @param name 获取其存储的 attribute 变量名称，最大长度256字节

[WebGLHandlesContextLoss] GLint getAttribLocation(WebGLProgram program, DOMString name);

// 绑定顶点索引到属性变量

// 使用缓冲区数据的时候需要用到的方法

// @param index 指定要绑定的通用顶点的索引 这个值直接赋值给 vertexAttribPointer 的 index 参数

// @param name 指定变量名

// 这里的 index 和 getAttribLocation 返回值是一样的

void bindAttribLocation(WebGLProgram program, GLuint index, DOMString name);

// 将数据传给由index参数指定的attribute变量

void vertexAttrib1f(GLuint index, GLfloat x);

void vertexAttrib2f(GLuint index, GLfloat x, GLfloat y);

void vertexAttrib3f(GLuint index, GLfloat x, GLfloat y, GLfloat z);

void vertexAttrib4f(GLuint index, GLfloat x, GLfloat y, GLfloat z, GLfloat w);

// 接收参数为 Float32Array 数组

void vertexAttrib1fv(GLuint index, Float32List values);

void vertexAttrib2fv(GLuint index, Float32List values);

void vertexAttrib3fv(GLuint index, Float32List values);

void vertexAttrib4fv(GLuint index, Float32List values);

着色器 uniform 相关

// 获取指定名称的 uniform 变量存储位置

// @param program 制定的包含顶点或者片元着色器的程序对象

// @param name 指定想要获取其存储位置的uniform变量名称 最大长度256字节

WebGLUniformLocation? getUniformLocation(WebGLProgram program, DOMString name);

// 将数据传给location指定的uniform变量

void uniform1f(WebGLUniformLocation? location, GLfloat x);

void uniform2f(WebGLUniformLocation? location, GLfloat x, GLfloat y);

void uniform3f(WebGLUniformLocation? location, GLfloat x, GLfloat y, GLfloat z);

void uniform4f(WebGLUniformLocation? location, GLfloat x, GLfloat y, GLfloat z, GLfloat w);

void uniform1i(WebGLUniformLocation? location, GLint x);

void uniform2i(WebGLUniformLocation? location, GLint x, GLint y);

void uniform3i(WebGLUniformLocation? location, GLint x, GLint y, GLint z);

void uniform4i(WebGLUniformLocation? location, GLint x, GLint y, GLint z, GLint w);

void uniform1fv(WebGLUniformLocation? location, Float32List v);

void uniform2fv(WebGLUniformLocation? location, Float32List v);

void uniform3fv(WebGLUniformLocation? location, Float32List v);

void uniform4fv(WebGLUniformLocation? location, Float32List v);

void uniform1iv(WebGLUniformLocation? location, Int32List v);

void uniform2iv(WebGLUniformLocation? location, Int32List v);

void uniform3iv(WebGLUniformLocation? location, Int32List v);

void uniform4iv(WebGLUniformLocation? location, Int32List v);

// @param 是否对矩阵进行转置 默认 false 在webgl中必须是false

void uniformMatrix2fv(WebGLUniformLocation? location, GLboolean transpose, Float32List value);

void uniformMatrix3fv(WebGLUniformLocation? location, GLboolean transpose, Float32List value);

void uniformMatrix4fv(WebGLUniformLocation? location, GLboolean transpose, Float32List value);

缓存对象

使用缓存的五个步骤

createBuffer
bindBuffer
bufferData
vertexAttribPointer
enableVertexAttribArray

// 缓存对象

// bindBuffer 第一个参数

const GLenum ARRAY_BUFFER                   = 0x8892;

const GLenum ELEMENT_ARRAY_BUFFER           = 0x8893;

// const GLenum ARRAY_BUFFER_BINDING           = 0x8894;

// const GLenum ELEMENT_ARRAY_BUFFER_BINDING   = 0x8895;

// 绘制模式

// 下文中的usage参数值

const GLenum STREAM_DRAW                    = 0x88E0;

const GLenum STATIC_DRAW                    = 0x88E4;

const GLenum DYNAMIC_DRAW                   = 0x88E8;

// 数据类型

// vertexAttribPointer 中参数type的取值

const GLenum BYTE                           = 0x1400;

const GLenum UNSIGNED_BYTE                  = 0x1401;

const GLenum SHORT                          = 0x1402;

const GLenum UNSIGNED_SHORT                 = 0x1403;

const GLenum INT                            = 0x1404;

const GLenum UNSIGNED_INT                   = 0x1405;

const GLenum FLOAT                          = 0x1406;

// 创建缓冲区对象

WebGLBuffer? createBuffer();

// 允许使用buffer表示的缓冲区对象并将其绑定到target表示的目标上

// @param target

//        ARRAY_BUFFER 表示缓冲区对象中包含顶点数据

//        ELEMENT_ARRAY_BUFFER 表示缓冲去对象中包含了顶点的索引值

void bindBuffer(GLenum target, WebGLBuffer? buffer);

// 开辟存储空间，向绑定在target上的缓冲区对象写入数据data

// @param target 同上

// @param data 类型化数组 比如：Float32Array...

// @param usage 优化效率 可以是以下值：

//        STATIC_DRAW 只会向缓冲区写入一次数据 需要绘制很多次

//        STREAM_DRAW 只会向缓冲区写入一次数据 需要绘制若干次

//        DYNAMIC_DRAW 会向缓冲区对象中多次写入数据 并绘制很多次

void bufferData(GLenum target, [AllowShared] BufferSource? data, GLenum usage);

void bufferData(GLenum target, GLsizeiptr size, GLenum usage);

void bufferSubData(GLenum target, GLintptr offset, [AllowShared] BufferSource data);

// 将绑定到ARRAY_BUFFER的缓冲区对象分配给index指定的attribute变量

// @param index 指向attribute变量

// @param size 指定缓冲区中每个顶点分量的个数

// @param type 数据格式 见上面的枚举

// @param normalized 是否将浮点型数据归一化到[0, 1]或者[-1, 1]区间

// @param stride 指定相邻两个顶点之间的字节数 默认是0

// @param offset 指定缓冲区对象中的偏移量 单位字节 可以利用这个偏移量赋值多个attribute

void vertexAttribPointer(GLuint index, GLint size, GLenum type, GLboolean normalized, GLsizei stride, GLintptr offset);

// 开启index对应的attribute对象

// 开启后不能通过 vertexAttrib[1234]f 传值

void enableVertexAttribArray(GLuint index);

// 关闭index对应的attribute对象

void disableVertexAttribArray(GLuint index);

// 删除参数buffer表示的缓冲区对象

// @param buffer 缓冲区对象 由createBuffer创建

void deleteBuffer(WebGLBuffer? buffer);

着色器 texture 相关

// pixelStorei 中参数pname取值

// 对图像进行Y轴反转，默认false

const GLenum UNPACK_FLIP_Y_WEBGL            = 0x9240;

// 将图像RGB颜色值每一个分量乘以A 默认false

const GLenum UNPACK_PREMULTIPLY_ALPHA_WEBGL = 0x9241; 

// activeTexture 方法使用的枚举常量

const GLenum TEXTURE0                       = 0x84C0;

const GLenum TEXTURE1                       = 0x84C1;

const GLenum TEXTURE2                       = 0x84C2;

const GLenum TEXTURE3                       = 0x84C3;

const GLenum TEXTURE4                       = 0x84C4;

const GLenum TEXTURE5                       = 0x84C5;

const GLenum TEXTURE6                       = 0x84C6;

const GLenum TEXTURE7                       = 0x84C7;

const GLenum TEXTURE8                       = 0x84C8;

const GLenum TEXTURE9                       = 0x84C9;

const GLenum TEXTURE10                      = 0x84CA;

const GLenum TEXTURE11                      = 0x84CB;

const GLenum TEXTURE12                      = 0x84CC;

const GLenum TEXTURE13                      = 0x84CD;

const GLenum TEXTURE14                      = 0x84CE;

const GLenum TEXTURE15                      = 0x84CF;

const GLenum TEXTURE16                      = 0x84D0;

const GLenum TEXTURE17                      = 0x84D1;

const GLenum TEXTURE18                      = 0x84D2;

const GLenum TEXTURE19                      = 0x84D3;

const GLenum TEXTURE20                      = 0x84D4;

const GLenum TEXTURE21                      = 0x84D5;

const GLenum TEXTURE22                      = 0x84D6;

const GLenum TEXTURE23                      = 0x84D7;

const GLenum TEXTURE24                      = 0x84D8;

const GLenum TEXTURE25                      = 0x84D9;

const GLenum TEXTURE26                      = 0x84DA;

const GLenum TEXTURE27                      = 0x84DB;

const GLenum TEXTURE28                      = 0x84DC;

const GLenum TEXTURE29                      = 0x84DD;

const GLenum TEXTURE30                      = 0x84DE;

const GLenum TEXTURE31                      = 0x84DF;

// bindTexture texParameterf texParameteri texImage2D 的 target 参数

const GLenum TEXTURE_2D                     = 0x0DE1;

const GLenum TEXTURE_CUBE_MAP               = 0x8513;

// texParameterf pname 参数

// texParameteri pname 参数

const GLenum TEXTURE_MAG_FILTER             = 0x2800;

const GLenum TEXTURE_MIN_FILTER             = 0x2801;

const GLenum TEXTURE_WRAP_S                 = 0x2802;

const GLenum TEXTURE_WRAP_T                 = 0x2803;

// texParameterf param 参数 当 pname = TEXTURE_MAG_FILTER | TEXTURE_MIN_FILTER

// texParameteri param 参数 当 pname = TEXTURE_MAG_FILTER | TEXTURE_MIN_FILTER

// 以下是非金字塔纹理常量

// 使用原纹理上距离映射后像素（新像素）中心最近的那个像素的颜色值，作为新像素的值（使用曼哈顿距离）

// 曼哈顿距离又称直角距离、棋盘距离。如(x1, y1) (x2, y2)的曼哈顿距离是 |x1 - x2| + |y1 - y2|

const GLenum NEAREST                        = 0x2600;

// 使用距离新像素中心最近的四个像素的颜色值得加权平均，作为新像素的值（与 NEAREST对比，该方法图像质量更好，但是会有比较大的开销）

const GLenum LINEAR                         = 0x2601;

// 以下是金字塔纹理常量

const GLenum NEAREST_MIPMAP_NEAREST         = 0x2700;

const GLenum LINEAR_MIPMAP_NEAREST          = 0x2701;

const GLenum NEAREST_MIPMAP_LINEAR          = 0x2702;

const GLenum LINEAR_MIPMAP_LINEAR           = 0x2703;

// texParameterf param 参数 当 pname = TEXTURE_WRAP_S | TEXTURE_WRAP_T

// texParameteri param 参数 当 pname = TEXTURE_WRAP_S | TEXTURE_WRAP_T

// 平铺式的重复纹理

const GLenum REPEAT                         = 0x2901;

// 镜像对称式的重复纹理

const GLenum CLAMP_TO_EDGE                  = 0x812F;

// 使用纹理图像的边缘值

const GLenum MIRRORED_REPEAT                = 0x8370; 

// texImage2D 的 internalformat 参数

const GLenum ALPHA                          = 0x1906;

const GLenum RGB                            = 0x1907;

const GLenum RGBA                           = 0x1908;

const GLenum LUMINANCE                      = 0x1909;

const GLenum LUMINANCE_ALPHA                = 0x190A;

// texImage2D 的 type 参数

// 前文已定义

const GLenum UNSIGNED_BYTE;

// RGBA

const GLenum UNSIGNED_SHORT_4_4_4_4         = 0x8033;

// RGBA

const GLenum UNSIGNED_SHORT_5_5_5_1         = 0x8034;

// RGB

const GLenum UNSIGNED_SHORT_5_6_5           = 0x8363; 

// 创建纹理对象以存储纹理图像

WebGLTexture? createTexture();

// 使用texture删除纹理对象

void deleteTexture(WebGLTexture? texture);

// 使用 pname 和 param 指定的方式加载得到的图像

// @param pname 见上面的枚举

// @param param 指定 非0为true、0为false 必须是整数

void pixelStorei(GLenum pname, GLint param);

// 激活纹理单元 参数是常量 gl.TEXTURE<I> 见上面枚举

void activeTexture(GLenum texture);

// 开启 texture 指定的纹理对象，并将其绑定到 target 上。

// 如果已经通过 gl.activeTexture 激活了某个纹理单元，则纹理对象也会绑定到这个纹理单元上

// @param target 绑定类型 TEXTURE_CUBE_MAP（立方体纹理） | TEXTURE_2D （平面纹理）

// @param texture 绑定的纹理单元

void bindTexture(GLenum target, WebGLTexture? texture);

// 配置纹理，将param值赋给绑定到目标的纹理对象的pname参数上

// @param target 同上

// @param pname 见上面枚举 纹理参数

// @param param 见上面枚举 纹理参数的值

void texParameterf(GLenum target, GLenum pname, GLfloat param);

void texParameteri(GLenum target, GLenum pname, GLint param);

// 将 source 指定的图像分配给绑定到目标上的纹理对象

// @param target 同上

// @param level 传入0 （该参数是为金字塔纹理准备的）

// @param internalformat 图像的内部格式 见上枚举

// @param format 纹理数据的格式 必须使用与 internalformat 相同的值

// @param type 纹理数据的类型

// @param source 包含纹理图像的Image对象

// May throw DOMException

void texImage2D(GLenum target, GLint level, GLint internalformat, GLenum format, GLenum type, TexImageSource source);

void texImage2D(GLenum target, GLint level, GLint internalformat, GLsizei width, GLsizei height, GLint border, GLenum format, GLenum type, [AllowShared] ArrayBufferView? pixels);

// 最后指定纹理单元编号

// gl.uniform1i(sampler, 0);

启用功能

// enable disable 的 cap 参数

const GLenum CULL_FACE                      = 0x0B44;

// 混合

const GLenum BLEND                          = 0x0BE2;

const GLenum DITHER                         = 0x0BD0;

const GLenum STENCIL_TEST                   = 0x0B90;

// 隐藏面消除

const GLenum DEPTH_TEST                     = 0x0B71;

const GLenum SCISSOR_TEST                   = 0x0C11;

// 多边形位移 （解决深度冲突问题）

const GLenum POLYGON_OFFSET_FILL            = 0x8037;

const GLenum SAMPLE_ALPHA_TO_COVERAGE       = 0x809E;

const GLenum SAMPLE_COVERAGE                = 0x80A0;

// 启用功能

void enable(GLenum cap);

// 关闭功能

void disable(GLenum cap);

// 解决深度冲突

// gl.enable(POLYGON_OFFSET_FILL);

// 指定加到每个顶点绘制后Z值上的偏移量，偏移量按照公式 m * factor + r * units 计算，其中m代表顶点所在表面

// 相对于观察者的实现角度，而r表示硬件能够区分两个Z值之差的最小值

void polygonOffset(GLfloat factor, GLfloat units);

// 虽然上面的方法可以使用，但是在渲染器中用起来还是很麻烦的。

// 解决深度冲突有更好的方式，就是缩小远近裁剪面的距离

着色器相关

// createShader 的 type 参数

const GLenum FRAGMENT_SHADER                  = 0x8B30;

const GLenum VERTEX_SHADER                    = 0x8B31;

// getShaderParameter 的 pname 参数

const GLenum SHADER_TYPE                      = 0x8B4F;

const GLenum DELETE_STATUS                    = 0x8B80;

const GLenum COMPILE_STATUS                   = 0x8B81;

// 创建由type指定的着色器对象

// @param type 见上枚举

WebGLShader? createShader(GLenum type);

// 删除 shader 指定的着色器对象

void deleteShader(WebGLShader? shader);

// 将 source 指定的字符串形式的代码传入shader指定的着色器 如果之前已经向shader传入了代码 旧的代码就会被替换掉

void shaderSource(WebGLShader shader, DOMString source);

// 编译 shader 指定的着色器中的源代码

void compileShader(WebGLShader shader);

// 获取 shader 指定的着色器中 pname 指定的参数信息

// @param pname 见上枚举

any getShaderParameter(WebGLShader shader, GLenum pname);

// 如果 getShaderParameter(shader, COMPILE_STATUS) 返回false

// 则可以通过 此函数获取 指定shader 的信息日志

DOMString? getShaderInfoLog(WebGLShader shader);

着色器程序相关

// getProgramParameter 的 pname 参数

// 着色器相关 章节已定义

const GLenum DELETE_STATUS;

const GLenum LINK_STATUS                      = 0x8B82;

const GLenum VALIDATE_STATUS                  = 0x8B83;

const GLenum ATTACHED_SHADERS                 = 0x8B85;

const GLenum ACTIVE_UNIFORMS                  = 0x8B86;

const GLenum ACTIVE_ATTRIBUTES                = 0x8B89;

// 创建着色器程序对象

WebGLProgram? createProgram();

// 删除着色器程序对象

void deleteProgram(WebGLProgram? program);

// 将 shader 指定的着色器对象分配给 program 指定的程序对象

void attachShader(WebGLProgram program, WebGLShader shader);

// 取消 shader 指定的着色器对 program 对象的分配

void detachShader(WebGLProgram program, WebGLShader shader);

// 连接 program 指定的程序对象中的着色器

// 目的：

// 1. 保证顶点着色器 和 片元着色器的varying变量同名同类型，且一一对应

// 2. 保证顶点着色器对每个varying变量赋了值

// 3. 保证顶点着色器 和 片元着色器中的同名 uniform 变量也是同类型的 无需一一对应

// 4. 保证着色器中的attribute、uniform、varying变量的个数没有超过着色器上限

void linkProgram(WebGLProgram program);

// 获取 program 指定的程序对象中 pname 指定的参数信息

// @param pname 见上枚举

any getProgramParameter(WebGLProgram program, GLenum pname);

// 如果通过 getProgramParameter(LINK_STATUS) 获得返回值 为 false

// 可以通过 此函数获取 program 指定的程序对象的信息日志

DOMString? getProgramInfoLog(WebGLProgram program);

// 验证 WebGLProgram

void validateProgram(WebGLProgram program);

// 告知 WEBGL 系统绘制时使用的 program 对象

void useProgram(WebGLProgram? program);

获取着色器程序相关代码

const program = gl.createProgram();

gl.attacheShader(program, vertexShader);

gl.attacheShader(program, fragmentShader);

gl.linkProgram(program);

if(!gl.getProgramParameter(program, gl.LINK_STATUS)){

  var info = gl.getProgramInfoLog(program);

  throw new Error('Could not compile WebGL program. \n\n ' + info);

}

扩展

通过扩展基本上能使 WebGL1 拥有 WebGL2 的能力。

获取扩展以及扩展支持信息

// 获取扩展

object? getExtension(DOMString name);

// 获取扩展支持信息

sequence<DOMString>? getSupportedExtensions();

使用扩展字符串获取扩展对象

扩展名	说明
ANGLE_instanced_arrays	允许绘制多次同样的一个或者多个对象条件：分享顶点数据、原始计数和类型
EXT_blend_minmax	通过添加两个新的混合方程来扩展混合能力
EXT_color_buffer_float	添加渲染各种浮点格式的能力
EXT_color_buffer_half_float	添加渲染各种16位浮点格式的能力
EXT_disjoint_timer_query	提供一种测量一组GL命令的持续时间的方法，不会影响渲染管道的稳定性
EXT_frag_depth	能够在片段着色器中设置片段深度值
EXT_sRGB	为 FrameBuffer 提供sRGB支持
EXT_shader_texture_lod	为着色器提供LOD能力
EXT_texture_filter_anisotropic	提高斜角观察质量
OES_element_index_uint	使 drawElements 支持 UNSIGNED_INT 类型
OES_standard_derivatives	为着色器提供 `dFdx/dFdy/fwidth` 函数
OES_texture_float	为材质添加 FLOAT 类型
OES_texture_float_linear	允许材质的线性过滤
OES_texture_half_float	为材质添加 16 位支持
OES_texture_half_float_linear	允许16 位材质精度的线性过滤
OES_vertex_array_object	提供压缩顶点数组的方法，指向不同顶点数据缓存
WEBGL_color_buffer_float	允许输出32位颜色缓冲
WEBGL_compressed_texture_astc	exposes Adaptive Scalable Texture Compression (ASTC) compressed texture formats to WebGL.
WEBGL_compressed_texture_atc	exposes 3 ATC compressed texture formats.
WEBGL_compressed_texture_etc	exposes 10 ETC/EAC compressed texture formats
WEBGL_compressed_texture_etc1	exposes the ETC1 compressed texture format.
WEBGL_compressed_texture_pvrtc	exposes four PVRTC compressed texture formats.
WEBGL_compressed_texture_s3tc	exposes four S3TC compressed texture formats.
WEBGL_compressed_texture_s3tc_srgb	exposes four S3TC compressed texture formats for the sRGB colorspace.
WEBGL_debug_renderer_info	获取渲染信息（公司等）
WEBGL_debug_shaders	获取着色器源码信息
WEBGL_depth_texture	定义深度和深度模板材质
WEBGL_draw_buffers	允许着色器一次性输出多张材质，对延迟渲染大有帮助
WEBGL_lose_context	暴露上下文丢失和恢复函数

查询状态参数

// 获取当前激活的材质枚举值 getParameter

const GLenum ACTIVE_TEXTURE                 = 0x84E0;

// 获取材质最大支持数量 getParameter

const GLenum MAX_COMBINED_TEXTURE_IMAGE_UNITS = 0x8B4D;

const GLenum MAX_VERTEX_ATTRIBS               = 0x8869;

const GLenum MAX_VERTEX_UNIFORM_VECTORS       = 0x8DFB;

const GLenum MAX_VARYING_VECTORS              = 0x8DFC;

const GLenum MAX_VERTEX_TEXTURE_IMAGE_UNITS   = 0x8B4C;

const GLenum MAX_TEXTURE_IMAGE_UNITS          = 0x8872;

const GLenum MAX_FRAGMENT_UNIFORM_VECTORS     = 0x8DFD;

const GLenum SHADING_LANGUAGE_VERSION         = 0x8B8C;

const GLenum CURRENT_PROGRAM                  = 0x8B8D;

// 获取混合方程

const GLenum BLEND_EQUATION                 = 0x8009;

const GLenum BLEND_EQUATION_RGB             = 0x8009;   /* same as BLEND_EQUATION */

const GLenum BLEND_EQUATION_ALPHA           = 0x883D;

// 面消除查询

const GLenum CULL_FACE_MODE                 = 0x0B45;

// 通过查询参数获取值

any getParameter(GLenum pname);

any getTexParameter(GLenum target, GLenum pname);

// 查询着色器相关参数

any getShaderParameter(WebGLShader shader, GLenum pname);

// 查询着色器程序相关参数

any getProgramParameter(WebGLProgram program, GLenum pname);

其他静态变量

/* Separate Blend Functions */

const GLenum BLEND_DST_RGB                  = 0x80C8;

const GLenum BLEND_SRC_RGB                  = 0x80C9;

const GLenum BLEND_DST_ALPHA                = 0x80CA;

const GLenum BLEND_SRC_ALPHA                = 0x80CB;

const GLenum CONSTANT_COLOR                 = 0x8001;

const GLenum ONE_MINUS_CONSTANT_COLOR       = 0x8002;

const GLenum CONSTANT_ALPHA                 = 0x8003;

const GLenum ONE_MINUS_CONSTANT_ALPHA       = 0x8004;

const GLenum BLEND_COLOR                    = 0x8005;

// buffer

const GLenum BUFFER_SIZE                    = 0x8764;

const GLenum BUFFER_USAGE                   = 0x8765;

const GLenum CURRENT_VERTEX_ATTRIB          = 0x8626;

/* ErrorCode */

const GLenum NO_ERROR                       = 0;

const GLenum INVALID_ENUM                   = 0x0500;

const GLenum INVALID_VALUE                  = 0x0501;

const GLenum INVALID_OPERATION              = 0x0502;

const GLenum OUT_OF_MEMORY                  = 0x0505;

/* FrontFaceDirection */

const GLenum CW                             = 0x0900;

const GLenum CCW                            = 0x0901;

/* GetPName */

const GLenum LINE_WIDTH                     = 0x0B21;

const GLenum ALIASED_POINT_SIZE_RANGE       = 0x846D;

const GLenum ALIASED_LINE_WIDTH_RANGE       = 0x846E;

const GLenum FRONT_FACE                     = 0x0B46;

const GLenum DEPTH_RANGE                    = 0x0B70;

const GLenum DEPTH_WRITEMASK                = 0x0B72;

const GLenum DEPTH_CLEAR_VALUE              = 0x0B73;

const GLenum DEPTH_FUNC                     = 0x0B74;

const GLenum STENCIL_CLEAR_VALUE            = 0x0B91;

const GLenum STENCIL_FUNC                   = 0x0B92;

const GLenum STENCIL_FAIL                   = 0x0B94;

const GLenum STENCIL_PASS_DEPTH_FAIL        = 0x0B95;

const GLenum STENCIL_PASS_DEPTH_PASS        = 0x0B96;

const GLenum STENCIL_REF                    = 0x0B97;

const GLenum STENCIL_VALUE_MASK             = 0x0B93;

const GLenum STENCIL_WRITEMASK              = 0x0B98;

const GLenum STENCIL_BACK_FUNC              = 0x8800;

const GLenum STENCIL_BACK_FAIL              = 0x8801;

const GLenum STENCIL_BACK_PASS_DEPTH_FAIL   = 0x8802;

const GLenum STENCIL_BACK_PASS_DEPTH_PASS   = 0x8803;

const GLenum STENCIL_BACK_REF               = 0x8CA3;

const GLenum STENCIL_BACK_VALUE_MASK        = 0x8CA4;

const GLenum STENCIL_BACK_WRITEMASK         = 0x8CA5;

const GLenum VIEWPORT                       = 0x0BA2;

const GLenum SCISSOR_BOX                    = 0x0C10;

/*      SCISSOR_TEST */

const GLenum COLOR_CLEAR_VALUE              = 0x0C22;

const GLenum COLOR_WRITEMASK                = 0x0C23;

const GLenum UNPACK_ALIGNMENT               = 0x0CF5;

const GLenum PACK_ALIGNMENT                 = 0x0D05;

const GLenum MAX_TEXTURE_SIZE               = 0x0D33;

const GLenum MAX_VIEWPORT_DIMS              = 0x0D3A;

const GLenum SUBPIXEL_BITS                  = 0x0D50;

const GLenum RED_BITS                       = 0x0D52;

const GLenum GREEN_BITS                     = 0x0D53;

const GLenum BLUE_BITS                      = 0x0D54;

const GLenum ALPHA_BITS                     = 0x0D55;

const GLenum DEPTH_BITS                     = 0x0D56;

const GLenum STENCIL_BITS                   = 0x0D57;

const GLenum POLYGON_OFFSET_UNITS           = 0x2A00;

/*      POLYGON_OFFSET_FILL */

const GLenum POLYGON_OFFSET_FACTOR          = 0x8038;

const GLenum TEXTURE_BINDING_2D             = 0x8069;

const GLenum SAMPLE_BUFFERS                 = 0x80A8;

const GLenum SAMPLES                        = 0x80A9;

const GLenum SAMPLE_COVERAGE_VALUE          = 0x80AA;

const GLenum SAMPLE_COVERAGE_INVERT         = 0x80AB;

const GLenum COMPRESSED_TEXTURE_FORMATS     = 0x86A3;

/* HintMode */

const GLenum DONT_CARE                      = 0x1100;

const GLenum FASTEST                        = 0x1101;

const GLenum NICEST                         = 0x1102;

/* HintTarget */

const GLenum GENERATE_MIPMAP_HINT            = 0x8192;

/* PixelFormat */

const GLenum DEPTH_COMPONENT                = 0x1902;

/* StencilOp */

/*      ZERO */

const GLenum KEEP                           = 0x1E00;

const GLenum REPLACE                        = 0x1E01;

const GLenum INCR                           = 0x1E02;

const GLenum DECR                           = 0x1E03;

const GLenum INVERT                         = 0x150A;

const GLenum INCR_WRAP                      = 0x8507;

const GLenum DECR_WRAP                      = 0x8508;

/* StringName */

const GLenum VENDOR                         = 0x1F00;

const GLenum RENDERER                       = 0x1F01;

const GLenum VERSION                        = 0x1F02;

const GLenum TEXTURE                        = 0x1702;

const GLenum TEXTURE_BINDING_CUBE_MAP       = 0x8514;

const GLenum TEXTURE_CUBE_MAP_POSITIVE_X    = 0x8515;

const GLenum TEXTURE_CUBE_MAP_NEGATIVE_X    = 0x8516;

const GLenum TEXTURE_CUBE_MAP_POSITIVE_Y    = 0x8517;

const GLenum TEXTURE_CUBE_MAP_NEGATIVE_Y    = 0x8518;

const GLenum TEXTURE_CUBE_MAP_POSITIVE_Z    = 0x8519;

const GLenum TEXTURE_CUBE_MAP_NEGATIVE_Z    = 0x851A;

const GLenum MAX_CUBE_MAP_TEXTURE_SIZE      = 0x851C;

/* Uniform Types */

const GLenum FLOAT_VEC2                     = 0x8B50;

const GLenum FLOAT_VEC3                     = 0x8B51;

const GLenum FLOAT_VEC4                     = 0x8B52;

const GLenum INT_VEC2                       = 0x8B53;

const GLenum INT_VEC3                       = 0x8B54;

const GLenum INT_VEC4                       = 0x8B55;

const GLenum BOOL                           = 0x8B56;

const GLenum BOOL_VEC2                      = 0x8B57;

const GLenum BOOL_VEC3                      = 0x8B58;

const GLenum BOOL_VEC4                      = 0x8B59;

const GLenum FLOAT_MAT2                     = 0x8B5A;

const GLenum FLOAT_MAT3                     = 0x8B5B;

const GLenum FLOAT_MAT4                     = 0x8B5C;

const GLenum SAMPLER_2D                     = 0x8B5E;

const GLenum SAMPLER_CUBE                   = 0x8B60;

/* Vertex Arrays */

const GLenum VERTEX_ATTRIB_ARRAY_ENABLED        = 0x8622;

const GLenum VERTEX_ATTRIB_ARRAY_SIZE           = 0x8623;

const GLenum VERTEX_ATTRIB_ARRAY_STRIDE         = 0x8624;

const GLenum VERTEX_ATTRIB_ARRAY_TYPE           = 0x8625;

const GLenum VERTEX_ATTRIB_ARRAY_NORMALIZED     = 0x886A;

const GLenum VERTEX_ATTRIB_ARRAY_POINTER        = 0x8645;

const GLenum VERTEX_ATTRIB_ARRAY_BUFFER_BINDING = 0x889F;

/* Read Format */

const GLenum IMPLEMENTATION_COLOR_READ_TYPE   = 0x8B9A;

const GLenum IMPLEMENTATION_COLOR_READ_FORMAT = 0x8B9B;

/* Shader Precision-Specified Types */

const GLenum LOW_FLOAT                      = 0x8DF0;

const GLenum MEDIUM_FLOAT                   = 0x8DF1;

const GLenum HIGH_FLOAT                     = 0x8DF2;

const GLenum LOW_INT                        = 0x8DF3;

const GLenum MEDIUM_INT                     = 0x8DF4;

const GLenum HIGH_INT                       = 0x8DF5;

/* Framebuffer Object. */

const GLenum FRAMEBUFFER                    = 0x8D40;

const GLenum DEPTH_STENCIL                  = 0x84F9;

const GLenum RENDERBUFFER_WIDTH             = 0x8D42;

const GLenum RENDERBUFFER_HEIGHT            = 0x8D43;

const GLenum RENDERBUFFER_INTERNAL_FORMAT   = 0x8D44;

const GLenum RENDERBUFFER_RED_SIZE          = 0x8D50;

const GLenum RENDERBUFFER_GREEN_SIZE        = 0x8D51;

const GLenum RENDERBUFFER_BLUE_SIZE         = 0x8D52;

const GLenum RENDERBUFFER_ALPHA_SIZE        = 0x8D53;

const GLenum RENDERBUFFER_DEPTH_SIZE        = 0x8D54;

const GLenum RENDERBUFFER_STENCIL_SIZE      = 0x8D55;

const GLenum FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE           = 0x8CD0;

const GLenum FRAMEBUFFER_ATTACHMENT_OBJECT_NAME           = 0x8CD1;

const GLenum FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL         = 0x8CD2;

const GLenum FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE = 0x8CD3;

const GLenum NONE                           = 0;

const GLenum FRAMEBUFFER_COMPLETE                      = 0x8CD5;

const GLenum FRAMEBUFFER_INCOMPLETE_ATTACHMENT         = 0x8CD6;

const GLenum FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT = 0x8CD7;

const GLenum FRAMEBUFFER_INCOMPLETE_DIMENSIONS         = 0x8CD9;

const GLenum FRAMEBUFFER_UNSUPPORTED                   = 0x8CDD;

const GLenum FRAMEBUFFER_BINDING            = 0x8CA6;

const GLenum RENDERBUFFER_BINDING           = 0x8CA7;

const GLenum MAX_RENDERBUFFER_SIZE          = 0x84E8;

const GLenum INVALID_FRAMEBUFFER_OPERATION  = 0x0506;

const GLenum CONTEXT_LOST_WEBGL                 = 0x9242;

const GLenum UNPACK_COLORSPACE_CONVERSION_WEBGL = 0x9243;

const GLenum BROWSER_DEFAULT_WEBGL              = 0x9244;

其他方法

// 从颜色缓冲区中读取 x y width height 参数确定的矩形块中的所有像素值 并保存在pixels指定的数组中

// @param x y 选择矩形区域左上角坐标

// @param width height 选择矩形区域的宽 长

// @param format 指定像素值的颜色格式 必须为 gl.RGB

// @param type 指定像素值得数据格式 必须是 gl.UNSIGNED_BYTE

// @param pixels 类型化数组 Unit8Array

void readPixels(GLint x, GLint y, GLsizei width, GLsizei height, GLenum format, GLenum type, [AllowShared] ArrayBufferView? pixels);

// 透明混合参数

// blendFunc 的 sfactor dfactor 参数

const GLenum ZERO                           = 0;

const GLenum ONE                            = 1;

const GLenum SRC_COLOR                      = 0x0300;

const GLenum ONE_MINUS_SRC_COLOR            = 0x0301;

const GLenum SRC_ALPHA                      = 0x0302;

const GLenum ONE_MINUS_SRC_ALPHA            = 0x0303;

const GLenum DST_ALPHA                      = 0x0304;

const GLenum ONE_MINUS_DST_ALPHA            = 0x0305;

// blendFunc 的 sfactor 参数

const GLenum DST_COLOR                      = 0x0306;

const GLenum ONE_MINUS_DST_COLOR            = 0x0307;

const GLenum SRC_ALPHA_SATURATE             = 0x0308;

// 通过参数 sfactor 和 dfactor 指定进行混合操作的函数 混合后的颜色如下计算

// 混合后颜色 = 源颜色 * sfactor + 目标颜色 * dfactor

// @param sfactor 见此方法上枚举

// @param dfactor 见此方法上枚举

void blendFunc(GLenum sfactor, GLenum dfactor);

// 同上 只是分开设置RGB 和 ALPHA

void blendFuncSeparate(GLenum srcRGB, GLenum dstRGB, GLenum srcAlpha, GLenum dstAlpha);

// 创建帧缓冲区对象

WebGLFramebuffer? createFramebuffer();

// 删除帧缓冲区对象

void deleteFramebuffer(WebGLFramebuffer? framebuffer);

// 创建渲染缓冲区对象

WebGLRenderbuffer? createRenderbuffer();

// 删除渲染缓冲区对象

void deleteRenderbuffer(WebGLRenderbuffer? renderbuffer);

 const GLenum RENDERBUFFER                   = 0x8D41;

// 将 renderbuffer 指定的渲染缓冲区对象绑定在target目标上

// 如果 renderbuffer 为 null 则将已经绑定在target目标上的渲染缓冲区对象解除绑定

// @param target 必须是 gl.RENDERBUFFER

void bindRenderbuffer(GLenum target, WebGLRenderbuffer? renderbuffer);

// 表示渲染缓冲区将替代颜色缓冲区

const GLenum RGBA4                          = 0x8056;

const GLenum RGB5_A1                        = 0x8057;

const GLenum RGB565                         = 0x8D62;

// 表示渲染缓冲区将替代深度缓冲区

const GLenum DEPTH_COMPONENT16              = 0x81A5;

// 表示渲染缓冲区将替代模板缓冲区

const GLenum STENCIL_INDEX8                 = 0x8D48;

// 创建并初始化渲染缓冲区的数据区

// @param target 必须是 gl.RENDERBUFFER

// @param internalformat 指定渲染缓冲区中的数据格式 见方法上枚举

// @param width height 指定渲染缓冲区的宽度和高度 单位像素

void renderbufferStorage(GLenum target, GLenum internalformat, GLsizei width, GLsizei height);

// 绑定帧缓冲区

// FBO就是由颜色附件（COLOR_ATTACHMENT0)，深度附件（DEPTH_ATTACHMENT），模板附件（STENCIL_ATTACHMENT）组成的一个逻辑存储对象

// RBO是一个2D图像缓冲区，可以用于分配和存储颜色值，深度或者模板值，可以作为FBO的颜色，深度模板附件。

void bindFramebuffer(GLenum target, WebGLFramebuffer? framebuffer);

// attachment

const GLenum COLOR_ATTACHMENT0              = 0x8CE0;

const GLenum DEPTH_ATTACHMENT               = 0x8D00;

const GLenum STENCIL_ATTACHMENT             = 0x8D20;

const GLenum DEPTH_STENCIL_ATTACHMENT       = 0x821A;

// 设置纹理为 attachment 附件

void framebufferTexture2D(GLenum target, GLenum attachment, GLenum textarget, WebGLTexture? texture, GLint level);

// 设置渲染缓冲区对象为 attachment 附件

void framebufferRenderbuffer(GLenum target, GLenum attachment, GLenum renderbuffertarget, WebGLRenderbuffer? renderbuffer);

// 检查帧缓冲区

[WebGLHandlesContextLoss] GLenum checkFramebufferStatus(GLenum target);

// 设置视口宽度

void viewport(GLint x, GLint y, GLsizei width, GLsizei height);

// 锁定或者释放深度缓冲区的写入操作

// @param flag false 只读 true 可读写

void depthMask(GLboolean flag);

// 返回类似下列上下文参数

// {

//   alpha: true,

//   antialias: true,

//   depth: true,

//   failIfMajorPerformanceCaveat: false,

//   premultipliedAlpha: true,

//   preserveDrawingBuffer: false,

//   stencil: false

// }

// 可以通过下列方法设置

// canvas.getContext('webgl', { antialias: false, depth: false });

[WebGLHandlesContextLoss] WebGLContextAttributes? getContextAttributes();

// 标记上下文是否已经丢失

[WebGLHandlesContextLoss] boolean isContextLost();

// 设置源和目标混合因子 值范围 在0到1之间

void blendColor(GLclampf red, GLclampf green, GLclampf blue, GLclampf alpha);

// blendEquation 的 mode 参数

const GLenum FUNC_ADD                       = 0x8006;

const GLenum FUNC_SUBTRACT                  = 0x800A;

const GLenum FUNC_REVERSE_SUBTRACT          = 0x800B;

// 将RGB混合方程和阿尔法混合方程设置为单个方程。

// 混合方程式确定新像素如何与 WebGLFramebuffer 中的像素组合

// @ext EXT_blend_minmax

void blendEquation(GLenum mode);

// 同上 只是分开设置RGB 和 ALPHA

// @ext EXT_blend_minmax

void blendEquationSeparate(GLenum modeRGB, GLenum modeAlpha);

// 设置在绘制或渲染WebGLFramebuffer时要开启或关闭的颜色分量。

void colorMask(GLboolean red, GLboolean green, GLboolean blue, GLboolean alpha);

// 指定一个为压缩格式的2D纹理图片。

void compressedTexImage2D(GLenum target, GLint level, GLenum internalformat, GLsizei width, GLsizei height, GLint border, [AllowShared] ArrayBufferView data);

// 指定一个为压缩格式的2D纹理子图片。

void compressedTexSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLsizei width, GLsizei height, GLenum format, [AllowShared] ArrayBufferView data);

// 复制2D纹理图片。

void copyTexImage2D(GLenum target, GLint level, GLenum internalformat, GLint x, GLint y, GLsizei width, GLsizei height, GLint border);

// 复制2D纹理子图片。

void copyTexSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLint x, GLint y, GLsizei width, GLsizei height);

// cullFace 的 mode 参数

const GLenum FRONT                          = 0x0404;

const GLenum BACK                           = 0x0405;

const GLenum FRONT_AND_BACK                 = 0x0408;

// 设置多边形的正面或反面是否要被排除。

// gl.enable(gl.CULL_FACE);

// gl.cullFace(gl.FRONT_AND_BACK);

// gl.getParameter(gl.CULL_FACE_MODE) === gl.FRONT_AND_BACK;

void cullFace(GLenum mode);

// depthFunc 的 func 参数

const GLenum NEVER                          = 0x0200;

const GLenum LESS                           = 0x0201;

const GLenum EQUAL                          = 0x0202;

const GLenum LEQUAL                         = 0x0203;

const GLenum GREATER                        = 0x0204;

const GLenum NOTEQUAL                       = 0x0205;

const GLenum GEQUAL                         = 0x0206;

const GLenum ALWAYS                         = 0x0207;

// 设置比较输入像素深度和深度缓存值得函数

// gl.enable(gl.DEPTH_TEST);

// gl.depthFunc(gl.NEVER);

// gl.getParameter(gl.DEPTH_FUNC) === gl.NEVER;

void depthFunc(GLenum func);

// 设置从规范化设备坐标映射到窗口或视口坐标时的深度范围。

void depthRange(GLclampf zNear, GLclampf zFar);

// 阻断执行，直到之前所有的操作都完成。

void finish();

// 清空缓冲的命令，这会导致所有命令尽快执行完。

void flush();

// 设置多边形的正面使用顺时针还是逆时针绘制表示。

void frontFace(GLenum mode);

// 为 WebGLTexture 对象生成一组mip纹理映射。

void generateMipmap(GLenum target);

// 返回激活状态的attribute变量信息。

WebGLActiveInfo? getActiveAttrib(WebGLProgram program, GLuint index);

// 返回激活状态的uniform 变量信息。

WebGLActiveInfo? getActiveUniform(WebGLProgram program, GLuint index);

// 返回附加在 WebGLProgram 上的 WebGLShader 对象的列表

sequence<WebGLShader>? getAttachedShaders(WebGLProgram program);

// 返回缓冲信息。

any getBufferParameter(GLenum target, GLenum pname);

// 返回错误信息。

[WebGLHandlesContextLoss] GLenum getError();

// 返回帧缓冲区的信息。

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

// 返回渲染缓冲区的信息。

any getRenderbufferParameter(GLenum target, GLenum pname);

// 返回一个描述着色器数字类型精度的WebGLShaderPrecisionFormat 对象。

WebGLShaderPrecisionFormat? getShaderPrecisionFormat(GLenum shadertype, GLenum precisiontype);

// 以字符串形式返回 WebGLShader 的源码。

DOMString? getShaderSource(WebGLShader shader);

// 返回指定位置的uniform 变量。

any getUniform(WebGLProgram program, WebGLUniformLocation location);

// 返回指定位置的顶点attribute变量。

any getVertexAttrib(GLuint index, GLenum pname);

// 获取给定索引的顶点attribute位置。

[WebGLHandlesContextLoss] GLintptr getVertexAttribOffset(GLuint index, GLenum pname);

// 给某些行为设置建议使用的模式。具体建议需要看执行的情况。

void hint(GLenum target, GLenum mode);

// 返回给入的缓冲是否有效。

[WebGLHandlesContextLoss] GLboolean isBuffer(WebGLBuffer? buffer);

// 测试这个上下文的WebGL功能是否开启。

[WebGLHandlesContextLoss] GLboolean isEnabled(GLenum cap);

// 返回 Boolean 值，表示给入的 WebGLFrameBuffer 对象是否有效。

[WebGLHandlesContextLoss] GLboolean isFramebuffer(WebGLFramebuffer? framebuffer);

// 返回一个 Boolean 值，表示给入的 WebGLProgram 是否有效。

[WebGLHandlesContextLoss] GLboolean isProgram(WebGLProgram? program);

[WebGLHandlesContextLoss] GLboolean isRenderbuffer(WebGLRenderbuffer? renderbuffer);

[WebGLHandlesContextLoss] GLboolean isShader(WebGLShader? shader);

[WebGLHandlesContextLoss] GLboolean isTexture(WebGLTexture? texture);

// 设置线宽。无效

void lineWidth(GLfloat width);

// 为抗锯齿效果设置多重取样覆盖参数。

void sampleCoverage(GLclampf value, GLboolean invert);

// 设置裁剪框。

void scissor(GLint x, GLint y, GLsizei width, GLsizei height);

// 同时设置前面和背面的模板测试函数，及其引用值。

void stencilFunc(GLenum func, GLint ref, GLuint mask);

// 可分开设置前面或背面的模板测试函数，及其引用值。

void stencilFuncSeparate(GLenum face, GLenum func, GLint ref, GLuint mask);

// 同时启用或禁用，前面和背面的模板测试掩码。

void stencilMask(GLuint mask);

// 可分开启用或禁用，前面和背面的模板测试掩码。

void stencilMaskSeparate(GLenum face, GLuint mask);

// 同时设置，在前面和背面的模板缓冲区上执行的操作。

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

// 可分开设置，在前面和背面的模板缓冲区上执行的操作。

void stencilOpSeparate(GLenum face, GLenum fail, GLenum zfail, GLenum zpass);

// 更新当前 WebGLTexture 的子矩形。

void texSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLsizei width, GLsizei height, GLenum format, GLenum type, [AllowShared] ArrayBufferView? pixels);

void texSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLenum format, GLenum type, TexImageSource source); // May throw DOMException

引用

WebGLRenderingContext

另外：欢迎邮件交流。

【WebGL】WebGL API 详解的更多相关文章

Java 8 Stream API详解--转
原文地址:http://blog.csdn.net/chszs/article/details/47038607 Java 8 Stream API详解一.Stream API介绍 Java8引入了 ...
jqGrid APi 详解
jqGrid APi 详解 jqGrid皮肤从3.5版本开始,jqGrid完全支持jquery UI的theme.我们可以从http://jqueryui.com/themeroller/下载我们所 ...
hibernate学习（2）——api详解对象
1 Configuration 配置对象 /详解Configuration对象 public class Configuration_test { @Test //Configuration 用户 ...
网络编程socket基本API详解(转)
网络编程socket基本API详解 socket socket是在应用层和传输层之间的一个抽象层,它把TCP/IP层复杂的操作抽象为几个简单的接口供应用层调用已实现进程在网络中通信. socket ...
转】Mahout推荐算法API详解
原博文出自于: http://blog.fens.me/mahout-recommendation-api/ 感谢! Posted: Oct 21, 2013 Tags: itemCFknnMahou ...
dom4j api 详解--XPath 节点详解
dom4j api 详解 http://871421448.iteye.com/blog/1546955 XPath 节点 http://www.w3school.com.cn/xpath/xpath ...
百度地图API详解之事件机制，function“闭包”解决for循环和监听器冲突的问题：
原文:百度地图API详解之事件机制,function"闭包"解决for循环和监听器冲突的问题: 百度地图API详解之事件机制 2011年07月26日星期二下午 04:06 和D ...
【Unity编程】Unity中关于四元数的API详解
本文为博主原创文章,欢迎转载,请保留出处:http://blog.csdn.net/andrewfan Unity中关于四元数的API详解 Quaternion类 Quaternion(四元数)用于计 ...
SDN 网络系统之 Mininet 与 API 详解
SDN 网络系统之 Mininet 与 API 详解 Mininet 是轻量级的软件定义网络系统平台,同时提供了对 OpenFlow 协议的支持.本文主要介绍了 Mininet 的相关概念与特性,并列 ...
Webdriver之API详解(1)
说明 Webdriver API详解,基于python3,unittest框架,driver版本和浏览器自行选择. 本内容需要对python3的unittest框架有一个简单的了解,这里不再赘述,不了 ...

随机推荐

js 实现排序算法 -- 希尔排序（Shell Sort）
原文: 十大经典排序算法(动图演示) 希尔排序 1959年Shell发明,第一个突破O(n2)的排序算法,是简单插入排序的改进版.它与插入排序的不同之处在于,它会优先比较距离较远的元素.希尔排序又叫缩 ...
Catalan母函数法解表达式
Coding and Paper Letter（十五）
资源整理. 1.Nature Climate Change论文"Higher temperatures increase suicide rates in the United States ...
（转）Linux设备驱动之HID驱动源码分析
//Linux设备驱动之HID驱动源码分析 http://blog.chinaunix.net/uid-20543183-id-1930836.html HID是Human Interface De ...
TypeScript声明文件
为什么需要声明? 声明的本质是告知编译器一个标识符的类型信息.同时,在使用第三方库时,我们需要引用它的声明文件,才能获得对应的代码补全.接口提示等功能. 声明在TypeScript中至关重要,只有通过 ...
Neural Turing Machine - 神经图灵机
Neural Turing Machine - 神经图灵机论文原文地址: http://arxiv.org/pdf/1410.5401.pdf 一般的神经网络不具有记忆功能,输出的结果只基于当前的输 ...
React项目实战：react-redux-router基本原理
React相关 React 是一个采用声明式,高效而且灵活的用来构建用户界面的框架. JSX 本质上来讲,JSX 只是为React.createElement(component, props, .. ...
python全局变量语句global
在python中使用函数体外的变量,可以使用global语句变量可以是局部域或者全局域.定义在函数内的变量有局部作用域,在一个模块中最高级别的变量有全局作用域. 在编译器理论里著名的“龙书”中,阿霍 ...
java线程间的协作
本次内容主要讲等待/通知机制以及用等待/通知机制手写一个数据库连接池. 1.为什么线程之间需要协作线程之间相互配合,完成某项工作,比如:一个线程修改了一个对象的值,而另一个线程感知到了变化,然后进行 ...
JS模块规范：AMD，CMD，CommonJS
浅析JS模块规范随着JS模块化编程的发展,处理模块之间的依赖关系成为了维护的关键. AMD,CMD,CommonJS是目前最常用的三种模块化书写规范. CommonJS CommonJS规范是诞生比 ...

【WebGL】WebGL API 详解

类型以及对象定义

WebGLRenderingContext 对象

属性数据

缓冲区相关方法

绘制相关方法

着色器 attribute 相关

着色器 uniform 相关

缓存对象

着色器 texture 相关

启用功能

着色器相关

着色器程序相关

扩展

查询状态参数

其他静态变量

其他方法

引用

【WebGL】WebGL API 详解的更多相关文章

随机推荐

热门专题