From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../zh-cn/web/api/webglrenderingcontext/index.html | 367 +++++++++++++++++++++ 1 file changed, 367 insertions(+) create mode 100644 files/zh-cn/web/api/webglrenderingcontext/index.html (limited to 'files/zh-cn/web/api/webglrenderingcontext/index.html') diff --git a/files/zh-cn/web/api/webglrenderingcontext/index.html b/files/zh-cn/web/api/webglrenderingcontext/index.html new file mode 100644 index 0000000000..35b83bd3dc --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/index.html @@ -0,0 +1,367 @@ +--- +title: WebGLRenderingContext +slug: Web/API/WebGLRenderingContext +tags: + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext +--- +
{{APIRef("WebGL")}}
+ +

WebGLRenderingContext 接口提供基于 OpenGL ES 2.0 的绘图上下文，用于在 HTML {{HTMLElement("canvas")}} 元素内绘图。 

+ +

要获得这个接口的对象，可以通过在 <canvas> 元素上调用 {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} 函数，调用时传入 “webgl” 参数：

+ +
var canvas = document.getElementById('myCanvas');
+var gl = canvas.getContext('webgl');
+
+ +

当你获取到 canvas 元素的 WebGL 绘图上下文，你便可以在里面绘图。

+ +

点击 WebGL tutorial 获取更多资料，例子，和关于如何开始WebGL编程的知识。

+ +
+

补充：以下内容很多函数都没有提供参数，所以最好还是参见具体API。

+
+ +

常量

+ +

请参考 WebGL constants 。

+ +

WebGL上下文

+ +

以下的属性和方法提供只读的关于上下文的信息：

+ +
+
{{domxref("WebGLRenderingContext.canvas")}}
+
只读属性，对 {{domxref("HTMLCanvasElement")}} 的向后引用。如果上下文没有相联系的 {{HTMLElement("canvas")}} 元素，值将会为 {{jsxref("null")}}。
+
{{domxref("WebGLRenderingContext.commit()")}} {{experimental_inline}}
+
+

如果上下文没有指定的canvas，把帧交给原始的{{domxref("HTMLCanvasElement")}}元素。

+
+
{{domxref("WebGLRenderingContext.drawingBufferWidth")}}
+
只读属性，当前绘图缓冲区的宽度，等于和该上下文相联系的 canvas 元素的宽度。
+
{{domxref("WebGLRenderingContext.drawingBufferHeight")}}
+
只读属性，当前绘图缓冲区的高度，等于和该上下文相联系的 canvas 元素的高度。
+
{{domxref("WebGLRenderingContext.getContextAttributes()")}}
+
返回 WebGLContextAttributes 对象，该对象包含真实的上下文参数。如果上下文丢失，将会返回 {{jsxref("null")}}。
+
{{domxref("WebGLRenderingContext.isContextLost()")}}
+
如果上下文丢失，返回true；否则，返回 false。
+
+ +

视野和裁剪

+ +
+
{{domxref("WebGLRenderingContext.scissor()")}}
+
设置裁剪框。
+
{{domxref("WebGLRenderingContext.viewport()")}}
+
设置视口。
+
+ +

状态信息

