diff options
Diffstat (limited to 'files/zh-cn/web/api/webglrenderingcontext/index.html')
-rw-r--r-- | files/zh-cn/web/api/webglrenderingcontext/index.html | 367 |
1 files changed, 367 insertions, 0 deletions
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 +--- +<div>{{APIRef("WebGL")}}</div> + +<p><strong>WebGLRenderingContext</strong> 接口提供基于 OpenGL ES 2.0 的绘图上下文,用于在 HTML {{HTMLElement("canvas")}} 元素内绘图。 </p> + +<p>要获得这个接口的对象,可以通过在 <code><canvas> 元素上调用 </code>{{domxref("HTMLCanvasElement.getContext()", "getContext()")}} 函数,调用时传入 “webgl” 参数:</p> + +<pre class="brush: js">var canvas = document.getElementById('myCanvas'); +var gl = canvas.getContext('webgl'); +</pre> + +<p>当你获取到 canvas 元素的 WebGL 绘图上下文,你便可以在里面绘图。</p> + +<p>点击 <a href="/en-US/docs/Web/API/WebGL_API/Tutorial" title="WebGL tutorial">WebGL tutorial</a> 获取更多资料,例子,和关于如何开始WebGL编程的知识。</p> + +<blockquote> +<p>补充:以下内容很多函数都没有提供参数,所以最好还是参见具体API。</p> +</blockquote> + +<h2 id="常量">常量</h2> + +<p>请参考 <a href="/en-US/docs/Web/API/WebGL_API/Constants">WebGL constants</a> 。</p> + +<h2 id="WebGL上下文">WebGL上下文</h2> + +<p>以下的属性和方法提供只读的关于上下文的信息:</p> + +<dl> + <dt>{{domxref("WebGLRenderingContext.canvas")}}</dt> + <dd>只读属性,对 {{domxref("HTMLCanvasElement")}} 的向后引用。如果上下文没有相联系的 {{HTMLElement("canvas")}} 元素,值将会为 {{jsxref("null")}}。</dd> + <dt>{{domxref("WebGLRenderingContext.commit()")}} {{experimental_inline}}</dt> + <dd> + <p>如果上下文没有指定的canvas,把帧交给原始的{{domxref("HTMLCanvasElement")}}元素。</p> + </dd> + <dt>{{domxref("WebGLRenderingContext.drawingBufferWidth")}}</dt> + <dd>只读属性,当前绘图缓冲区的宽度,等于和该上下文相联系的 canvas 元素的宽度。</dd> + <dt>{{domxref("WebGLRenderingContext.drawingBufferHeight")}}</dt> + <dd>只读属性,当前绘图缓冲区的高度,等于和该上下文相联系的 canvas 元素的高度。</dd> + <dt>{{domxref("WebGLRenderingContext.getContextAttributes()")}}</dt> + <dd>返回 <code>WebGLContextAttributes 对象,该对象包含真实的上下文参数。如果上下文丢失,将会返回</code> {{jsxref("null")}}。</dd> + <dt>{{domxref("WebGLRenderingContext.isContextLost()")}}</dt> + <dd>如果上下文丢失,返回true;否则,返回 false。</dd> +</dl> + +<h2 id="视野和裁剪">视野和裁剪</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.scissor()")}}</dt> + <dd>设置裁剪框。</dd> + <dt>{{domxref("WebGLRenderingContext.viewport()")}}</dt> + <dd>设置视口。</dd> +</dl> + +<h2 id="状态信息">状态信息</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.activeTexture()")}}</dt> + <dd>选择要激活的纹理单元。</dd> + <dt>{{domxref("WebGLRenderingContext.blendColor()")}}</dt> + <dd>设置源和目标的混和因子。</dd> + <dt>{{domxref("WebGLRenderingContext.blendEquation()")}}</dt> + <dd>用同一个表达式设置 RGB 混和表达式和 alpha 混和表达式。</dd> + <dt>{{domxref("WebGLRenderingContext.blendEquationSeparate()")}}</dt> + <dd>分开设置 RGB 混和表达式和 alpha 混和表达式。</dd> + <dt>{{domxref("WebGLRenderingContext.blendFunc()")}}</dt> + <dd>定义用于像素混合算法的函数。</dd> + <dt>{{domxref("WebGLRenderingContext.blendFuncSeparate()")}}</dt> + <dd>分别定义混合像素RGB通道和透明通道的函数。</dd> + <dt>{{domxref("WebGLRenderingContext.clearColor()")}}</dt> + <dd>设置用于清空用的颜色。</dd> + <dt>{{domxref("WebGLRenderingContext.clearDepth()")}}</dt> + <dd>设置清除深度缓存时的深度值。</dd> + <dt>{{domxref("WebGLRenderingContext.clearStencil()")}}</dt> + <dd>设置清除模板缓冲区时的模板值。</dd> + <dt>{{domxref("WebGLRenderingContext.colorMask()")}}</dt> + <dd>设置在绘制或渲染{{domxref("WebGLFramebuffer")}}时要开启或关闭的颜色分量。</dd> + <dt>{{domxref("WebGLRenderingContext.cullFace()")}}</dt> + <dd>设置多边形的正面和/或反面是否要被排除。</dd> + <dt>{{domxref("WebGLRenderingContext.depthFunc()")}}</dt> + <dd>设置比较输入像素深度和深度缓存值得函数。</dd> + <dt>{{domxref("WebGLRenderingContext.depthMask()")}}</dt> + <dd>设置是否写入深度缓存。</dd> + <dt>{{domxref("WebGLRenderingContext.depthRange()")}}</dt> + <dd>设置从规范化设备坐标映射到窗口或视口坐标时的深度范围。</dd> + <dt>{{domxref("WebGLRenderingContext.disable()")}}</dt> + <dd>禁用这个上下文的WebGL功能。</dd> + <dt>{{domxref("WebGLRenderingContext.enable()")}}</dt> + <dd>启用这个上下文的WebGL功能。</dd> + <dt>{{domxref("WebGLRenderingContext.frontFace()")}}</dt> + <dd>设置多边形的正面使用顺时针还是逆时针绘制表示。</dd> + <dt>{{domxref("WebGLRenderingContext.getParameter()")}}</dt> + <dd>返回给入参数名的值。</dd> + <dt>{{domxref("WebGLRenderingContext.getError()")}}</dt> + <dd>返回错误信息。</dd> + <dt>{{domxref("WebGLRenderingContext.hint()")}}</dt> + <dd>给某些行为设置建议使用的模式。具体建议需要看执行的情况。</dd> + <dt>{{domxref("WebGLRenderingContext.isEnabled()")}}</dt> + <dd>测试这个上下文的WebGL功能是否开启。</dd> + <dt>{{domxref("WebGLRenderingContext.lineWidth()")}}</dt> + <dd>设置线宽。</dd> + <dt>{{domxref("WebGLRenderingContext.pixelStorei()")}}</dt> + <dd>设置像素存储模式。</dd> + <dt>{{domxref("WebGLRenderingContext.polygonOffset()")}}</dt> + <dd>设置多边形偏移的比例和单位,从而计算深度值。(补充:解决深度冲突)</dd> + <dt>{{domxref("WebGLRenderingContext.sampleCoverage()")}}</dt> + <dd>为抗锯齿效果设置多重取样覆盖参数。</dd> + <dt>{{domxref("WebGLRenderingContext.stencilFunc()")}}</dt> + <dd>同时设置前面和背面的模板测试函数,及其引用值。</dd> + <dt>{{domxref("WebGLRenderingContext.stencilFuncSeparate()")}}</dt> + <dd>可分开设置前面或背面的模板测试函数,及其引用值。</dd> + <dt>{{domxref("WebGLRenderingContext.stencilMask()")}}</dt> + <dd>同时启用或禁用,前面和背面的模板测试掩码。</dd> + <dt>{{domxref("WebGLRenderingContext.stencilMaskSeparate()")}}</dt> + <dd>可分开启用或禁用,前面和背面的模板测试掩码。</dd> + <dt>{{domxref("WebGLRenderingContext.stencilOp()")}}</dt> + <dd>同时设置,在前面和背面的模板缓冲区上执行的操作。</dd> + <dt>{{domxref("WebGLRenderingContext.stencilOpSeparate()")}}</dt> + <dd>可分开设置,在前面和背面的模板缓冲区上执行的操作。</dd> +</dl> + +<h2 id="缓冲区">缓冲区</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.bindBuffer()")}}</dt> + <dd>把 <code>WebGLBuffer</code> 对象绑定到指定目标上。</dd> + <dt>{{domxref("WebGLRenderingContext.bufferData()")}}</dt> + <dd>更新缓冲数据。</dd> + <dt>{{domxref("WebGLRenderingContext.bufferSubData()")}}</dt> + <dd>更新从给入偏移量开始的缓冲数据。</dd> + <dt>{{domxref("WebGLRenderingContext.createBuffer()")}}</dt> + <dd>创建 <code>WebGLBuffer</code> 对象。</dd> + <dt>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</dt> + <dd>删除 <code>WebGLBuffer</code> 对象。</dd> + <dt>{{domxref("WebGLRenderingContext.getBufferParameter()")}}</dt> + <dd>返回缓冲信息。</dd> + <dt>{{domxref("WebGLRenderingContext.isBuffer()")}}</dt> + <dd>返回给入的缓冲是否有效。</dd> +</dl> + +<h2 id="帧缓冲区">帧缓冲区</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.bindFramebuffer()")}}</dt> + <dd>把 <code>WebGLFrameBuffer</code> 对象绑定到指定对象上。</dd> + <dt>{{domxref("WebGLRenderingContext.checkFramebufferStatus()")}}</dt> + <dd>返回帧缓冲区的状态。</dd> + <dt>{{domxref("WebGLRenderingContext.createFramebuffer()")}}</dt> + <dd>创建 <code>WebGLFrameBuffer</code> 对象。</dd> + <dt>{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}</dt> + <dd>删除 <code>WebGLFrameBuffer</code> 对象。</dd> + <dt>{{domxref("WebGLRenderingContext.framebufferRenderbuffer()")}}</dt> + <dd>把 <code>WebGLRenderingBuffer</code> 对象附加到 <code>WebGLFrameBuffer</code> 对象。</dd> + <dt>{{domxref("WebGLRenderingContext.framebufferTexture2D()")}}</dt> + <dd>把纹理图像附加到 <code>WebGLFrameBuffer</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.getFramebufferAttachmentParameter()")}}</dt> + <dd>返回帧缓冲区的信息。</dd> + <dt>{{domxref("WebGLRenderingContext.isFramebuffer()")}}</dt> + <dd>返回 Boolean 值,表示给入的 <code>WebGLFrameBuffer</code> 对象是否有效。</dd> + <dt>{{domxref("WebGLRenderingContext.readPixels()")}}</dt> + <dd>读取 <code>WebGLFrameBuffer 的像素。</code></dd> +</dl> + +<h2 id="渲染缓冲区">渲染缓冲区</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.bindRenderbuffer()")}}</dt> + <dd>把 <code>WebGLRenderBuffer</code> 对象绑定到指定的对象上。</dd> + <dt>{{domxref("WebGLRenderingContext.createRenderbuffer()")}}</dt> + <dd>创建 <code>WebGLRenderBuffer</code> 对象。</dd> + <dt>{{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}</dt> + <dd>删除 <code>WebGLRenderBuffer</code> 对象。</dd> + <dt>{{domxref("WebGLRenderingContext.getRenderbufferParameter()")}}</dt> + <dd>返回渲染缓冲区的信息。</dd> + <dt>{{domxref("WebGLRenderingContext.isBuffer()")}}</dt> + <dd>返回 Boolean 值,表示给入的 <code>WebGLRenderingBuffer</code> 是否有效。</dd> + <dt>{{domxref("WebGLRenderingContext.renderbufferStorage()")}}</dt> + <dd>创建渲染缓冲区数据存储。</dd> +</dl> + +<h2 id="纹理">纹理</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.bindTexture()")}}</dt> + <dd>把 <code>WebGLTexture</code> 对象绑定到指定对象上。</dd> + <dt>{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}</dt> + <dd>指定一个为压缩格式的2D纹理图片。</dd> + <dt>{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}</dt> + <dd>指定一个为压缩格式的2D纹理子图片。</dd> + <dt>{{domxref("WebGLRenderingContext.copyTexImage2D()")}}</dt> + <dd>复制2D纹理图片。</dd> + <dt>{{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}</dt> + <dd>复制2D纹理子图片。</dd> + <dt>{{domxref("WebGLRenderingContext.createTexture()")}}</dt> + <dd>创建 <code>WebGLTexture</code> 对象。</dd> + <dt>{{domxref("WebGLRenderingContext.deleteTexture()")}}</dt> + <dd>删除 <code>WebGLTexture</code> 对象。</dd> + <dt>{{domxref("WebGLRenderingContext.generateMipmap()")}}</dt> + <dd>为 <code>WebGLTexture</code> 对象生成一组纹理映射。</dd> + <dt>{{domxref("WebGLRenderingContext.getTexParameter()")}}</dt> + <dd>返回纹理信息。</dd> + <dt>{{domxref("WebGLRenderingContext.isTexture()")}}</dt> + <dd>返回 Boolean 值,表示给入的 <code>WebGLTexture</code> 是否有效。</dd> + <dt>{{domxref("WebGLRenderingContext.texImage2D()")}}</dt> + <dd>指定2D纹理图片。</dd> + <dt>{{domxref("WebGLRenderingContext.texSubImage2D()")}}</dt> + <dd>更新当前 <code>WebGLTexture 的子矩形。</code></dd> + <dt>{{domxref("WebGLRenderingContext.texParameterf()")}}</dt> + <dd>设置纹理参数。</dd> + <dt>{{domxref("WebGLRenderingContext.texParameteri()")}}</dt> + <dd>设置纹理参数。</dd> +</dl> + +<h2 id="程序对象和着色器对象">程序对象和着色器对象</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.attachShader()")}}</dt> + <dd>把 <code>WebGLShader</code> 添加到 <code>WebGLProgram。</code></dd> + <dt>{{domxref("WebGLRenderingContext.bindAttribLocation()")}}</dt> + <dd>绑定一个普通顶点索引到一个命名的attribute 变量</dd> + <dt>{{domxref("WebGLRenderingContext.compileShader()")}}</dt> + <dd>编译 <code>WebGLShader。</code></dd> + <dt>{{domxref("WebGLRenderingContext.createProgram()")}}</dt> + <dd>创建 <code>WebGLProgram。</code></dd> + <dt>{{domxref("WebGLRenderingContext.createShader()")}}</dt> + <dd>创建 <code>WebGLShader。</code></dd> + <dt>{{domxref("WebGLRenderingContext.deleteProgram()")}}</dt> + <dd>删除 <code>WebGLProgram。</code></dd> + <dt>{{domxref("WebGLRenderingContext.deleteShader()")}}</dt> + <dd>删除 <code>WebGLShader。</code></dd> + <dt>{{domxref("WebGLRenderingContext.detachShader()")}}</dt> + <dd>分离 <code>WebGLShader。</code></dd> + <dt>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</dt> + <dd>返回附加在 <code>WebGLProgram 上的</code> <code>WebGLShader</code> 对象的列表。</dd> + <dt>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</dt> + <dd>返回程序对象的信息。</dd> + <dt>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</dt> + <dd>返回 <code>WebGLProgram </code>对象的信息日志。</dd> + <dt>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</dt> + <dd>返回着色器的信息。</dd> + <dt>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</dt> + <dd>返回一个描述着色器数字类型精度的<code>WebGLShaderPrecisionFormat</code> 对象。</dd> + <dt>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</dt> + <dd>返回 <code>WebGLShader</code> 对象的信息日志。</dd> + <dt>{{domxref("WebGLRenderingContext.getShaderSource()")}}</dt> + <dd>以字符串形式返回 <code>WebGLShader</code> 的源码。</dd> + <dt>{{domxref("WebGLRenderingContext.isProgram()")}}</dt> + <dd>返回一个 Boolean 值,表示给入的 <code>WebGLProgram</code> 是否有效。</dd> + <dt>{{domxref("WebGLRenderingContext.isShader()")}}</dt> + <dd>返回一个 Boolean 值,表示给入的 <code>WebGLShader</code> 是否有效。</dd> + <dt>{{domxref("WebGLRenderingContext.linkProgram()")}}</dt> + <dd>链接给入的 <code>WebGLProgram</code> 对象。</dd> + <dt>{{domxref("WebGLRenderingContext.shaderSource()")}}</dt> + <dd>设置一个 <code>WebGLShader 的源码。</code></dd> + <dt>{{domxref("WebGLRenderingContext.useProgram()")}}</dt> + <dd>使用指定的 <code>WebGLProgram</code> 作为当前渲染状态的一部分。</dd> + <dt>{{domxref("WebGLRenderingContext.validateProgram()")}}</dt> + <dd>使 <code>WebGLProgram 生效。</code></dd> +</dl> + +<h2 id="Uniform_和_Attribute">Uniform 和 Attribute</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.disableVertexAttribArray()")}}</dt> + <dd>在给定的位置,禁用顶点attribute数组。</dd> + <dt>{{domxref("WebGLRenderingContext.enableVertexAttribArray()")}}</dt> + <dd>在给定的位置,启用顶点attribute数组。</dd> + <dt>{{domxref("WebGLRenderingContext.getActiveAttrib()")}}</dt> + <dd>返回激活状态的attribute变量信息。</dd> + <dt>{{domxref("WebGLRenderingContext.getActiveUniform()")}}</dt> + <dd>返回激活状态的uniform 变量信息。</dd> + <dt>{{domxref("WebGLRenderingContext.getAttribLocation()")}}</dt> + <dd>返回attribute变量的指针位置。</dd> + <dt>{{domxref("WebGLRenderingContext.getUniform()")}}</dt> + <dd>返回指定位置的uniform 变量。</dd> + <dt>{{domxref("WebGLRenderingContext.getUniformLocation()")}}</dt> + <dd>返回uniform 变量的指针位置。</dd> + <dt>{{domxref("WebGLRenderingContext.getVertexAttrib()")}}</dt> + <dd>返回指定位置的顶点attribute变量。</dd> + <dt>{{domxref("WebGLRenderingContext.getVertexAttribOffset()")}}</dt> + <dd>获取给定索引的顶点attribute位置。</dd> + <dt>{{domxref("WebGLRenderingContext.uniform()", "WebGLRenderingContext.uniform[1234][fi][v]()")}}</dt> + <dd>指定一个uniform变量。</dd> + <dt>{{domxref("WebGLRenderingContext.uniformMatrix()", "WebGLRenderingContext.uniformMatrix[234]fv()")}}</dt> + <dd>指定一个uniform矩阵变量。</dd> + <dt>{{domxref("WebGLRenderingContext.vertexAttrib()", "WebGLRenderingContext.vertexAttrib[1234]f[v]()")}}</dt> + <dd>指定一个普通顶点attribute的值。</dd> + <dt>{{domxref("WebGLRenderingContext.vertexAttribPointer()")}}</dt> + <dd>指定一个顶点attributes 数组中,顶点attributes 变量的数据格式和位置。</dd> +</dl> + +<h2 id="绘制缓冲区">绘制缓冲区</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.clear()")}}</dt> + <dd>把指定的缓冲区清空为预设的值。</dd> + <dt>{{domxref("WebGLRenderingContext.drawArrays()")}}</dt> + <dd>渲染数组中的原始数据。</dd> + <dt>{{domxref("WebGLRenderingContext.drawElements()")}}</dt> + <dd>渲染元素数组中的原始数据。</dd> + <dt>{{domxref("WebGLRenderingContext.finish()")}}</dt> + <dd>阻断执行,直到之前所有的操作都完成。</dd> + <dt>{{domxref("WebGLRenderingContext.flush()")}}</dt> + <dd>清空缓冲的命令,这会导致所有命令尽快执行完。</dd> +</dl> + +<h2 id="使用扩展插件">使用扩展插件</h2> + +<p>这些方法管理 WebGL 扩展:</p> + +<dl> + <dt>{{domxref("WebGLRenderingContext.getSupportedExtensions()")}}</dt> + <dd>返回一个包含 {{domxref("DOMString")}} 的 {{jsxref("Array")}} ,每个元素都为支持的WebGL扩展。</dd> + <dt>{{domxref("WebGLRenderingContext.getExtension()")}}</dt> + <dd>返回一个扩展对象。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="检测_WebGL_上下文特性支持">检测 WebGL 上下文特性支持</h3> + +<p>{{page("/zh-CN/Learn/WebGL/By_example/Detect_WebGL", "summary")}}</p> + +<p>{{page("/zh-CN/Learn/WebGL/By_example/Detect_WebGL", "detect-webgl-source")}}</p> + +<p>{{EmbedLiveSample("detect-webgl-source", 660,150 ,"" , "Learn/WebGL/By_example/Detect_WebGL")}}</p> + +<h3 id="Canvas_尺寸对使用_WebGL_渲染的影响">Canvas 尺寸对使用 WebGL 渲染的影响</h3> + +<p>{{page("/zh-CN/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-intro")}}</p> + +<p>{{page("/zh-CN/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-source")}}</p> + +<p>{{EmbedLiveSample("canvas-size-and-webgl-source", 660,180 ,"" , "Learn/WebGL/By_example/Canvas_size_and_WebGL")}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14", "WebGLRenderingContext")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>原始定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext")}}</p> + +<h2 id="相关内容">相关内容</h2> + +<ul> + <li>{{domxref("HTMLCanvasElement")}}</li> +</ul> |