WebGLRenderingContext
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
WebGLRenderingContext 接口提供基于 OpenGL ES 2.0 的绘图上下文,用于在 HTML <canvas> 元素内绘图。
要获得这个接口的对象以用于 2D 和 3D 的图形渲染,可以通过在 <canvas> 元素上调用 getContext() 函数,调用时传入“webgl”参数:
const canvas = document.getElementById("myCanvas");
const gl = canvas.getContext("webgl");
当你获取到 canvas 元素的 WebGL 绘图上下文,你便可以在里面绘图。点击 WebGL 教程获取更多资料,例如,关于如何开始 WebGL 编程的知识。
如果你需要一个 WebGL 2.0 的上下文,请参见 WebGL2RenderingContext;其提供了对 OpenGL ES 3.0 图形实现的支持。
常量
请参考 WebGL 常量页面。
WebGL 上下文
以下的属性和方法提供只读的 WebGL 上下文的信息和特性:
WebGLRenderingContext.canvas-
只读属性,对
HTMLCanvasElement的向后引用。如果上下文没有相联系的<canvas>元素,值将会为null。 WebGLRenderingContext.commit()实验性-
如果上下文没有指定的 canvas,把帧交给原始的
HTMLCanvasElement元素。 WebGLRenderingContext.drawingBufferWidth-
只读属性,当前绘图缓冲区的宽度,等于和该上下文相联系的 canvas 元素的宽度。
WebGLRenderingContext.drawingBufferHeight-
只读属性,当前绘图缓冲区的高度,等于和该上下文相联系的 canvas 元素的高度。
WebGLRenderingContext.getContextAttributes()-
返回
WebGLContextAttributes对象,该对象包含真实的上下文参数。如果上下文丢失,将会返回null。 WebGLRenderingContext.isContextLost()-
如果上下文丢失,返回
true;否则,返回false。 WebGLRenderingContext.makeXRCompatible()-
确保上下文与用户的 XR 硬件的兼容性,必要时使用新配置重新创建上下文。这可用于启动使用标准 2D 演示的应用程序,然后过度到使用 VR 或 AR 模式。
视图和裁剪
状态信息
WebGLRenderingContext.activeTexture()-
选择要激活的纹理单元。
WebGLRenderingContext.blendColor()-
设置源和目标的混和因子。
WebGLRenderingContext.blendEquation()-
用同一个表达式设置 RGB 混和表达式和 alpha 混和表达式。
WebGLRenderingContext.blendEquationSeparate()-
分开设置 RGB 混和表达式和 alpha 混和表达式。
WebGLRenderingContext.blendFunc()-
定义用于像素混合算法的函数。
WebGLRenderingContext.blendFuncSeparate()-
分别定义混合像素 RGB 通道和透明通道的函数。
WebGLRenderingContext.clearColor()-
设置用于清空用的颜色。
WebGLRenderingContext.clearDepth()-
设置清除深度缓存时的深度值。
WebGLRenderingContext.clearStencil()-
设置清除模板缓冲区时的模板值。
WebGLRenderingContext.colorMask()-
设置在绘制或渲染
WebGLFramebuffer时要开启或关闭的颜色分量。 WebGLRenderingContext.cullFace()-
设置多边形的正面和/或反面是否要被排除。
WebGLRenderingContext.depthFunc()-
设置比较输入像素深度和深度缓存值得函数。
WebGLRenderingContext.depthMask()-
设置是否写入深度缓存。
WebGLRenderingContext.depthRange()-
设置从规范化设备坐标映射到窗口或视口坐标时的深度范围。
WebGLRenderingContext.disable()-
禁用这个上下文的 WebGL 功能。
WebGLRenderingContext.enable()-
启用这个上下文的 WebGL 功能。
WebGLRenderingContext.frontFace()-
设置多边形的正面使用顺时针还是逆时针绘制表示。
WebGLRenderingContext.getParameter()-
返回给入参数名的值。
WebGLRenderingContext.getError()-
返回错误信息。
WebGLRenderingContext.hint()-
给某些行为设置建议使用的模式。具体建议需要看执行的情况。
WebGLRenderingContext.isEnabled()-
测试这个上下文的 WebGL 功能是否开启。
WebGLRenderingContext.lineWidth()-
设置线宽。
WebGLRenderingContext.pixelStorei()-
设置像素存储模式。
WebGLRenderingContext.polygonOffset()-
设置多边形偏移的比例和单位,从而计算深度值。(补充:解决深度冲突)
WebGLRenderingContext.sampleCoverage()-
为抗锯齿效果设置多重取样覆盖参数。
WebGLRenderingContext.stencilFunc()-
同时设置前面和背面的模板测试函数,及其引用值。
WebGLRenderingContext.stencilFuncSeparate()-
可分开设置前面或背面的模板测试函数,及其引用值。
WebGLRenderingContext.stencilMask()-
同时启用或禁用,前面和背面的模板测试掩码。
WebGLRenderingContext.stencilMaskSeparate()-
可分开启用或禁用,前面和背面的模板测试掩码。
WebGLRenderingContext.stencilOp()-
同时设置,在前面和背面的模板缓冲区上执行的操作。
WebGLRenderingContext.stencilOpSeparate()-
可分开设置,在前面和背面的模板缓冲区上执行的操作。
缓冲区
WebGLRenderingContext.bindBuffer()-
把
WebGLBuffer对象绑定到指定目标上。 WebGLRenderingContext.bufferData()-
更新缓冲数据。
WebGLRenderingContext.bufferSubData()-
更新从给入偏移量开始的缓冲数据。
WebGLRenderingContext.createBuffer()-
创建
WebGLBuffer对象。 WebGLRenderingContext.deleteBuffer()-
删除
WebGLBuffer对象。 WebGLRenderingContext.getBufferParameter()-
返回缓冲信息。
WebGLRenderingContext.isBuffer()-
返回给入的缓冲是否有效。
帧缓冲区
WebGLRenderingContext.bindFramebuffer()-
把
WebGLFrameBuffer对象绑定到指定对象上。 WebGLRenderingContext.checkFramebufferStatus()-
返回帧缓冲区的状态。
WebGLRenderingContext.createFramebuffer()-
创建
WebGLFrameBuffer对象。 WebGLRenderingContext.deleteFramebuffer()-
删除
WebGLFrameBuffer对象。 WebGLRenderingContext.framebufferRenderbuffer()-
把
WebGLRenderingBuffer对象附加到WebGLFrameBuffer对象。 WebGLRenderingContext.framebufferTexture2D()-
把纹理图像附加到
WebGLFrameBuffer对象。 WebGLRenderingContext.getFramebufferAttachmentParameter()-
返回帧缓冲区的信息。
WebGLRenderingContext.isFramebuffer()-
返回布尔值,表示给入的
WebGLFrameBuffer对象是否有效。 WebGLRenderingContext.readPixels()-
读取
WebGLFrameBuffer的像素。
渲染缓冲区
WebGLRenderingContext.bindRenderbuffer()-
把
WebGLRenderBuffer对象绑定到指定的对象上。 WebGLRenderingContext.createRenderbuffer()-
创建
WebGLRenderBuffer对象。 WebGLRenderingContext.deleteRenderbuffer()-
删除
WebGLRenderBuffer对象。 WebGLRenderingContext.getRenderbufferParameter()-
返回渲染缓冲区的信息。
WebGLRenderingContext.isBuffer()-
返回布尔值,表示给入的
WebGLRenderingBuffer是否有效。 WebGLRenderingContext.renderbufferStorage()-
创建渲染缓冲区数据存储。
纹理
WebGLRenderingContext.bindTexture()-
把
WebGLTexture对象绑定到指定对象上。 WebGLRenderingContext.compressedTexImage2D()-
指定一个为压缩格式的 2D 纹理图片。
WebGLRenderingContext.compressedTexSubImage2D()-
指定一个为压缩格式的 2D 纹理子图片。
WebGLRenderingContext.copyTexImage2D()-
复制 2D 纹理图片。
WebGLRenderingContext.copyTexSubImage2D()-
复制 2D 纹理子图片。
WebGLRenderingContext.createTexture()-
创建
WebGLTexture对象。 WebGLRenderingContext.deleteTexture()-
删除
WebGLTexture对象。 WebGLRenderingContext.generateMipmap()-
为
WebGLTexture对象生成一组纹理映射。 WebGLRenderingContext.getTexParameter()-
返回纹理信息。
WebGLRenderingContext.isTexture()-
返回 Boolean 值,表示给入的
WebGLTexture是否有效。 WebGLRenderingContext.texImage2D()-
指定 2D 纹理图片。
WebGLRenderingContext.texSubImage2D()-
更新当前
WebGLTexture的子矩形。 WebGLRenderingContext.texParameterf()-
设置纹理参数。
WebGLRenderingContext.texParameteri()-
设置纹理参数。
程序对象和着色器对象
WebGLRenderingContext.attachShader()-
把
WebGLShader添加到WebGLProgram。 WebGLRenderingContext.bindAttribLocation()-
绑定一个普通顶点索引到一个命名的 attribute 变量
WebGLRenderingContext.compileShader()-
编译
WebGLShader。 WebGLRenderingContext.createProgram()-
创建
WebGLProgram。 WebGLRenderingContext.createShader()-
创建
WebGLShader。 WebGLRenderingContext.deleteProgram()-
删除
WebGLProgram。 WebGLRenderingContext.deleteShader()-
删除
WebGLShader。 WebGLRenderingContext.detachShader()-
分离
WebGLShader。 WebGLRenderingContext.getAttachedShaders()-
返回附加在
WebGLProgram 上的WebGLShader对象的列表。 WebGLRenderingContext.getProgramParameter()-
返回程序对象的信息。
WebGLRenderingContext.getProgramInfoLog()-
返回
WebGLProgram对象的信息日志。 WebGLRenderingContext.getShaderParameter()-
返回着色器的信息。
WebGLRenderingContext.getShaderPrecisionFormat()-
返回一个描述着色器数字类型精度的
WebGLShaderPrecisionFormat对象。 WebGLRenderingContext.getShaderInfoLog()-
返回
WebGLShader对象的信息日志。 WebGLRenderingContext.getShaderSource()-
以字符串形式返回
WebGLShader的源码。 WebGLRenderingContext.isProgram()-
返回一个 Boolean 值,表示给入的
WebGLProgram是否有效。 WebGLRenderingContext.isShader()-
返回一个 Boolean 值,表示给入的
WebGLShader是否有效。 WebGLRenderingContext.linkProgram()-
链接给入的
WebGLProgram对象。 WebGLRenderingContext.shaderSource()-
设置一个
WebGLShader的源码。 WebGLRenderingContext.useProgram()-
使用指定的
WebGLProgram作为当前渲染状态的一部分。 WebGLRenderingContext.validateProgram()-
使
WebGLProgram生效。
Uniform 和 Attribute
WebGLRenderingContext.disableVertexAttribArray()-
在给定的位置,禁用顶点 attribute 数组。
WebGLRenderingContext.enableVertexAttribArray()-
在给定的位置,启用顶点 attribute 数组。
WebGLRenderingContext.getActiveAttrib()-
返回激活状态的 attribute 变量信息。
WebGLRenderingContext.getActiveUniform()-
返回激活状态的 uniform 变量信息。
WebGLRenderingContext.getAttribLocation()-
返回 attribute 变量的指针位置。
WebGLRenderingContext.getUniform()-
返回指定位置的 uniform 变量。
WebGLRenderingContext.getUniformLocation()-
返回 uniform 变量的指针位置。
WebGLRenderingContext.getVertexAttrib()-
返回指定位置的顶点 attribute 变量。
WebGLRenderingContext.getVertexAttribOffset()-
获取给定索引的顶点 attribute 位置。
WebGLRenderingContext.uniform[1234][fi][v]()-
指定一个 uniform 变量。
WebGLRenderingContext.uniformMatrix[234]fv()-
指定一个 uniform 矩阵变量。
WebGLRenderingContext.vertexAttrib[1234]f[v]()-
指定一个普通顶点 attribute 的值。
WebGLRenderingContext.vertexAttribPointer()-
指定一个顶点 attributes 数组中,顶点 attributes 变量的数据格式和位置。
绘制缓冲区
WebGLRenderingContext.clear()-
把指定的缓冲区清空为预设的值。
WebGLRenderingContext.drawArrays()-
渲染数组中的原始数据。
WebGLRenderingContext.drawElements()-
渲染元素数组中的原始数据。
WebGLRenderingContext.finish()-
阻断执行,直到之前所有的操作都完成。
WebGLRenderingContext.flush()-
清空缓冲的命令,这会导致所有命令尽快执行完。
色彩空间
WebGLRenderingContext.drawingBufferColorSpace实验性-
指定 WebGL 绘制缓冲区的色彩空间。
WebGLRenderingContext.unpackColorSpace实验性-
指定导入纹理时要转换到的色彩空间。
使用扩展插件
这些方法用于管理 WebGL 扩展:
WebGLRenderingContext.getSupportedExtensions()-
返回一个包含字符串的
Array,每个元素都为支持的 WebGL 扩展。 WebGLRenderingContext.getExtension()-
返回一个扩展对象。
规范
| Specification |
|---|
| WebGL Specification> # 5.14> |
浏览器兼容性
Loading…