+ +
+
{{domxref("WebGLRenderingContext.activeTexture()")}}
+
选择要激活的纹理单元。
+
{{domxref("WebGLRenderingContext.blendColor()")}}
+
设置源和目标的混和因子。
+
{{domxref("WebGLRenderingContext.blendEquation()")}}
+
用同一个表达式设置 RGB 混和表达式和 alpha 混和表达式。
+
{{domxref("WebGLRenderingContext.blendEquationSeparate()")}}
+
分开设置 RGB 混和表达式和 alpha 混和表达式。
+
{{domxref("WebGLRenderingContext.blendFunc()")}}
+
定义用于像素混合算法的函数。
+
{{domxref("WebGLRenderingContext.blendFuncSeparate()")}}
+
分别定义混合像素RGB通道和透明通道的函数。
+
{{domxref("WebGLRenderingContext.clearColor()")}}
+
设置用于清空用的颜色。
+
{{domxref("WebGLRenderingContext.clearDepth()")}}
+
设置清除深度缓存时的深度值。
+
{{domxref("WebGLRenderingContext.clearStencil()")}}
+
设置清除模板缓冲区时的模板值。
+
{{domxref("WebGLRenderingContext.colorMask()")}}
+
设置在绘制或渲染{{domxref("WebGLFramebuffer")}}时要开启或关闭的颜色分量。
+
{{domxref("WebGLRenderingContext.cullFace()")}}
+
设置多边形的正面和/或反面是否要被排除。
+
{{domxref("WebGLRenderingContext.depthFunc()")}}
+
设置比较输入像素深度和深度缓存值得函数。
+
{{domxref("WebGLRenderingContext.depthMask()")}}
+
设置是否写入深度缓存。
+
{{domxref("WebGLRenderingContext.depthRange()")}}
+
设置从规范化设备坐标映射到窗口或视口坐标时的深度范围。
+
{{domxref("WebGLRenderingContext.disable()")}}
+
禁用这个上下文的WebGL功能。
+
{{domxref("WebGLRenderingContext.enable()")}}
+
启用这个上下文的WebGL功能。
+
{{domxref("WebGLRenderingContext.frontFace()")}}
+
设置多边形的正面使用顺时针还是逆时针绘制表示。
+
{{domxref("WebGLRenderingContext.getParameter()")}}
+
返回给入参数名的值。
+
{{domxref("WebGLRenderingContext.getError()")}}
+
返回错误信息。
+
{{domxref("WebGLRenderingContext.hint()")}}
+
给某些行为设置建议使用的模式。具体建议需要看执行的情况。
+
{{domxref("WebGLRenderingContext.isEnabled()")}}
+
测试这个上下文的WebGL功能是否开启。
+
{{domxref("WebGLRenderingContext.lineWidth()")}}
+
设置线宽。
+
{{domxref("WebGLRenderingContext.pixelStorei()")}}
+
设置像素存储模式。
+
{{domxref("WebGLRenderingContext.polygonOffset()")}}
+
设置多边形偏移的比例和单位，从而计算深度值。（补充：解决深度冲突）
+
{{domxref("WebGLRenderingContext.sampleCoverage()")}}
+
为抗锯齿效果设置多重取样覆盖参数。
+
{{domxref("WebGLRenderingContext.stencilFunc()")}}
+
同时设置前面和背面的模板测试函数，及其引用值。
+
{{domxref("WebGLRenderingContext.stencilFuncSeparate()")}}
+
可分开设置前面或背面的模板测试函数，及其引用值。
+
{{domxref("WebGLRenderingContext.stencilMask()")}}
+
同时启用或禁用，前面和背面的模板测试掩码。
+
{{domxref("WebGLRenderingContext.stencilMaskSeparate()")}}
+
可分开启用或禁用，前面和背面的模板测试掩码。
+
{{domxref("WebGLRenderingContext.stencilOp()")}}
+
同时设置，在前面和背面的模板缓冲区上执行的操作。
+
{{domxref("WebGLRenderingContext.stencilOpSeparate()")}}
+
可分开设置，在前面和背面的模板缓冲区上执行的操作。
+
+ +

缓冲区

+ +
+
{{domxref("WebGLRenderingContext.bindBuffer()")}}
+
把 WebGLBuffer 对象绑定到指定目标上。
+
{{domxref("WebGLRenderingContext.bufferData()")}}
+
更新缓冲数据。
+
{{domxref("WebGLRenderingContext.bufferSubData()")}}
+
更新从给入偏移量开始的缓冲数据。
+
{{domxref("WebGLRenderingContext.createBuffer()")}}
+
创建 WebGLBuffer 对象。
+
{{domxref("WebGLRenderingContext.deleteBuffer()")}}
+
删除 WebGLBuffer 对象。
+
{{domxref("WebGLRenderingContext.getBufferParameter()")}}
+
返回缓冲信息。
+
{{domxref("WebGLRenderingContext.isBuffer()")}}
+
返回给入的缓冲是否有效。
+
+ +

帧缓冲区

+ +
+
{{domxref("WebGLRenderingContext.bindFramebuffer()")}}
+
把 WebGLFrameBuffer 对象绑定到指定对象上。
+
{{domxref("WebGLRenderingContext.checkFramebufferStatus()")}}
+
返回帧缓冲区的状态。
+
{{domxref("WebGLRenderingContext.createFramebuffer()")}}
+
创建 WebGLFrameBuffer 对象。
+
{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}
+
删除 WebGLFrameBuffer 对象。
+
{{domxref("WebGLRenderingContext.framebufferRenderbuffer()")}}
+
把 WebGLRenderingBuffer 对象附加到 WebGLFrameBuffer 对象。
+
{{domxref("WebGLRenderingContext.framebufferTexture2D()")}}
+
把纹理图像附加到 WebGLFrameBuffer object.
+
{{domxref("WebGLRenderingContext.getFramebufferAttachmentParameter()")}}
+
返回帧缓冲区的信息。
+
{{domxref("WebGLRenderingContext.isFramebuffer()")}}
+
返回 Boolean 值，表示给入的 WebGLFrameBuffer 对象是否有效。
+
{{domxref("WebGLRenderingContext.readPixels()")}}
+
读取 WebGLFrameBuffer 的像素。
+
+ +

