【WebGL】WebGL API 详解
- 2020 年 3 月 26 日
- 筆記
基于 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. nn ' + 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
引用
另外:欢迎邮件交流。