渲染缓冲区

+ +
+
{{domxref("WebGLRenderingContext.bindRenderbuffer()")}}
+
把 WebGLRenderBuffer 对象绑定到指定的对象上。
+
{{domxref("WebGLRenderingContext.createRenderbuffer()")}}
+
创建 WebGLRenderBuffer 对象。
+
{{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}
+
删除 WebGLRenderBuffer 对象。
+
{{domxref("WebGLRenderingContext.getRenderbufferParameter()")}}
+
返回渲染缓冲区的信息。
+
{{domxref("WebGLRenderingContext.isBuffer()")}}
+
返回 Boolean 值，表示给入的 WebGLRenderingBuffer 是否有效。
+
{{domxref("WebGLRenderingContext.renderbufferStorage()")}}
+
创建渲染缓冲区数据存储。
+
+ +

纹理

+ +
+
{{domxref("WebGLRenderingContext.bindTexture()")}}
+
把 WebGLTexture 对象绑定到指定对象上。
+
{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}
+
指定一个为压缩格式的2D纹理图片。
+
{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}
+
指定一个为压缩格式的2D纹理子图片。
+
{{domxref("WebGLRenderingContext.copyTexImage2D()")}}
+
复制2D纹理图片。
+
{{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}
+
复制2D纹理子图片。
+
{{domxref("WebGLRenderingContext.createTexture()")}}
+
创建 WebGLTexture 对象。
+
{{domxref("WebGLRenderingContext.deleteTexture()")}}
+
删除 WebGLTexture 对象。
+
{{domxref("WebGLRenderingContext.generateMipmap()")}}
+
为 WebGLTexture 对象生成一组纹理映射。
+
{{domxref("WebGLRenderingContext.getTexParameter()")}}
+
返回纹理信息。
+
{{domxref("WebGLRenderingContext.isTexture()")}}
+
返回 Boolean 值，表示给入的 WebGLTexture 是否有效。
+
{{domxref("WebGLRenderingContext.texImage2D()")}}
+
指定2D纹理图片。
+
{{domxref("WebGLRenderingContext.texSubImage2D()")}}
+
更新当前 WebGLTexture 的子矩形。
+
{{domxref("WebGLRenderingContext.texParameterf()")}}
+
设置纹理参数。
+
{{domxref("WebGLRenderingContext.texParameteri()")}}
+
设置纹理参数。
+
+ +

程序对象和着色器对象

+ +
+
{{domxref("WebGLRenderingContext.attachShader()")}}
+
把 WebGLShader 添加到 WebGLProgram。
+
{{domxref("WebGLRenderingContext.bindAttribLocation()")}}
+
绑定一个普通顶点索引到一个命名的attribute 变量
+
{{domxref("WebGLRenderingContext.compileShader()")}}
+
编译 WebGLShader。
+
{{domxref("WebGLRenderingContext.createProgram()")}}
+
创建 WebGLProgram。
+
{{domxref("WebGLRenderingContext.createShader()")}}
+
创建 WebGLShader。
+
{{domxref("WebGLRenderingContext.deleteProgram()")}}
+
删除 WebGLProgram。
+
{{domxref("WebGLRenderingContext.deleteShader()")}}
+
删除 WebGLShader。
+
{{domxref("WebGLRenderingContext.detachShader()")}}
+
分离 WebGLShader。
+
{{domxref("WebGLRenderingContext.getAttachedShaders()")}}
+
返回附加在 WebGLProgram 上的 WebGLShader 对象的列表。
+
{{domxref("WebGLRenderingContext.getProgramParameter()")}}
+
返回程序对象的信息。
+
{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
+
返回 WebGLProgram 对象的信息日志。
+
{{domxref("WebGLRenderingContext.getShaderParameter()")}}
+
返回着色器的信息。
+
{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}
+
返回一个描述着色器数字类型精度的WebGLShaderPrecisionFormat 对象。
+
{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}
+
返回 WebGLShader 对象的信息日志。
+
{{domxref("WebGLRenderingContext.getShaderSource()")}}
+
以字符串形式返回 WebGLShader 的源码。
+
{{domxref("WebGLRenderingContext.isProgram()")}}
+
返回一个 Boolean 值，表示给入的 WebGLProgram 是否有效。
+
{{domxref("WebGLRenderingContext.isShader()")}}
+
返回一个 Boolean 值，表示给入的 WebGLShader 是否有效。
+
{{domxref("WebGLRenderingContext.linkProgram()")}}
+
链接给入的 WebGLProgram 对象。
+
{{domxref("WebGLRenderingContext.shaderSource()")}}
+
设置一个 WebGLShader 的源码。
+
{{domxref("WebGLRenderingContext.useProgram()")}}
+
使用指定的 WebGLProgram 作为当前渲染状态的一部分。
+
{{domxref("WebGLRenderingContext.validateProgram()")}}
+
使 WebGLProgram 生效。
+
+ +

Uniform 和 Attribute

+ +
+
{{domxref("WebGLRenderingContext.disableVertexAttribArray()")}}
+
在给定的位置，禁用顶点attribute数组。
+
{{domxref("WebGLRenderingContext.enableVertexAttribArray()")}}
+
在给定的位置，启用顶点attribute数组。
+
{{domxref("WebGLRenderingContext.getActiveAttrib()")}}
+
返回激活状态的attribute变量信息。
+
{{domxref("WebGLRenderingContext.getActiveUniform()")}}
+
返回激活状态的uniform 变量信息。
+
{{domxref("WebGLRenderingContext.getAttribLocation()")}}
+
返回attribute变量的指针位置。
+
{{domxref("WebGLRenderingContext.getUniform()")}}
+
返回指定位置的uniform 变量。
+
{{domxref("WebGLRenderingContext.getUniformLocation()")}}
+
返回uniform 变量的指针位置。
+
{{domxref("WebGLRenderingContext.getVertexAttrib()")}}
+
返回指定位置的顶点attribute变量。
+
{{domxref("WebGLRenderingContext.getVertexAttribOffset()")}}
+
获取给定索引的顶点attribute位置。
+
{{domxref("WebGLRenderingContext.uniform()", "WebGLRenderingContext.uniform[1234][fi][v]()")}}
+
指定一个uniform变量。
+
{{domxref("WebGLRenderingContext.uniformMatrix()", "WebGLRenderingContext.uniformMatrix[234]fv()")}}
+
指定一个uniform矩阵变量。
+
{{domxref("WebGLRenderingContext.vertexAttrib()", "WebGLRenderingContext.vertexAttrib[1234]f[v]()")}}
+
指定一个普通顶点attribute的值。
+
{{domxref("WebGLRenderingContext.vertexAttribPointer()")}}
+
指定一个顶点attributes 数组中，顶点attributes 变量的数据格式和位置。
+
+ +

绘制缓冲区

+ +
+
{{domxref("WebGLRenderingContext.clear()")}}
+
把指定的缓冲区清空为预设的值。
+
{{domxref("WebGLRenderingContext.drawArrays()")}}
+
渲染数组中的原始数据。
+
{{domxref("WebGLRenderingContext.drawElements()")}}
+
渲染元素数组中的原始数据。
+
{{domxref("WebGLRenderingContext.finish()")}}
+
阻断执行，直到之前所有的操作都完成。
+
{{domxref("WebGLRenderingContext.flush()")}}
+
清空缓冲的命令，这会导致所有命令尽快执行完。
+
+ +

使用扩展插件

+ +

这些方法管理 WebGL 扩展：

+ +
+
{{domxref("WebGLRenderingContext.getSupportedExtensions()")}}
+
返回一个包含 {{domxref("DOMString")}} 的 {{jsxref("Array")}} ，每个元素都为支持的WebGL扩展。
+
{{domxref("WebGLRenderingContext.getExtension()")}}
+
返回一个扩展对象。
+
+ +

示例

+ +

检测 WebGL 上下文特性支持

+ +

{{page("/zh-CN/Learn/WebGL/By_example/Detect_WebGL", "summary")}}

+ +

{{page("/zh-CN/Learn/WebGL/By_example/Detect_WebGL", "detect-webgl-source")}}

+ +

{{EmbedLiveSample("detect-webgl-source", 660,150 ,"" , "Learn/WebGL/By_example/Detect_WebGL")}}

+ +

Canvas 尺寸对使用 WebGL 渲染的影响

+ +

{{page("/zh-CN/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-intro")}}

+ +

{{page("/zh-CN/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-source")}}

+ +

{{EmbedLiveSample("canvas-size-and-webgl-source", 660,180 ,"" , "Learn/WebGL/By_example/Canvas_size_and_WebGL")}}

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14", "WebGLRenderingContext")}}{{Spec2('WebGL')}}原始定义
+ +

浏览器兼容性

+ +

{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext")}}

+ +

相关内容

+ + -- cgit v1.2.3-54-g00ecf