diff options
Diffstat (limited to 'files/zh-cn/web/api/webglrenderingcontext')
74 files changed, 9945 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/webglrenderingcontext/activetexture/index.html b/files/zh-cn/web/api/webglrenderingcontext/activetexture/index.html new file mode 100644 index 0000000000..6e5f43f563 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/activetexture/index.html @@ -0,0 +1,127 @@ +--- +title: WebGLRenderingContext.activeTexture() +slug: Web/API/WebGLRenderingContext/activeTexture +translation_of: Web/API/WebGLRenderingContext/activeTexture +--- +<div>{{APIRef("WebGL")}}</div> + +<p><strong><code>WebGLRenderingContext.activeTexture() </code></strong>是 <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 方法之一，用来激活指定的纹理单元。</p> + +<h2 id="句法">句法</h2> + +<pre class="syntaxbox"><var><em>void gl</em>.activeTexture</var><var>(texture);</var> +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>texture</code></dt> + <dd>需要激活的纹理单元。其值是 <code>gl.TEXTURE<em>I</em></code> ，其中的 <em>I</em> 在 0 到 <code>gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1 </code>范围内。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>无返回值。</p> + +<h3 id="异常">异常</h3> + +<p>如果 <em>texture </em>不是 <code>gl.TEXTURE<em>I(</em></code> <em>I </em>在 0 到 <code>gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1 </code>范围内)，一个 <code>gl.INVALID_ENUM</code> 错误将被抛出。</p> + +<h2 id="示例">示例</h2> + +<p>接下来调用 <code>gl.TEXTURE1</code> 作为当前纹理，随后对纹理状态的更改将会影响到这个纹理。</p> + +<pre class="brush: js">gl.activeTexture(gl.TEXTURE1); +</pre> + +<p>纹理单元的数量视实现而定， 你可以通过访问常量 <code>MAX_COMBINED_TEXTURE_IMAGE_UNITS</code> 来获取这个值。按照规范来说，最少是 8 个。</p> + +<pre class="brush: js">gl.getParameter(gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS); +</pre> + +<p>想要获取激活的纹理，可以查询常量 <code>ACTIVE_TEXTURE</code><code>。</code></p> + +<pre class="brush: js">gl.activeTexture(gl.TEXTURE0); +gl.getParameter(gl.ACTIVE_TEXTURE); +// returns "33984" (0x84C0, gl.TEXUTURE0 enum value) +</pre> + +<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.3", "activeTexture")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glActiveTexture.xml", "glActiveTexture")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("9")}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatIE("11")}}</td> + <td>{{CompatOpera("12")}}</td> + <td>{{CompatSafari("5.1")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>25</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>12</td> + <td>8.1</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.getParameter()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/attachshader/index.html b/files/zh-cn/web/api/webglrenderingcontext/attachshader/index.html new file mode 100644 index 0000000000..c91262824e --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/attachshader/index.html @@ -0,0 +1,95 @@ +--- +title: WebGLRenderingContext.attachShader() +slug: Web/API/WebGLRenderingContext/attachShader +translation_of: Web/API/WebGLRenderingContext/attachShader +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 的 <strong>WebGLRenderingContext.attachShader()</strong> 方法负责往 {{domxref("WebGLProgram")}} 添加一个片段或者顶点着色器。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>gl</em>.attach</var>Shader<var>(program, shader);</var> +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>program</code></dt> + <dd>一个 {{domxref("WebGLProgram")}} 对象</dd> + <dt><code>shader</code></dt> + <dd>一个类型为片段或者顶点的 {{domxref("WebGLShader")}}</dd> +</dl> + +<h2 id="示例">示例</h2> + +<p>以下代码为 {{domxref("WebGLProgram")}} 添加一个预先定义好的着色器。</p> + +<pre class="brush: js">var program = gl.createProgram(); + +// 添加一个预先定义的着色器 +gl.attachShader(program, vertexShader); +gl.attachShader(program, fragmentShader); + +gl.linkProgram(program); + +if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) { + var info = gl.getProgramInfoLog(program); + throw "Could not compile WebGL program. \n\n" + info; +} +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.9", "attachShader")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glAttachShader.xml", "glAttachShader")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL man page.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext.attachShader")}}</p> + +<h2 id="相关资料">相关资料</h2> + +<ul> + <li>{{domxref("WebGLProgram")}}</li> + <li>{{domxref("WebGLShader")}}</li> + <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.compileShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.createShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li> + <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.isShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li> + <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/bindattriblocation/index.html b/files/zh-cn/web/api/webglrenderingcontext/bindattriblocation/index.html new file mode 100644 index 0000000000..20be6a8f7d --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/bindattriblocation/index.html @@ -0,0 +1,70 @@ +--- +title: WebGLRenderingContext.bindAttribLocation() +slug: Web/API/WebGLRenderingContext/bindAttribLocation +tags: + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/bindAttribLocation +--- +<p>{{APIRef("WebGL")}}</p> + +<p>WebGL API的WebGLRenderingContext.bindAttribLocation（）方法将通用顶点索引绑定到属性变量。</p> + +<h2 id="语法">语法</h2> + +<pre>void <var>gl</var>.bindAttribLocation(<var>program</var>, <var>index</var>, <var>name</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>program</code></dt> + <dd>要绑定的{{domxref("WebGLProgram")}} 对象。</dd> + <dt>index</dt> + <dd>{{domxref("GLuint")}} 指定要绑定的通用顶点的索引。</dd> + <dt>name</dt> + <dd>{{domxref("DOMString")}}指定要绑定到通用顶点索引的变量的名称。 该名称不能以“webgl_”或“_webgl_”开头，因为这些名称将保留供WebGL使用。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>None.</p> + +<h2 id="示例">示例</h2> + +<pre>gl.bindAttribLocation(program, colorLocation, 'vColor'); +</pre> + +<h2 id="规范">规范</h2> + +<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.9", "bindAttribLocation")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glBindAttribLocation.xml", "glBindAttribLocation")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the (similar) OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext.bindAttribLocation")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.getActiveAttrib()")}}</li> + <li>{{domxref("WebGLRenderingContext.getAttribLocation()")}}</li> + <li>{{domxref("WebGLRenderingContext.getVertexAttrib()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/bindbuffer/index.html b/files/zh-cn/web/api/webglrenderingcontext/bindbuffer/index.html new file mode 100644 index 0000000000..bb2b94b886 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/bindbuffer/index.html @@ -0,0 +1,127 @@ +--- +title: WebGLRenderingContext.bindBuffer() +slug: Web/API/WebGLRenderingContext/bindBuffer +tags: + - WebGL + - WebGLRenderingContext + - 绑定Buffer +translation_of: Web/API/WebGLRenderingContext/bindBuffer +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a>的WebGLRenderingContext.bindBuffer()方法将给定的{{domxref("WebGLBuffer")}}绑定到目标。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var>gl</var>.bindBuffer(<var>target</var>, <var>buffer</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>target</dt> + <dd> {{domxref("GLenum")}} 指定绑定点(target)。 可能的值： + <ul> + <li><code>gl.ARRAY_BUFFER</code>: 包含顶点属性的Buffer，如顶点坐标，纹理坐标数据或顶点颜色数据。</li> + <li><code>gl.ELEMENT_ARRAY_BUFFER</code>: 用于元素索引的Buffer。</li> + <li>当使用 {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}时，可以使用以下值： + <ul> + <li><code>gl.COPY_READ_BUFFER</code>: 从一个Buffer对象复制到另一个Buffer对象。</li> + <li><code>gl.COPY_WRITE_BUFFER</code>: 从一个Buffer对象复制到另一个Buffer对象。</li> + <li><code>gl.TRANSFORM_FEEDBACK_BUFFER</code>: Buffer for transform feedback operations.</li> + <li><code>gl.UNIFORM_BUFFER</code>: 用于存储统一块的Buffer。</li> + <li><code>gl.PIXEL_PACK_BUFFER</code>: 用于像素传输操作的Buffer。</li> + <li><code>gl.PIXEL_UNPACK_BUFFER</code>: 用于像素传输操作的Buffer。</li> + </ul> + </li> + </ul> + </dd> + <dt>buffer</dt> + <dd>要绑定的 {{domxref("WebGLBuffer")}} 。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>None.</p> + +<h3 id="异常">异常</h3> + +<p>只有一个目标可以绑定到给定的 {{domxref("WebGLBuffer")}} 。 尝试将缓冲区绑定到另一个目标将引发 <code>INVALID_OPERATION</code> 错误，并且当前的缓冲区绑定将保持不变。</p> + +<p>一个被{{domxref("WebGLRenderingContext.deleteBuffer()", "deleteBuffer")}}标记为删除的{{domxref("WebGLBuffer")}}不可重新被绑定,尝试这样做将生成 <code>INVALID_OPERATION</code> 错误,并且当前绑定将保持不变。</p> + +<h2 id="示例">示例</h2> + +<h3 id="将缓冲区绑定到目标">将缓冲区绑定到目标</h3> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var gl = canvas.getContext('webgl'); +var buffer = gl.createBuffer(); + +gl.bindBuffer(gl.ARRAY_BUFFER, buffer); +</pre> + +<h3 id="获取当前绑定">获取当前绑定</h3> + +<p>要检查当前的缓冲区绑定，请查询ARRAY_BUFFER_BINDING和ELEMENT_ARRAY_BUFFER_BINDING常量。</p> + +<pre class="brush: js">gl.getParameter(gl.ARRAY_BUFFER_BINDING); +gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING); +</pre> + +<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.5", "bindBuffer")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition for WebGL.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glBindBuffer.xml", "glBindBuffer")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the (similar) OpenGL ES 2 API.</td> + </tr> + <tr> + <td>{{SpecName('WebGL2', "#3.7.1", "bindBuffer")}}</td> + <td>{{Spec2('WebGL2')}}</td> + <td> + <p>Updated definition for WebGL 2.</p> + + <p>Adds new <code>target</code> buffers:<br> + <code>gl.COPY_READ_BUFFER</code>,<br> + <code>gl.COPY_WRITE_BUFFER</code>,<br> + <code>gl.TRANSFORM_FEEDBACK_BUFFER</code>,<br> + <code>gl.UNIFORM_BUFFER</code>,<br> + <code>gl.PIXEL_PACK_BUFFER</code>,<br> + <code>gl.PIXEL_UNPACK_BUFFER</code></p> + </td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0', "glBindBuffer.xhtml", "glBindBuffer")}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td>Man page of the (similar) OpenGL ES 3 API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext.bindBuffer")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.isBuffer()")}}</li> + <li>Other buffers: {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/bindframebuffer/index.html b/files/zh-cn/web/api/webglrenderingcontext/bindframebuffer/index.html new file mode 100644 index 0000000000..ff033a902c --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/bindframebuffer/index.html @@ -0,0 +1,113 @@ +--- +title: WebGLRenderingContext.bindFramebuffer() +slug: Web/API/WebGLRenderingContext/bindFramebuffer +tags: + - API + - Method + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/bindFramebuffer +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 的 <strong><code>WebGLRenderingContext.bindFramebuffer()</code></strong> 方法将给定的 {{domxref("WebGLFramebuffer")}} 绑定到目标。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var>gl</var>.bindFramebuffer(<var>target</var>, <var>framebuffer</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>target</dt> + <dd>{{domxref("GLenum")}} 指定绑定点(目标)。可能的值为： + <ul> + <li><code>gl.FRAMEBUFFER</code>: 收集用于渲染图像的颜色，alpha，深度和模板缓冲区的缓冲区数据存储。</li> + <li>当使用 {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} 时，可以使用以下值： + <ul> + <li><code>gl.DRAW_FRAMEBUFFER</code>: 相当于<code>gl.FRAMEBUFFER</code>， 用作绘图，渲染，清除和写入操作。</li> + <li><code>gl.READ_FRAMEBUFFER</code>: 用作读取操作的资源。</li> + </ul> + </li> + </ul> + </dd> + <dt>framebuffer</dt> + <dd>要绑定的 {{domxref("WebGLFramebuffer")}} 对象。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>None.</p> + +<h3 id="异常">异常</h3> + +<p>如果目标不是 <code>gl.FRAMEBUFFER</code> ，<code>gl.DRAW_FRAMEBUFFER</code> 或 <code>gl.READ_FRAMEBUFFER</code> ，则抛出 <code>gl.INVALID_ENUM</code> 错误。</p> + +<h2 id="示例">示例</h2> + +<h3 id="绑定帧缓冲区">绑定帧缓冲区</h3> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var gl = canvas.getContext('webgl'); +var framebuffer = gl.createFramebuffer(); + +gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer); +</pre> + +<h3 id="获取当前绑定">获取当前绑定</h3> + +<p>要检查当前帧缓冲区绑定，请查询 <code>FRAMEBUFFER_BINDING</code> 常量。</p> + +<pre class="brush: js">gl.getParameter(gl.FRAMEBUFFER_BINDING); +</pre> + +<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.6", "bindFramebuffer")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>WebGL初始定义.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glBindFramebuffer.xml", "glBindFramebuffer")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL API手册.</td> + </tr> + <tr> + <td>{{SpecName('WebGL2', "#3.7.1", "bindFrameBuffer")}}</td> + <td>{{Spec2('WebGL2')}}</td> + <td>WebGL 2更新定义.<br> + 新增: <code>gl.DRAW_FRAMEBUFFER</code> 和 <code>gl.READ_FRAMEBUFFER</code></td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0', "glBindFramebuffer.xhtml", "glBindFramebuffer")}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td>OpenGL ES 3 API手册(类似).</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext.bindFramebuffer")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.createFramebuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.isFramebuffer()")}}</li> + <li>Other buffers: {{domxref("WebGLBuffer")}}, {{domxref("WebGLRenderbuffer")}}<br> + </li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/bindrenderbuffer/index.html b/files/zh-cn/web/api/webglrenderingcontext/bindrenderbuffer/index.html new file mode 100644 index 0000000000..04d07a30fd --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/bindrenderbuffer/index.html @@ -0,0 +1,95 @@ +--- +title: WebGLRenderingContext.bindRenderbuffer() +slug: Web/API/WebGLRenderingContext/bindRenderbuffer +tags: + - API + - Method + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/bindRenderbuffer +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 的 <strong><code>WebGLRenderingContext.bindRenderbuffer()</code></strong> 方法将给定的 {{domxref("WebGLRenderbuffer")}} 绑定到一个目标，它必须是 gl.RENDERBUFFER 。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var>gl</var>.bindRenderbuffer(<var>target</var>, <var>renderbuffer</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>target</dt> + <dd>{{domxref("GLenum")}} 指定绑定点（目标）。 可能的值： + <ul> + <li><code>gl.RENDERBUFFER</code>: 以可渲染的内部格式对单个图像进行缓冲数据存储。</li> + </ul> + </dd> + <dt>renderbuffer</dt> + <dd>要绑定的 {{domxref("WebGLRenderbuffer")}} 对象。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>None.</p> + +<h3 id="抛出错误">抛出错误</h3> + +<p>如果 <code>target</code> 不是 <code>gl.RENDERBUFFER</code>，则抛出 <code>gl.INVALID_ENUM </code>错误。</p> + +<h2 id="示例">示例</h2> + +<h3 id="绑定一个渲染缓冲区">绑定一个渲染缓冲区</h3> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var gl = canvas.getContext('webgl'); +var renderbuffer = gl.createRenderbuffer(); + +gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuffer); +</pre> + +<h3 id="获取当前绑定">获取当前绑定</h3> + +<p>要检查当前的渲染缓冲区绑定，请查询 <code>RENDERBUFFER_BINDING </code>常量。</p> + +<pre class="brush: js">gl.getParameter(gl.RENDERBUFFER_BINDING); +</pre> + +<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.7", "bindRenderbuffer")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初始定义.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glBindRenderbuffer.xml", "glBindRenderbuffer")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL API手册.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext.bindRenderbuffer")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.createRenderbuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.isRenderbuffer()")}}</li> + <li>Other buffers: {{domxref("WebGLBuffer")}}, {{domxref("WebGLFramebuffer")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/bindtexture/index.html b/files/zh-cn/web/api/webglrenderingcontext/bindtexture/index.html new file mode 100644 index 0000000000..2124e54091 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/bindtexture/index.html @@ -0,0 +1,117 @@ +--- +title: WebGLRenderingContext.bindTexture() +slug: Web/API/WebGLRenderingContext/bindTexture +tags: + - API + - Method + - Reference + - Textures + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/bindTexture +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 的 <strong><code>WebGLRenderingContext.bindTexture()</code></strong> 方法将给定的 {{domxref("WebGLTexture")}} 绑定到目标（绑定点）。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var>gl</var>.bindTexture(<var>target</var>, <var>texture</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>target</dt> + <dd>{{domxref("GLenum")}} 指定绑定点（目标）。 可能的值： + <ul> + <li><code>gl.TEXTURE_2D</code>: 二维纹理。</li> + <li><code>gl.TEXTURE_CUBE_MAP</code>: 立方体映射纹理。</li> + <li>当使用 {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} 时，可以使用以下值： + <ul> + <li><code>gl.TEXTURE_3D</code>: 三维纹理.</li> + <li><code>gl.TEXTURE_2D_ARRAY</code>: 二维数组纹理.</li> + </ul> + </li> + </ul> + </dd> + <dt>texture</dt> + <dd>要绑定的 {{domxref("WebGLTexture")}} 对象。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>无。</p> + +<h3 id="异常">异常</h3> + +<p>如果目标不是 gl.TEXTURE_2D ，gl.TEXTURE_CUBE_MAP，gl.TEXTURE_3D 或 gl.TEXTURE_2D_ARRAY ，则会抛出 gl.INVALID_ENUM 错误。</p> + +<h2 id="示例">示例</h2> + +<h3 id="绑定纹理">绑定纹理</h3> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var gl = canvas.getContext('webgl'); +var texture = gl.createTexture(); + +gl.bindTexture(gl.TEXTURE_2D, texture); +</pre> + +<h3 id="获取当前绑定">获取当前绑定</h3> + +<p>要检查当前纹理绑定，请查询gl.TEXTURE_BINDING_2D或gl.TEXTURE_BINDING_CUBE_MAP常量。</p> + +<pre class="brush: js">gl.getParameter(gl.TEXTURE_BINDING_2D); +</pre> + +<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.8", "bindTexture")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>WebGL初始定义。</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glBindTexture.xml", "glBindTexture")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL ES 2.0 API手册(类似).</td> + </tr> + <tr> + <td>{{SpecName('WebGL2', "#3.7.1", "bindTexture")}}</td> + <td>{{Spec2('WebGL2')}}</td> + <td>WebGL 2更新定义。<br> + 增加: <code>gl.TEXTURE_3D</code> and <code>gl.TEXTURE_2D_ARRAY</code></td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0', "glBindTexture.xhtml", "glBindTexture")}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td>OpenGL ES 3.0 API手册(类似)。</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext.bindTexture")}}</p> + +<h2 id="另见">另见</h2> + +<ul> +</ul> + +<ul> + <li>{{domxref("WebGLRenderingContext.createTexture()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteTexture()")}}</li> + <li>{{domxref("WebGLRenderingContext.isTexture()")}}</li> + <li>{{domxref("WebGLRenderingContext.texImage2D()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/blendcolor/index.html b/files/zh-cn/web/api/webglrenderingcontext/blendcolor/index.html new file mode 100644 index 0000000000..224f48a07f --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/blendcolor/index.html @@ -0,0 +1,82 @@ +--- +title: WebGLRenderingContext.blendColor() +slug: Web/API/WebGLRenderingContext/blendColor +tags: + - API + - Method + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/blendColor +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 的 <strong><code>WebGLRenderingContext.blendColor()</code></strong> 方法用于设置源和目标混合因子。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var><em>void gl</em>.</var>blendColor<var>(red, green, blue, alpha);</var> +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>red</code></dt> + <dd>{{domxref("GLclampf")}} 红色分量的范围为0到1。</dd> + <dt><code>green</code></dt> + <dd>{{domxref("GLclampf")}} 红色分量的范围为0到1。</dd> + <dt>blue</dt> + <dd>{{domxref("GLclampf")}} 红色分量的为0到1。</dd> + <dt>alpha</dt> + <dd>{{domxref("GLclampf")}} 组件（透明度）的范围在0到1。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>None.</p> + +<h2 id="示例">示例</h2> + +<p>要设置混合颜色，请使用：</p> + +<pre class="brush: js">gl.blendColor(0, 0.5, 1, 1);</pre> + +<p>要获得混合颜色，请查询返回 {{jsxref("Float32Array")}} 的 BLEND_COLOR 常量。</p> + +<pre class="brush: js">gl.getParameter(gl.BLEND_COLOR); +// Float32Array[0, 0.5, 1, 1]</pre> + +<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.3", "blendColor")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glBlendColor.xml", "glBlendColor")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext.blendColor")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.blendEquation()")}}</li> + <li>{{domxref("WebGLRenderingContext.blendFunc()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/blendequation/index.html b/files/zh-cn/web/api/webglrenderingcontext/blendequation/index.html new file mode 100644 index 0000000000..6eadfcf91e --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/blendequation/index.html @@ -0,0 +1,113 @@ +--- +title: WebGLRenderingContext.blendEquation() +slug: Web/API/WebGLRenderingContext/blendEquation +tags: + - API + - Method + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/blendEquation +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 的 <strong><code>WebGLRenderingContext.blendEquation()</code></strong> 方法用于将RGB混合方程和阿尔法混合方程设置为单个方程。</p> + +<p>混合方程式确定新像素如何与 {{domxref("WebGLFramebuffer")}} 中的像素组合。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var>gl</var>.blendEquation(<var>mode</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>mode</code></dt> + <dd>{{domxref("GLenum")}} 指定源和目标颜色的组合方式。 必须是： + <ul> + <li><code>gl.FUNC_ADD</code>: 源+目的地（默认值），</li> + <li><code>gl.FUNC_SUBTRACT</code>: 源 - 目的地，</li> + <li><code>gl.FUNC_REVERSE_SUBTRACT</code>: 目的地 - 源</li> + <li>当使用 {{domxref("EXT_blend_minmax")}} 扩展名时： + <ul> + <li><code>ext.MIN_EXT</code>: 最小的源和目的地，</li> + <li><code>ext.MAX_EXT</code>: 最大源和目的地。</li> + </ul> + </li> + <li>当使用 {{domxref("WebGL2RenderingContex","WebGL 2上下文","",1)}} 时，可以使用以下值： + <ul> + <li><code>gl.MIN</code>: 最小的源和目的地，</li> + <li><code>gl.MAX</code>: 最大源和目的地。</li> + </ul> + </li> + </ul> + </dd> +</dl> + +<h3 id="异常">异常</h3> + +<p>如果模式不是三个可能的值之一，则会抛出gl.INVALID_ENUM错误。</p> + +<h3 id="返回值">返回值</h3> + +<p>None.</p> + +<h2 id="示例">示例</h2> + +<p>要设置混合方程式，请使用：</p> + +<pre class="brush: js">gl.blendEquation(gl.FUNC_ADD); +gl.blendEquation(gl.FUNC_SUBTRACT); +gl.blendEquation(gl.FUNC_REVERSE_SUBTRACT); +</pre> + +<p>要获得混合方程，请查询返回 gl.FUNC_ADD，gl.FUNC_SUBTRACT，gl.FUNC_REVERSE_SUBTRACT 或 {{domxref("EXT_blend_minmax")}} 的 BLEND_EQUATION，BLEND_EQUATION_RGB 和 BLEND_EQUATION_ALPHA 常量：ext.MIN_EXT 或 ext.MAX_EXT 。</p> + +<pre class="brush: js">gl.getParameter(gl.BLEND_EQUATION_RGB) === gl.FUNC_ADD; +// true + +gl.getParameter(gl.BLEND_EQUATION_ALPHA) === gl.FUNC_ADD; +// true +</pre> + +<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.3", "blendEquation")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition for WebGL.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glBlendEquation.xml", "glBlendEquation")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the OpenGL ES 2.0 API.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0', "glBlendEquation.xml", "glBlendEquation")}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td>Man page of the OpenGL ES 3.0 API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext.blendEquation")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.blendColor()")}}</li> + <li>{{domxref("WebGLRenderingContext.blendFunc()")}}</li> + <li>{{domxref("EXT_blend_minmax")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/blendequationseparate/index.html b/files/zh-cn/web/api/webglrenderingcontext/blendequationseparate/index.html new file mode 100644 index 0000000000..e274a77dde --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/blendequationseparate/index.html @@ -0,0 +1,126 @@ +--- +title: WebGLRenderingContext.blendEquationSeparate() +slug: Web/API/WebGLRenderingContext/blendEquationSeparate +translation_of: Web/API/WebGLRenderingContext/blendEquationSeparate +--- +<div>{{APIRef("WebGL")}}</div> + +<p>The <strong><code>WebGLRenderingContext.blendEquationSeparate()</code></strong> method of the <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> is used to set the RGB blend equation and alpha blend equation separately.</p> + +<p>The blend equation determines how a new pixel is combined with a pixel already in the {{domxref("WebGLFramebuffer")}}.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">void <var>gl</var>.blendEquationSeparate(<var>modeRGB, modeAlpha</var>); +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>modeRGB</code></dt> + <dd>A {{domxref("GLenum")}} specifying how the red, green and blue components of source and destination colors are combined. Must be either: + <ul> + <li><code>gl.FUNC_ADD</code>: source + destination (default value),</li> + <li><code>gl.FUNC_SUBTRACT</code>: source - destination,</li> + <li><code>gl.FUNC_REVERSE_SUBTRACT</code>: destination - source,</li> + <li>When using the {{domxref("EXT_blend_minmax")}} extension: + <ul> + <li><code>ext.MIN_EXT</code>: Minimum of source and destination,</li> + <li><code>ext.MAX_EXT</code>: Maximum of source and destination.</li> + </ul> + </li> + <li>When using a {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, the following values are available additionally: + <ul> + <li><code>gl.MIN</code>: Minimum of source and destination,</li> + <li><code>gl.MAX</code>: Maximum of source and destination.</li> + </ul> + </li> + </ul> + </dd> + <dt><code>modeAlpha</code></dt> + <dd>A {{domxref("GLenum")}} specifying how the alpha component (transparency) of source and destination colors are combined. Must be either: + <ul> + <li><code>gl.FUNC_ADD</code>: source + destination (default value),</li> + <li><code>gl.FUNC_SUBTRACT</code>: source - destination,</li> + <li><code>gl.FUNC_REVERSE_SUBTRACT</code>: destination - source,</li> + <li>When using the {{domxref("EXT_blend_minmax")}} extension: + <ul> + <li><code>ext.MIN_EXT</code>: Minimum of source and destination,</li> + <li><code>ext.MAX_EXT</code>: Maximum of source and destination.</li> + </ul> + </li> + <li>When using a {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, the following values are available additionally: + <ul> + <li><code>gl.MIN</code>: Minimum of source and destination,</li> + <li><code>gl.MAX</code>: Maximum of source and destination.</li> + </ul> + </li> + </ul> + </dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>None.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<p>If <em>mode</em> is not one of the three possible values, a <code>gl.INVALID_ENUM</code> error is thrown.</p> + +<h2 id="Examples">Examples</h2> + +<p>To set the blend equations, use:</p> + +<pre class="brush: js">gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_SUBTRACT); +</pre> + +<p>To get the current blend equations, query the <code>BLEND_EQUATION</code>, <code>BLEND_EQUATION_RGB</code> and <code>BLEND_EQUATION_ALPHA</code> constants which return <code>gl.FUNC_ADD</code>, <code>gl.FUNC_SUBTRACT</code>, <code>gl.FUNC_REVERSE_SUBTRACT</code>, or if the {{domxref("EXT_blend_minmax")}} is enabled: <code>ext.MIN_EXT</code> or <code>ext.MAX_EXT</code>.</p> + +<pre class="brush: js">gl.getParameter(gl.BLEND_EQUATION_RGB) === gl.FUNC_ADD; +// true + +gl.getParameter(gl.BLEND_EQUATION_ALPHA) === gl.FUNC_ADD; +// true +</pre> + +<h2 id="Specifications">Specifications</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.3", "blendEquationSeparate")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition for WebGL.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glBlendEquationSeparate.xml", "glBlendEquationSeparate")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the OpenGL ES 2.0 API.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0', "glBlendEquationSeparate.xhtml", "glBlendEquationSeparate")}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td>Man page of the OpenGL ES 3.0 API.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.blendEquationSeparate")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.blendEquation()")}}</li> + <li>{{domxref("WebGLRenderingContext.blendColor()")}}</li> + <li>{{domxref("WebGLRenderingContext.blendFunc()")}}</li> + <li>{{domxref("EXT_blend_minmax")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/blendfunc/index.html b/files/zh-cn/web/api/webglrenderingcontext/blendfunc/index.html new file mode 100644 index 0000000000..1b7bc65eb7 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/blendfunc/index.html @@ -0,0 +1,180 @@ +--- +title: WebGLRenderingContext.blendFunc() +slug: Web/API/WebGLRenderingContext/blendFunc +translation_of: Web/API/WebGLRenderingContext/blendFunc +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 的<strong><code>WebGLRenderingContext.blendFunc()</code></strong> 方法定义了一个用于混合像素算法的函数.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var>gl</var>.blendFunc(<var>sfactor</var>, <var>dfactor</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>sfactor</code></dt> + <dd> {{domxref("GLenum")}} 为源混合因子指定一个乘数. 默认值是 <code>gl.ONE</code>. 有关可能的值, 查看下面.</dd> + <dt><code>dfactor</code></dt> + <dd> {{domxref("GLenum")}} 为源目标合因子指定一个乘数. 默认值是 <code>gl.ZERO</code>. 有关可能的值, 查看下面.</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>None.</p> + +<h3 id="异常">异常</h3> + +<ul> + <li>如果 <code><em>sfactor</em> 或</code> <code><em>dfactor</em> </code>不是列出的可能值一直, 则抛出 <code>gl.INVALID_ENUM</code> 错误.</li> + <li>如果使用恒定的颜色和恒定的alpha值作为源和目标因子, 则抛出<code>gl.INVALID_ENUM</code> 错误.</li> +</ul> + +<h2 id="常量">常量</h2> + +<p>下列常数可用于 <code><em>sfactor</em></code> 和<code><em>dfactor</em></code>.</p> + +<p>混合颜色的公式可以这样描述: color(RGBA) = (sourceColor * <em>sfactor</em>) + (destinationColor * <em>dfactor</em>). RBGA 值在 0 到1 之间.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Constant</th> + <th scope="col">Factor</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>gl.ZERO</code></td> + <td>0,0,0,0</td> + <td>所有颜色乘0.</td> + </tr> + <tr> + <td><code>gl.ONE</code></td> + <td>1,1,1,1</td> + <td>所有颜色乘1.</td> + </tr> + <tr> + <td><code>gl.SRC_COLOR</code></td> + <td>R<sub>S</sub>, G<sub>S</sub>, B<sub>S</sub>, A<sub>S</sub></td> + <td>将所有颜色乘上源颜色.</td> + </tr> + <tr> + <td><code>gl.ONE_MINUS_SRC_COLOR</code></td> + <td>1-R<sub>S</sub>, 1-G<sub>S</sub>, 1-B<sub>S</sub>, 1-A<sub>S</sub></td> + <td>每个源颜色所有颜色乘1 .</td> + </tr> + <tr> + <td><code>gl.DST_COLOR</code></td> + <td>R<sub>D</sub>, G<sub>D</sub>, B<sub>D</sub>, A<sub>D</sub></td> + <td>将所有颜色与目标颜色相乘.</td> + </tr> + <tr> + <td><code>gl.ONE_MINUS_DST_COLOR</code></td> + <td>1-R<sub>D</sub>, 1-G<sub>D</sub>, 1-B<sub>D</sub>, 1-A<sub>D</sub></td> + <td>将所有颜色乘以1减去每个目标颜色.</td> + </tr> + <tr> + <td><code>gl.SRC_ALPHA</code></td> + <td>A<sub>S</sub>, A<sub>S</sub>, A<sub>S</sub>, A<sub>S</sub></td> + <td>将所有颜色乘以源alpha值.</td> + </tr> + <tr> + <td><code>gl.ONE_MINUS_SRC_ALPHA</code></td> + <td>1-A<sub>S</sub>, 1-A<sub>S</sub>, 1-A<sub>S</sub>, 1-A<sub>S</sub></td> + <td>将所有颜色乘以1 减去源alpha值.</td> + </tr> + <tr> + <td><code>gl.DST_ALPHA</code></td> + <td>A<sub>D</sub>, A<sub>D</sub>, A<sub>D</sub>, A<sub>D</sub></td> + <td>将所有颜色与目标alpha值相乘.</td> + </tr> + <tr> + <td><code>gl.ONE_MINUS_DST_ALPHA</code></td> + <td>1-A<sub>D</sub>, 1-A<sub>D</sub>, 1-A<sub>D</sub>, 1-A<sub>D</sub></td> + <td>将所有颜色乘以1减去目标alpha值.</td> + </tr> + <tr> + <td><code>gl.CONSTANT_COLOR</code></td> + <td>R<sub>C</sub>, G<sub>C</sub>, B<sub>C</sub>, A<sub>C</sub></td> + <td>将所有颜色乘以一个常数颜色.</td> + </tr> + <tr> + <td><code>gl.ONE_MINUS_CONSTANT_COLOR</code></td> + <td>1-R<sub>C</sub>, 1-G<sub>C</sub>, 1-B<sub>C</sub>, 1-A<sub>C</sub></td> + <td>所有颜色乘以1减去一个常数颜色.</td> + </tr> + <tr> + <td><code>gl.CONSTANT_ALPHA</code></td> + <td>A<sub>C</sub>, A<sub>C</sub>, A<sub>C</sub>, A<sub>C</sub></td> + <td>将所有颜色乘以一个常数.</td> + </tr> + <tr> + <td><code>gl.ONE_MINUS_CONSTANT_ALPHA</code></td> + <td>1-A<sub>C</sub>, 1-A<sub>C</sub>, 1-A<sub>C</sub>, 1-A<sub>C</sub></td> + <td>所有颜色乘以1减去一个常数.</td> + </tr> + <tr> + <td><code>gl.SRC_ALPHA_SATURATE</code></td> + <td> + <p>min(A<sub>S</sub>, 1 - A<sub>D</sub>), min(A<sub>S</sub>, 1 - A<sub>D</sub>), min(A<sub>S</sub>, 1 - A<sub>D</sub>), 1</p> + </td> + <td>将RGB颜色乘以源alpha值或1减去目标alpha值中的较小值。alpha值乘以1.</td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<p>使用混合函数, 您首先必须使用参数 <code>gl.BLEND</code>来激活{{domxref("WebGLRenderingContext.enable()")}} 的混合.</p> + +<pre class="brush: js">gl.enable(gl.BLEND); +gl.blendFunc(gl.SRC_COLOR, gl.DST_COLOR); +</pre> + +<p>要获得当前的混合函数, 查询<code>BLEND_SRC_RGB</code>, <code>BLEND_SRC_ALPHA</code>, <code>BLEND_DST_RGB</code>, 和<code>BLEND_DST_ALPHA</code> 常量中返回混合函数常量.</p> + +<pre class="brush: js">gl.enable(gl.BLEND); +gl.blendFunc(gl.SRC_COLOR, gl.DST_COLOR); +gl.getParameter(gl.BLEND_SRC_RGB) == gl.SRC_COLOR; +// true +</pre> + +<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.3", "blendFunc")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.<br> + In WebGL, constant color and constant alpha cannot be used together as source and destination factors in the blend function. See section 6.13. of the specification.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glBlendFunc.xml", "glBlendFunc")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.blendFunc")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.blendColor()")}}</li> + <li>{{domxref("WebGLRenderingContext.blendEquation()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/bufferdata/index.html b/files/zh-cn/web/api/webglrenderingcontext/bufferdata/index.html new file mode 100644 index 0000000000..4f6fb7af93 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/bufferdata/index.html @@ -0,0 +1,161 @@ +--- +title: WebGLRenderingContext.bufferData() +slug: Web/API/WebGLRenderingContext/bufferData +tags: + - API + - WebGL + - WebGLRenderingContext + - 参考 + - 方法 +translation_of: Web/API/WebGLRenderingContext/bufferData +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 的<strong><code>WebGLRenderingContext.bufferData()</code></strong>方法创建并初始化了Buffer对象的数据存储区。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">// WebGL1: +void gl.bufferData(target, size, usage); +void gl.bufferData(target, ArrayBuffer? srcData, usage); +void gl.bufferData(target, ArrayBufferView srcData, usage); + +// WebGL2: +void gl.bufferData(target, ArrayBufferView srcData, usage, srcOffset, length); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>target</dt> + <dd>{{domxref("GLenum")}} 指定Buffer绑定点（目标）。可取以下值： + <ul> + <li><code>gl.ARRAY_BUFFER</code>: 包含顶点属性的Buffer，如顶点坐标，纹理坐标数据或顶点颜色数据。</li> + <li><code>gl.ELEMENT_ARRAY_BUFFER</code>: 用于元素索引的Buffer。</li> + <li>当使用 {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} 时，可以使用以下值： + <ul> + <li><code>gl.COPY_READ_BUFFER</code>: 从一个Buffer对象复制到另一个Buffer对象。</li> + <li><code>gl.COPY_WRITE_BUFFER</code>: 从一个Buffer对象复制到另一个Buffer对象。</li> + <li><code>gl.TRANSFORM_FEEDBACK_BUFFER</code>: 用于转换反馈操作的Buffer。</li> + <li><code>gl.UNIFORM_BUFFER</code>: 用于存储统一块的Buffer。</li> + <li><code>gl.PIXEL_PACK_BUFFER</code>: 用于像素转换操作的Buffer。</li> + <li><code>gl.PIXEL_UNPACK_BUFFER</code>: 用于像素转换操作的Buffer。</li> + </ul> + </li> + </ul> + </dd> + <dt>size</dt> + <dd>{{domxref("GLsizeiptr")}} 设定Buffer对象的数据存储区大小。</dd> + <dt>srcData {{optional_inline}}</dt> + <dd>一个{{jsxref("ArrayBuffer")}}，{{jsxref("SharedArrayBuffer")}} 或者 {{domxref("ArrayBufferView")}} 类型的数组对象，将被复制到Buffer的数据存储区。 如果为<code>null</code>，数据存储区仍会被创建，但是不会进行初始化和定义。</dd> + <dt>usage</dt> + <dd>{{domxref("GLenum")}} 指定数据存储区的使用方法。可取以下值： + <ul> + <li><code>gl.STATIC_DRAW</code>: 缓冲区的内容可能经常使用，而不会经常更改。内容被写入缓冲区，但不被读取。</li> + <li><code>gl.DYNAMIC_DRAW</code>: 缓冲区的内容可能经常被使用，并且经常更改。内容被写入缓冲区，但不被读取。</li> + <li><code>gl.STREAM_DRAW</code>: 缓冲区的内容可能不会经常使用。内容被写入缓冲区，但不被读取。</li> + <li>当使用 {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} 时，可以使用以下值： + <ul> + <li><code>gl.STATIC_READ</code>: 缓冲区的内容可能经常使用，而不会经常更改。内容从缓冲区读取，但不写入。</li> + <li><code>gl.DYNAMIC_READ</code>: 缓冲区的内容可能经常使用，并且经常更改。内容从缓冲区读取，但不写入。</li> + <li><code>gl.STREAM_READ</code>: 缓冲区的内容可能不会经常使用。内容从缓冲区读取，但不写入。</li> + <li><code>gl.STATIC_COPY</code>: 缓冲区的内容可能经常使用，而不会经常更改。用户不会从缓冲区读取内容，也不写入。</li> + <li><code>gl.DYNAMIC_COPY</code>: 缓冲区的内容可能经常使用，并且经常更改。用户不会从缓冲区读取内容，也不写入。</li> + <li><code>gl.STREAM_COPY</code>: 缓冲区的内容可能不会经常使用。用户不会从缓冲区读取内容，也不写入。</li> + </ul> + </li> + </ul> + </dd> + <dt>srcOffset</dt> + <dd>{{domxref("GLuint")}} 指定读取缓冲时的初始元素索引偏移量。</dd> + <dt><code>length</code> {{optional_inline}}</dt> + <dd>{{domxref("GLuint")}} 默认为0。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>None.</p> + +<h3 id="异常">异常</h3> + +<ul> + <li>如果无法创建<code>size</code>指定大小的数据存储区，则会抛出<code>gl.OUT_OF_MEMORY</code>异常。</li> + <li>如果<code>size</code>是负值，则会抛出<code>gl.INVALID_VALUE</code>异常。</li> + <li>如果<code>target</code>或<code>usage</code>不属于枚举值之列，则会抛出<code>gl.INVALID_ENUM</code>异常。</li> +</ul> + +<h2 id="示例">示例</h2> + +<h3 id="使用_bufferData">使用 <code>bufferData</code></h3> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var gl = canvas.getContext('webgl'); +var buffer = gl.createBuffer(); +gl.bindBuffer(gl.ARRAY_BUFFER, buffer); +gl.bufferData(gl.ARRAY_BUFFER, 1024, gl.STATIC_DRAW); +</pre> + +<h3 id="获取缓冲区信息">获取缓冲区信息</h3> + +<p>使用 {{domxref("WebGLRenderingContext.getBufferParameter()")}} 方法检查当前缓冲区的使用情况和缓冲区大小。</p> + +<pre class="brush: js">gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_SIZE); +gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_USAGE); +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.5", "bufferData")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初次定义</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glBufferData.xml", "glBufferData")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL API的手册页</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0', "glBufferData.xhtml", "glBufferData")}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td>OpenGL ES 3 API 的手册页<br> + <br> + 新增 <code>target</code> 可取的buffer值：<br> + <code>gl.COPY_READ_BUFFER</code>,<br> + <code>gl.COPY_WRITE_BUFFER</code>,<br> + <code>gl.TRANSFORM_FEEDBACK_BUFFER</code>,<br> + <code>gl.UNIFORM_BUFFER</code>,<br> + <code>gl.PIXEL_PACK_BUFFER</code>,<br> + <code>gl.PIXEL_UNPACK_BUFFER</code><br> + <br> + 新增 <code>usage</code> 提示：<br> + <code>gl.STATIC_READ</code>,<br> + <code>gl.DYNAMIC_READ</code>,<br> + <code>gl.STREAM_READ</code>,<br> + <code>gl.STATIC_COPY</code>,<br> + <code>gl.DYNAMIC_COPY</code>,<br> + <code>gl.STREAM_COPY</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.bufferData")}}</p> + +<h2 id="更多">更多</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.bufferSubData()")}}</li> + <li>Other buffers: {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/canvas/index.html b/files/zh-cn/web/api/webglrenderingcontext/canvas/index.html new file mode 100644 index 0000000000..e215713463 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/canvas/index.html @@ -0,0 +1,77 @@ +--- +title: WebGLRenderingContext.canvas +slug: Web/API/WebGLRenderingContext/canvas +tags: + - WebGL + - WebGLRenderingContext + - 只读 + - 属性 +translation_of: Web/API/WebGLRenderingContext/canvas +--- +<div>{{APIRef("WebGL")}}</div> + +<p><code><strong>WebGLRenderingContext.canvas</strong></code> 只读属性，对 {{domxref("HTMLCanvasElement")}} 和 {{domxref("OffscreenCanvas")}} 对象的引用。如果绘图上下文没有相关联的 {{HTMLElement("canvas")}} 元素或 {{domxref("OffscreenCanvas")}} 对象，值为 {{jsxref("null")}}。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var><em>gl</em></var>.canvas;</pre> + +<h3 id="返回值">返回值</h3> + +<p>{{domxref("HTMLCanvasElement")}} 或 {{domxref("OffscreenCanvas")}} 或 {{jsxref("null")}}。</p> + +<h2 id="示例">示例</h2> + +<h3 id="Canvas_元素">Canvas 元素</h3> + +<p>指定 {{HTMLElement("canvas")}} 元素：</p> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<p>你可以通过 canvas 得到一个从 <code>WebGLRenderingContext </code>返回的引用：</p> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var gl = canvas.getContext("webgl"); +gl.canvas; // HTMLCanvasElement +</pre> + +<h3 id="离屏Canvas">离屏Canvas</h3> + +<p>下面是一个使用试验阶段 {{domxref("OffscreenCanvas")}} 对象的示例：</p> + +<pre class="brush: js">var offscreen = new OffscreenCanvas(256, 256); +var gl = offscreen.getContext("webgl"); +gl.canvas; // OffscreenCanvas</pre> + +<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', "#DOM-WebGLRenderingContext-canvas", "WebGLRenderingContext.canvas")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初始定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden"> +<p>此页面上的兼容性表格由结构化数据生成。如果你想贡献数据，可以看看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>并向我们发送 pull request.</p> +</div> + +<p>{{Compat("api.WebGLRenderingContext.canvas")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("CanvasRenderingContext2D.canvas")}}</li> + <li>{{domxref("OffscreenCanvas")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/clear/index.html b/files/zh-cn/web/api/webglrenderingcontext/clear/index.html new file mode 100644 index 0000000000..ac8f044933 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/clear/index.html @@ -0,0 +1,89 @@ +--- +title: WebGLRenderingContext.clear() +slug: Web/API/WebGLRenderingContext/clear +translation_of: Web/API/WebGLRenderingContext/clear +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 的 <strong><code>WebGLRenderingContext.clear()</code></strong> 方法使用预设值来清空缓冲。</p> + +<p>预设值可以使用 {{domxref("WebGLRenderingContext.clearColor", "clearColor()")}} 、 {{domxref("WebGLRenderingContext.clearDepth", "clearDepth()")}} 或 {{domxref("WebGLRenderingContext.clearStencil", "clearStencil()")}} 设置。</p> + +<p>裁剪、抖动处理和缓冲写入遮罩会影响 <code>clear()</code> 方法。</p> + +<h2 id="句法">句法</h2> + +<pre class="syntaxbox">void <var>gl</var>.clear(<var>mask</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>mask</code></dt> + <dd>一个用于指定需要清除的缓冲区的 {{domxref("GLbitfield")}} 。可能的值有： + <ul> + <li><code>gl.COLOR_BUFFER_BIT //颜色缓冲区</code></li> + <li><code>gl.DEPTH_BUFFER_BIT //深度缓冲区</code></li> + <li><code>gl.STENCIL_BUFFER_BIT //模板缓冲区</code></li> + </ul> + </dd> +</dl> + +<h3 id="错误抛出">错误抛出</h3> + +<p>如果mask不是以上列出的值，会抛出 <code>gl.INVALID_ENUM</code> 错误。</p> + +<h3 id="返回值">返回值</h3> + +<p>无</p> + +<h2 id="示例">示例</h2> + +<p><code>clear()</code> 方法可接受复合值，</p> + +<pre class="brush: js">gl.clear(gl.DEPTH_BUFFER_BIT); +gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT); +</pre> + +<p>要获得当前的清除值，传入 <code>COLOR_CLEAR_VALUE</code>,、<code>DEPTH_CLEAR_VALUE或</code><code>STENCIL_CLEAR_VALUE</code> 常量。</p> + +<pre class="brush: js">gl.getParameter(gl.COLOR_CLEAR_VALUE); +gl.getParameter(gl.DEPTH_CLEAR_VALUE); +gl.getParameter(gl.STENCIL_CLEAR_VALUE); +</pre> + +<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.11", "clear")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glClear.xml", "glClear")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext.clear")}}</p> + +<h2 id="相关内容">相关内容</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.clearColor()")}}</li> + <li>{{domxref("WebGLRenderingContext.clearDepth()")}}</li> + <li>{{domxref("WebGLRenderingContext.clearStencil()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/clearcolor/index.html b/files/zh-cn/web/api/webglrenderingcontext/clearcolor/index.html new file mode 100644 index 0000000000..09293b4450 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/clearcolor/index.html @@ -0,0 +1,79 @@ +--- +title: WebGLRenderingContext.clearColor() +slug: Web/API/WebGLRenderingContext/clearColor +translation_of: Web/API/WebGLRenderingContext/clearColor +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 的 <strong><code>WebGLRenderingContext.clearColor()</code></strong> 方法用于设置清空颜色缓冲时的颜色值。</p> + +<p>这指定调用 {{domxref("WebGLRenderingContext.clear", "clear()")}} 方法时使用的颜色值。这些值在0到1的范围间。</p> + +<h2 id="句法">句法</h2> + +<pre class="syntaxbox">void <var>gl</var>.clearColor(<var>red, green, blue, alpha</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>red</code></dt> + <dd>一个 {{domxref("GLclampf")}} 类型的值，指定清除缓冲时的红色值。默认值：0。</dd> + <dt><code>green</code></dt> + <dd>一个 {{domxref("GLclampf")}} 类型的值，指定清除缓冲时的绿色值。默认值：0。</dd> + <dt><code>blue</code></dt> + <dd>一个 {{domxref("GLclampf")}} 类型的值，指定清除缓冲时的蓝色值。默认值：0。</dd> + <dt><code>alpha</code></dt> + <dd>一个 {{domxref("GLclampf")}} 类型的值，指定清除缓冲时的不透明度。默认值：0。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>无。</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">gl.clearColor(1, 0.5, 0.5, 3); +</pre> + +<p>要获取当前的清除颜色，传入<code>COLOR_CLEAR_VALUE常量，返回 </code>{{jsxref("Float32Array")}}。</p> + +<pre class="brush: js">gl.getParameter(gl.COLOR_CLEAR_VALUE); +// Float32Array[1, 0.5, 0.5, 1] +</pre> + +<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.3", "clearColor")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glClearColor.xml", "glClearColor")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext.clearColor")}}</p> + +<h2 id="相关内容">相关内容</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.clear()")}}</li> + <li>{{domxref("WebGLRenderingContext.clearDepth()")}}</li> + <li>{{domxref("WebGLRenderingContext.clearStencil()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/cleardepth/index.html b/files/zh-cn/web/api/webglrenderingcontext/cleardepth/index.html new file mode 100644 index 0000000000..a663975cc2 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/cleardepth/index.html @@ -0,0 +1,75 @@ +--- +title: WebGLRenderingContext.clearDepth() +slug: Web/API/WebGLRenderingContext/clearDepth +tags: + - WebGL + - 深度清除值 +translation_of: Web/API/WebGLRenderingContext/clearDepth +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a>的<strong><code>WebGLRenderingContext.clearDepth()</code></strong> 方法用于设置深度缓冲区的深度清除值。</p> + +<p>这个深度清除值的设定，是为了调用{{domxref("WebGLRenderingContext.clear", "clear()")}} 的时候使用，这个值的范围是0到1。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var>gl</var>.clearDepth(<var>depth</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>depth</code></dt> + <dd>类型：{{domxref("GLclampf")}}。 深度值的设定，是当清除深度缓冲区的时候使用。默认值为1。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>None.</p> + +<h2 id="样例">样例</h2> + +<pre class="brush: js">gl.clearDepth(0.5); +</pre> + +<p>若要获取当前深度清除值，查询<code>DEPTH_CLEAR_VALUE</code> 常量。</p> + +<pre class="brush: js">gl.getParameter(gl.DEPTH_CLEAR_VALUE); +// 0.5</pre> + +<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.3", "clearDepth")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glClearDepthf.xml", "glClearDepthf")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.clearDepth")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.clear()")}}</li> + <li>{{domxref("WebGLRenderingContext.clearColor()")}}</li> + <li>{{domxref("WebGLRenderingContext.clearStencil()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/commit/index.html b/files/zh-cn/web/api/webglrenderingcontext/commit/index.html new file mode 100644 index 0000000000..c2e80d04d0 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/commit/index.html @@ -0,0 +1,42 @@ +--- +title: WebGLRenderingContext.commit() +slug: Web/API/WebGLRenderingContext/commit +translation_of: Web/API/WebGLRenderingContext/commit +--- +<p>{{APIRef("WebGL")}} {{SeeCompatTable}}</p> + +<p>当上下文不是直接固定到一个特定的画布时，<code><strong>WebGLRenderingContext</strong></code><strong><code>.commit()</code></strong> 方法将帧绘制到其原始的 {{domxref("HTMLCanvasElement")}} 上。</p> + +<h2 id="语法">语法</h2> + +<pre>void WebGLRenderingContext.commit()</pre> + +<h2 id="实例">实例</h2> + +<pre>var htmlCanvas = document.createElement('canvas'); +var offscreen = htmlCanvas.transferControlToOffscreen(); +var gl = offscreen.getContext('webgl'); + +// ... 在 gl 离屏上下文中进行一些绘制 ... + +// 将帧绘制到 htmlCanvas 上 +gl.commit(); +</pre> + +<h2 id="规范">规范</h2> + +<p>目前在 <a href="https://wiki.whatwg.org/wiki/OffscreenCanvas">OffscreenCanvas</a> 规范中作为草案。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">此页面中的兼容性表格由结构化数据生成。 如果您想提供数据，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送合并请求。</p> + +<p>{{Compat("api.WebGLRenderingContext.commit")}}</p> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li>定义此方法的接口，{{domxref("WebGLRenderingContext")}}</li> + <li>{{domxref("OffscreenCanvas")}}</li> + <li>{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/compileshader/index.html b/files/zh-cn/web/api/webglrenderingcontext/compileshader/index.html new file mode 100644 index 0000000000..313989f0aa --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/compileshader/index.html @@ -0,0 +1,81 @@ +--- +title: WebGLRenderingContext.compileShader() +slug: Web/API/WebGLRenderingContext/compileShader +translation_of: Web/API/WebGLRenderingContext/compileShader +--- +<div>{{APIRef("WebGL")}}</div> + +<div><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a>下的方法 <strong><code>WebGLRenderingContext.compileShader() </code> </strong>用于编译一个GLSL着色器，使其成为为二进制数据，然后就可以被{{domxref("WebGLProgram")}}对象所使用.</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var><em>gl</em>.compileShader</var><var>(shader);</var> +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>shader</dt> + <dd>一个片元或顶点着色器 （{{domxref("WebGLShader")}}）.</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">var shader = gl.createShader(gl.VERTEX_SHADER); +gl.shaderSource(shader, shaderSource); +gl.compileShader(shader); +</pre> + +<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.9", "compileShader")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glCompileShader.xml", "glCompileShader")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL man page.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.compileShader")}}</p> + +<h2 id="更多：">更多：</h2> + +<ul> + <li>{{domxref("WebGLProgram")}}</li> + <li>{{domxref("WebGLShader")}}</li> + <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.createShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li> + <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.isShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li> + <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/compressedteximage2d/index.html b/files/zh-cn/web/api/webglrenderingcontext/compressedteximage2d/index.html new file mode 100644 index 0000000000..939440ed64 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/compressedteximage2d/index.html @@ -0,0 +1,242 @@ +--- +title: 'WebGLRenderingContext.compressedTexImage[23]D()' +slug: Web/API/WebGLRenderingContext/compressedTexImage2D +translation_of: Web/API/WebGLRenderingContext/compressedTexImage2D +--- +<div>{{APIRef("WebGL")}}</div> + +<p><code style=""><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">下面这两个function：</span></font></code></p> + +<p><code style=""><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> </span></font><strong>WebGLRenderingContext.compressedTexImage2D()</strong></code> and <strong><code>WebGL2RenderingContext.compressedTexImage3D()</code></strong> 在<a href="/en-US/docs/Web/API/WebGL_API">WebGL API </a>中特指压缩二维或三维纹理图像的格式。</p> + +<p>在使用这些方法之前，必须通过 <a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">WebGL extensions</a>， 也就是 WebGL扩展启用压缩图像格式。</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">// WebGL 1: +void <var>gl</var>.compressedTexImage2D(<var>target</var>, <var>level</var>, <var>internalformat</var>, <var>width</var>, <var>height</var>, <var>border</var>, ArrayBufferView? <var>pixels</var>); + +// Additionally available in WebGL 2: +// read from buffer bound to gl.PIXEL_UNPACK_BUFFER +void <var>gl</var>.compressedTexImage2D(<var>target</var>, <var>level</var>, <var>internalformat</var>, <var>width</var>, <var>height</var>, <var>border</var>, GLsizei <var>imageSize</var>, GLintptr <var>offset</var>); +void <var>gl</var>.compressedTexImage2D(<var>target</var>, <var>level</var>, <var>internalformat</var>, <var>width</var>, <var>height</var>, <var>border</var>, + ArrayBufferView <var>srcData</var>, optional <var>srcOffset</var>, optional <var>srcLengthOverride</var>); + + // read from buffer bound to gl.PIXEL_UNPACK_BUFFER +void <var>gl</var>.compressedTexImage3D(<var>target</var>, <var>level</var>, <var>internalformat</var>, <var>width</var>, <var>height</var>, <var>depth</var>, <var>border</var>, GLsizei <var>imageSize</var>, GLintptr <var>offset</var>); +void <var>gl</var>.compressedTexImage3D(<var>target</var>, <var>level</var>, <var>internalformat</var>, <var>width</var>, <var>height</var>, <var>depth</var>, <var>border</var>, + ArrayBufferView <var>srcData</var>, optional <var>srcOffset</var>, optional <var>srcLengthOverride</var>);</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>target</code></dt> + <dd>A {{domxref("GLenum")}} specifying the binding point (target) of the active texture. Possible values for <code>compressedTexImage2D</code>: + <ul> + <li><code>gl.TEXTURE_2D</code>: A two-dimensional texture.</li> + <li><code>gl.TEXTURE_CUBE_MAP_POSITIVE_X</code>: Positive X face for a cube-mapped texture.</li> + <li><code>gl.TEXTURE_CUBE_MAP_NEGATIVE_X</code>: Negative X face for a cube-mapped texture.</li> + <li><code>gl.TEXTURE_CUBE_MAP_POSITIVE_Y</code>: Positive Y face for a cube-mapped texture.</li> + <li><code>gl.TEXTURE_CUBE_MAP_NEGATIVE_Y</code>: Negative Y face for a cube-mapped texture.</li> + <li><code>gl.TEXTURE_CUBE_MAP_POSITIVE_Z</code>: Positive Z face for a cube-mapped texture.</li> + <li><code>gl.TEXTURE_CUBE_MAP_NEGATIVE_Z</code>: Negative Z face for a cube-mapped texture.</li> + </ul> + Possible values for <code>compressedTexImage3D</code>: + + <ul> + <li><code>gl.TEXTURE_2D_ARRAY</code></li> + <li><code>gl.TEXTURE_3D</code></li> + </ul> + </dd> + <dt><code>level</code></dt> + <dd>A {{domxref("GLint")}} specifying the level of detail. Level 0 is the base image level and level <em>n</em> is the <em>n</em>th mipmap reduction level.</dd> + <dt><code>internalformat</code></dt> + <dd>A {{domxref("GLenum")}} specifying the compressed image format. Compressed image formats must be enabled by <a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">WebGL extensions</a> before using this method. All values are possible for <code>compressedTexImage2D</code>. See <a href="/en-US/docs/Web/API/WebGL_API/Compressed_texture_formats">compressed texture formats</a> for which are valid for <code>compressedTexImage3D</code>. Possible values: + <ul> + <li>When using the {{domxref("WEBGL_compressed_texture_s3tc")}} extension: + <ul> + <li><code>ext.COMPRESSED_RGB_S3TC_DXT1_EXT</code></li> + <li><code>ext.COMPRESSED_RGBA_S3TC_DXT1_EXT</code></li> + <li><code>ext.COMPRESSED_RGBA_S3TC_DXT3_EXT</code></li> + <li><code>ext.COMPRESSED_RGBA_S3TC_DXT5_EXT</code></li> + </ul> + </li> + <li>When using the {{domxref("WEBGL_compressed_texture_s3tc_srgb")}} extension: + <ul> + <li><code>ext.COMPRESSED_SRGB_S3TC_DXT1_EXT</code></li> + <li><code>ext.COMPRESSED_SRGB_ALPHA_S3TC_DXT1_EXT</code></li> + <li><code>ext.COMPRESSED_SRGB_ALPHA_S3TC_DXT3_EXT</code></li> + <li><code>ext.COMPRESSED_SRGB_ALPHA_S3TC_DXT5_EXT</code></li> + </ul> + </li> + <li>When using the {{domxref("WEBGL_compressed_texture_etc")}} extension: + <ul> + <li><code>ext.COMPRESSED_R11_EAC</code></li> + <li><code>ext.COMPRESSED_SIGNED_R11_EAC</code></li> + <li><code>ext.COMPRESSED_RG11_EAC</code></li> + <li><code>ext.COMPRESSED_SIGNED_RG11_EAC</code></li> + <li><code>ext.COMPRESSED_RGB8_ETC2</code></li> + <li><code>ext.COMPRESSED_RGBA8_ETC2_EAC</code></li> + <li><code>ext.COMPRESSED_SRGB8_ETC2</code></li> + <li><code>ext.COMPRESSED_SRGB8_ALPHA8_ETC2_EAC</code></li> + <li><code>ext.COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2</code></li> + <li><code>ext.COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2</code></li> + </ul> + </li> + <li>When using the {{domxref("WEBGL_compressed_texture_pvrtc")}} extension: + <ul> + <li><code>ext.COMPRESSED_RGB_PVRTC_4BPPV1_IMG</code></li> + <li><code>ext.COMPRESSED_RGBA_PVRTC_4BPPV1_IMG</code></li> + <li><code>ext.COMPRESSED_RGB_PVRTC_2BPPV1_IMG</code></li> + <li><code>ext.COMPRESSED_RGBA_PVRTC_2BPPV1_IMG</code></li> + </ul> + </li> + <li>When using the {{domxref("WEBGL_compressed_texture_etc1")}} extension: + <ul> + <li><code>ext.COMPRESSED_RGB_ETC1_WEBGL</code></li> + </ul> + </li> + <li>When using the {{domxref("WEBGL_compressed_texture_atc")}} extension: + <ul> + <li><code>ext.COMPRESSED_RGB_ATC_WEBGL</code></li> + <li><code>ext.COMPRESSED_RGBA_ATC_EXPLICIT_ALPHA_WEBGL</code></li> + <li><code>ext.COMPRESSED_RGBA_ATC_INTERPOLATED_ALPHA_WEBGL</code></li> + </ul> + </li> + <li>When using the {{domxref("WEBGL_compressed_texture_astc")}} extension: + <ul> + <li><code>ext.COMPRESSED_RGBA_ASTC_4x4_KHR<br> + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_4x4_KHR</code></li> + <li><code>ext.COMPRESSED_RGBA_ASTC_5x4_KHR<br> + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_5x4_KHR</code></li> + <li><code>ext.COMPRESSED_RGBA_ASTC_5x5_KHR<br> + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_5x5_KHR</code></li> + <li><code>ext.COMPRESSED_RGBA_ASTC_6x5_KHR<br> + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_6x5_KHR</code></li> + <li><code>ext.COMPRESSED_RGBA_ASTC_6x6_KHR<br> + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_6x6_KHR</code></li> + <li><code>ext.COMPRESSED_RGBA_ASTC_8x5_KHR<br> + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x5_KHR</code></li> + <li><code>ext.COMPRESSED_RGBA_ASTC_8x6_KHR<br> + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x6_KHR</code></li> + <li><code>ext.COMPRESSED_RGBA_ASTC_8x8_KHR<br> + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x8_KHR</code></li> + <li><code>ext.COMPRESSED_RGBA_ASTC_10x5_KHR<br> + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x5_KHR</code></li> + <li><code>ext.COMPRESSED_RGBA_ASTC_10x6_KHR<br> + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x6_KHR</code></li> + <li><code>ext.COMPRESSED_RGBA_ASTC_10x10_KHR<br> + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x10_KHR</code></li> + <li><code>ext.COMPRESSED_RGBA_ASTC_12x10_KHR<br> + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_12x10_KHR</code></li> + <li><code>ext.COMPRESSED_RGBA_ASTC_12x12_KHR<br> + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_12x12_KHR</code></li> + </ul> + </li> + <li>When using the {{domxref("EXT_texture_compression_bptc")}} extension: + <ul> + <li><code>ext.COMPRESSED_RGBA_BPTC_UNORM_EXT</code></li> + <li><code>ext.COMPRESSED_SRGB_ALPHA_BPTC_UNORM_EXT</code></li> + <li><code>ext.COMPRESSED_RGB_BPTC_SIGNED_FLOAT_EXT</code></li> + <li><code>ext.COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT_EXT</code></li> + </ul> + </li> + <li>When using the {{domxref("EXT_texture_compression_rgtc")}} extension: + <ul> + <li><code>ext.COMPRESSED_RED_RGTC1_EXT</code></li> + <li><code>ext.COMPRESSED_SIGNED_RED_RGTC1_EXT</code></li> + <li><code>ext.COMPRESSED_RED_GREEN_RGTC2_EXT</code></li> + <li><code>ext.COMPRESSED_SIGNED_RED_GREEN_RGTC2_EXT</code></li> + </ul> + </li> + </ul> + </dd> + <dt><code>width</code></dt> + <dd>A {{domxref("GLsizei")}} specifying the width of the texture.</dd> + <dt><code>height</code></dt> + <dd>A {{domxref("GLsizei")}} specifying the height of the texture.</dd> + <dt><code>depth</code></dt> + <dd>A {{domxref("GLsizei")}} specifying the depth of the texture/the number of textures in a <code>TEXTURE_2D_ARRAY</code>.</dd> + <dt><code>border</code></dt> + <dd>A {{domxref("GLint")}} specifying the width of the border. Must be 0.</dd> + <dt><code>imageSize</code></dt> + <dd>A {{domxref("GLsizei")}} specifying the number of bytes to read from the buffer bound to <code>gl.PIXEL_UNPACK_BUFFER</code>.</dd> + <dt><code>offset</code></dt> + <dd>A {{domxref("GLintptr")}} specifying the offset in bytes from which to read from the buffer bound to <code>gl.PIXEL_UNPACK_BUFFER</code>.</dd> + <dt><code>pixels</code></dt> + <dd>An {{domxref("ArrayBufferView")}} that be used as a data store for the compressed image data in memory.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>None.</p> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js">var ext = ( + gl.getExtension('WEBGL_compressed_texture_s3tc') || + gl.getExtension('MOZ_WEBGL_compressed_texture_s3tc') || + gl.getExtension('WEBKIT_WEBGL_compressed_texture_s3tc') +); + +var texture = gl.createTexture(); +gl.bindTexture(gl.TEXTURE_2D, texture); +gl.compressedTexImage2D(gl.TEXTURE_2D, 0, ext.COMPRESSED_RGBA_S3TC_DXT5_EXT, 512, 512, 0, textureData); +gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); +gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); +</pre> + +<h2 id="Specifications">Specifications</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', "#COMPRESSEDTEXIMAGE2D", "compressedTexImage2D")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition for WebGL.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glCompressedTexImage2D.xml", "glCompressedTexImage2D")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the (similar) OpenGL ES 2.0 API.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0', "glCompressedTexImage2D.xhtml", "glCompressedTexImage2D")}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td>Man page of the (similar) OpenGL ES 3.0 API.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<h3 id="compressedTexImage2D">compressedTexImage2D</h3> + +<p>{{Compat("api.WebGLRenderingContext.compressedTexImage2D")}}</p> + +<h3 id="compressedTexImage3D">compressedTexImage3D</h3> + +<p>{{Compat("api.WebGL2RenderingContext.compressedTexImage3D")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">Using WebGL extensions</a></li> + <li>{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}</li> + <li>{{domxref("WEBGL_compressed_texture_s3tc")}}</li> + <li>{{domxref("WEBGL_compressed_texture_s3tc_srgb")}}</li> + <li>{{domxref("WEBGL_compressed_texture_etc")}}</li> + <li>{{domxref("WEBGL_compressed_texture_pvrtc")}}</li> + <li>{{domxref("WEBGL_compressed_texture_etc1")}}</li> + <li>{{domxref("WEBGL_compressed_texture_atc")}}</li> + <li>{{domxref("WEBGL_compressed_texture_astc")}}</li> + <li>{{domxref("EXT_texture_compression_bptc")}}</li> + <li>{{domxref("EXT_texture_compression_rgtc")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/createbuffer/index.html b/files/zh-cn/web/api/webglrenderingcontext/createbuffer/index.html new file mode 100644 index 0000000000..eaf95a97d8 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/createbuffer/index.html @@ -0,0 +1,73 @@ +--- +title: WebGLRenderingContext.createBuffer() +slug: Web/API/WebGLRenderingContext/createBuffer +tags: + - API + - WebGL + - WebGLRenderingContext + - 参考 + - 方法 +translation_of: Web/API/WebGLRenderingContext/createBuffer +--- +<p>{{APIRef("WebGL")}}</p> + +<p><a href="/en-US/docs/Web/API/WebGL_API" style="">WebGL API </a>下的<a href="/en-US/docs/Web/API/WebGL_API" style=""> </a><strong><code>WebGLRenderingContext.createBuffer()</code></strong> 方法可创建并初始化一个用于储存顶点数据或着色数据的{{domxref("WebGLBuffer")}}对象</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">WebGLBuffer <var>gl</var>.createBuffer(); +</pre> + +<h3 id="参数">参数</h3> + +<p>无。</p> + +<h3 id="返回值">返回值</h3> + +<p>一个用于储存顶点数据或着色数据的{{domxref("WebGLBuffer")}}对象</p> + +<h2 id="范例">范例</h2> + +<h3 id="创建一个缓冲区">创建一个缓冲区</h3> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var gl = canvas.getContext('webgl'); +var buffer = gl.createBuffer(); +</pre> + +<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.5", "createBuffer")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glGenBuffers.xml", "glGenBuffers")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the (similar) OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.createBuffer")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.bindBuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.isBuffer()")}}</li> + <li>Other buffers: {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/createframebuffer/index.html b/files/zh-cn/web/api/webglrenderingcontext/createframebuffer/index.html new file mode 100644 index 0000000000..dfc5401186 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/createframebuffer/index.html @@ -0,0 +1,67 @@ +--- +title: WebGLRenderingContext.createFramebuffer() +slug: Web/API/WebGLRenderingContext/createFramebuffer +translation_of: Web/API/WebGLRenderingContext/createFramebuffer +--- +<div>{{APIRef("WebGL")}}</div> + +<div><strong><code>WebGLRenderingContext.creatFramebuffer()</code></strong> 是 <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 的一个方法，用来创建和初始化{{domxref("WebGLFramebuffer")}} 对象。</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">WebGLFramebuffer <var>gl</var>.createFramebuffer(); +</pre> + +<h3 id="参数">参数</h3> + +<p>None.</p> + +<h3 id="返回值">返回值</h3> + +<p>{{domxref("WebGLFramebuffer")}} 对象</p> + +<h2 id="样例">样例</h2> + +<h3 id="创建一个帧缓冲区">创建一个帧缓冲区</h3> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var gl = canvas.getContext('webgl'); +var framebuffer = gl.createFramebuffer(); +</pre> + +<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.6", "createFramebuffer")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初始定义.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glGenFramebuffers.xml", "glGenFramebuffers")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL API手册(类似).</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request. </p> + +<p>{{Compat("api.WebGLRenderingContext.createFramebuffer")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.bindFramebuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.isFramebuffer()")}}</li> + <li>Other buffers: {{domxref("WebGLBuffer")}}, {{domxref("WebGLRenderbuffer")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/createprogram/index.html b/files/zh-cn/web/api/webglrenderingcontext/createprogram/index.html new file mode 100644 index 0000000000..1a0214b0e2 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/createprogram/index.html @@ -0,0 +1,81 @@ +--- +title: WebGLRenderingContext.createProgram() +slug: Web/API/WebGLRenderingContext/createProgram +translation_of: Web/API/WebGLRenderingContext/createProgram +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 的 <strong><code>WebGLRenderingContext.createProgram()</code></strong> 方法用于创建和初始化一个 {{domxref("WebGLProgram")}} 对象。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">WebGLProgram <var>gl</var>.createProgram(); +</pre> + +<h3 id="参数">参数</h3> + +<p>无.</p> + +<h3 id="返回值">返回值</h3> + +<p>一个 {{domxref("WebGLProgram")}} 对象由两个编译过后的 {{domxref("WebGLShader")}} 组成 - 顶点着色器和片段着色器（均由 GLSL 语言所写）。这些组合成一个可用的 WebGL 着色器程序。</p> + +<h2 id="例子">例子</h2> + +<h3 id="创建一个_WebGL_着色器程序">创建一个 WebGL 着色器程序</h3> + +<pre class="brush: js">var program = gl.createProgram(); + +// 添加预先定义好的顶点着色器和片段着色器 +gl.attachShader(program, vertexShader); +gl.attachShader(program, fragmentShader); + +gl.linkProgram(program); + +if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) { + var info = gl.getProgramInfoLog(program); + throw "Could not compile WebGL program. \n\n" + info; +} +</pre> + +<p>详见 {{domxref("WebGLShader")}} 获取更多关于创建上述代码中顶点着色器和片段着色器的信息。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.9", "createProgram")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初始定义</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glCreateProgram.xml", "glCreateProgram")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL（类似） API的规范文档</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext.createProgram")}}</p> + +<h2 id="相关资料">相关资料</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/createrenderbuffer/index.html b/files/zh-cn/web/api/webglrenderingcontext/createrenderbuffer/index.html new file mode 100644 index 0000000000..c434e1eed2 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/createrenderbuffer/index.html @@ -0,0 +1,67 @@ +--- +title: WebGLRenderingContext.createRenderbuffer() +slug: Web/API/WebGLRenderingContext/createRenderbuffer +translation_of: Web/API/WebGLRenderingContext/createRenderbuffer +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/WebGL_API">WebGL API</a> 的<strong><code>WebGLRenderingContext.createRenderbuffer()</code></strong> 方法 创建并初始化一个 {{domxref("WebGLRenderbuffer")}} 对象。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">WebGLRenderbuffer <var>gl</var>.createRenderbuffer(); +</pre> + +<h3 id="参数">参数</h3> + +<p>None.</p> + +<h3 id="返回值">返回值</h3> + +<p>一个 {{domxref("WebGLRenderbuffer")}} 对象可以保存数据，例如一张图片，或者可以渲染操作的源或目标。</p> + +<h2 id="例如">例如</h2> + +<h3 id="创建一个渲染缓冲区">创建一个渲染缓冲区</h3> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var gl = canvas.getContext('webgl'); +var renderBuffer = gl.createRenderBuffer(); +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">评论</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.7", "createRenderbuffer")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初始定义.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glGenRenderbuffers.xml", "glGenRenderbuffers")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL API手册(类似).</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.createRenderbuffer")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.bindRenderbuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.isRenderbuffer()")}}</li> + <li>Other buffers: {{domxref("WebGLBuffer")}}, {{domxref("WebGLFramebuffer")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/createshader/index.html b/files/zh-cn/web/api/webglrenderingcontext/createshader/index.html new file mode 100644 index 0000000000..a8471ef516 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/createshader/index.html @@ -0,0 +1,85 @@ +--- +title: WebGLRenderingContext.createShader() +slug: Web/API/WebGLRenderingContext/createShader +tags: + - API + - Reference + - Shader + - WebGL +translation_of: Web/API/WebGLRenderingContext/createShader +--- +<div>{{APIRef("WebGL")}}</div> + +<p><strong>WebGLRenderingContext.createShader()</strong> 用于创建一个 {{domxref("WebGLShader")}} 着色器对象，该对象可以使用 {{domxref("WebGLRenderingContext.shaderSource()")}} 和 {{domxref("WebGLRenderingContext.compileShader()")}} 方法配置着色器代码.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">WebGLShader <var><em>gl</em>.</var>createShader<var>(type);</var> +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>type</dt> + <dd>参数为<code>gl.VERTEX_SHADER</code> 或 <code>gl.FRAGMENT_SHADER</code>两者中的一个。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<p>详见 {{domxref("WebGLShader")}} 的使用和示例</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">说明</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.9", "createShader")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初次定义</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glCreateShader.xml", "glCreateShader")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL 帮助页</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.createShader")}}</p> + +<h2 id="其他相关">其他相关</h2> + +<ul> + <li>{{domxref("WebGLProgram")}}</li> + <li>{{domxref("WebGLShader")}}</li> + <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.bindAttribLocation()")}}</li> + <li>{{domxref("WebGLRenderingContext.compileShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.createShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li> + <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.isShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li> + <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/createtexture/index.html b/files/zh-cn/web/api/webglrenderingcontext/createtexture/index.html new file mode 100644 index 0000000000..eaf77b4e27 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/createtexture/index.html @@ -0,0 +1,69 @@ +--- +title: WebGLRenderingContext.createTexture() +slug: Web/API/WebGLRenderingContext/createTexture +translation_of: Web/API/WebGLRenderingContext/createTexture +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a>的<strong><code>WebGLRenderingContext.createTexture()</code></strong> 方法创建并初始化了一个{{domxref("WebGLTexture")}} 目标。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">WebGLTexture <var>gl</var>.createTexture(); +</pre> + +<h3 id="参数">参数</h3> + +<p>无。</p> + +<h3 id="返回值">返回值</h3> + +<p>一个可以被任何图像绑定的 {{domxref("WebGLTexture")}} 目标</p> + +<h2 id="示例">示例</h2> + +<p>另见 <a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">Using textures in WebGL</a>上的<a href="/en-US/docs/Web/API/WebGL_API/Tutorial">WebGL tutorial</a></p> + +<h3 id="创建一个纹理">创建一个纹理</h3> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var gl = canvas.getContext('webgl'); +var texture = gl.createTexture(); +</pre> + +<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.8", "createTexture")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glGenTextures.xml", "glGenTextures")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the (similar) OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.createTexture")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.bindTexture()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteTexture()")}}</li> + <li>{{domxref("WebGLRenderingContext.isTexture()")}}</li> + <li>{{domxref("WebGLRenderingContext.texImage2D()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/cullface/index.html b/files/zh-cn/web/api/webglrenderingcontext/cullface/index.html new file mode 100644 index 0000000000..bcabedcb95 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/cullface/index.html @@ -0,0 +1,79 @@ +--- +title: WebGLRenderingContext.cullFace() +slug: Web/API/WebGLRenderingContext/cullFace +translation_of: Web/API/WebGLRenderingContext/cullFace +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 的 <strong><code>WebGLRenderingContext.cullFace()</code></strong> 指定正面和/或背面多边形是否可以剔除。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">void <var>gl</var>.cullFace(<var>mode</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>mode</code></dt> + <dd>{{domxref("GLenum")}} 指定适合进行剔除的面是正面还是背面。默认值是 <code>gl.BACK</code>. 可能的值有: + <ul> + <li><code>gl.FRONT</code></li> + <li><code>gl.BACK</code></li> + <li><code>gl.FRONT_AND_BACK</code></li> + </ul> + </dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>None.</p> + +<h2 id="示例">示例</h2> + +<p>多边形剔除功能默认不开启。 想要开启这个功能, 使用{{domxref("WebGLRenderingContext.enable", "enable()")}} 和 {{domxref("WebGLRenderingContext.disable", "disable()")}} 方法，传入参数<code>gl.CULL_FACE</code>.</p> + +<pre class="brush: js notranslate">gl.enable(gl.CULL_FACE); +gl.cullFace(gl.FRONT_AND_BACK); +</pre> + +<p>需要 <code>CULL_FACE_MODE</code> 常量来检查当前多边形剔除模式。</p> + +<pre class="brush: js notranslate">gl.getParameter(gl.CULL_FACE_MODE) === gl.FRONT_AND_BACK; +// true +</pre> + +<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.3", "cullFace")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glCullFace.xml", "glCullFace")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.cullFace")}}</p> + +<h2 id="相关资料">相关资料</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.enable()")}}</li> + <li>{{domxref("WebGLRenderingContext.frontFace()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/deletebuffer/index.html b/files/zh-cn/web/api/webglrenderingcontext/deletebuffer/index.html new file mode 100644 index 0000000000..f8cbf3a7f1 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/deletebuffer/index.html @@ -0,0 +1,75 @@ +--- +title: WebGLRenderingContext.deleteBuffer() +slug: Web/API/WebGLRenderingContext/deleteBuffer +translation_of: Web/API/WebGLRenderingContext/deleteBuffer +--- +<div>{{APIRef("WebGL")}}</div> + +<div><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a>的<strong><code>WebGLRenderingContext.deleteBuffer()</code></strong>用于删除给定的{{domxref("WebGLBuffer")}}对象；若给定的{{domxref("WebGLBuffer")}}对象已经被删除了，调用该方法将不会产生任何效果。</div> + +<p> </p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var>gl</var>.deleteBuffer(<var>buffer</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>buffer</dt> + <dd>要删除的{{domxref("WebGLBuffer")}} 对象.</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>None.</p> + +<h2 id="例子">例子</h2> + +<h3 id="删除一个buffer">删除一个buffer</h3> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var gl = canvas.getContext('webgl'); +var buffer = gl.createBuffer(); + +// ... + +gl.deleteBuffer(buffer);</pre> + +<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.5", "deleteBuffer")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glDeleteBuffers.xml", "glDeleteBuffers")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the (similar) OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.deleteBuffer")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.bindBuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.isBuffer()")}}</li> + <li>Other buffers: {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/deleteframebuffer/index.html b/files/zh-cn/web/api/webglrenderingcontext/deleteframebuffer/index.html new file mode 100644 index 0000000000..eea968007a --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/deleteframebuffer/index.html @@ -0,0 +1,73 @@ +--- +title: WebGLRenderingContext.deleteFramebuffer() +slug: Web/API/WebGLRenderingContext/deleteFramebuffer +translation_of: Web/API/WebGLRenderingContext/deleteFramebuffer +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 的 <strong><code>WebGLRenderingContext.deleteFramebuffer()</code></strong> 方法用来删除给定的{{domxref("WebGLFramebuffer")}} 对象. 如果帧缓冲区已被删除，则此方法无效。.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var>gl</var>.deleteFramebuffer(<var>framebuffer</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>framebuffer</dt> + <dd> 将要删除的{{domxref("WebGLFramebuffer")}} 对象.</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>None.</p> + +<h2 id="示例">示例</h2> + +<h3 id="删除一个帧缓冲区">删除一个帧缓冲区</h3> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var gl = canvas.getContext('webgl'); +var framebuffer = gl.createFramebuffer(); + +// ... + +gl.deleteFramebuffer(framebuffer);</pre> + +<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.6", "deleteFramebuffer")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初始定义.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glDeleteFramebuffers.xml", "glDeleteFramebuffers")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL API手册(类似).</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.deleteFramebuffer")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.bindFramebuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.createFramebuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.isFramebuffer()")}}</li> + <li>Other buffers: {{domxref("WebGLBuffer")}}, {{domxref("WebGLRenderbuffer")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/deleteprogram/index.html b/files/zh-cn/web/api/webglrenderingcontext/deleteprogram/index.html new file mode 100644 index 0000000000..3cde58761f --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/deleteprogram/index.html @@ -0,0 +1,76 @@ +--- +title: WebGLRenderingContext.deleteProgram() +slug: Web/API/WebGLRenderingContext/deleteProgram +translation_of: Web/API/WebGLRenderingContext/deleteProgram +--- +<div>{{APIRef("WebGL")}}</div> + +<p><strong><code>WebGLRenderingContext.deleteProgram()</code></strong> 用于删除一个 {{domxref("WebGLProgram")}} 对象. 如果该{{domxref("WebGLProgram")}} 对象已经被删除，该方法不会产生任何作用</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var>gl</var>.deleteProgram(<var>program</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>program</code></dt> + <dd>需要被删除的 {{domxref("WebGLProgram")}} 对象</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>None.</p> + +<h2 id="示例">示例</h2> + +<h3 id="删除一个程序">删除一个程序</h3> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var gl = canvas.getContext('webgl'); +var program = gl.createProgram(); + +// ... + +gl.deleteProgram(program);</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规格</th> + <th scope="col">状态</th> + <th scope="col">解释</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.9", "deleteProgram")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glDeleteProgram.xml", "glDeleteProgram")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the (similar) OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器支持">浏览器支持</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.deleteProgram")}}</p> + +<h2 id="其他相关">其他相关</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/deleterenderbuffer/index.html b/files/zh-cn/web/api/webglrenderingcontext/deleterenderbuffer/index.html new file mode 100644 index 0000000000..ff3acc9e56 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/deleterenderbuffer/index.html @@ -0,0 +1,73 @@ +--- +title: WebGLRenderingContext.deleteRenderbuffer() +slug: Web/API/WebGLRenderingContext/deleteRenderbuffer +translation_of: Web/API/WebGLRenderingContext/deleteRenderbuffer +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 的 <strong><code>WebGLRenderingContext.deleteRenderbuffer()</code></strong> 方法用来删除给定的 {{domxref("WebGLRenderbuffer")}} 对象. 如果渲染缓冲区已被删除，则此方法无效.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var>gl</var>.deleteRenderbuffer(<var>renderbuffer</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>renderbuffer</dt> + <dd>将要删除的{domxref("WebGLRenderbuffer")}} 对象.</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>None.</p> + +<h2 id="示例">示例</h2> + +<h3 id="删除一个渲染缓冲区">删除一个渲染缓冲区</h3> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var gl = canvas.getContext('webgl'); +var renderbuffer = gl.createRenderbuffer(); + +// ... + +gl.deleteRenderbuffer(renderbuffer);</pre> + +<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.7", "deleteRenderbuffer")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初始定义.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glDeleteRenderbuffers.xml", "glDeleteRenderbuffers")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL API手册(类似).</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.deleteRenderbuffer")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.bindRenderbuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.createRenderbuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.isRenderbuffer()")}}</li> + <li>Other buffers: {{domxref("WebGLBuffer")}}, {{domxref("WebGLFramebuffer")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/deleteshader/index.html b/files/zh-cn/web/api/webglrenderingcontext/deleteshader/index.html new file mode 100644 index 0000000000..54a7e9aaea --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/deleteshader/index.html @@ -0,0 +1,66 @@ +--- +title: WebGLRenderingContext.deleteShader() +slug: Web/API/WebGLRenderingContext/deleteShader +translation_of: Web/API/WebGLRenderingContext/deleteShader +--- +<div>{{APIRef("WebGL")}} </div> + +<div><strong><code>WebGLRenderingContext.deleteShader()</code></strong> 用于删除一个参数提供的 {{domxref("WebGLShader")}}对象. 如果该{{domxref("WebGLShader")}}对象已经被删除，该方法不会有任何作用。</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">void <var>gl</var>.deleteShader(<var>shader</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>shader</dt> + <dd>需要被删除的 {{domxref("WebGLShader")}} 对象</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>None.</p> + +<h2 id="示例">示例</h2> + +<h3 id="删除一个着色器">删除一个着色器</h3> + +<pre class="brush: js">gl.deleteShader(shader);</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规格</th> + <th scope="col">状态</th> + <th scope="col">解释</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.9", "deleteShader")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glDeleteShader.xml", "glDeleteShader")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the (similar) OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.deleteShader")}}</p> + +<h2 id="其他相关">其他相关</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.createShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.isShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/deletetexture/index.html b/files/zh-cn/web/api/webglrenderingcontext/deletetexture/index.html new file mode 100644 index 0000000000..1871f5384f --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/deletetexture/index.html @@ -0,0 +1,75 @@ +--- +title: WebGLRenderingContext.deleteTexture() +slug: Web/API/WebGLRenderingContext/deleteTexture +translation_of: Web/API/WebGLRenderingContext/deleteTexture +--- +<div>{{APIRef("WebGL")}}</div> + +<div>WebGLRenderingContext.deleteTexture()方法删除指定的{{domxref("WebGLTexture")}}对象。如果纹理已被删除，则此方法无效。</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">void <var>gl</var>.deleteTexture(<var>texture</var>); +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt>texture</dt> + <dd>将要删除的{{domxref("WebGLTexture")}} 对象.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>无.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Deleting_a_texture">Deleting a texture</h3> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var gl = canvas.getContext('webgl'); +var texture = gl.createTexture(); + +// ... + +gl.deleteTexture(texture);</pre> + +<h2 id="Specifications">Specifications</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.8", "deleteTexture")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glDeleteTextures.xml", "glDeleteTextures")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the (similar) OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.deleteTexture")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.bindTexture()")}}</li> + <li>{{domxref("WebGLRenderingContext.createTexture()")}}</li> + <li>{{domxref("WebGLRenderingContext.isTexture()")}}</li> + <li>{{domxref("WebGLRenderingContext.texImage2D()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/depthfunc/index.html b/files/zh-cn/web/api/webglrenderingcontext/depthfunc/index.html new file mode 100644 index 0000000000..71c4c1b04e --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/depthfunc/index.html @@ -0,0 +1,83 @@ +--- +title: WebGLRenderingContext.depthFunc() +slug: Web/API/WebGLRenderingContext/depthFunc +translation_of: Web/API/WebGLRenderingContext/depthFunc +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 的 <strong><code>WebGLRenderingContext.depthFunc()</code></strong> 方法，指定将输入像素深度与当前深度缓冲区值进行比较的函数。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var>gl</var>.depthFunc(<var>func</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>func</code></dt> + <dd>是一个指定深度比较函数的 {{domxref("GLenum")}}，它设置像素将被绘制的条件。默认值是 <code>gl.LESS</code>。可能的值是： + <ul> + <li><code>gl.NEVER</code>（永不通过）</li> + <li><code>gl.LESS</code>（如果传入值小于深度缓冲值，则通过）</li> + <li><code>gl.EQUAL</code>（如果传入值等于深度缓冲区值，则通过）</li> + <li><code>gl.LEQUAL</code>（如果传入值小于或等于深度缓冲区值，则通过）</li> + <li><code>gl.GREATER</code>（如果传入值大于深度缓冲区值，则通过）</li> + <li><code>gl.NOTEQUAL</code>（如果传入的值不等于深度缓冲区值，则通过）</li> + <li><code>gl.GEQUAL</code>（如果传入值大于或等于深度缓冲区值，则通过）</li> + <li><code>gl.ALWAYS</code>（总是通过）</li> + </ul> + </dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>无。</p> + +<h2 id="示例">示例</h2> + +<p>深度测试默认是禁用的。 要启用或禁用深度测试，请使用带有参数 <code>gl.DEPTH_TEST</code> 的 {{domxref("WebGLRenderingContext.enable", "enable()")}} 和 {{domxref("WebGLRenderingContext.disable", "disable()")}} 方法。</p> + +<pre class="brush: js">gl.enable(gl.DEPTH_TEST); +gl.depthFunc(gl.NEVER); +</pre> + +<p>要检查当前深度函数，请查询 <code>DEPTH_FUNC</code> 常量。</p> + +<pre class="brush: js">gl.getParameter(gl.DEPTH_FUNC) === gl.NEVER; +// true +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.3", "depthFunc")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初始定义</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glDepthFunc.xml", "glDepthFunc")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL API 手册</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">此页面中的兼容性表格由结构化数据生成。 如果您想为数据做出贡献，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送合并请求。</p> + +<p>{{Compat("api.WebGLRenderingContext.depthFunc")}}</p> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.enable()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/depthmask/index.html b/files/zh-cn/web/api/webglrenderingcontext/depthmask/index.html new file mode 100644 index 0000000000..e4039e915f --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/depthmask/index.html @@ -0,0 +1,70 @@ +--- +title: WebGLRenderingContext.depthMask() +slug: Web/API/WebGLRenderingContext/depthMask +translation_of: Web/API/WebGLRenderingContext/depthMask +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 的 <strong><code>WebGLRenderingContext.depthMask()</code></strong> 方法设置是否启用写入深度缓冲。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var>gl</var>.depthMask(<var>flag</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>flag</code></dt> + <dd>一个 {{domxref("GLboolean")}} ，用于设置是否启用写入深度缓冲。默认值：true，表示启用写入。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>无。</p> + +<h2 id="例子">例子</h2> + +<pre class="brush: js">gl.depthMask(false); +</pre> + +<p>要获得当前的深度遮罩值，传入 <code>DEPTH_WRITEMASK</code> 常量，返回 {{jsxref("Boolean")}}.</p> + +<pre class="brush: js">gl.getParameter(gl.DEPTH_WRITEMASK); +// false +</pre> + +<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.3", "depthMask")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glDepthMask.xml", "glDepthMask")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext.depthMask")}}</p> + +<h2 id="相关内容">相关内容</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.colorMask()")}}</li> + <li>{{domxref("WebGLRenderingContext.stencilMask()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/detachshader/index.html b/files/zh-cn/web/api/webglrenderingcontext/detachshader/index.html new file mode 100644 index 0000000000..fba169ad44 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/detachshader/index.html @@ -0,0 +1,103 @@ +--- +title: WebGLRenderingContext.detachShader() +slug: Web/API/WebGLRenderingContext/detachShader +translation_of: Web/API/WebGLRenderingContext/detachShader +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 的<strong>WebGLRenderingContext.detachShader()</strong> 方法：从一个 {{domxref("WebGLProgram")}}中分离一个先前附加的片段或者顶点着色器 （{{domxref("WebGLShader")}} ） .</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">void <var><em>gl</em>.detach</var>Shader<var>(program, shader);</var> +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>program</code></dt> + <dd>一个 {{domxref("WebGLProgram")}} 对象.</dd> + <dt><code>shader</code></dt> + <dd>一个顶点或者片元着色器 {{domxref("WebGLShader")}}.</dd> +</dl> + +<h2 id="Specifications">Specifications</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.9", "detachShader")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glDetachShader.xml", "glDetachShader")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL man page.</td> + </tr> + </tbody> +</table> + +<h2 id="例子">例子</h2> + +<h3 id="使用detachShader方法分离一个顶点或片元着色器">使用detachShader方法分离一个顶点或片元着色器</h3> + +<pre>//顶点着色器 + var vertexShader = gl.createShader(gl.VERTEX_SHADER); + gl.shaderSource(vertexShader, vertexSrc); + gl.compileShader(vertexShader); + //片元着色器 + var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);//创建 WebGLShader。 + gl.shaderSource(fragmentShader, fragmentSrc); //fragmentSrc设置一个 WebGLShader 的源码。 + gl.compileShader(fragmentShader); + + //WebGLProgram + var program = gl.createProgram();//创建 WebGLProgram + gl.attachShader(program, vertexShader); //往 WebGLProgram 添加一个片段或者顶点着色器。 + gl.attachShader(program, fragmentShader); + gl.linkProgram(program);//链接给入的 WebGLProgram 对象 + gl.detachShader(program, vertexShader); //从一个WebGLProgram中分离一个先前附加的片段或者顶点着色器; + gl.detachShader(program, fragmentShader); + gl.deleteShader(vertexShader); + gl.deleteShader(fragmentShader); +</pre> + +<p> </p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.detachShader")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("WebGLProgram")}}</li> + <li>{{domxref("WebGLShader")}}</li> + <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.compileShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.createShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li> + <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.isShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li> + <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/disable/index.html b/files/zh-cn/web/api/webglrenderingcontext/disable/index.html new file mode 100644 index 0000000000..c1717db568 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/disable/index.html @@ -0,0 +1,139 @@ +--- +title: WebGLRenderingContext.disable() +slug: Web/API/WebGLRenderingContext/disable +translation_of: Web/API/WebGLRenderingContext/disable +--- +<div>{{APIRef("WebGL")}}</div> + +<p>The <strong><code>WebGLRenderingContext.disable()</code></strong> method of the <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> disables specific WebGL capabilities for this context.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">void <var>gl</var>.disable(<var>cap</var>); +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>cap</code></dt> + <dd>A {{domxref("GLenum")}} specifying which WebGL capability to disable. Possible values:</dd> + <dd> + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Constant</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>gl.BLEND</code></td> + <td>Deactivates blending of the computed fragment color values. See {{domxref("WebGLRenderingContext.blendFunc()")}}.</td> + </tr> + <tr> + <td><code>gl.CULL_FACE</code></td> + <td>Deactivates culling of polygons. See {{domxref("WebGLRenderingContext.cullFace()")}}.</td> + </tr> + <tr> + <td><code>gl.DEPTH_TEST</code></td> + <td>Deactivates depth comparisons and updates to the depth buffer. See {{domxref("WebGLRenderingContext.depthFunc()")}}.</td> + </tr> + <tr> + <td><code>gl.DITHER</code></td> + <td>Deactivates dithering of color components before they get written to the color buffer.</td> + </tr> + <tr> + <td><code>gl.POLYGON_OFFSET_FILL</code></td> + <td>Deactivates adding an offset to depth values of polygon's fragments. See {{domxref("WebGLRenderingContext.polygonOffset()")}}.</td> + </tr> + <tr> + <td><code>gl.SAMPLE_ALPHA_TO_COVERAGE</code></td> + <td>Deactivates the computation of a temporary coverage value determined by the alpha value.</td> + </tr> + <tr> + <td><code>gl.SAMPLE_COVERAGE</code></td> + <td>Deactivates ANDing the fragment's coverage with the temporary coverage value. See {{domxref("WebGLRenderingContext.sampleCoverage()")}}.</td> + </tr> + <tr> + <td><code>gl.SCISSOR_TEST</code></td> + <td>Deactivates the scissor test that discards fragments that are outside of the scissor rectangle. See {{domxref("WebGLRenderingContext.scissor()")}}.</td> + </tr> + <tr> + <td><code>gl.STENCIL_TEST</code></td> + <td>Deactivates stencil testing and updates to the stencil buffer. See {{domxref("WebGLRenderingContext.stencilFunc()")}}.</td> + </tr> + </tbody> + </table> + When using a {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, the following values are available additionally: + + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Constant</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>gl.RASTERIZER_DISCARD</code></td> + <td>Deactivates that primitives are discarded immediately before the rasterization stage, but after the optional transform feedback stage. <code>gl.clear()</code> commands are ignored.</td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>None.</p> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js">gl.disable(gl.DITHER); +</pre> + +<p>To check if a capability is disabled, use the {{domxref("WebGLRenderingContext.isEnabled()")}} method:</p> + +<pre class="brush: js">gl.isEnabled(gl.DITHER); +// false +</pre> + +<h2 id="Specifications">Specifications</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.3", "disable")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition for WebGL.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glDisable.xml", "glDisable")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the (similar) OpenGL ES 2.0 API.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0', "glEnable.xhtml", "glDisable")}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td>Man page of the (similar) OpenGL ES 3.0 API.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.disable")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.enable()")}}</li> + <li>{{domxref("WebGLRenderingContext.isEnabled()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/drawarrays/index.html b/files/zh-cn/web/api/webglrenderingcontext/drawarrays/index.html new file mode 100644 index 0000000000..f27d923833 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/drawarrays/index.html @@ -0,0 +1,93 @@ +--- +title: WebGLRenderingContext.drawArrays() +slug: Web/API/WebGLRenderingContext/drawArrays +tags: + - WebGL +translation_of: Web/API/WebGLRenderingContext/drawArrays +--- +<div>{{APIRef("WebGL")}}</div> + +<p> <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 中的<strong><code>WebGLRenderingContext.drawArrays()</code></strong>方法用于从向量数组中绘制图元。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var>gl</var>.drawArrays(<var>mode</var>, <var>first</var>, <var>count</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>mode</code></dt> + <dd>{{domxref("GLenum")}} 类型，指定绘制图元的方式，可能值如下。 + <ul> + <li><code>gl.POINTS</code>: 绘制一系列点。</li> + <li><code>gl.LINE_STRIP</code>: 绘制一个线条。即，绘制一系列线段，上一点连接下一点。</li> + <li><code>gl.LINE_LOOP</code>: 绘制一个线圈。即，绘制一系列线段，上一点连接下一点，并且最后一点与第一个点相连。</li> + <li><code>gl.LINES</code>: 绘制一系列单独线段。每两个点作为端点，线段之间不连接。</li> + <li><code>gl.TRIANGLE_STRIP</code>：绘制一个<a href="https://en.wikipedia.org/wiki/Triangle_strip">三角带</a>。</li> + <li><code>gl.TRIANGLE_FAN</code>：绘制一个<a href="https://en.wikipedia.org/wiki/Triangle_fan">三角扇</a>。</li> + <li><code>gl.TRIANGLES</code>: 绘制一系列三角形。每三个点作为顶点。</li> + </ul> + </dd> + <dt>first</dt> + <dd>{{domxref("GLint")}} 类型 ，指定从哪个点开始绘制。</dd> + <dt>count</dt> + <dd>{{domxref("GLsizei")}} 类型，指定绘制需要使用到多少个点。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>无。</p> + +<h3 id="异常">异常</h3> + +<ul> + <li>如果 <code>mode</code> 不是一个可接受值，将会抛出 <code>gl.INVALID_ENUM</code> 异常。</li> + <li>如果 <code>first</code> 或者 <code>count</code> 是负值，会抛出 <code>gl.INVALID_VALUE</code> 异常。</li> + <li>如果 <code>gl.CURRENT_PROGRAM</code> 为 {{jsxref("null")}}，会抛出 <code>gl.INVALID_OPERATION</code> 异常。</li> +</ul> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">gl.drawArrays(gl.POINTS, 0, 8); +</pre> + +<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.11", "drawArrays")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glDrawArrays.xml", "glDrawArrays")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.drawArrays")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.drawElements()")}}</li> + <li>{{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}}</li> + <li>{{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}</li> + <li>{{domxref("ANGLE_instanced_arrays.vertexAttribDivisorANGLE()", "ext.vertexAttribDivisorANGLE()")}}</li> + <li>{{domxref("WebGL2RenderingContext.drawArraysInstanced()")}}</li> + <li>{{domxref("WebGL2RenderingContext.drawElementsInstanced()")}}</li> + <li>{{domxref("WebGL2RenderingContext.vertexAttribDivisor()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/drawelements/index.html b/files/zh-cn/web/api/webglrenderingcontext/drawelements/index.html new file mode 100644 index 0000000000..e0dc9e96c6 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/drawelements/index.html @@ -0,0 +1,103 @@ +--- +title: WebGLRenderingContext.drawElements() +slug: Web/API/WebGLRenderingContext/drawElements +tags: + - API + - Method + - Reference + - WebGL +translation_of: Web/API/WebGLRenderingContext/drawElements +--- +<div>{{APIRef("WebGL")}}</div> + +<p>该 <strong><code>WebGLRenderingContext.drawElements()</code></strong> 方法 在 <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 从数组数据渲染图元.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">void <var>gl</var>.drawElements(<var>mode</var>, <var>count</var>, <var>type</var>, <var>offset</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>mode</code></dt> + <dd>{{domxref("枚举类型")}} 指定要渲染的图元类型。可以是以下类型: + <ul> + <li><code>gl.POINTS</code>: 画单独的点。</li> + <li><code>gl.LINE_STRIP</code>: 画一条直线到下一个顶点。</li> + <li><code>gl.LINE_LOOP</code>: 绘制一条直线到下一个顶点，并将最后一个顶点返回到第一个顶点.</li> + <li><code>gl.LINES</code>: 在一对顶点之间画一条线.</li> + <li><code><a href="https://en.wikipedia.org/wiki/Triangle_strip">gl.TRIANGLE_STRIP</a></code></li> + <li><code><a href="https://en.wikipedia.org/wiki/Triangle_fan">gl.TRIANGLE_FAN</a></code></li> + <li><code>gl.TRIANGLES</code>: 为一组三个顶点绘制一个三角形.</li> + </ul> + </dd> + <dt>count</dt> + <dd>{{domxref("整数型")}} 指定要渲染的元素数量.</dd> + <dt>type</dt> + <dd>{{domxref("枚举类型")}} 指定元素数组缓冲区中的值的类型。可能的值是: + <ul> + <li><code>gl.UNSIGNED_BYTE</code></li> + <li><code>gl.UNSIGNED_SHORT</code></li> + <li>当使用 {{domxref("OES_element_index_uint")}} 扩展时: + <ul> + <li><code>gl.UNSIGNED_INT</code></li> + </ul> + </li> + </ul> + </dd> + <dt>offset</dt> + <dd> {{domxref("字节单位")}} 指定元素数组缓冲区中的偏移量。必须是给定类型大小的有效倍数.</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>None.</p> + +<h3 id="异常">异常</h3> + +<ul> + <li>如果 <code>mode</code> 不是正确值, <code>gl.INVALID_ENUM</code> 将会抛出错误异常.</li> + <li>如果<code>offset</code> 不是给定类型大小的有效倍数, <code>gl.INVALID_OPERATION</code> 将会抛出错误异常.</li> + <li>如果 <code>count</code> 是负的, <code>gl.INVALID_VALUE</code> 将会抛出错误异常.</li> +</ul> + +<h2 id="例子">例子</h2> + +<pre class="brush: js notranslate">gl.drawElements(gl.POINTS, 8, gl.UNSIGNED_BYTE, 0); +</pre> + +<h2 id="格式">格式</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">格式</th> + <th scope="col">状态</th> + <th scope="col">注解</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.11", "drawElements")}}</td> + <td>{{Spec2('WebGL')}}建议</td> + <td>第一次定义.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glDrawElements.xml", "glDrawElements")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}规范</td> + <td> OpenGL 手册</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p class="hidden">此页面中的兼容性表是从结构化数据生成的。如果你想贡献数据, 请检出 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送拉动请求.</p> + +<p>{{Compat("api.WebGLRenderingContext.drawElements")}}</p> + +<h2 id="相关参考">相关参考</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.drawArrays()")}}</li> + <li>{{domxref("OES_element_index_uint")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/drawingbufferheight/index.html b/files/zh-cn/web/api/webglrenderingcontext/drawingbufferheight/index.html new file mode 100644 index 0000000000..4fbe5ff28a --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/drawingbufferheight/index.html @@ -0,0 +1,65 @@ +--- +title: WebGLRenderingContext.drawingBufferHeight +slug: Web/API/WebGLRenderingContext/drawingBufferHeight +tags: + - API + - WebGL + - WebGLRenderingContext + - 参考 + - 只读 + - 属性 +translation_of: Web/API/WebGLRenderingContext/drawingBufferHeight +--- +<div>{{APIRef("WebGL")}}</div> + +<p><code><strong>WebGLRenderingContext.drawingBufferHeight</strong></code> 只读属性，指示当前绘图缓冲区的实际高度。它应当匹配与绘图上下文相关联的 {{HTMLElement("canvas")}} 元素的高度属性， 如果实现未能提供所要求的高度，其值将有所不同。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var><em>gl</em></var>.drawingBufferHeight;</pre> + +<h2 id="示例">示例</h2> + +<p>指定 {{HTMLElement("canvas")}} 元素：</p> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<p>你可以通过下面几行代码来获取绘图缓冲区的高度：</p> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var gl = canvas.getContext("webgl"); +gl.drawingBufferHeight; // 150 +</pre> + +<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", "#DOM-WebGLRenderingContext-drawingBufferHeight", "WebGLRenderingContext.drawingBufferHeight")}}</td> + <td>{{Spec2("WebGL")}}</td> + <td>初始定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden"> +<p>此页面上的兼容性表格由结构化数据生成。如果你想贡献数据，可以看看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>并向我们发送 pull request.</p> +</div> + +<p>{{Compat("api.WebGLRenderingContext.drawingBufferHeight")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.drawingBufferWidth")}}</li> + <li>{{domxref("WebGLRenderingContext.viewport()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/drawingbufferwidth/index.html b/files/zh-cn/web/api/webglrenderingcontext/drawingbufferwidth/index.html new file mode 100644 index 0000000000..7d259a52ed --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/drawingbufferwidth/index.html @@ -0,0 +1,65 @@ +--- +title: WebGLRenderingContext.drawingBufferWidth +slug: Web/API/WebGLRenderingContext/drawingBufferWidth +tags: + - API + - WebGL + - WebGLRenderingContext + - 参考 + - 只读 + - 属性 +translation_of: Web/API/WebGLRenderingContext/drawingBufferWidth +--- +<div>{{APIRef("WebGL")}}</div> + +<p><code><strong>WebGLRenderingContext.drawingBufferWidth </strong></code>只读属性， 指示当前绘图缓冲区的实际宽度。它应当匹配与绘图上下文相关联的 {{HTMLElement("canvas")}} 元素的宽度属性。如果实现未能提供所要求的宽度，值将有所不同。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var><em>gl</em></var>.drawingBufferWidth;</pre> + +<h2 id="示例">示例</h2> + +<p>指定{{HTMLElement("canvas")}} 元素：</p> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<p>你可以通过下面几行代码来获取绘图缓冲区的宽度：</p> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var gl = canvas.getContext('webgl'); +gl.drawingBufferWidth; // 300 +</pre> + +<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", "#DOM-WebGLRenderingContext-drawingBufferWidth", "WebGLRenderingContext.drawingBufferWidth")}}</td> + <td>{{Spec2("WebGL")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden"> +<p>此页面上的兼容性表格由结构化数据生成。如果你想贡献数据，可以看看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>并向我们发送 pull request.</p> +</div> + +<p>{{Compat("api.WebGLRenderingContext.drawingBufferWidth")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.drawingBufferHeight")}}</li> + <li>{{domxref("WebGLRenderingContext.viewport()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/enable/index.html b/files/zh-cn/web/api/webglrenderingcontext/enable/index.html new file mode 100644 index 0000000000..19fe6655ff --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/enable/index.html @@ -0,0 +1,156 @@ +--- +title: WebGLRenderingContext.enable() +slug: Web/API/WebGLRenderingContext/enable +tags: + - WebGLRenderingContext.enable +translation_of: Web/API/WebGLRenderingContext/enable +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 中的<strong><code>WebGLRenderingContext.enable()</code></strong> 方法，用于对该上下文开启某种特性。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var>gl</var>.enable(<var>cap</var>);参数</pre> + +<dl> + <dt><code>cap</code></dt> + <dd>让WebGL开启某种特性，可能的值：</dd> + <dd> + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Constant</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>gl.BLEND</code></td> + <td>激活片元的颜色融合计算. 参见 {{domxref("WebGLRenderingContext.blendFunc()")}}.</td> + </tr> + <tr> + <td><code>gl.CULL_FACE</code></td> + <td>激活多边形正反面剔除. 参见{{domxref("WebGLRenderingContext.cullFace()")}}.</td> + </tr> + <tr> + <td><code>gl.DEPTH_TEST</code></td> + <td> + <p>激活深度比较，并且更新深度缓冲区。参见{{domxref("WebGLRenderingContext.depthFunc()")}}.</p> + </td> + </tr> + <tr> + <td><code>gl.DITHER</code></td> + <td> + <p> </p> + + <p>激活在写入颜色缓冲区之前，抖动颜色成分。</p> + </td> + </tr> + <tr> + <td><code>gl.POLYGON_OFFSET_FILL</code></td> + <td> + <p>激活添加多边形片段的深度值偏移。参见{{domxref("WebGLRenderingContext.polygonOffset()")}}.</p> + </td> + </tr> + <tr> + <td><code>gl.SAMPLE_ALPHA_TO_COVERAGE</code></td> + <td> + <p>激活通过alpha值决定的临时覆盖值计算。（抗锯齿）</p> + </td> + </tr> + <tr> + <td><code>gl.SAMPLE_COVERAGE</code></td> + <td> + <p>激活使用临时覆盖值，位和运算片段的覆盖值。参见 {{domxref("WebGLRenderingContext.sampleCoverage()")}}.</p> + </td> + </tr> + <tr> + <td><code>gl.SCISSOR_TEST</code></td> + <td> + <p>激活剪裁测试，即丢弃在剪裁矩形范围外的片段。{{domxref("WebGLRenderingContext.scissor()")}}.</p> + </td> + </tr> + <tr> + <td><code>gl.STENCIL_TEST</code></td> + <td> + <p>激活模板测试并且更新模板缓冲区。参见{{domxref("WebGLRenderingContext.stencilFunc()")}}.</p> + </td> + </tr> + </tbody> + </table> + 当使用 {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}时, 可以添加使用下面的值。 + + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Constant</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>gl.RASTERIZER_DISCARD</code></td> + <td> + <p>图元光栅化阶段之前，但在任意的transform反馈之后，就立刻被丢弃。<code>gl.clear()命令被忽略。</code></p> + </td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>None.</p> + +<h2 id="样例">样例</h2> + +<pre class="brush: js">gl.enable(gl.DITHER); +</pre> + +<p>如果要检测可用性，可以使用 {{domxref("WebGLRenderingContext.isEnabled()")}} 方法:</p> + +<pre class="brush: js">gl.isEnabled(gl.DITHER); +// true +</pre> + +<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.3", "enable")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition for WebGL.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glEnable.xml", "glEnable")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the OpenGL ES 2.0 API.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0', "glEnable.xhtml", "glEnable")}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td>Man page of the OpenGL ES 3.0 API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.enable")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.disable()")}}</li> + <li>{{domxref("WebGLRenderingContext.isEnabled()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/enablevertexattribarray/index.html b/files/zh-cn/web/api/webglrenderingcontext/enablevertexattribarray/index.html new file mode 100644 index 0000000000..493c9efa59 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/enablevertexattribarray/index.html @@ -0,0 +1,102 @@ +--- +title: WebGLRenderingContext.enableVertexAttribArray() +slug: Web/API/WebGLRenderingContext/enableVertexAttribArray +translation_of: Web/API/WebGLRenderingContext/enableVertexAttribArray +--- +<div>{{APIRef("WebGL")}}</div> + +<p>在<a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a>中，使用 {{domxref("WebGLRenderingContext")}} 中的<code><strong>enableVertexAttribArray()</strong></code> 方法，可以打开属性数组列表中指定索引处的通用顶点属性数组。</p> + +<div class="note"> +<p>你可以通过以下方法关闭顶点属性数组 {{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}}.</p> +</div> + +<p>在WebGL中，作用于顶点的数据会先储存在<a href="/en-US/docs/Web/API/WebGL_API/Data#Attributes">attributes</a>。这些数据仅对JavaScript代码和顶点着色器可用。属性由索引号引用到GPU维护的属性列表中。在不同的平台或GPU上，某些顶点属性索引可能具有预定义的值。创建属性时，WebGL层会分配其他属性。</p> + +<p>无论怎样，都需要你使用<code>enableVertexAttribArray()</code>方法，来激活每一个属性以便使用，不被激活的属性是不会被使用的。一旦激活，以下其他方法就可以获取到属性的值了，包括{{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}，{{domxref("WebGLRenderingContext.vertexAttrib", "vertexAttrib*()")}}，和 {{domxref("WebGLRenderingContext.getVertexAttrib", "getVertexAttrib()")}}。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var>gl</var>.enableVertexAttribArray(<var>index</var>); +</pre> + +<h3 id="参数">参数</h3> + +<p><code>index</code></p> + +<dl> + <dd>类型为{{domxref("GLuint")}} 的索引，指向要激活的顶点属性。如果您只知道属性的名称，不知道索引，您可以使用以下方法来获取索引{{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}.</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p><code>undefined</code>.</p> + +<h3 id="错误">错误</h3> + +<p>您可以使用{{domxref("WebGLRenderingContext.getError", "getError()")}}方法，来检查使用<code>enableVertexAttribArray()</code>时发生的错误。</p> + +<dl> + <dt><code>WebGLRenderingContext.INVALID_VALUE</code></dt> + <dd>非法的 <code>index</code> 。一般是 <code>index</code> 大于或等于了顶点属性列表允许的最大值。该值可以通过 <code>WebGLRenderingContext.MAX_VERTEX_ATTRIBS</code>获取。</dd> +</dl> + +<h2 id="例子">例子</h2> + +<p>该例子是 <a href="/en-US/docs/Web/API/WebGL_API/Basic_2D_animation_example">A basic 2D WebGL animation example</a> 中的一部分，用以说明 <code>enableVertexArray()</code> 是如何激活顶点属性，并将顶点数据传输到shader函数的。</p> + +<pre class="brush: js highlight[6]">gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); + +aVertexPosition = + gl.getAttribLocation(shaderProgram, "aVertexPosition"); + +gl.enableVertexAttribArray(aVertexPosition); +gl.vertexAttribPointer(aVertexPosition, vertexNumComponents, + gl.FLOAT, false, 0, 0); + +gl.drawArrays(gl.TRIANGLES, 0, vertexCount);</pre> + +<div class="callout-box">该段代码来自于 "A basic 2D WebGL animation example." 中的 <a href="/en-US/docs/Web/API/WebGL_API/Basic_2D_animation_example#Drawing_and_animating_the_scene">the function <code>animateScene()</code></a> 。 通过连接来查看全文，您可以查看产生的动画效果。</div> + +<p>以上代码中，使用了{{domxref("WebGLRenderingContext.bindBuffer", "bindBuffer()")}}来设置将用于绘图的顶点数据的缓存。然后使用{{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}来获取顶点数据在shader函数中的索引。</p> + +<p>我们用 <code>enableVertexAttribArray()</code> 函数来激活 <code>aVertexPosition</code>中记录的索引位置，以便在后面对该顶点属性进行数据绑定。</p> + +<p>使用{{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}} 将缓存数据绑定到shader函数中的顶点属性。于是，我们可以通过{{domxref("WebGLRenderingContext.drawArrays", "drawArrays()")}}函数将顶点一一绘制。</p> + +<h2 id="Specifications">Specifications</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.10", "enableVertexAttribArray")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glEnableVertexAttribArray.xml", "glEnableVertexAttribArray")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.enableVertexAttribArray")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/WebGL_API/Data">Data in WebGL</a></li> + <li><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context">Adding 2D content to a WebGL context</a></li> + <li><a href="/en-US/docs/Web/API/WebGL_API/Basic_2D_animation_example">A basic 2D WebGL animation sample</a></li> + <li>{{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/getattriblocation/index.html b/files/zh-cn/web/api/webglrenderingcontext/getattriblocation/index.html new file mode 100644 index 0000000000..fb8cd90aa8 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/getattriblocation/index.html @@ -0,0 +1,65 @@ +--- +title: WebGLRenderingContext.getAttribLocation() +slug: Web/API/WebGLRenderingContext/getAttribLocation +translation_of: Web/API/WebGLRenderingContext/getAttribLocation +--- +<div>{{APIRef("WebGL")}}</div> + +<p><strong><code>WebGLRenderingContext.getAttribLocation()</code></strong> 方法返回了给定{{domxref("WebGLProgram")}}对象中某属性的下标指向位置。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">GLint <var>gl</var>.getAttribLocation(<var>program</var>, <var>name</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>program</dt> + <dd>一个包含了属性参数的{{domxref("WebGLProgram")}} 对象。</dd> + <dt>name</dt> + <dd>需要获取下标指向位置的 {{domxref("DOMString")}} 属性参数名</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>表明属性位置的下标 {{domxref("GLint")}} 数字，如果找不到该属性则返回-1。</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">gl.getAttribLocation(program, 'vColor'); +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.10", "getAttribLocation")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>原始定义.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glGetAttribLocation.xml", "glGetAttribLocation")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL API的主页.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.getAttribLocation")}}</p> + +<h2 id="相关资料">相关资料</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.getUniformLocation()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/getcontextattributes/index.html b/files/zh-cn/web/api/webglrenderingcontext/getcontextattributes/index.html new file mode 100644 index 0000000000..a7eccd10a4 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/getcontextattributes/index.html @@ -0,0 +1,79 @@ +--- +title: WebGLRenderingContext.getContextAttributes() +slug: Web/API/WebGLRenderingContext/getContextAttributes +translation_of: Web/API/WebGLRenderingContext/getContextAttributes +--- +<div>{{APIRef("WebGL")}}</div> + +<p><code><strong>WebGLRenderingContext.getContextAttributes()</strong></code> 方法返回一个包含实际上下文参数的 <code>WebGLContextAttributes</code> 对象。如果上下文丢失，可能返回 {{jsxref("null")}}。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var><em>gl</em></var>.getContextAttributes();</pre> + +<h3 id="返回值">返回值</h3> + +<p>一个包含实际上下文参数的 <code>WebGLContextAttributes</code> 的对象，或 {{jsxref("null")}} （如果上下文丢失）。</p> + +<h2 id="实例">实例</h2> + +<p>给定 {{HTMLElement("canvas")}} 元素</p> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<p>和给定 WebGL 上下文</p> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var gl = canvas.getContext('webgl'); +gl.getContextAttributes(); +</pre> + +<p><code>getContextAttributes</code> 方法返回描述在此上下文中设置的属性的对象，例如：</p> + +<pre class="brush: js">{ + alpha: true, + antialias: true, + depth: true, + failIfMajorPerformanceCaveat: false, + premultipliedAlpha: true, + preserveDrawingBuffer: false, + stencil: false +}</pre> + +<p>上下文的属性可以在用 {{domxref("HTMLCanvasElement.getContext()")}} 方法创建上下文时设置：</p> + +<pre class="brush: js">canvas.getContext('webgl', + { antialias: false, + depth: false });</pre> + +<p>有关各个属性的更多信息，请参阅 {{domxref("HTMLCanvasElement.getContext()", "getContext()")}}。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + <tr> + <td>{{SpecName("WebGL", "#5.14.2", "WebGLRenderingContext.getContextAttributes")}}</td> + <td>{{Spec2("WebGL")}}</td> + <td>初始定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">此页面中的兼容性表格由结构化数据生成。 如果您想为数据做出贡献，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送合并请求。</p> + +<p>{{Compat("api.WebGLRenderingContext.getContextAttributes")}}</p> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/getextension/index.html b/files/zh-cn/web/api/webglrenderingcontext/getextension/index.html new file mode 100644 index 0000000000..2058a25943 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/getextension/index.html @@ -0,0 +1,73 @@ +--- +title: WebGLRenderingContext.getExtension() +slug: Web/API/WebGLRenderingContext/getExtension +tags: + - API + - WebGL + - WebGLRenderingContext + - 参考 + - 方法 +translation_of: Web/API/WebGLRenderingContext/getExtension +--- +<div>{{APIRef("WebGL")}}</div> + +<p><code><strong>WebGLRenderingContext.getExtension()</strong></code> 方法可以启用一个 <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> 扩展。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var><em>gl</em></var>.getExtension(name);</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>name</dt> + <dd>以 {{jsxref("String")}} 形式表示的需要启用的 WebGL 扩展的名称。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>一个 WebGL 扩展对象。如果扩展名称（区分大小写）与 {{domxref("WebGLRenderingContext.getSupportedExtensions")}} 中的任何结果都不匹配，则只会返回 {{jsxref("null")}} 。</p> + +<h2 id="示例">示例</h2> + +<p>当一个 WebGL 扩展被启用后，就可以使用该扩展提供的方法、属性和常量。</p> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +gl = canvas.getContext('webgl'); + +gl.getExtension('WEBGL_lose_context').loseContext(); +</pre> + +<h2 id="WebGL_扩展">WebGL 扩展</h2> + +<p>WebGL API 的扩展在 <a href="https://www.khronos.org/registry/webgl/extensions/">WebGL Extension Registry</a> 定义。目前支持的扩展如下：</p> + +<p>{{page("en-US/docs/Web/API/WebGL_API", "Extensions")}}</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.14", "WebGLRenderingContext.getExtension")}}</td> + <td>{{Spec2("WebGL")}}</td> + <td>初次定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{page("en-US/docs/Web/API/WebGL_API/Using_Extensions", "Browser_compatibility")}}</p> + +<h2 id="参阅">参阅</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.getSupportedExtensions()")}}</li> + <li><a href="http://webglreport.com">webglreport.com</a></li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/getparameter/index.html b/files/zh-cn/web/api/webglrenderingcontext/getparameter/index.html new file mode 100644 index 0000000000..371ce46ef3 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/getparameter/index.html @@ -0,0 +1,1009 @@ +--- +title: WebGLRenderingContext.getParameter() +slug: Web/API/WebGLRenderingContext/getParameter +tags: + - WebGL +translation_of: Web/API/WebGLRenderingContext/getParameter +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 的 <strong><code>WebGLRenderingContext.getParameter()</code></strong> 方法为传入的参数名称返回一个值。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">any <var>gl</var>.getParameter(<var>pname</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>pname</code></dt> + <dd>一个指定要返回哪个参数值的 {{domxref("GLenum")}}。请参阅下文的可能值。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>取决于参数。</p> + +<h2 id="参数名称">参数名称</h2> + +<h3 id="WebGL_1">WebGL 1</h3> + +<p>使用 {{domxref("WebGLRenderingContext")}} 时，您可以查询以下 <code>pname</code> 参数。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">常量</th> + <th scope="col">返回类型</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>gl.ACTIVE_TEXTURE</code></td> + <td>{{domxref("GLenum")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.ALIASED_LINE_WIDTH_RANGE</code></td> + <td>{{jsxref("Float32Array")}} (with 2 elements)</td> + <td> </td> + </tr> + <tr> + <td><code>gl.ALIASED_POINT_SIZE_RANGE</code></td> + <td>{{jsxref("Float32Array")}} (with 2 elements)</td> + <td> </td> + </tr> + <tr> + <td><code>gl.ALPHA_BITS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.ARRAY_BUFFER_BINDING</code></td> + <td>{{domxref("WebGLBuffer")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.BLEND</code></td> + <td>{{domxref("GLboolean")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.BLEND_COLOR</code></td> + <td>{{jsxref("Float32Array")}} (with 4 values)</td> + <td> </td> + </tr> + <tr> + <td><code>gl.BLEND_DST_ALPHA</code></td> + <td>{{domxref("GLenum")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.BLEND_DST_RGB</code></td> + <td>{{domxref("GLenum")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.BLEND_EQUATION</code></td> + <td>{{domxref("GLenum")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.BLEND_EQUATION_ALPHA</code></td> + <td>{{domxref("GLenum")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.BLEND_EQUATION_RGB</code></td> + <td>{{domxref("GLenum")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.BLEND_SRC_ALPHA</code></td> + <td>{{domxref("GLenum")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.BLEND_SRC_RGB</code></td> + <td>{{domxref("GLenum")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.BLUE_BITS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.COLOR_CLEAR_VALUE</code></td> + <td>{{jsxref("Float32Array")}} (with 4 values)</td> + <td> </td> + </tr> + <tr> + <td><code>gl.COLOR_WRITEMASK</code></td> + <td>sequence<{{domxref("GLboolean")}}> (with 4 values)</td> + <td> </td> + </tr> + <tr> + <td><code>gl.COMPRESSED_TEXTURE_FORMATS</code></td> + <td>{{jsxref("Uint32Array")}}</td> + <td>返回压缩的纹理格式。<br> + <br> + 当使用 {{domxref("WEBGL_compressed_texture_s3tc")}} 扩展时： + <ul> + <li><code>ext.COMPRESSED_RGB_S3TC_DXT1_EXT</code></li> + <li><code>ext.COMPRESSED_RGBA_S3TC_DXT1_EXT</code></li> + <li><code>ext.COMPRESSED_RGBA_S3TC_DXT3_EXT</code></li> + <li><code>ext.COMPRESSED_RGBA_S3TC_DXT5_EXT</code></li> + </ul> + + <p>当使用 {{domxref("WEBGL_compressed_texture_s3tc_srgb")}} 扩展时：</p> + + <ul> + <li><code>ext.COMPRESSED_SRGB_S3TC_DXT1_EXT</code></li> + <li><code>ext.COMPRESSED_SRGB_ALPHA_S3TC_DXT1_EXT</code></li> + <li><code>ext.COMPRESSED_SRGB_ALPHA_S3TC_DXT3_EXT</code></li> + <li><code>ext.COMPRESSED_SRGB_ALPHA_S3TC_DXT5_EXT</code></li> + </ul> + 当使用 {{domxref("WEBGL_compressed_texture_es3")}} 扩展时： + + <ul> + <li><code>ext.COMPRESSED_R11_EAC</code></li> + <li><code>ext.COMPRESSED_SIGNED_R11_EAC</code></li> + <li><code>ext.COMPRESSED_RG11_EAC</code></li> + <li><code>ext.COMPRESSED_SIGNED_RG11_EAC</code></li> + <li><code>ext.COMPRESSED_RGB8_ETC2</code></li> + <li><code>ext.COMPRESSED_RGBA8_ETC2_EAC</code></li> + <li><code>ext.COMPRESSED_SRGB8_ETC2</code></li> + <li><code>ext.COMPRESSED_SRGB8_ALPHA8_ETC2_EAC</code></li> + <li><code>ext.COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2</code></li> + <li><code>ext.COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2</code></li> + </ul> + 当使用 {{domxref("WEBGL_compressed_texture_pvrtc")}} 扩展时： + + <ul> + <li><code>ext.COMPRESSED_RGB_PVRTC_4BPPV1_IMG</code></li> + <li><code>ext.COMPRESSED_RGBA_PVRTC_4BPPV1_IMG</code></li> + <li><code>ext.COMPRESSED_RGB_PVRTC_2BPPV1_IMG</code></li> + <li><code>ext.COMPRESSED_RGBA_PVRTC_2BPPV1_IMG</code></li> + </ul> + 当使用 {{domxref("WEBGL_compressed_texture_etc1")}} 扩展时： + + <ul> + <li><code>ext.COMPRESSED_RGB_ETC1_WEBGL</code></li> + </ul> + 当使用 {{domxref("WEBGL_compressed_texture_atc")}} 扩展时： + + <ul> + <li><code>ext.COMPRESSED_RGB_ATC_WEBGL</code></li> + <li><code>ext.COMPRESSED_RGBA_ATC_EXPLICIT_ALPHA_WEBGL</code></li> + <li><code>ext.COMPRESSED_RGBA_ATC_INTERPOLATED_ALPHA_WEBGL</code></li> + </ul> + 当使用 {{domxref("WEBGL_compressed_texture_astc")}} 扩展时： + + <ul> + <li><code>ext.COMPRESSED_RGBA_ASTC_4x4_KHR<br> + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_4x4_KHR</code></li> + <li><code>ext.COMPRESSED_RGBA_ASTC_5x4_KHR<br> + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_5x4_KHR</code></li> + <li><code>ext.COMPRESSED_RGBA_ASTC_5x5_KHR<br> + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_5x5_KHR</code></li> + <li><code>ext.COMPRESSED_RGBA_ASTC_6x5_KHR<br> + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_6x5_KHR</code></li> + <li><code>ext.COMPRESSED_RGBA_ASTC_6x6_KHR<br> + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_6x6_KHR</code></li> + <li><code>ext.COMPRESSED_RGBA_ASTC_8x5_KHR<br> + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x5_KHR</code></li> + <li><code>ext.COMPRESSED_RGBA_ASTC_8x6_KHR<br> + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x6_KHR</code></li> + <li><code>ext.COMPRESSED_RGBA_ASTC_8x8_KHR<br> + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x8_KHR</code></li> + <li><code>ext.COMPRESSED_RGBA_ASTC_10x5_KHR<br> + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x5_KHR</code></li> + <li><code>ext.COMPRESSED_RGBA_ASTC_10x6_KHR<br> + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x6_KHR</code></li> + <li><code>ext.COMPRESSED_RGBA_ASTC_10x6_KHR<br> + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x6_KHR</code></li> + <li><code>ext.COMPRESSED_RGBA_ASTC_10x10_KHR<br> + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x10_KHR</code></li> + <li><code>ext.COMPRESSED_RGBA_ASTC_12x10_KHR<br> + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_12x10_KHR</code></li> + <li><code>ext.COMPRESSED_RGBA_ASTC_12x12_KHR<br> + ext.COMPRESSED_SRGB8_ALPHA8_ASTC_12x12_KHR</code></li> + </ul> + </td> + </tr> + <tr> + <td><code>gl.CULL_FACE</code></td> + <td>{{domxref("GLboolean")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.CULL_FACE_MODE</code></td> + <td>{{domxref("GLenum")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.CURRENT_PROGRAM</code></td> + <td>{{domxref("WebGLProgram")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.DEPTH_BITS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.DEPTH_CLEAR_VALUE</code></td> + <td>{{domxref("GLfloat")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.DEPTH_FUNC</code></td> + <td>{{domxref("GLenum")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.DEPTH_RANGE</code></td> + <td>{{jsxref("Float32Array")}} (with 2 elements)</td> + <td> </td> + </tr> + <tr> + <td><code>gl.DEPTH_TEST</code></td> + <td>{{domxref("GLboolean")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.DEPTH_WRITEMASK</code></td> + <td>{{domxref("GLboolean")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.DITHER</code></td> + <td>{{domxref("GLboolean")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.ELEMENT_ARRAY_BUFFER_BINDING</code></td> + <td>{{domxref("WebGLBuffer")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.FRAMEBUFFER_BINDING</code></td> + <td>{{domxref("WebGLFramebuffer")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.FRONT_FACE</code></td> + <td>{{domxref("GLenum")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.GENERATE_MIPMAP_HINT</code></td> + <td>{{domxref("GLenum")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.GREEN_BITS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.IMPLEMENTATION_COLOR_READ_FORMAT</code></td> + <td>{{domxref("GLenum")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.IMPLEMENTATION_COLOR_READ_TYPE</code></td> + <td>{{domxref("GLenum")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.LINE_WIDTH</code></td> + <td>{{domxref("GLfloat")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_CUBE_MAP_TEXTURE_SIZE</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_FRAGMENT_UNIFORM_VECTORS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_RENDERBUFFER_SIZE</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_TEXTURE_IMAGE_UNITS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_TEXTURE_SIZE</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_VARYING_VECTORS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_VERTEX_ATTRIBS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_VERTEX_UNIFORM_VECTORS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_VIEWPORT_DIMS</code></td> + <td>{{jsxref("Int32Array")}} (with 2 elements)</td> + <td> </td> + </tr> + <tr> + <td><code>gl.PACK_ALIGNMENT</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.POLYGON_OFFSET_FACTOR</code></td> + <td>{{domxref("GLfloat")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.POLYGON_OFFSET_FILL</code></td> + <td>{{domxref("GLboolean")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.POLYGON_OFFSET_UNITS</code></td> + <td>{{domxref("GLfloat")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.RED_BITS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.RENDERBUFFER_BINDING</code></td> + <td>{{domxref("WebGLRenderbuffer")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.RENDERER</code></td> + <td>{{domxref("DOMString")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.SAMPLE_BUFFERS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.SAMPLE_COVERAGE_INVERT</code></td> + <td>{{domxref("GLboolean")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.SAMPLE_COVERAGE_VALUE</code></td> + <td>{{domxref("GLfloat")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.SAMPLES</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.SCISSOR_BOX</code></td> + <td>{{jsxref("Int32Array")}} (with 4 elements)</td> + <td> </td> + </tr> + <tr> + <td><code>gl.SCISSOR_TEST</code></td> + <td>{{domxref("GLboolean")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.SHADING_LANGUAGE_VERSION</code></td> + <td>{{domxref("DOMString")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.STENCIL_BACK_FAIL</code></td> + <td>{{domxref("GLenum")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.STENCIL_BACK_FUNC</code></td> + <td>{{domxref("GLenum")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.STENCIL_BACK_PASS_DEPTH_FAIL</code></td> + <td>{{domxref("GLenum")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.STENCIL_BACK_PASS_DEPTH_PASS</code></td> + <td>{{domxref("GLenum")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.STENCIL_BACK_REF</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.STENCIL_BACK_VALUE_MASK</code></td> + <td>{{domxref("GLuint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.STENCIL_BACK_WRITEMASK</code></td> + <td>{{domxref("GLuint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.STENCIL_BITS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.STENCIL_CLEAR_VALUE</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.STENCIL_FAIL</code></td> + <td>{{domxref("GLenum")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.STENCIL_FUNC</code></td> + <td>{{domxref("GLenum")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.STENCIL_PASS_DEPTH_FAIL</code></td> + <td>{{domxref("GLenum")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.STENCIL_PASS_DEPTH_PASS</code></td> + <td>{{domxref("GLenum")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.STENCIL_REF</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.STENCIL_TEST</code></td> + <td>{{domxref("GLboolean")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.STENCIL_VALUE_MASK</code></td> + <td>{{domxref("GLuint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.STENCIL_WRITEMASK</code></td> + <td>{{domxref("GLuint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.SUBPIXEL_BITS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.TEXTURE_BINDING_2D</code></td> + <td>{{domxref("WebGLTexture")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.TEXTURE_BINDING_CUBE_MAP</code></td> + <td>{{domxref("WebGLTexture")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.UNPACK_ALIGNMENT</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.UNPACK_COLORSPACE_CONVERSION_WEBGL</code></td> + <td>{{domxref("GLenum")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.UNPACK_FLIP_Y_WEBGL</code></td> + <td>{{domxref("GLboolean")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL</code></td> + <td>{{domxref("GLboolean")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.VENDOR</code></td> + <td>{{domxref("DOMString")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.VERSION</code></td> + <td>{{domxref("DOMString")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.VIEWPORT</code></td> + <td>{{jsxref("Int32Array")}} (with 4 elements)</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="WebGL_2">WebGL 2</h3> + +<p>使用 {{domxref("WebGL2RenderingContext")}} 时，您可以查询以下 <code>pname</code> 参数。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">常量</th> + <th scope="col">返回类型</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>gl.COPY_READ_BUFFER_BINDING</code></td> + <td>{{domxref("WebGLBuffer")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.COPY_WRITE_BUFFER_BINDING</code></td> + <td>{{domxref("WebGLBuffer")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.DRAW_BUFFER<em>i</em></code></td> + <td>{{domxref("GLenum")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.DRAW_FRAMEBUFFER_BINDING</code></td> + <td>{{domxref("WebGLFramebuffer")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.FRAGMENT_SHADER_DERIVATIVE_HINT</code></td> + <td>{{domxref("GLenum")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_3D_TEXTURE_SIZE</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_ARRAY_TEXTURE_LAYERS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_CLIENT_WAIT_TIMEOUT_WEBGL</code></td> + <td>{{domxref("GLint64")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_COLOR_ATTACHMENTS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_COMBINED_FRAGMENT_UNIFORM_COMPONENTS</code></td> + <td>{{domxref("GLint64")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_COMBINED_UNIFORM_BLOCKS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_COMBINED_VERTEX_UNIFORM_COMPONENTS</code></td> + <td>{{domxref("GLint64")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_DRAW_BUFFERS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_ELEMENT_INDEX</code></td> + <td>{{domxref("GLint64")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_ELEMENTS_INDICES</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_ELEMENTS_VERTICES</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_FRAGMENT_INPUT_COMPONENTS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_FRAGMENT_UNIFORM_BLOCKS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_FRAGMENT_UNIFORM_COMPONENTS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_PROGRAM_TEXEL_OFFSET</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_SAMPLES</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_SERVER_WAIT_TIMEOUT</code></td> + <td>{{domxref("GLint64")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_TEXTURE_LOD_BIAS</code></td> + <td>{{domxref("GLfloat")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_TRANSFORM_FEEDBACK_INTERLEAVED_COMPONENTS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_TRANSFORM_FEEDBACK_SEPARATE_ATTRIBS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_TRANSFORM_FEEDBACK_SEPARATE_COMPONENTS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_UNIFORM_BLOCK_SIZE</code></td> + <td>{{domxref("GLint64")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_UNIFORM_BUFFER_BINDINGS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_VARYING_COMPONENTS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_VERTEX_OUTPUT_COMPONENTS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_VERTEX_UNIFORM_BLOCKS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MAX_VERTEX_UNIFORM_COMPONENTS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.MIN_PROGRAM_TEXEL_OFFSET</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.PACK_ROW_LENGTH</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.PACK_SKIP_PIXELS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.PACK_SKIP_ROWS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.PIXEL_PACK_BUFFER_BINDING</code></td> + <td>{{domxref("WebGLBuffer")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.PIXEL_UNPACK_BUFFER_BINDING</code></td> + <td>{{domxref("WebGLBuffer")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.RASTERIZER_DISCARD</code></td> + <td>{{domxref("GLboolean")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.READ_BUFFER</code></td> + <td>{{domxref("GLenum")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.READ_FRAMEBUFFER_BINDING</code></td> + <td>{{domxref("WebGLFramebuffer")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.SAMPLE_ALPHA_TO_COVERAGE</code></td> + <td>{{domxref("GLboolean")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.SAMPLE_COVERAGE</code></td> + <td>{{domxref("GLboolean")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.SAMPLER_BINDING</code></td> + <td>{{domxref("WebGLSampler")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.TEXTURE_BINDING_2D_ARRAY</code></td> + <td>{{domxref("WebGLTexture")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.TEXTURE_BINDING_3D</code></td> + <td>{{domxref("WebGLTexture")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.TRANSFORM_FEEDBACK_ACTIVE</code></td> + <td>{{domxref("GLboolean")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.TRANSFORM_FEEDBACK_BINDING</code></td> + <td>{{domxref("WebGLTransformFeedback")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.TRANSFORM_FEEDBACK_BUFFER_BINDING</code></td> + <td>{{domxref("WebGLBuffer")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.TRANSFORM_FEEDBACK_PAUSED</code></td> + <td>{{domxref("GLboolean")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.UNIFORM_BUFFER_BINDING</code></td> + <td>{{domxref("WebGLBuffer")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.UNIFORM_BUFFER_OFFSET_ALIGNMENT</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.UNPACK_IMAGE_HEIGHT</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.UNPACK_ROW_LENGTH</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.UNPACK_SKIP_IMAGES</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.UNPACK_SKIP_PIXELS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.UNPACK_SKIP_ROWS</code></td> + <td>{{domxref("GLint")}}</td> + <td> </td> + </tr> + <tr> + <td><code>gl.VERTEX_ARRAY_BINDING</code></td> + <td>{{domxref("WebGLVertexArrayObject")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="WebGL_扩展">WebGL 扩展</h3> + +<p>当使用 <a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">WebGL 扩展</a> 时，您可以查询以下 <code>pname</code> 参数：</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">常量</th> + <th scope="col">返回类型</th> + <th scope="col">扩展</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT</code></td> + <td>{{domxref("GLfloat")}}</td> + <td>{{domxref("EXT_texture_filter_anisotropic")}}</td> + <td>最大可用各向异性。</td> + </tr> + <tr> + <td><code>ext.FRAGMENT_SHADER_DERIVATIVE_HINT_OES</code></td> + <td>{{domxref("GLenum")}}</td> + <td>{{domxref("OES_standard_derivatives")}}</td> + <td>GLSL 内置函数的导数计算精度：<code>dFdx</code>、 <code>dFdy</code> 和 <code>fwidth</code>。</td> + </tr> + <tr> + <td><code>ext.MAX_COLOR_ATTACHMENTS_WEBGL</code></td> + <td>{{domxref("GLint")}}</td> + <td>{{domxref("WEBGL_draw_buffers")}}</td> + <td>帧缓冲区颜色附着点的最大数量。</td> + </tr> + <tr> + <td><code>ext.MAX_DRAW_BUFFERS_WEBGL</code></td> + <td>{{domxref("GLint")}}</td> + <td>{{domxref("WEBGL_draw_buffers")}}</td> + <td>绘图缓冲区的最大数量。</td> + </tr> + <tr> + <td><code>ext.DRAW_BUFFER0_WEBGL<br> + ext.DRAW_BUFFER1_WEBGL<br> + ext.DRAW_BUFFER2_WEBGL<br> + ext.DRAW_BUFFER3_WEBGL<br> + ext.DRAW_BUFFER4_WEBGL<br> + ext.DRAW_BUFFER5_WEBGL<br> + ext.DRAW_BUFFER6_WEBGL<br> + ext.DRAW_BUFFER7_WEBGL<br> + ext.DRAW_BUFFER8_WEBGL<br> + ext.DRAW_BUFFER9_WEBGL<br> + ext.DRAW_BUFFER10_WEBGL<br> + ext.DRAW_BUFFER11_WEBGL<br> + ext.DRAW_BUFFER12_WEBGL<br> + ext.DRAW_BUFFER13_WEBGL<br> + ext.DRAW_BUFFER14_WEBGL<br> + ext.DRAW_BUFFER15_WEBGL</code></td> + <td>{{domxref("GLenum")}}</td> + <td>{{domxref("WEBGL_draw_buffers")}}</td> + <td>绘图缓冲区。</td> + </tr> + <tr> + <td><code>ext.VERTEX_ARRAY_BINDING_OES</code></td> + <td>{{domxref("WebGLVertexArrayObjectOES")}}</td> + <td>{{domxref("OES_vertex_array_object")}}</td> + <td>绑定的顶点数组对象（VAO）。</td> + </tr> + <tr> + <td><code>ext.TIMESTAMP_EXT</code></td> + <td>{{domxref("GLuint64EXT")}}</td> + <td> + <p>{{domxref("EXT_disjoint_timer_query")}}</p> + </td> + <td>当前时间。</td> + </tr> + <tr> + <td><code>ext.GPU_DISJOINT_EXT</code></td> + <td>{{domxref("GLboolean")}}</td> + <td>{{domxref("EXT_disjoint_timer_query")}}</td> + <td> + <p>返回 GPU 是否执行了任何不相交的操作。</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">gl.getParameter(gl.DITHER); +gl.getParameter(gl.VERSION); +gl.getParameter(gl.VIEWPORT); +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.3", "getParameter")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初始定义。</td> + </tr> + <tr> + <td>{{SpecName('WebGL2', "#3.7.2", "getParameter")}}</td> + <td>{{Spec2('WebGL2')}}</td> + <td>添加额外的参数名称。</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glGet.xml", "glGet")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>（类似的）OpenGL API的手册页。</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">此页面中的兼容性表格由结构化数据生成。 如果您想为数据做出贡献，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们提交合并请求。</p> + +<p>{{Compat("api.WebGLRenderingContext.getParameter")}}</p> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.enable()")}}</li> + <li>{{domxref("WebGLRenderingContext.disable()")}}</li> + <li>{{domxref("EXT_texture_filter_anisotropic")}}</li> + <li>{{domxref("OES_standard_derivatives")}}</li> + <li>{{domxref("WEBGL_draw_buffers")}}</li> + <li>{{domxref("EXT_disjoint_timer_query")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/getprograminfolog/index.html b/files/zh-cn/web/api/webglrenderingcontext/getprograminfolog/index.html new file mode 100644 index 0000000000..8ba38fdf5e --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/getprograminfolog/index.html @@ -0,0 +1,80 @@ +--- +title: WebGLRenderingContext.getProgramInfoLog() +slug: Web/API/WebGLRenderingContext/getProgramInfoLog +translation_of: Web/API/WebGLRenderingContext/getProgramInfoLog +--- +<div>{{APIRef("WebGL")}}</div> + +<p><strong>WebGLRenderingContext.getProgramInfoLog</strong> 返回参数中指定的{{domxref("WebGLProgram")}} object 的信息. 这些信息包括在linking过程中的错误以及 <code>WebGLProgram</code> objects 合法性检查的错误.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">gl.getProgramInfoLog(program);</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt>program</dt> + <dd>A {{domxref("WebGLProgram")}} to query.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>返回 {{domxref("DOMString")}} 包含 diagnostic , warning ...等等关于上一次linking和valiadation操作的信息. 对于刚刚创建的{{domxref("WebGLProgram")}} object , 返回一个空字符串.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Checking_program_errors">Checking program errors</h3> + +<pre class="brush: js">var canvas = document.getElementsById('canvas'); +var gl = canvas.getContext('webgl'); +var program = gl.createProgram(); + +//vsSource is the source-code-string of vertex-shader +//fsSource is the source-code-string of fragment-shader +var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource); +var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource); + +// Attach pre-existing shaders +gl.attachShader(program, vertexShader); +gl.attachShader(program, fragmentShader); + +gl.linkProgram(program); + +gl.getProgramInfoLog(program); +</pre> + +<h2 id="Specifications">Specifications</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.9", "getProgramInfoLog")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glGetProgramInfoLog.xml", "glGetProgramInfoLog")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.getProgramInfoLog")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li> + <li>{{domxref("WebGLRenderingContext.getError()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/getprogramparameter/index.html b/files/zh-cn/web/api/webglrenderingcontext/getprogramparameter/index.html new file mode 100644 index 0000000000..91cba90cc1 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/getprogramparameter/index.html @@ -0,0 +1,89 @@ +--- +title: WebGLRenderingContext.getProgramParameter() +slug: Web/API/WebGLRenderingContext/getProgramParameter +translation_of: Web/API/WebGLRenderingContext/getProgramParameter +--- +<div>{{APIRef("WebGL")}}</div> + +<p><strong><code>WebGLRenderingContext.getProgramParameter()</code></strong> 方法返回<code><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLProgram" title="The WebGLProgram is part of the WebGL API and is a combination of two compiled WebGLShaders consisting of a vertex shader and a fragment shader (both written in GLSL).">WebGLProgram</a>的信息。</code></p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">any <var>gl</var>.getProgramParameter(<var>program</var>, <var>pname</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>program</dt> + <dd>A {{domxref("WebGLProgram")}} to get parameter information from.</dd> + <dt>pname</dt> + <dd>A {{domxref("Glenum")}} specifying the information to query. Possible values: + <ul> + <li><code>gl.DELETE_STATUS</code>: Returns a {{domxref("GLboolean")}} indicating whether or not the program is flagged for deletion.</li> + <li><code>gl.LINK_STATUS</code>: Returns a {{domxref("GLboolean")}} indicating whether or not the last link operation was successful.</li> + <li><code>gl.VALIDATE_STATUS</code>: Returns a {{domxref("GLboolean")}} indicating whether or not the last validation operation was successful.</li> + <li><code>gl.ATTACHED_SHADERS</code>: Returns a {{domxref("GLint")}} indicating the number of attached shaders to a program.</li> + <li><code>gl.ACTIVE_ATTRIBUTES</code>: Returns a {{domxref("GLint")}} indicating the number of active attribute variables to a program.</li> + <li><code>gl.ACTIVE_UNIFORMS</code>: Returns a {{domxref("GLint")}} indicating the number of active uniform variables to a program.</li> + <li>When using a {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, the following values are available additionally: + <ul> + <li><code>gl.TRANSFORM_FEEDBACK_BUFFER_MODE</code>: Returns a {{domxref("GLenum")}} indicating the buffer mode when transform feedback is active. May be <code>gl.SEPARATE_ATTRIBS</code> or <code>gl.INTERLEAVED_ATTRIBS</code>.</li> + <li><code>gl.TRANSFORM_FEEDBACK_VARYINGS</code>: Returns a {{domxref("GLint")}} indicating the number of varying variables to capture in transform feedback mode.</li> + <li><code>gl.ACTIVE_UNIFORM_BLOCKS</code>: Returns a {{domxref("GLint")}} indicating the number of uniform blocks containing active uniforms.</li> + </ul> + </li> + </ul> + </dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>Returns the requested program information (as specified with <code>pname</code>).</p> + +<h2 id="例子">例子</h2> + +<pre class="brush: js">gl.getProgramParameter(program, gl.DELETE_STATUS); +</pre> + +<h2 id="Specifications">Specifications</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.9", "getProgramParameter")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glGetProgramiv.xml", "glGetProgramiv")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the (similar) OpenGL API.</td> + </tr> + <tr> + <td>{{SpecName('WebGL2', "#3.7.7", "getProgramParameter")}}</td> + <td>{{Spec2('WebGL2')}}</td> + <td>Adds new <code>pname</code> values:<br> + <code>gl.TRANSFORM_FEEDBACK_BUFFER_MODE</code>,<br> + <code>gl.TRANSFORM_FEEDBACK_VARYINGS</code>,<br> + <code>gl.ACTIVE_UNIFORM_BLOCKS</code></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.getProgramParameter")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/getshaderparameter/index.html b/files/zh-cn/web/api/webglrenderingcontext/getshaderparameter/index.html new file mode 100644 index 0000000000..f9e76ea261 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/getshaderparameter/index.html @@ -0,0 +1,72 @@ +--- +title: WebGLRenderingContext.getShaderParameter() +slug: Web/API/WebGLRenderingContext/getShaderParameter +translation_of: Web/API/WebGLRenderingContext/getShaderParameter +--- +<div>{{APIRef("WebGL")}}</div> + +<p><strong><code>WebGLRenderingContext.getShaderParameter()</code></strong> 返回给定的着色器信息</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">any <var>gl</var>.getShaderParameter(<var>shader</var>, <var>pname</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>shader</dt> + <dd>需要获取信息的着色器对象</dd> + <dt>pname</dt> + <dd>指定要查询的信息属性名称</dd> + <dd>values: + <ul> + <li><code>gl.DELETE_STATUS</code>:标示着色器是否被删除，删除（<strong>GL_TRUE</strong>）未删除（<strong>GL_FALSE</strong>）.</li> + <li><code>gl.COMPILE_STATUS</code>: 标示着色器是否编译成功，是（<strong>GL_TRUE</strong>）不是（<strong>GL_FALSE</strong>）</li> + <li><code>gl.SHADER_TYPE</code>: 标示着色器类型，是顶点着色器(<code>gl.VERTEX_SHADER</code>)还是片段着色器(<code>gl.FRAGMENT_SHADER</code>)</li> + </ul> + </dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>返回对应着色器属性信息</p> + +<h2 id="例子">例子</h2> + +<pre class="brush: js">gl.getShaderParameter(shader, gl.SHADER_TYPE); +</pre> + +<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.9", "getShaderParameter")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glGetShaderiv.xml", "glGetShaderiv")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the (similar) OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.getShaderParameter")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/getshadersource/index.html b/files/zh-cn/web/api/webglrenderingcontext/getshadersource/index.html new file mode 100644 index 0000000000..377ff49e8d --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/getshadersource/index.html @@ -0,0 +1,67 @@ +--- +title: WebGLRenderingContext.getShaderSource() +slug: Web/API/WebGLRenderingContext/getShaderSource +translation_of: Web/API/WebGLRenderingContext/getShaderSource +--- +<div>{{APIRef("WebGL")}}</div> + +<div><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 中的 <strong><code>WebGLRenderingContext.getShaderSource()</code></strong> 方法以{{domxref("DOMString")}}的形式返回了一个{{domxref("WebGLShader")}}的源码。</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">DOMString <var>gl</var>.getShaderSource(<var>shader</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>shader</dt> + <dd>要获取源码的 {{domxref("WebGLShader")}} 对象</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>一个包含了指定着色器的源码的 {{domxref("DOMString")}} 。</p> + +<h2 id="例子">例子</h2> + +<pre class="brush: js">var shader = gl.createShader(gl.VERTEX_SHADER); +gl.shaderSource(shader, originalSource); + +var source = gl.getShaderSource(shader);</pre> + +<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.9", "getShaderSource")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初始定义</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glGetShaderSource.xml", "glGetShaderSource")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>（类似） OpenGL API的手册</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.getShaderSource")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.createShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.isShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/getsupportedextensions/index.html b/files/zh-cn/web/api/webglrenderingcontext/getsupportedextensions/index.html new file mode 100644 index 0000000000..f203803fdf --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/getsupportedextensions/index.html @@ -0,0 +1,538 @@ +--- +title: WebGLRenderingContext.getSupportedExtensions() +slug: Web/API/WebGLRenderingContext/getSupportedExtensions +translation_of: Web/API/WebGLRenderingContext/getSupportedExtensions +--- +<div>{{APIRef("WebGL")}}</div> + +<p>这个 <strong><font face="Courier New">WebGLRenderingContext.getSupportedExtensions()</font></strong> 方法返回一个所有的支持<a href="/en-US/docs/Web/API/WebGL_API"><u><font color="#0066cc">WebGL</font></u></a> 扩展的列表。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var><em>gl</em></var>.getSupportedExtensions();</pre> + +<h3 id="返回值">返回值</h3> + +<p>一个字符串 {{jsxref("Array")}} 数组，包含所有支持 WebGL 的扩展。</p> + +<h2 id="示例代码">示例代码</h2> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +gl = canvas.getContext("webgl"); + +var extensions = gl.getSupportedExtensions(); +// Array [ "ANGLE_instanced_arrays", "EXT_blend_minmax", ... ] +</pre> + +<p>浏览 {{domxref("WebGLRenderingContext.getExtension()")}} 方法得到一个特定的扩展对象。</p> + +<h2 id="WebGL_扩展">WebGL 扩展</h2> + +<p>所有WebGL API 扩展都被注册在 <a href="https://www.khronos.org/registry/webgl/extensions/">WebGL Extension Registry</a> 中。当前的扩展是：</p> + +<p>{{page("en-US/docs/Web/API/WebGL_API", "Extension_interfaces")}}</p> + +<h2 id="规格说明书">规格说明书</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规格说明书</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + <tr> + <td>{{SpecName("WebGL", "#5.14.14", "WebGLRenderingContext.getSupportedExtensions")}}</td> + <td>{{Spec2("WebGL")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>9</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>11</td> + <td>12</td> + <td>5.1</td> + </tr> + <tr> + <td><code>ANGLE_instanced_arrays</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("33.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>EXT_blend_minmax</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("33.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>EXT_color_buffer_half_float</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("30.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>EXT_disjoint_timer_query</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("41.0")}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>EXT_frag_depth</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("30.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>EXT_sRGB</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("28.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>EXT_shader_texture_lod</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("34.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>EXT_texture_filter_anisotropic</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("17.0")}} [2]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>OES_element_index_uint</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("24.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>OES_standard_derivatives</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("10.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>OES_texture_float</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>OES_texture_float_linear</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("24.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>OES_texture_half_float</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("29.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>OES_texture_half_float_linear</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("30.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>OES_vertex_array_object</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("25.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>WEBGL_color_buffer_float</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("30.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>WEBGL_compressed_texture_atc</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("18.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>WEBGL_compressed_texture_etc1</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("30.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>WEBGL_compressed_texture_pvrtc</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("18.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>WEBGL_compressed_texture_s3tc</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("15.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>WEBGL_debug_renderer_info</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("19.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>WEBGL_debug_shaders</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("30.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>WEBGL_depth_texture</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("17.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>WEBGL_draw_buffers</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("28.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>WEBGL_lose_context</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("19.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>25</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>12</td> + <td>8.1</td> + </tr> + <tr> + <td><code>ANGLE_instanced_arrays</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>EXT_blend_minmax</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>EXT_color_buffer_half_float</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>EXT_disjoint_timer_query</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>EXT_frag_depth</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>EXT_sRGB</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>EXT_shader_texture_lod</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>EXT_texture_filter_anisotropic</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>OES_element_index_uint</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>OES_standard_derivatives</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>OES_texture_float</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>OES_texture_float_linear</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>OES_texture_half_float</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>OES_texture_half_float_linear</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>OES_vertex_array_object</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>WEBGL_color_buffer_float</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>WEBGL_compressed_texture_atc</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>WEBGL_compressed_texture_etc1</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>WEBGL_compressed_texture_pvrtc</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>WEBGL_compressed_texture_s3tc</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>WEBGL_debug_renderer_info</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>WEBGL_debug_shaders</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>WEBGL_depth_texture</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>WEBGL_draw_buffers</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>WEBGL_lose_context</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Toggling the <code>webgl.enable-draft-extensions</code> preference in about:config is required.</p> + +<p>[2] This was prefixed as <code>MOZ_EXT_texture_filter_anisotropic</code> in prior versions.</p> + +<h2 id="浏览其他相关资源">浏览其他相关资源</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.getExtension()")}}</li> + <li><a href="http://webglreport.com">webglreport.com</a></li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/gettexparameter/index.html b/files/zh-cn/web/api/webglrenderingcontext/gettexparameter/index.html new file mode 100644 index 0000000000..b37ddcbe37 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/gettexparameter/index.html @@ -0,0 +1,203 @@ +--- +title: WebGLRenderingContext.getTexParameter() +slug: Web/API/WebGLRenderingContext/getTexParameter +tags: + - API + - WebGL + - WebGL渲染上下文 + - 引用 + - 方法 + - 纹理 +translation_of: Web/API/WebGLRenderingContext/getTexParameter +--- +<div>{{APIRef("WebGL")}}</div> + +<p><strong><code>WebGLRenderingContext.getTexParameter()</code></strong> 此<a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a>方法返回特定的纹理信息。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">any <var>gl</var>.getTexParameter(<var>target</var>, <var>pname</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>target</dt> + <dd>一个 {{domxref("GLenum")}} 接口类型的绑定的点(target). 可能的值有: + <ul> + <li><code>gl.TEXTURE_2D</code>: 一个二维纹理.</li> + <li><code>gl.TEXTURE_CUBE_MAP</code>: 一个立方体纹理.</li> + <li>当使用 {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}接口, 可能会出现以下值: + <ul> + <li><code>gl.TEXTURE_3D</code>: 一个三维纹理.</li> + <li><code>gl.TEXTURE_2D_ARRAY</code>: 一个二维纹理数组.</li> + </ul> + </li> + </ul> + </dd> + <dt>pname</dt> + <dd>一个{{domxref("Glenum")}}接口类型的要查询的信息. 可能的值有: + <table class="standard-table"> + <thead> + <tr> + <th scope="col">pname</th> + <th scope="col">返回的类型</th> + <th scope="col">描述</th> + <th scope="col">可能返回的值</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4">可用的WebGL 1的上下文</th> + </tr> + <tr> + <td><code>gl.TEXTURE_MAG_FILTER</code></td> + <td>{{domxref("GLenum")}}</td> + <td>纹理的放大滤镜</td> + <td><code>gl.LINEAR</code> (default value), <code>gl.NEAREST</code>.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_MIN_FILTER</code></td> + <td>{{domxref("GLenum")}}</td> + <td>纹理的缩小滤镜</td> + <td><code>gl.LINEAR</code>, <code>gl.NEAREST</code>, <code>gl.NEAREST_MIPMAP_NEAREST</code>, <code>gl.LINEAR_MIPMAP_NEAREST</code>, <code>gl.NEAREST</code>_MIPMAP_LINEAR (default value), <code>gl.LINEAR_MIPMAP_LINEAR</code>.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_WRAP_S</code></td> + <td>{{domxref("GLenum")}}</td> + <td> + <p>封装的纹理坐标方法<code>s（对应u坐标）</code></p> + </td> + <td><code>gl.REPEAT</code> (default value), <code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_WRAP_T</code></td> + <td>{{domxref("GLenum")}}</td> + <td>封装的纹理坐标方法 <code>t（对应v坐标）</code></td> + <td><code>gl.REPEAT</code> (default value), <code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td> + </tr> + <tr> + <th colspan="4">使用 {{domxref("EXT_texture_filter_anisotropic")}} 接口增加可用的扩展方法/属性</th> + </tr> + <tr> + <td><code>ext.TEXTURE_MAX_ANISOTROPY_EXT</code></td> + <td>{{domxref("GLfloat")}}</td> + <td>纹理所有方向的最大值</td> + <td>一个浮点型的任意值.</td> + </tr> + <tr> + <th colspan="4">使用WebGL 2上下文之后增加的可用方法/属性</th> + </tr> + <tr> + <td><code>gl.TEXTURE_BASE_LEVEL</code></td> + <td>{{domxref("GLint")}}</td> + <td>纹理贴图层级</td> + <td>一个整型任意值.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_COMPARE_FUNC</code></td> + <td>{{domxref("GLenum")}}</td> + <td>比较方法</td> + <td><code>gl.LEQUAL</code> (default value), <code>gl.GEQUAL</code>, <code>gl.LESS</code>, <code>gl.GREATER</code>, <code>gl.EQUAL</code>, <code>gl.NOTEQUAL</code>, <code>gl.ALWAYS</code>, <code>gl.NEVER</code>.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_COMPARE_MODE</code></td> + <td>{{domxref("GLenum")}}</td> + <td>纹理的比较模式</td> + <td><code>gl.NONE</code> (default value), <code>gl.COMPARE_REF_TO_TEXTURE</code>.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_IMMUTABLE_FORMAT</code></td> + <td>{{domxref("GLboolean")}}</td> + <td>纹理的格式和尺寸是否可变</td> + <td>true 或者 false.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_IMMUTABLE_LEVELS</code></td> + <td>{{domxref("GLuint")}}</td> + <td>纹理的可变等级</td> + <td>无符号整型任意值.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_MAX_LEVEL</code></td> + <td>{{domxref("GLint")}}</td> + <td>贴图数组层级的最大值</td> + <td>整型任意值.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_MAX_LOD</code></td> + <td>{{domxref("GLfloat")}}</td> + <td>纹理细致程度的最大值</td> + <td>浮点型任意值.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_MIN_LOD</code></td> + <td>{{domxref("GLfloat")}}</td> + <td>纹理细致程度的最小值</td> + <td>浮点型任意值.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_WRAP_R</code></td> + <td>{{domxref("GLenum")}}</td> + <td>封装的纹理坐标方法 <code>r</code></td> + <td><code>gl.REPEAT</code> (default value), <code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>返回需要的纹理信息 (和 <code>pname</code>类型相同). 如果发生错误, 就返回{{jsxref("null")}}.</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">gl.getTexParameter(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER); +</pre> + +<h2 id="说明">说明</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">说明</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.8", "getTexParameter")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>最初的WebGL的定义.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glGetTexParameter.xml", "glGetTexParameter")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL ES 2.0 API的主页(相似).</td> + </tr> + <tr> + <td>{{SpecName('WebGL2', "#3.7.6", "getTexParameter")}}</td> + <td>{{Spec2('WebGL2')}}</td> + <td>升级的WebGL定义.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0', "glGetTexParameter.xhtml", "glGetTexParameter")}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td>OpenGL ES 3.0 API的主页（相似）.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">此页面的兼容性表格是根据结构化数据生成的. 如果你有兴趣贡献数据, 请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 给我们发pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.getTexParameter")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}</li> + <li>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}</li> + <li>{{domxref("EXT_texture_filter_anisotropic")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/getuniform/index.html b/files/zh-cn/web/api/webglrenderingcontext/getuniform/index.html new file mode 100644 index 0000000000..924ee123be --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/getuniform/index.html @@ -0,0 +1,213 @@ +--- +title: WebGLRenderingContext.getUniform() +slug: Web/API/WebGLRenderingContext/getUniform +translation_of: Web/API/WebGLRenderingContext/getUniform +--- +<div>{{APIRef("WebGL")}}</div> + +<div><a href="/zh-CN/docs/Web/API/WebGL_API">WebGL API</a> 的 <code>WebGLRenderingContext.getUniform()</code> 方法返回指定位置的全局变量的值。</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">any <var>gl</var>.getUniform(<var>program</var>, <var>location</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>program</dt> + <dd>包含全局变量的一个{{domxref("WebGLProgram")}}。</dd> + <dt>location</dt> + <dd>包含要获取的全局变量位置的 {{domxref("WebGLUniformLocation")}} 对象。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>返回的类型取决于全局变量的类型：</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">变量类型（着色器内）</th> + <th scope="col">返回值类型</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="2">在WebGL 1中支持的</th> + </tr> + <tr> + <td><code>boolean</code></td> + <td>{{domxref("GLBoolean")}}</td> + </tr> + <tr> + <td><code>int</code></td> + <td>{{domxref("GLint")}}</td> + </tr> + <tr> + <td><code>float</code></td> + <td>{{domxref("GLfloat")}}</td> + </tr> + <tr> + <td><code>vec2</code></td> + <td>{{jsxref("Float32Array")}} (with 2 elements)</td> + </tr> + <tr> + <td><code>ivec2</code></td> + <td>{{jsxref("Int32Array")}} (with 2 elements)</td> + </tr> + <tr> + <td><code>bvec2</code></td> + <td>{{jsxref("Array")}} of {{domxref("GLBoolean")}} (with 2 elements)</td> + </tr> + <tr> + <td><code>vec3</code></td> + <td>{{jsxref("Float32Array")}} (with 3 elements)</td> + </tr> + <tr> + <td><code>ivec3</code></td> + <td>{{jsxref("Int32Array")}} (with 3 elements)</td> + </tr> + <tr> + <td><code>bvec3</code></td> + <td>{{jsxref("Array")}} of {{domxref("GLBoolean")}} (with 3 elements)</td> + </tr> + <tr> + <td><code>vec4</code></td> + <td>{{jsxref("Float32Array")}} (with 4 elements)</td> + </tr> + <tr> + <td><code>ivec4</code></td> + <td>{{jsxref("Int32Array")}} (with 4 elements)</td> + </tr> + <tr> + <td><code>bvec4</code></td> + <td>{{jsxref("Array")}} of {{domxref("GLBoolean")}} (with 4 elements)</td> + </tr> + <tr> + <td><code>mat2</code></td> + <td>{{jsxref("Float32Array")}} (with 4 elements)</td> + </tr> + <tr> + <td><code>mat3</code></td> + <td>{{jsxref("Float32Array")}} (with 9 elements)</td> + </tr> + <tr> + <td><code>mat4</code></td> + <td>{{jsxref("Float32Array")}} (with 16 elements)</td> + </tr> + <tr> + <td><code>sampler2D</code></td> + <td>{{domxref("GLint")}}</td> + </tr> + <tr> + <td><code>samplerCube</code></td> + <td>{{domxref("GLint")}}</td> + </tr> + <tr> + <th colspan="2">在WebGL 2中新增支持的</th> + </tr> + <tr> + <td><code>uint</code></td> + <td>{{domxref("GLuint")}}</td> + </tr> + <tr> + <td><code>uvec2</code></td> + <td>{{jsxref("Uint32Array")}} (with 2 elements)</td> + </tr> + <tr> + <td><code>uvec3</code></td> + <td>{{jsxref("Uint32Array")}} (with 3 elements)</td> + </tr> + <tr> + <td><code>uvec4</code></td> + <td>{{jsxref("Uint32Array")}} (with 4 elements)</td> + </tr> + <tr> + <td><code>mat2x3</code></td> + <td>{{jsxref("Float32Array")}} (with 6 elements)</td> + </tr> + <tr> + <td><code>mat2x4</code></td> + <td>{{jsxref("Float32Array")}} (with 8 elements)</td> + </tr> + <tr> + <td><code>mat3x2</code></td> + <td>{{jsxref("Float32Array")}} (with 6 elements)</td> + </tr> + <tr> + <td><code>mat3x4</code></td> + <td>{{jsxref("Float32Array")}} (with 12 elements)</td> + </tr> + <tr> + <td><code>mat4x2</code></td> + <td>{{jsxref("Float32Array")}} (with 8 elements)</td> + </tr> + <tr> + <td><code>mat4x3</code></td> + <td>{{jsxref("Float32Array")}} (with 12 elements)</td> + </tr> + <tr> + <td>any sampler type</td> + <td>{{domxref("GLint")}}</td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">var loc = gl.getUniformLocation(program, 'u_foobar'); +gl.getUniform(program, loc); + +//code in vertex-shader +//... +//uniform mat4 uNormalMatrix; +//... +//gl.getUniform(program,gl.getUniformLocation(program,"uNormalMatrix")) +//>Float32Array(16) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注解</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.10", "getUniform")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition for WebGL.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glGetUniform.xml", "glGetUniform")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the (similar) OpenGL ES 2 API.</td> + </tr> + <tr> + <td>{{SpecName('WebGL2', "#3.7.8", "getUniform")}}</td> + <td>{{Spec2('WebGL2')}}</td> + <td>Updated definition for WebGL.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0', "glGetUniform.xhtml", "glGetUniform")}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td>Man page of the (similar) OpenGL ES 3 API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">此页面中的兼容性表格由结构化数据生成。如果您想为数据做出贡献，请查看https://github.com/mdn/browser-compat-data并向我们发送获取请求。</p> + +<p>{{Compat("api.WebGLRenderingContext.getUniform")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("WebGLUniformLocation")}}</li> + <li>{{domxref("WebGLRenderingContext.getActiveUniform()")}}</li> +</ul> 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> diff --git a/files/zh-cn/web/api/webglrenderingcontext/isbuffer/index.html b/files/zh-cn/web/api/webglrenderingcontext/isbuffer/index.html new file mode 100644 index 0000000000..dfe9026b22 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/isbuffer/index.html @@ -0,0 +1,124 @@ +--- +title: WebGLRenderingContext.isBuffer() +slug: Web/API/WebGLRenderingContext/isBuffer +translation_of: Web/API/WebGLRenderingContext/isBuffer +--- +<div>{{APIRef("WebGL")}}</div> + +<p><strong><code>WebGLRenderingContext.isBuffer() </code></strong>是 <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 的方法之一。如果传递的 {{domxref("WebGLBuffer")}} 有效则返回 true，否则返回 false。</p> + +<h2 id="句法">句法</h2> + +<pre class="syntaxbox">GLboolean <var>gl</var>.isBuffer(<var>buffer</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>buffer (缓冲区)</dt> + <dd>需要检查的 {{domxref("WebGLBuffer")}} 。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>{{domxref("GLboolean")}} 指示 buffer 是否可用。</p> + +<h2 id="示例">示例</h2> + +<h3 id="创建一个缓冲区_(buffer)">创建一个缓冲区 (buffer)</h3> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var gl = canvas.getContext("webgl"); +var buffer = gl.createBuffer(); + +gl.isBuffer(buffer); +</pre> + +<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.5", "isBuffer")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glIsBuffer.xml", "glIsBuffer")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("9")}}</td> + <td>12</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>11</td> + <td>{{CompatOpera("12")}}</td> + <td>{{CompatSafari("5.1")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>25</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + <td>12</td> + <td>8.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.bindBuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</li> + <li>Other buffers: {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/iscontextlost/index.html b/files/zh-cn/web/api/webglrenderingcontext/iscontextlost/index.html new file mode 100644 index 0000000000..d8135d7364 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/iscontextlost/index.html @@ -0,0 +1,58 @@ +--- +title: WebGLRenderingContext.isContextLost() +slug: Web/API/WebGLRenderingContext/isContextLost +tags: + - WebGL上下文丢失 +translation_of: Web/API/WebGLRenderingContext/isContextLost +--- +<div>{{APIRef("WebGL")}}</div> + +<p><code><strong>WebGLRenderingContext.isContextLost()</strong></code> 方法返回一个{{jsxref("Boolean")}} 标记WebGL的上下文是否已经丢失。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var><em>gl</em></var>.isContextLost();</pre> + +<h3 id="返回值">返回值</h3> + +<p> {{jsxref("Boolean")}}。如果上下文丢失则返回true，否则返回false。</p> + +<h2 id="样例">样例</h2> + +<p>比如，当检查程序链接成功时，你也可以检查是否上下文已经丢失。</p> + +<pre class="brush: js">gl.linkProgram(program); + +if (!gl.getProgramParameter(program, gl.LINK_STATUS) && !gl.isContextLost()) { + var info = gl.getProgramInfoLog(program); + console.log('Error linking program:\n' + info); +}</pre> + +<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.13", "WebGLRenderingContext.isContextLost")}}</td> + <td>{{Spec2("WebGL")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.isContextLost")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>The {{domxref("WebGLContextEvent")}} signals changes in the context state.</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/isenabled/index.html b/files/zh-cn/web/api/webglrenderingcontext/isenabled/index.html new file mode 100644 index 0000000000..9c87ead999 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/isenabled/index.html @@ -0,0 +1,193 @@ +--- +title: WebGLRenderingContext.isEnabled() +slug: Web/API/WebGLRenderingContext/isEnabled +translation_of: Web/API/WebGLRenderingContext/isEnabled +--- +<div>{{APIRef("WebGL")}}</div> + +<p><strong><code>WebGLRenderingContext.isEnabled()</code></strong> 是 <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 方法之一，用来检测给定的 WebGL 功能项在当前上下文是否可用。</p> + +<p>默认的，除了 <code>gl.DITHER</code>，所有的功能项都是未启用的。</p> + +<h2 id="句法">句法</h2> + +<pre class="syntaxbox">void <var>gl</var>.isEnabled(<var>cap</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>cap</code></dt> + <dd>{{domxref("GLenum")}} 指定待检测的 WebGL 功能项。可能的值有：</dd> + <dd> + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Constant</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>gl.BLEND</code></td> + <td>Blending of the computed fragment color values. See {{domxref("WebGLRenderingContext.blendFunc()")}}.</td> + </tr> + <tr> + <td><code>gl.CULL_FACE</code></td> + <td>Culling of polygons. See {{domxref("WebGLRenderingContext.cullFace()")}}.</td> + </tr> + <tr> + <td><code>gl.DEPTH_TEST</code></td> + <td>Depth comparisons and updates to the depth buffer. See {{domxref("WebGLRenderingContext.depthFunc()")}}.</td> + </tr> + <tr> + <td><code>gl.DITHER</code></td> + <td>Dithering of color components before they get written to the color buffer.</td> + </tr> + <tr> + <td><code>gl.POLYGON_OFFSET_FILL</code></td> + <td>Adding an offset to depth values of polygon's fragments. See {{domxref("WebGLRenderingContext.polygonOffset()")}}.</td> + </tr> + <tr> + <td><code>gl.SAMPLE_ALPHA_TO_COVERAGE</code></td> + <td>Computation of a temporary coverage value determined by the alpha value.</td> + </tr> + <tr> + <td><code>gl.SAMPLE_COVERAGE</code></td> + <td>ANDing the fragment's coverage with the temporary coverage value. See {{domxref("WebGLRenderingContext.sampleCoverage()")}}.</td> + </tr> + <tr> + <td><code>gl.SCISSOR_TEST</code></td> + <td>Scissor test that discards fragments that are outside of the scissor rectangle. See {{domxref("WebGLRenderingContext.scissor()")}}.</td> + </tr> + <tr> + <td><code>gl.STENCIL_TEST</code></td> + <td>Stencil testing and updates to the stencil buffer. See {{domxref("WebGLRenderingContext.stencilFunc()")}}.</td> + </tr> + </tbody> + </table> + 当使用 {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} 的时候，下列附加的值也是可选用的。 + + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Constant</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>gl.RASTERIZER_DISCARD</code></td> + <td>Primitives are discarded immediately before the rasterization stage, but after the optional transform feedback stage. <code>gl.clear()</code> commands are ignored.</td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>{{domxref("GLboolean")}} 指示能力项 <em>cap </em>可用 (<code>true</code>)，不可用 (<code>false</code>)。</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">gl.isEnabled(gl.STENCIL_TEST); +// false +</pre> + +<p>启用或停用给定的能力项，使用 {{domxref("WebGLRenderingContext.enable()")}} 方法和 {{domxref("WebGLRenderingContext.disable()")}} 方法：</p> + +<pre class="brush: js">gl.enable(gl.STENCIL_TEST); +gl.disable(gl.STENCIL_TEST); +</pre> + +<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.3", "isEnabled")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition for WebGL.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glIsEnabled.xml", "glIsEnabled")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the (similar) OpenGL ES 2.0 API.</td> + </tr> + <tr> + <td>{{SpecName('WebGL2', "#3.7.2", "isEnabled")}}</td> + <td>{{Spec2('WebGL2')}}</td> + <td>Updated definition for WebGL 2.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0', "glIsEnabled.xhtml", "glIsEnabled")}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td>Man page of the (similar) OpenGL ES 3.0 API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("9")}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatIE("11")}}</td> + <td>{{CompatOpera("12")}}</td> + <td>{{CompatSafari("5.1")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>25</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>12</td> + <td>8.1</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.enable()")}}</li> + <li>{{domxref("WebGLRenderingContext.disable()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/isprogram/index.html b/files/zh-cn/web/api/webglrenderingcontext/isprogram/index.html new file mode 100644 index 0000000000..0c272f6188 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/isprogram/index.html @@ -0,0 +1,77 @@ +--- +title: WebGLRenderingContext.isProgram() +slug: Web/API/WebGLRenderingContext/isProgram +translation_of: Web/API/WebGLRenderingContext/isProgram +--- +<p>{{APIRef("WebGL")}}</p> + +<p> <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a>中的<strong><code>WebGLRenderingContext.isProgram()</code></strong> 函数 将会在{{domxref("WebGLProgram")}}是一个合法的着色器程序(program)时返回 <code>true</code> , 而在其他情况返回<code>false</code></p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">GLboolean <var>gl</var>.isProgram(<var>program</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>program</dt> + <dd>一个要检查的 {{domxref("WebGLProgram")}}对象 .</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>一个表示program是否有效的 {{domxref("GLboolean")}} 值.</p> + +<h2 id="示例">示例</h2> + +<h3 id="检查一个program是否有效">检查一个program是否有效</h3> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var gl = canvas.getContext('webgl'); +var program = gl.createProgram(); + +// ... + +gl.isProgram(program); +</pre> + +<h2 id="Specifications">Specifications</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.9", "isProgram")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glIsProgram.xml", "glIsProgram")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.isProgram")}}</p> + +<h2 id="另请参见">另请参见</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/isshader/index.html b/files/zh-cn/web/api/webglrenderingcontext/isshader/index.html new file mode 100644 index 0000000000..b0a5c10de4 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/isshader/index.html @@ -0,0 +1,78 @@ +--- +title: WebGLRenderingContext.isShader() +slug: Web/API/WebGLRenderingContext/isShader +tags: + - API + - Method + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/isShader +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 中的 <strong><code>WebGLRenderingContext.isShader()</code></strong> 方法，在传入的 {{domxref("WebGLShader")}} 有效时返回 <code>true</code> ，否则返回 <code>false</code> 。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">GLboolean <var>gl</var>.isShader(<var>shader</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>shader</dt> + <dd>需要校验的 {{domxref("WebGLShader")}} </dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>用来表明 shader 是否有效的 {{domxref("GLboolean")}} 对象</p> + +<h2 id="示例">示例</h2> + +<h3 id="校验一个_Shader">校验一个 Shader</h3> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var gl = canvas.getContext('webgl'); +var shader = gl.createShader(gl.VERTEX_SHADER); + +// ... + +gl.isShader(shader); +</pre> + +<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.9", "isShader")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glIsShader.xml", "glIsShader")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.isShader")}}</p> + +<h2 id="参阅">参阅</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.createShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/linkprogram/index.html b/files/zh-cn/web/api/webglrenderingcontext/linkprogram/index.html new file mode 100644 index 0000000000..86d850ebff --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/linkprogram/index.html @@ -0,0 +1,78 @@ +--- +title: WebGLRenderingContext.linkProgram() +slug: Web/API/WebGLRenderingContext/linkProgram +translation_of: Web/API/WebGLRenderingContext/linkProgram +--- +<div>{{APIRef("WebGL")}}<br> +{{domxref("WebGLRenderingContext")}} 接口的<strong>linkProgram()</strong>方法链接给定的{{domxref("WebGLProgram")}}，从而完成为程序的片元和顶点着色器准备GPU代码的过程。</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var>gl</var>.linkProgram(<var>program</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>program</dt> + <dd>一个用于链接的 {{domxref("WebGLProgram")}} 。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>None.</p> + +<h2 id="例子">例子</h2> + +<pre class="brush: js">var program = gl.createProgram(); + +// Attach pre-existing shaders +gl.attachShader(program, vertexShader); +gl.attachShader(program, fragmentShader); + +gl.linkProgram(program); + +<code>if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) { + var info = gl.getProgramInfoLog(program); + throw new Error('Could not compile WebGL program. \n\n' + info); +}</code></pre> + +<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.9", "linkProgram")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glLinkProgram.xml", "glLinkProgram")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">此页面中的兼容性表是根据结构化数据生成的。 如果您想贡献数据，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送请求请求。</p> + +<p>{{Compat("api.WebGLRenderingContext.linkProgram")}}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/pixelstorei/index.html b/files/zh-cn/web/api/webglrenderingcontext/pixelstorei/index.html new file mode 100644 index 0000000000..1a84fa6f9a --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/pixelstorei/index.html @@ -0,0 +1,233 @@ +--- +title: WebGLRenderingContext.pixelStorei() +slug: Web/API/WebGLRenderingContext/pixelStorei +translation_of: Web/API/WebGLRenderingContext/pixelStorei +--- +<div>{{APIRef("WebGL")}}</div> + +<p><strong><code>WebGLRenderingContext.pixelStorei()</code></strong> 是 <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 中用于图像预处理的函数。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var>gl</var>.pixelStorei(<var>pname</var>, <var>param</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>pname</dt> + <dd> {{domxref("Glenum")}} 类型 ，表示处理的方式。关于该参数可选值，请见下面表格。</dd> + <dt>param</dt> + <dd> {{domxref("GLint")}} 类型，表示 pname 处理方式的参数。关于该参数可选值，请见下面表格。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>None.</p> + +<h2 id="像素存储参数">像素存储参数</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">模式名称 (<code>pname</code>)</th> + <th scope="col">描述</th> + <th scope="col">类型</th> + <th scope="col">默认值</th> + <th scope="col"> param 的可选值</th> + <th scope="col">Specified in</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>gl.PACK_ALIGNMENT</code></td> + <td>Packing of pixel data into memory</td> + <td>{{domxref("GLint")}}</td> + <td>4</td> + <td>1, 2, 4, 8</td> + <td>OpenGL ES 2.0</td> + </tr> + <tr> + <td><code>gl.UNPACK_ALIGNMENT</code></td> + <td>Unpacking of pixel data from memory.</td> + <td>{{domxref("GLint")}}</td> + <td>4</td> + <td>1, 2, 4, 8</td> + <td>OpenGL ES 2.0</td> + </tr> + <tr> + <td><code>gl.UNPACK_FLIP_Y_WEBGL</code></td> + <td> + <p dir="ltr" id="tw-target-text">如果为true，则把图片上下对称翻转坐标轴(图片本身不变)。</p> + </td> + <td>{{domxref("GLboolean")}}</td> + <td>false</td> + <td>true, false</td> + <td>WebGL</td> + </tr> + <tr> + <td><code>gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL</code></td> + <td>Multiplies the alpha channel into the other color channels</td> + <td>{{domxref("GLboolean")}}</td> + <td>false</td> + <td>true, false</td> + <td>WebGL</td> + </tr> + <tr> + <td><code>gl.UNPACK_COLORSPACE_CONVERSION_WEBGL</code></td> + <td>Default color space conversion or no color space conversion.</td> + <td>{{domxref("GLenum")}}</td> + <td><code>gl.BROWSER_DEFAULT_WEBGL</code></td> + <td><code>gl.BROWSER_DEFAULT_WEBGL</code>, <code>gl.NONE</code></td> + <td>WebGL</td> + </tr> + </tbody> +</table> + +<p>When using a {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, the following values are available additionally:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Constant</th> + <th scope="col">Description</th> + <th scope="col">Type</th> + <th scope="col">Default value</th> + <th scope="col">Allowed values (for <code>param</code>)</th> + <th scope="col">Specified in</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>gl.PACK_ROW_LENGTH</code></td> + <td>Number of pixels in a row.</td> + <td>{{domxref("GLint")}}</td> + <td>0</td> + <td>0 to <code>Infinity</code></td> + <td>OpenGL ES 3.0</td> + </tr> + <tr> + <td><code>gl.PACK_SKIP_PIXELS</code></td> + <td>Number of pixel locations skipped before the first pixel is written into memory.</td> + <td>{{domxref("GLint")}}</td> + <td>0</td> + <td>0 to <code>Infinity</code></td> + <td>OpenGL ES 3.0</td> + </tr> + <tr> + <td><code>gl.PACK_SKIP_ROWS</code></td> + <td>Number of rows of pixel locations skipped before the first pixel is written into memory</td> + <td>{{domxref("GLint")}}</td> + <td>0</td> + <td>0 to <code>Infinity</code></td> + <td>OpenGL ES 3.0</td> + </tr> + <tr> + <td><code>gl.UNPACK_ROW_LENGTH</code></td> + <td>Number of pixels in a row.</td> + <td>{{domxref("GLint")}}</td> + <td>0</td> + <td>0 to <code>Infinity</code></td> + <td>OpenGL ES 3.0</td> + </tr> + <tr> + <td><code>gl.UNPACK_IMAGE_HEIGHT</code></td> + <td>Image height used for reading pixel data from memory</td> + <td>{{domxref("GLint")}}</td> + <td>0</td> + <td>0 to <code>Infinity</code></td> + <td>OpenGL ES 3.0</td> + </tr> + <tr> + <td><code>gl.UNPACK_SKIP_PIXELS</code></td> + <td>Number of pixel images skipped before the first pixel is read from memory</td> + <td>{{domxref("GLint")}}</td> + <td>0</td> + <td>0 to <code>Infinity</code></td> + <td>OpenGL ES 3.0</td> + </tr> + <tr> + <td><code>gl.UNPACK_SKIP_ROWS</code></td> + <td>Number of rows of pixel locations skipped before the first pixel is read from memory</td> + <td>{{domxref("GLint")}}</td> + <td>0</td> + <td>0 to <code>Infinity</code></td> + <td>OpenGL ES 3.0</td> + </tr> + <tr> + <td><code>gl.UNPACK_SKIP_IMAGES</code></td> + <td>Number of pixel images skipped before the first pixel is read from memory</td> + <td>{{domxref("GLint")}}</td> + <td>0</td> + <td>0 to <code>Infinity</code></td> + <td>OpenGL ES 3.0</td> + </tr> + </tbody> +</table> + +<h2 id="Examples">Examples</h2> + +<p>Setting the pixel storage mode affects the {{domxref("WebGLRenderingContext.readPixels()")}} operations, as well as unpacking of textures with the {{domxref("WebGLRenderingContext.texImage2D()")}} and {{domxref("WebGLRenderingContext.texSubImage2D()")}} methods.<br> + </p> + +<pre class="brush: js">var tex = gl.createTexture(); +gl.bindTexture(gl.TEXTURE_2D, tex); +gl.pixelStorei(gl.PACK_ALIGNMENT, 4); +</pre> + +<p>To check the values for packing and unpacking of pixel data, you can query the same pixel storage parameters with {{domxref("WebGLRenderingContext.getParameter()")}}.</p> + +<pre class="brush: js">gl.getParameter(gl.PACK_ALIGNMENT); +gl.getParameter(gl.UNPACK_ALIGNMENT); +</pre> + +<h2 id="Specifications">Specifications</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.3", "pixelStorei")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition for WebGL.</td> + </tr> + <tr> + <td>{{SpecName('WebGL', "#PIXEL_STORAGE_PARAMETERS", "Pixel Storage Parameters")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Additional pixel storage parameters that aren't specified in OpenGL.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glPixelStorei.xml", "glPixelStorei")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the OpenGL ES 2.0 API.</td> + </tr> + <tr> + <td>{{SpecName('WebGL2', "#3.7.2", "pixelStorei")}}</td> + <td>{{Spec2('WebGL2')}}</td> + <td>Updated definition for WebGL 2.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0', "glPixelStorei.xhtml", "glPixelStorei")}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td>Man page of the OpenGL ES 3.0 API.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext.pixelStorei")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.readPixels()")}}</li> + <li>{{domxref("WebGLRenderingContext.texImage2D()")}}</li> + <li>{{domxref("WebGLRenderingContext.texSubImage2D()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/renderbufferstorage/index.html b/files/zh-cn/web/api/webglrenderingcontext/renderbufferstorage/index.html new file mode 100644 index 0000000000..60057a8809 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/renderbufferstorage/index.html @@ -0,0 +1,155 @@ +--- +title: WebGLRenderingContext.renderbufferStorage() +slug: Web/API/WebGLRenderingContext/renderbufferStorage +translation_of: Web/API/WebGLRenderingContext/renderbufferStorage +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 的 <strong><code>WebGLRenderingContext.renderbufferStorage()</code></strong> 方法用来创建和初始化一个渲染缓冲区对象的数据存储.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var>gl</var>.renderbufferStorage(<var>target</var>, <var>internalFormat</var>, <var>width</var>, <var>height</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>target</dt> + <dd> {{domxref("Glenum")}} 指定一个渲染缓冲区对象. 可能的值: + <ul> + <li><code>gl.RENDERBUFFER</code>:单一图像的缓冲数据存储在一个可渲染的内部格式。<br> + .</li> + </ul> + </dd> + <dt>internalFormat</dt> + <dd> {{domxref("Glenum")}} 指定渲染缓冲区的内部格式. 可能的值: + <ul> + <li><code>gl.RGBA4</code>: 4 red bits, 4 green bits, 4 blue bits 4 alpha bits.</li> + <li><code>gl.RGB565</code>: 5 red bits, 6 green bits, 5 blue bits.</li> + <li><code>gl.RGB5_A1</code>: 5 red bits, 5 green bits, 5 blue bits, 1 alpha bit.</li> + <li><code>gl.DEPTH_COMPONENT16</code>: 16 depth bits.</li> + <li><code>gl.STENCIL_INDEX8</code>: 8 stencil bits.</li> + <li><code>gl.DEPTH_STENCIL</code></li> + <li>当使用{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}时, 下面的值也是可用的: + <ul> + <li><code>gl.R8</code></li> + <li><code>gl.R8UI</code></li> + <li><code>gl.R8I</code></li> + <li><code>gl.R16UI</code></li> + <li><code>gl.R16I</code></li> + <li><code>gl.R32UI</code></li> + <li><code>gl.R32I</code></li> + <li><code>gl.RG8</code></li> + <li><code>gl.RG8UI</code></li> + <li><code>gl.RG8I</code></li> + <li><code>gl.RG16UI</code></li> + <li><code>gl.RG16I</code></li> + <li><code>gl.RG32UI</code></li> + <li><code>gl.RG32I</code></li> + <li><code>gl.RGB8</code></li> + <li><code>gl.RGBA8</code></li> + <li><code>gl.SRGB8_ALPHA8</code> (也可以作为WebGL 1的扩展，参见下面)</li> + <li><code>gl.RGB10_A2</code></li> + <li><code>gl.RGBA8UI</code></li> + <li><code>gl.RGBA8I</code></li> + <li><code>gl.RGB10_A2UI</code></li> + <li><code>gl.RGBA16UI</code></li> + <li><code>gl.RGBA16I</code></li> + <li><code>gl.RGBA32I</code></li> + <li><code>gl.RGBA32UI</code></li> + <li><code>gl.DEPTH_COMPONENT24</code></li> + <li><code>gl.DEPTH_COMPONENT32F</code></li> + <li><code>gl.DEPTH24_STENCIL8</code></li> + <li><code>gl.DEPTH32F_STENCIL8</code></li> + </ul> + </li> + <li>当使用{domxref("WEBGL_color_buffer_float")}} 扩展: + <ul> + <li><code>ext.RGBA32F_EXT</code>: RGBA 32-bit 浮点类型.</li> + <li><code>ext.RGB32F_EXT</code>: RGB 32-bit 浮点类型.</li> + </ul> + </li> + <li>当使用{domxref("EXT_sRGB")}} 扩展: + <ul> + <li><code>ext.SRGB8_ALPHA8_EXT</code>: 8-bit sRGB 和 alpha.</li> + </ul> + </li> + <li>当使用{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} 和 {{domxref("EXT_color_buffer_float")}} 扩展: + <ul> + <li><code>gl.R16F</code></li> + <li><code>gl.RG16F</code></li> + <li><code>gl.RGBA16F</code></li> + <li><code>gl.R32F</code></li> + <li><code>gl.RG32F</code></li> + <li><code>gl.RGBA32F</code></li> + <li><code>gl.R11F_G11F_B10F</code></li> + </ul> + </li> + </ul> + </dd> + <dt>width</dt> + <dd> {{domxref("GLsizei")}} 指定渲染缓冲区的宽度(以像素为单位).</dd> + <dt>height</dt> + <dd> {{domxref("GLsizei")}} 指定渲染缓冲区的高度(以像素为单位).</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>None.</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">gl.renderbufferStorage(gl.RENDERBUFFER, gl.RGBA4, 256, 256); +</pre> + +<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.7", "renderbufferStorage")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>WebGL初始定义.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glRenderbufferStorage.xml", "glRenderbufferStorage")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL ES 2 API手册.</td> + </tr> + <tr> + <td>{{SpecName('WebGL2', "#3.7.5", "getRenderbufferParameter")}}</td> + <td>{{Spec2('WebGL2')}}</td> + <td>WebGL 2更新定义.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0', "glRenderbufferStorage.xhtml", "glRenderbufferStorage")}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td> OpenGL ES 3 API手册(类似).<br> + 添加许多新的内部格式.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.renderbufferStorage")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.bindRenderbuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.createRenderbuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.getRenderbufferParameter()")}}</li> + <li>{{domxref("WEBGL_color_buffer_float")}}</li> + <li>{{domxref("EXT_sRGB")}}</li> + <li>{{domxref("EXT_color_buffer_float")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/scissor/index.html b/files/zh-cn/web/api/webglrenderingcontext/scissor/index.html new file mode 100644 index 0000000000..87c080f3ba --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/scissor/index.html @@ -0,0 +1,94 @@ +--- +title: WebGLRenderingContext.scissor() +slug: Web/API/WebGLRenderingContext/scissor +tags: + - WebGL +translation_of: Web/API/WebGLRenderingContext/scissor +--- +<div>{{APIRef("WebGL")}}</div> + +<p> <strong><code>WebGLRenderingContext.scissor()</code></strong> 方法指定了一个裁剪区域，用来将绘图区域限制在其限定的盒形区域内。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate"><var><em>void gl</em>.</var>scissor<var>(x, y, width, height);</var> +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>x</code></dt> + <dd>{{domxref("GLint")}} ，指定盒形裁剪区域左下角所在的横坐标，默认为 0。</dd> + <dt><code>y</code></dt> + <dd> {{domxref("GLint")}} 指定盒形裁剪区域左下角的纵坐标，默认为 0。</dd> + <dt>width</dt> + <dd>{{domxref("Glsizei")}}，用来确定盒型裁剪区域宽度的非负数，默认为 canvas 的宽度。</dd> + <dt>height</dt> + <dd>{{domxref("Glsizei")}} ，用以指定盒形裁剪区域高度的非负数，默认为canvas 的高度。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>无。</p> + +<h3 id="抛错">抛错</h3> + +<p>宽或高为负值时，抛出 <code>gl.INVALID_VALUE</code> 错误。</p> + +<h2 id="示例">示例</h2> + +<p>当裁剪区域可用的时候，只有处于此区域内的像素才能由绘图命令修改。</p> + +<pre class="brush: js notranslate">// turn on scissor test +gl.enable(gl.SCISSOR_TEST); + +// set the scissor rectangle +gl.scissor(x, y, width, height); + +// execute drawing commands in the scissor box (e.g. clear) + +// turn off scissor test again +gl.disable(gl.SCISSOR_TEST); +</pre> + +<p>通过查询 <code>SCISSOR_BOX</code> 常量来获取裁剪区域的维度信息，返回值是一个 {{jsxref("Int32Array")}} 对象。</p> + +<pre class="brush: js notranslate">gl.scissor(0, 0, 200, 200); +gl.getParameter(gl.SCISSOR_BOX); +// Int32Array[0, 0, 200, 200]</pre> + +<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.4", "scissor")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glScissor.xml", "glScissor")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.scissor")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.viewport()")}}</li> + <li>{{domxref("WebGLRenderingContext.enable()")}}</li> + <li>{{domxref("WebGLRenderingContext.disable()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/shadersource/index.html b/files/zh-cn/web/api/webglrenderingcontext/shadersource/index.html new file mode 100644 index 0000000000..3527279b63 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/shadersource/index.html @@ -0,0 +1,70 @@ +--- +title: WebGLRenderingContext.shaderSource() +slug: Web/API/WebGLRenderingContext/shaderSource +translation_of: Web/API/WebGLRenderingContext/shaderSource +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 中的 <strong><code>WebGLRenderingContext.shaderSource()</code></strong> 方法用于设置 {{domxref("WebGLShader")}} 着色器（顶点着色器及片元着色器）的GLSL程序代码。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var>gl</var>.shaderSource(<var>shader</var>, <var>source</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>shader</dt> + <dd>用于设置程序代码的 {{domxref("WebGLShader")}} （着色器对象）。</dd> + <dt>source</dt> + <dd>包含GLSL程序代码的字符串。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>None.</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">var shader = gl.createShader(gl.VERTEX_SHADER); +gl.shaderSource(shader, originalSource); + +var source = gl.getShaderSource(shader);</pre> + +<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.9", "shaderSource")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glShaderSource.xml", "glShaderSource")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the (similar) OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.shaderSource")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.createShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.isShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/teximage2d/index.html b/files/zh-cn/web/api/webglrenderingcontext/teximage2d/index.html new file mode 100644 index 0000000000..fb578ac252 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/teximage2d/index.html @@ -0,0 +1,872 @@ +--- +title: WebGLRenderingContext.texImage2D() +slug: Web/API/WebGLRenderingContext/texImage2D +translation_of: Web/API/WebGLRenderingContext/texImage2D +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API </a>的<strong><code>WebGLRenderingContext.texImage2D()</code></strong> 方法指定了二维纹理图像。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">// WebGL1: +void <var>gl</var>.texImage2D(<var>target</var>, <var>level</var>, <var>internalformat</var>, <var>width</var>, <var>height</var>, <var>border</var>, <var>format</var>, <var>type</var>, ArrayBufferView? <var>pixels</var>); +void <var>gl</var>.texImage2D(<var>target</var>, <var>level</var>, <var>internalformat</var>, <var>format</var>, <var>type</var>, ImageData? <var>pixels</var>); +void <var>gl</var>.texImage2D(<var>target</var>, <var>level</var>, <var>internalformat</var>, <var>format</var>, <var>type</var>, HTMLImageElement? <var>pixels</var>); +void <var>gl</var>.texImage2D(<var>target</var>, <var>level</var>, <var>internalformat</var>, <var>format</var>, <var>type</var>, HTMLCanvasElement? <var>pixels</var>); +void <var>gl</var>.texImage2D(<var>target</var>, <var>level</var>, <var>internalformat</var>, <var>format</var>, <var>type</var>, HTMLVideoElement? <var>pixels</var>); +void <var>gl</var>.texImage2D(<var>target</var>, <var>level</var>, <var>internalformat</var>, <var>format</var>, <var>type</var>, ImageBitmap? <var>pixels</var>); + +// WebGL2: +void gl.texImage2D(<var>target</var>, <var>level</var>, <var>internalformat</var>, width, <var>height</var>, <var>border</var>, <var>format</var>, <var>type</var>, GLintptr <var>offset</var>); +void gl.texImage2D(target, level, internalformat, width, height, border, format, type, HTMLCanvasElement source); +void gl.texImage2D(target, level, internalformat, width, height, border, format, type, HTMLImageElement source); +void gl.texImage2D(target, level, internalformat, width, height, border, format, type, HTMLVideoElement source); +void gl.texImage2D(target, level, internalformat, width, height, border, format, type, ImageBitmap source); +void gl.texImage2D(target, level, internalformat, width, height, border, format, type, ImageData source); +void gl.texImage2D(target, level, internalformat, width, height, border, format, type, ArrayBufferView srcData, srcOffset); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>target</code></dt> + <dd> {{domxref("GLenum")}} 指定纹理的绑定对象.可能的值: + <ul> + <li><code>gl.TEXTURE_2D</code>: 二维纹理贴图.</li> + <li><code>gl.TEXTURE_CUBE_MAP_POSITIVE_X</code>:立方体映射纹理的正X面。</li> + <li><code>gl.TEXTURE_CUBE_MAP_NEGATIVE_X</code>: 立方体映射纹理的负X面。</li> + <li><code>gl.TEXTURE_CUBE_MAP_POSITIVE_Y</code>: 立方体映射纹理的正Y面。</li> + <li><code>gl.TEXTURE_CUBE_MAP_NEGATIVE_Y</code>: 立方体映射纹理的负Y面。</li> + <li><code>gl.TEXTURE_CUBE_MAP_POSITIVE_Z</code>: 立方体映射纹理的正Z面。</li> + <li><code>gl.TEXTURE_CUBE_MAP_NEGATIVE_Z</code>: 立方体映射纹理的负Z面。</li> + </ul> + </dd> + <dt><code>level</code></dt> + <dd> {{domxref("GLint")}} 指定详细级别. 0级是基本图像等级，n级是第n个金字塔简化级.</dd> + <dt><code>internalformat</code></dt> + <dd> {{domxref("GLenum")}} 指定纹理中的颜色组件.</dd> + <dd>在 WebGL1 和 WebGL2 中可能的值：</dd> + <dt> + <table> + <thead> + <tr> + <td>Format</td> + <td>Type</td> + <td>Channels</td> + <td>Bytes per pixel</td> + </tr> + </thead> + <tbody> + <tr> + <td>RGBA</td> + <td>UNSIGNED_BYTE</td> + <td>4</td> + <td>4</td> + </tr> + <tr> + <td>RGB</td> + <td>UNSIGNED_BYTE</td> + <td>3</td> + <td>3</td> + </tr> + <tr> + <td>RGBA</td> + <td>UNSIGNED_SHORT_4_4_4_4</td> + <td>4</td> + <td>2</td> + </tr> + <tr> + <td>RGBA</td> + <td>UNSIGNED_SHORT_5_5_5_1</td> + <td>4</td> + <td>2</td> + </tr> + <tr> + <td>RGB</td> + <td>UNSIGNED_SHORT_5_6_5</td> + <td>3</td> + <td>2</td> + </tr> + <tr> + <td>LUMINANCE_ALPHA</td> + <td>UNSIGNED_BYTE</td> + <td>2</td> + <td>2</td> + </tr> + <tr> + <td>LUMINANCE</td> + <td>UNSIGNED_BYTE</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>ALPHA</td> + <td>UNSIGNED_BYTE</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> + </table> + </dt> + <dd>在WebGL2 中，对带有 <code>ArrayBufferView</code> 或 <code>GLintptr offset</code>的 <code>texImage2D</code> 版本，其它可能的值</dd> +</dl> + +<table> + <thead> + <tr> + <td><strong>Sized<br> + Format</strong></td> + <td><strong>Base<br> + Format</strong></td> + <td><strong>R<br> + bits</strong></td> + <td><strong>G<br> + bits</strong></td> + <td><strong>B<br> + bits</strong></td> + <td><strong>A<br> + bits</strong></td> + <td><strong>Shared<br> + bits</strong></td> + <td><strong>Color<br> + renderable</strong></td> + <td><strong>Texture<br> + filterable</strong></td> + </tr> + </thead> + <tbody> + <tr> + <td>R8</td> + <td>RED</td> + <td>8</td> + <td></td> + <td></td> + <td></td> + <td></td> + <td>●</td> + <td>●</td> + </tr> + <tr> + <td>R8_SNORM</td> + <td>RED</td> + <td>s8</td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td>●</td> + </tr> + <tr> + <td>RG8</td> + <td>RG</td> + <td>8</td> + <td>8</td> + <td></td> + <td></td> + <td></td> + <td>●</td> + <td>●</td> + </tr> + <tr> + <td>RG8_SNORM</td> + <td>RG</td> + <td>s8</td> + <td>s8</td> + <td></td> + <td></td> + <td></td> + <td></td> + <td>●</td> + </tr> + <tr> + <td>RGB8</td> + <td>RGB</td> + <td>8</td> + <td>8</td> + <td>8</td> + <td></td> + <td></td> + <td>●</td> + <td>●</td> + </tr> + <tr> + <td>RGB8_SNORM</td> + <td>RGB</td> + <td>s8</td> + <td>s8</td> + <td>s8</td> + <td></td> + <td></td> + <td></td> + <td>●</td> + </tr> + <tr> + <td>RGB565</td> + <td>RGB</td> + <td>5</td> + <td>6</td> + <td>5</td> + <td></td> + <td></td> + <td>●</td> + <td>●</td> + </tr> + <tr> + <td>RGBA4</td> + <td>RGBA</td> + <td>4</td> + <td>4</td> + <td>4</td> + <td>4</td> + <td></td> + <td>●</td> + <td>●</td> + </tr> + <tr> + <td>RGB5_A1</td> + <td>RGBA</td> + <td>5</td> + <td>5</td> + <td>5</td> + <td>1</td> + <td></td> + <td>●</td> + <td>●</td> + </tr> + <tr> + <td>RGBA8</td> + <td>RGBA</td> + <td>8</td> + <td>8</td> + <td>8</td> + <td>8</td> + <td></td> + <td>●</td> + <td>●</td> + </tr> + <tr> + <td>RGBA8_SNORM</td> + <td>RGBA</td> + <td>s8</td> + <td>s8</td> + <td>s8</td> + <td>s8</td> + <td></td> + <td></td> + <td>●</td> + </tr> + <tr> + <td>RGB10_A2</td> + <td>RGBA</td> + <td>10</td> + <td>10</td> + <td>10</td> + <td>2</td> + <td></td> + <td>●</td> + <td>●</td> + </tr> + <tr> + <td>RGB10_A2UI</td> + <td>RGBA</td> + <td>ui10</td> + <td>ui10</td> + <td>ui10</td> + <td>ui2</td> + <td></td> + <td>●</td> + <td></td> + </tr> + <tr> + <td>SRGB8</td> + <td>RGB</td> + <td>8</td> + <td>8</td> + <td>8</td> + <td></td> + <td></td> + <td></td> + <td>●</td> + </tr> + <tr> + <td>SRGB8_ALPHA8</td> + <td>RGBA</td> + <td>8</td> + <td>8</td> + <td>8</td> + <td>8</td> + <td></td> + <td>●</td> + <td>●</td> + </tr> + <tr> + <td>R16F</td> + <td>RED</td> + <td>f16</td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td>●</td> + </tr> + <tr> + <td>RG16F</td> + <td>RG</td> + <td>f16</td> + <td>f16</td> + <td></td> + <td></td> + <td></td> + <td></td> + <td>●</td> + </tr> + <tr> + <td>RGB16F</td> + <td>RGB</td> + <td>f16</td> + <td>f16</td> + <td>f16</td> + <td></td> + <td></td> + <td></td> + <td>●</td> + </tr> + <tr> + <td>RGBA16F</td> + <td>RGBA</td> + <td>f16</td> + <td>f16</td> + <td>f16</td> + <td>f16</td> + <td></td> + <td></td> + <td>●</td> + </tr> + <tr> + <td>R32F</td> + <td>RED</td> + <td>f32</td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td>RG32F</td> + <td>RG</td> + <td>f32</td> + <td>f32</td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td>RGB32F</td> + <td>RGB</td> + <td>f32</td> + <td>f32</td> + <td>f32</td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td>RGBA32F</td> + <td>RGBA</td> + <td>f32</td> + <td>f32</td> + <td>f32</td> + <td>f32</td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td>R11F_G11F_B10F</td> + <td>RGB</td> + <td>f11</td> + <td>f11</td> + <td>f10</td> + <td></td> + <td></td> + <td></td> + <td>●</td> + </tr> + <tr> + <td>RGB9_E5</td> + <td>RGB</td> + <td>9</td> + <td>9</td> + <td>9</td> + <td></td> + <td>5</td> + <td></td> + <td>●</td> + </tr> + <tr> + <td>R8I</td> + <td>RED</td> + <td>i8</td> + <td></td> + <td></td> + <td></td> + <td></td> + <td>●</td> + <td></td> + </tr> + <tr> + <td>R8UI</td> + <td>RED</td> + <td>ui8</td> + <td></td> + <td></td> + <td></td> + <td></td> + <td>●</td> + <td></td> + </tr> + <tr> + <td>R16I</td> + <td>RED</td> + <td>i16</td> + <td></td> + <td></td> + <td></td> + <td></td> + <td>●</td> + <td></td> + </tr> + <tr> + <td>R16UI</td> + <td>RED</td> + <td>ui16</td> + <td></td> + <td></td> + <td></td> + <td></td> + <td>●</td> + <td></td> + </tr> + <tr> + <td>R32I</td> + <td>RED</td> + <td>i32</td> + <td></td> + <td></td> + <td></td> + <td></td> + <td>●</td> + <td></td> + </tr> + <tr> + <td>R32UI</td> + <td>RED</td> + <td>ui32</td> + <td></td> + <td></td> + <td></td> + <td></td> + <td>●</td> + <td></td> + </tr> + <tr> + <td>RG8I</td> + <td>RG</td> + <td>i8</td> + <td>i8</td> + <td></td> + <td></td> + <td></td> + <td>●</td> + <td></td> + </tr> + <tr> + <td>RG8UI</td> + <td>RG</td> + <td>ui8</td> + <td>ui8</td> + <td></td> + <td></td> + <td></td> + <td>●</td> + <td></td> + </tr> + <tr> + <td>RG16I</td> + <td>RG</td> + <td>i16</td> + <td>i16</td> + <td></td> + <td></td> + <td></td> + <td>●</td> + <td></td> + </tr> + <tr> + <td>RG16UI</td> + <td>RG</td> + <td>ui16</td> + <td>ui16</td> + <td></td> + <td></td> + <td></td> + <td>●</td> + <td></td> + </tr> + <tr> + <td>RG32I</td> + <td>RG</td> + <td>i32</td> + <td>i32</td> + <td></td> + <td></td> + <td></td> + <td>●</td> + <td></td> + </tr> + <tr> + <td>RG32UI</td> + <td>RG</td> + <td>ui32</td> + <td>ui32</td> + <td></td> + <td></td> + <td></td> + <td>●</td> + <td></td> + </tr> + <tr> + <td>RGB8I</td> + <td>RGB</td> + <td>i8</td> + <td>i8</td> + <td>i8</td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td>RGB8UI</td> + <td>RGB</td> + <td>ui8</td> + <td>ui8</td> + <td>ui8</td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td>RGB16I</td> + <td>RGB</td> + <td>i16</td> + <td>i16</td> + <td>i16</td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td>RGB16UI</td> + <td>RGB</td> + <td>ui16</td> + <td>ui16</td> + <td>ui16</td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td>RGB32I</td> + <td>RGB</td> + <td>i32</td> + <td>i32</td> + <td>i32</td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td>RGB32UI</td> + <td>RGB</td> + <td>ui32</td> + <td>ui32</td> + <td>ui32</td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td>RGBA8I</td> + <td>RGBA</td> + <td>i8</td> + <td>i8</td> + <td>i8</td> + <td>i8</td> + <td></td> + <td>●</td> + <td></td> + </tr> + <tr> + <td>RGBA8UI</td> + <td>RGBA</td> + <td>ui8</td> + <td>ui8</td> + <td>ui8</td> + <td>ui8</td> + <td></td> + <td>●</td> + <td></td> + </tr> + <tr> + <td>RGBA16I</td> + <td>RGBA</td> + <td>i16</td> + <td>i16</td> + <td>i16</td> + <td>i16</td> + <td></td> + <td>●</td> + <td></td> + </tr> + <tr> + <td>RGBA16UI</td> + <td>RGBA</td> + <td>ui16</td> + <td>ui16</td> + <td>ui16</td> + <td>ui16</td> + <td></td> + <td>●</td> + <td></td> + </tr> + <tr> + <td>RGBA32I</td> + <td>RGBA</td> + <td>i32</td> + <td>i32</td> + <td>i32</td> + <td>i32</td> + <td></td> + <td>●</td> + <td></td> + </tr> + <tr> + <td>RGBA32UI</td> + <td>RGBA</td> + <td>ui32</td> + <td>ui32</td> + <td>ui32</td> + <td>ui32</td> + <td></td> + <td>●</td> + <td></td> + </tr> + </tbody> +</table> + +<dl> + <dd> + <p><br> + 在WebGL2 中，使用<code>HTMLImageElement</code>, <code>HTMLCanvasElement</code>, <code>HTMLVideoElement</code>, <code>ImageBitmap</code>, 或 <code>ImageData</code>作为<code>texImage2D</code> 纹理的版本中，可能的值有：</p> + + <ul> + <li><code>gl.ALPHA</code>: 抛弃红色、绿色和蓝色组件并读取alpha组件。</li> + <li><code>gl.RGB</code>:抛弃alpha组件，读取红色、绿色和蓝色组件。</li> + <li><code>gl.RGBA</code>: 从颜色缓冲区读取红色、绿色、蓝色和alpha组件。</li> + <li><code>gl.LUMINANCE</code>: E每个颜色组件是一个亮度组件，alpha值为1.0。</li> + <li><code>gl.LUMINANCE_ALPHA</code>: 每个组件都是亮度/alpha组件。</li> + <li>当时用 {{domxref("WEBGL_depth_texture")}} 扩展： + <ul> + <li><code>gl.DEPTH_COMPONENT</code></li> + <li><code>gl.DEPTH_STENCIL</code></li> + </ul> + </li> + <li>当时用 {{domxref("EXT_sRGB")}} 扩展： + <ul> + <li><code>ext.SRGB_EXT</code></li> + <li><code>ext.SRGB_ALPHA_EXT</code></li> + </ul> + </li> + <li>当时用 {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, 另外还提供以下值： + <ul> + <li><code>gl.R8</code></li> + <li><code>gl.R16F</code></li> + <li><code>gl.R32F</code></li> + <li><code>gl.R8UI</code></li> + <li><code>gl.RG8</code></li> + <li><code>gl.RG16F</code></li> + <li><code>gl.RG32F</code></li> + <li><code>gl.RG8UI</code></li> + <li><code>gl.RG16UI</code></li> + <li><code>gl.RG32UI</code></li> + <li><code>gl.RGB8</code></li> + <li><code>gl.SRGB8</code></li> + <li><code>gl.RGB565</code></li> + <li><code>gl.R11F_G11F_B10F</code></li> + <li><code>gl.RGB9_E5</code></li> + <li><code>gl.RGB16F</code></li> + <li><code>gl.RGB32F</code></li> + <li><code>gl.RGB8UI</code></li> + <li><code>gl.RGBA8</code></li> + <li><code>gl.SRGB8_ALPHA8</code></li> + <li><code>gl.RGB5_A1</code></li> + <li><code>gl.RGB10_A2</code></li> + <li><code>gl.RGBA4</code></li> + <li><code>gl.RGBA16F</code></li> + <li><code>gl.RGBA32F</code></li> + <li><code>gl.RGBA8UI</code></li> + </ul> + </li> + </ul> + </dd> + <dt><code>width</code></dt> + <dd> {{domxref("GLsizei")}} 指定纹理的宽度。</dd> + <dt><code>height</code></dt> + <dd>{{domxref("GLsizei")}} 指定纹理的高度</dd> + <dt><code>border</code></dt> + <dd>{{domxref("GLint")}} 指定纹理的边框宽度。必须为 0。</dd> + <dt><code>format</code></dt> + <dd> {{domxref("GLenum")}} 指定texel数据格式。在 WebGL 1中，它必须与 <code>internalformat</code> 相同（查看上面). 在WebGL 2中, <a href="https://www.khronos.org/registry/webgl/specs/latest/2.0/#TEXTURE_TYPES_FORMATS_FROM_DOM_ELEMENTS_TABLE">这张表</a>中列出了这些组合。</dd> + <dt><code>type</code></dt> + <dd> {{domxref("GLenum")}} 指定texel数据的数据类型。可能的值: + <ul> + <li><code>gl.UNSIGNED_BYTE</code>: <code>gl.RGBA</code>每个通道8位</li> + <li><code>gl.UNSIGNED_SHORT_5_6_5</code>: 5 bits红, 6 bits绿, 5 bits蓝</li> + <li><code>gl.UNSIGNED_SHORT_4_4_4_4</code>: 4 bits红, 4 bits绿, 4 bits蓝, 4 alpha bits.</li> + <li><code>gl.UNSIGNED_SHORT_5_5_5_1</code>: 5 bits红, 5 bits绿, 5 bits蓝, 1 alpha bit.</li> + <li>当使用 {{domxref("WEBGL_depth_texture")}} 扩展: + <ul> + <li><code>gl.UNSIGNED_SHORT</code></li> + <li><code>gl.UNSIGNED_INT</code></li> + <li><code>ext.UNSIGNED_INT_24_8_WEBGL</code> (constant provided by the extension)</li> + </ul> + </li> + <li>当使用 {{domxref("OES_texture_float")}}扩展 : + <ul> + <li><code>gl.FLOAT</code></li> + </ul> + </li> + <li>当使用 {{domxref("OES_texture_half_float")}} 扩展: + <ul> + <li><code>ext.HALF_FLOAT_OES</code> (constant provided by the extension)</li> + </ul> + </li> + <li>当使用 {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}},下面的值也是可用的: + <ul> + <li><code>gl.BYTE</code></li> + <li><code>gl.UNSIGNED_SHORT</code></li> + <li><code>gl.SHORT</code></li> + <li><code>gl.UNSIGNED_INT</code></li> + <li><code>gl.INT</code></li> + <li><code>gl.HALF_FLOAT</code></li> + <li><code>gl.FLOAT</code></li> + <li><code>gl.UNSIGNED_INT_2_10_10_10_REV</code></li> + <li><code>gl.UNSIGNED_INT_10F_11F_11F_REV</code></li> + <li><code>gl.UNSIGNED_INT_5_9_9_9_REV</code></li> + <li><code>gl.UNSIGNED_INT_24_8</code></li> + <li><code>gl.FLOAT_32_UNSIGNED_INT_24_8_REV</code> (pixels must be {{jsxref("null")}})</li> + </ul> + </li> + </ul> + </dd> + <dt><code>pixels</code></dt> + <dd>下列对象之一可以用作纹理的像素源: + <ul> + <li>{{domxref("ArrayBufferView")}}, + <ul> + <li>{{jsxref("Uint8Array")}} 如果 <code>type</code> 是 <code>gl.UNSIGNED_BYTE</code>则必须使用</li> + <li>{{jsxref("Uint16Array")}} 如果 <code>type</code> 是 <code>gl.UNSIGNED_SHORT_5_6_5</code>, <code>gl.UNSIGNED_SHORT_4_4_4_4</code>, <code>gl.UNSIGNED_SHORT_5_5_5_1</code>, <code>gl.UNSIGNED_SHORT</code> 或<code>ext.HALF_FLOAT_OES</code>则必须使用</li> + <li> {{jsxref("Uint32Array")}} 如果<code>type</code> 是 <code>gl.UNSIGNED_INT</code> 或<code>ext.UNSIGNED_INT_24_8_WEBGL</code>则必须使用</li> + <li> {{jsxref("Float32Array")}} 如果<code>type</code> 是 <code>gl.FLOAT</code>则必须使用</li> + </ul> + </li> + <li>{{domxref("ImageData")}},</li> + <li>{{domxref("HTMLImageElement")}},</li> + <li>{{domxref("HTMLCanvasElement")}},</li> + <li>{{domxref("HTMLVideoElement")}},</li> + <li>{{domxref("ImageBitmap")}}.</li> + </ul> + </dd> + <dt>offset</dt> + <dd> {{domxref("GLintptr")}} 类型偏移到 {{domxref("WebGLBuffer")}}的数据存储中。 用于上传数据到当前范围 {{domxref("WebGLTexture")}} 从<code>WebGLBuffer</code> 范围到<code>PIXEL_UNPACK_BUFFER</code> 目标。(仅在WebGL 2中 )</dd> + <dd> + <ul> + </ul> + </dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>None.</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); +</pre> + +<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.8", "texImage2D")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>WebGL.初始定义</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glTexImage2D.xml", "glTexImage2D")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL ES 2.0 API手册(类似).</td> + </tr> + <tr> + <td>{{SpecName('WebGL2', "#3.7.6", "texImage2D")}}</td> + <td>{{Spec2('WebGL2')}}</td> + <td>WebGL更新定义.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0', "glTexImage2D.xhtml", "glTexImage2D")}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td>OpenGL ES 3.0 API手册(类似).</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.texImage2D")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.createTexture()")}}</li> + <li>{{domxref("WebGLRenderingContext.bindTexture()")}}</li> + <li>{{domxref("WebGLRenderingContext.texSubImage2D()")}}</li> + <li>{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}</li> + <li>{{domxref("WebGLRenderingContext.copyTexImage2D()")}}</li> + <li>{{domxref("WebGLRenderingContext.getTexParameter()")}}</li> + <li>{{domxref("WEBGL_depth_texture")}}</li> + <li>{{domxref("OES_texture_float")}}</li> + <li>{{domxref("OES_texture_half_float")}}</li> + <li>{{domxref("EXT_sRGB")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/texparameter/index.html b/files/zh-cn/web/api/webglrenderingcontext/texparameter/index.html new file mode 100644 index 0000000000..6d32ac62e4 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/texparameter/index.html @@ -0,0 +1,173 @@ +--- +title: 'WebGLRenderingContext.texParameter[fi]()' +slug: Web/API/WebGLRenderingContext/texParameter +translation_of: Web/API/WebGLRenderingContext/texParameter +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 的<strong><code>WebGLRenderingContext.texParameter[fi]()</code></strong>方法用于设置纹理参数.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var>gl</var>.texParameterf(GLenum <var>target</var>, GLenum <var>pname</var>, GLfloat <var>param</var>); +void <var>gl</var>.texParameteri(GLenum <var>target</var>, GLenum <var>pname</var>, GLint <var>param</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>target</dt> + <dd>{{domxref("GLenum")}} 指定绑定点(目标)。可能的值：</dd> + <dd> + <ul> + <li><code>gl.TEXTURE_2D</code>: 二维纹理.</li> + <li><code>gl.TEXTURE_CUBE_MAP</code>: 立方体纹理.</li> + <li>当使用 {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} 时,还可以使用以下值 + <ul> + <li><code>gl.TEXTURE_3D</code>: 三维贴图.</li> + <li><code>gl.TEXTURE_2D_ARRAY</code>: 二维数组贴图.</li> + </ul> + </li> + </ul> + </dd> +</dl> + +<p><code>pname</code> 参数是 {{domxref("Glenum")}} 指定要设置的纹理参数. <code>param</code> 参数是 {{domxref("GLfloat")}} 或 {{domxref("GLint")}} 已指定的 <code>pname</code>参数的值。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><code>pname</code></th> + <th scope="col">描述</th> + <th scope="col"><code>参数</code></th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="3">Available in WebGL 1</th> + </tr> + <tr> + <td><code>gl.TEXTURE_MAG_FILTER</code></td> + <td>纹理放大滤波器</td> + <td><code>gl.LINEAR</code> (默认值), <code>gl.NEAREST</code>.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_MIN_FILTER</code></td> + <td>纹理缩小滤波器</td> + <td><code>gl.LINEAR</code>, <code>gl.NEAREST</code>, <code>gl.NEAREST_MIPMAP_NEAREST</code>, <code>gl.LINEAR_MIPMAP_NEAREST</code>, <code>gl.NEAREST_MIPMAP_LINEAR</code> (默认值), <code>gl.LINEAR_MIPMAP_LINEAR</code>.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_WRAP_S</code></td> + <td>纹理坐标水平填充 <code>s</code></td> + <td><code>gl.REPEAT</code> (默认值),<code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_WRAP_T</code></td> + <td>纹理坐标垂直填充 <code>t</code></td> + <td><code>gl.REPEAT</code> (默认值),<code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td> + </tr> + <tr> + <th colspan="3">Additionally available when using the {{domxref("EXT_texture_filter_anisotropic")}} extension</th> + </tr> + <tr> + <td><code>ext.TEXTURE_MAX_ANISOTROPY_EXT</code></td> + <td>纹理最大向异性</td> + <td> {{domxref("GLfloat")}} 值.</td> + </tr> + <tr> + <th colspan="3">Additionally available when using a WebGL 2 context</th> + </tr> + <tr> + <td><code>gl.TEXTURE_BASE_LEVEL</code></td> + <td>纹理映射等级</td> + <td>任何整型值.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_COMPARE_FUNC</code></td> + <td>纹理对比函数</td> + <td><code>gl.LEQUAL</code> (默认值), <code>gl.GEQUAL</code>, <code>gl.LESS</code>, <code>gl.GREATER</code>, <code>gl.EQUAL</code>, <code>gl.NOTEQUAL</code>, <code>gl.ALWAYS</code>, <code>gl.NEVER</code>.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_COMPARE_MODE</code></td> + <td>纹理对比模式</td> + <td><code>gl.NONE</code> (默认值), <code>gl.COMPARE_REF_TO_TEXTURE</code>.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_MAX_LEVEL</code></td> + <td>最大纹理映射数组等级</td> + <td>任何整型值.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_MAX_LOD</code></td> + <td>纹理最大细节层次值</td> + <td>任何整型值.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_MIN_LOD</code></td> + <td>纹理最小细节层次值</td> + <td>任何浮点型值.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_WRAP_R</code></td> + <td>纹理坐标<code>r</code>包装功能</td> + <td><code>gl.REPEAT</code> (默认值), <code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td> + </tr> + </tbody> +</table> + +<h3 id="返回值">返回值</h3> + +<p><code>INVALID_ENUM </code>target不是合法的值。</p> + +<p><code>INVALID_OPRATION </code>当前目标上没有绑定纹理对象。</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); +gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST); +</pre> + +<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.8", "texParameter[fi]")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>WebGL初始定义.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glTexParameter.xml", "glTexParameter")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL ES 2.0 API手册(类似).</td> + </tr> + <tr> + <td>{{SpecName('WebGL2', "#3.7.6", "texParameter[fi]")}}</td> + <td>{{Spec2('WebGL2')}}</td> + <td>WebGL更新定义.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0', "glTexParameter.xhtml", "glTexParameter")}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td>OpenGL ES 3.0 API手册(类似).</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.texParameterf")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.getTexParameter()")}}</li> + <li>{{domxref("EXT_texture_filter_anisotropic")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/uniform/index.html b/files/zh-cn/web/api/webglrenderingcontext/uniform/index.html new file mode 100644 index 0000000000..d3c65c9b2c --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/uniform/index.html @@ -0,0 +1,93 @@ +--- +title: 'WebGLRenderingContext.uniform[1234][fi][v]()' +slug: Web/API/WebGLRenderingContext/uniform +translation_of: Web/API/WebGLRenderingContext/uniform +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 的<strong><code>WebGLRenderingContext.uniform[1234][fi][v]()</code></strong> 方法指定了uniform 变量的值。所有在ShaderProgram对象中定义的，且激活的uniform变量在ShaderProgram 执行link成功后被初始化为0。它们将保留通过调用此方法分配给它们的值，直到再次将其初始化为0时，也就是ShaderProgram对象上发生下一次成功的link操作为止。</p> + +<div class="note"> +<p>这里描述的许多函数都扩展了 WebGL 2 接口, 可在以下地址查看 {{domxref("WebGL2RenderingContext.uniform","WebGL2RenderingContext.uniform[1234][uif][v]()")}}.</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">void <var>gl</var>.uniform1f(<var>location</var>, <var>v0</var>); +void <var>gl</var>.uniform1fv(<var>location</var>, <var>value</var>); +void <var>gl</var>.uniform1i(<var>location</var>, <var>v0</var>); +void <var>gl</var>.uniform1iv(<var>location</var>, <var>value</var>); + +void <var>gl</var>.uniform2f(<var>location</var>, <var>v0</var>, <var>v1</var>); +void <var>gl</var>.uniform2fv(<var>location</var>, <var>value</var>); +void <var>gl</var>.uniform2i(<var>location</var>, <var>v0</var>, <var>v1</var>); +void <var>gl</var>.uniform2iv(<var>location</var>, <var>value</var>); + +void <var>gl</var>.uniform3f(<var>location</var>, <var>v0</var>, <var>v1</var>, <var>v2</var>); +void <var>gl</var>.uniform3fv(<var>location</var>, <var>value</var>); +void <var>gl</var>.uniform3i(<var>location</var>, <var>v0</var>, <var>v1</var>, <var>v2</var>); +void <var>gl</var>.uniform3iv(<var>location</var>, <var>value</var>); + +void <var>gl</var>.uniform4f(<var>location</var>, <var>v0</var>, <var>v1</var>, <var>v2</var>, <var>v3</var>); +void <var>gl</var>.uniform4fv(<var>location</var>, <var>value</var>); +void <var>gl</var>.uniform4i(<var>location</var>, <var>v0</var>, <var>v1</var>, <var>v2</var>, <var>v3</var>); +void <var>gl</var>.uniform4iv(<var>location</var>, <var>value</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>location</dt> + <dd> {{domxref("WebGLUniformLocation")}} 对象包含了将要修改的uniform 属性位置.</dd> + <dt><code>value, v0, v1, v2, v3</code></dt> + <dd>新的值将被用于uniform 变量. 可能的类型: + <ul> + <li>浮点值 {{jsxref("Number")}}(方法名跟"f").</li> + <li>浮点数组 (例如 {{jsxref("Float32Array")}} 或 {{jsxref("Array")}} 的数组) 用于浮点型向量方法 (方法名跟 "fv").</li> + <li>整型值 {{jsxref("Number")}} (方法名跟"i").</li> + <li>整型数组{{jsxref("Int32Array")}} 用于整型向量方法 (方法名跟 "iv").</li> + </ul> + </dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>None.</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js notranslate">gl.uniform1f(u_alpha, 0.8);</pre> + +<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.10", "uniform")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初始定义</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glUniform.xml", "glUniform")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL API的主页.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.uniform1f")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.uniformMatrix()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/uniformmatrix/index.html b/files/zh-cn/web/api/webglrenderingcontext/uniformmatrix/index.html new file mode 100644 index 0000000000..57669ab170 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/uniformmatrix/index.html @@ -0,0 +1,81 @@ +--- +title: 'WebGLRenderingContext.uniformMatrix[234]fv()' +slug: Web/API/WebGLRenderingContext/uniformMatrix +tags: + - WebGL + - WebGLAPI + - WebGLRenderingContext + - uniformMatrix2fv + - uniformMatrix3fv + - uniformMatrix4fv + - 矩阵 +translation_of: Web/API/WebGLRenderingContext/uniformMatrix +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 的<strong><code>WebGLRenderingContext.uniformMatrix[234]fv()</code></strong> 方法为 uniform variables 指定了矩阵值 .</p> + +<p>该方法的3个版本 (<code>uniformMatrix2fv()</code>, <code>uniformMatrix3fv()</code>, 和<code>unifomMatrix4fv()</code>) ,分别以二阶,三阶,和四阶方阵作为输入值,它们应是分别具有4,9,16个浮点数的数组.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em>WebGLRenderingContext</em>.uniformMatrix2fv(<em>location</em>, <em>transpose</em>, <em>value</em>); +<em>WebGLRenderingContext</em>.uniformMatrix3fv(<em>location</em>, <em>transpose</em>, <em>value</em>); +<em>WebGLRenderingContext</em>.uniformMatrix4fv(<em>location</em>, <em>transpose</em>, <em>value</em>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>location</code></dt> + <dd>{{domxref("WebGLUniformLocation")}} 对象包含了要修改的 uniform attribute位置. 位置使用 {{domxref("WebGLRenderingContext.getUniformLocation", "getUniformLocation()")}}获得.</dd> + <dt><code>transpose</code></dt> + <dd>{{domxref("GLboolean")}} 指定是否转置矩阵。必须为 <code>false</code>.</dd> + <dt><code>value</code></dt> + <dd> + <p> {{jsxref("Float32Array")}} 型或者是 <code>GLfloat</code> 序列值.假定值以列主要顺序提供.</p> + </dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p><code>undefined</code></p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">gl.uniformMatrix2fv(loc, false, [2,1, 2,2]);</pre> + +<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.10", "uniformMatrix")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glUniform.xml", "glUniform")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.uniformMatrix2fv")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.uniform()")}}</li> + <li>{{domxref("WebGL2RenderingContext.uniformMatrix()")}} – WebGL 2 versions of these methods.</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/useprogram/index.html b/files/zh-cn/web/api/webglrenderingcontext/useprogram/index.html new file mode 100644 index 0000000000..822a0b5684 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/useprogram/index.html @@ -0,0 +1,76 @@ +--- +title: WebGLRenderingContext.useProgram() +slug: Web/API/WebGLRenderingContext/useProgram +translation_of: Web/API/WebGLRenderingContext/useProgram +--- +<div>{{APIRef("WebGL")}}</div> + +<p> <strong><code>WebGLRenderingContext.useProgram()</code></strong> 方法将定义好的{{domxref("WebGLProgram")}} 对象添加到当前的渲染状态中。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var>gl</var>.useProgram(<var>program</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>program</dt> + <dd>需要添加的{{domxref("WebGLProgram")}}对象</dd> +</dl> + +<h3 id="返回参数">返回参数</h3> + +<p>无.</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">var program = gl.createProgram(); + +// Attach pre-existing shaders +gl.attachShader(program, vertexShader); +gl.attachShader(program, fragmentShader); + +gl.linkProgram(program); +gl.useProgram(program); +</pre> + +<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.9", "useProgram")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>原始定义.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glUseProgram.xml", "glUseProgram")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL API主页.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.useProgram")}}</p> + +<h2 id="相关资料">相关资料</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/validateprogram/index.html b/files/zh-cn/web/api/webglrenderingcontext/validateprogram/index.html new file mode 100644 index 0000000000..7139cec259 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/validateprogram/index.html @@ -0,0 +1,88 @@ +--- +title: WebGLRenderingContext.validateProgram() +slug: Web/API/WebGLRenderingContext/validateProgram +tags: + - API + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/validateProgram +--- +<div>{{APIRef("WebGL")}}</div> + +<p><strong><code>WebGLRenderingContext.validateProgram()</code></strong> 是一种 <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> ，主要是用来验证 {{domxref("WebGLProgram")}}。 它在检查 WebGLProgram 程序是否链接成功的同时还会检查其是否能在当前的 WebGL 中使用。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var>gl</var>.validateProgram(<var>program</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>program</dt> + <dd>待验证的 {{domxref("WebGLProgram")}}。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>None.</p> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js">var program = gl.createProgram(); + +// Attach pre-existing shaders +gl.attachShader(program, vertexShader); +gl.attachShader(program, fragmentShader); + +gl.linkProgram(program); +gl.validateProgram(program); + +if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) { + var info = gl.getProgramInfoLog(program); + throw '不能编译 WebGL 程序. \n\n' + info; +} + +gl.useProgram(program); +</pre> + +<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.9", "validateProgram")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>初次定义.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glValidateProgram.xml", "glValidateProgram")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>OpenGL API 的帮助页中.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.validateProgram")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/vertexattrib/index.html b/files/zh-cn/web/api/webglrenderingcontext/vertexattrib/index.html new file mode 100644 index 0000000000..d511b0c1d8 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/vertexattrib/index.html @@ -0,0 +1,81 @@ +--- +title: 'WebGLRenderingContext.vertexAttrib[1234]f[v]()' +slug: Web/API/WebGLRenderingContext/vertexAttrib +translation_of: Web/API/WebGLRenderingContext/vertexAttrib +--- +<div>{{APIRef("WebGL")}}</div> + +<p> <strong><code>WebGLRenderingContext.vertexAttrib[1234]f[v]()</code></strong> 是 <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 的方法，可以为顶点attibute变量赋值。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var>gl</var>.vertexAttrib1f(<var>index</var>, <var>v0</var>); +void <var>gl</var>.vertexAttrib2f(<var>index</var>, <var>v0</var>, <var>v1</var>); +void <var>gl</var>.vertexAttrib3f(<var>index</var>, <var>v0</var>, <var>v1</var>, <var>v2</var>); +void <var>gl</var>.vertexAttrib4f(<var>index</var>, <var>v0</var>, <var>v1</var>, <var>v2</var>, <var>v3</var>); + +void <var>gl</var>.vertexAttrib1fv(<var>index</var>, <var>value</var>); +void <var>gl</var>.vertexAttrib2fv(<var>index</var>, <var>value</var>); +void <var>gl</var>.vertexAttrib3fv(<var>index</var>, <var>value</var>); +void <var>gl</var>.vertexAttrib4fv(<var>index</var>, <var>value</var>); +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>index</code></dt> + <dd> {{domxref("GLuint")}} 类型，指定了待修改顶点attribute变量的存储位置。</dd> + <dt><code>v0, v1, v2, v3</code></dt> + <dd>浮点数类型{{jsxref("Number")}}，用于设置顶点attibute变量的各分量值。</dd> + <dt><code>value</code></dt> + <dd> + <p>{{jsxref("Float32Array")}} 类型，用于设置顶点attibute变量的向量值。</p> + </dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>无。</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">const a_foobar = gl.getAttribLocation(shaderProgram, 'foobar'); +//either set each component individually: +gl.vertexAttrib3f(a_foobar, 10.0, 5.0, 2.0); +//or provide a Float32Array: +const floatArray = new Float32Array([10.0, 5.0, 2.0]); +gl.vertexAttrib3fv(a_foobar, floatArray);</pre> + +<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.10", "vertexAttrib")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glVertexAttrib.xml", "glVertexAttrib")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.vertexAttrib1f")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.getVertexAttrib()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/vertexattribpointer/index.html b/files/zh-cn/web/api/webglrenderingcontext/vertexattribpointer/index.html new file mode 100644 index 0000000000..6b0ce373b7 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/vertexattribpointer/index.html @@ -0,0 +1,270 @@ +--- +title: WebGLRenderingContext.vertexAttribPointer() +slug: Web/API/WebGLRenderingContext/vertexAttribPointer +translation_of: Web/API/WebGLRenderingContext/vertexAttribPointer +--- +<div>{{APIRef("WebGL")}}</div> + +<p class="summary">The <strong><code>WebGLRenderingContext.vertexAttribPointer()</code></strong> method of the <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> binds the buffer currently bound to <code>gl.ARRAY_BUFFER</code> to a generic vertex attribute of the current vertex buffer object and specifies its layout.<br> + 告诉显卡从当前绑定的缓冲区（bindBuffer()指定的缓冲区）中读取顶点数据。</p> + +<p class="summary"> WebGL API 的<code><strong>WebGLRenderingContext.vertexAttribPointer()</strong></code>方法绑定当前缓冲区范围到<code>gl.ARRAY_BUFFER</code>,成为当前顶点缓冲区对象的通用顶点属性并指定它的布局(缓冲区对象中的偏移量)。</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">void <em>gl</em>.vertexAttribPointer(<em>index</em>, <em>size</em>, <em>type</em>, <em>normalized</em>, <em>stride</em>, <em>offset</em>); +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>index</code></dt> + <dd>A {{domxref("GLuint")}} specifying the index of the vertex attribute that is to be modified.<br> + 指定要修改的顶点属性的索引。</dd> + <dt><code>size</code></dt> + <dd>A {{domxref("GLint")}} specifying the number of components per vertex attribute. Must be 1, 2, 3, or 4.<br> + 指定每个顶点属性的组成数量，必须是1，2，3或4。</dd> + <dt><code>type</code></dt> + <dd>A {{domxref("GLenum")}} specifying the data type of each component in the array. Possible values:<br> + 指定数组中每个元素的数据类型可能是： + <ul> + <li><code>gl.BYTE</code>: signed 8-bit integer, with values in [-128, 127]<br> + 有符号的8位整数，范围[-128, 127]</li> + <li><code>gl.SHORT</code>: signed 16-bit integer, with values in [-32768, 32767]<br> + 有符号的16位整数，范围[-32768, 32767]</li> + <li><code>gl.UNSIGNED_BYTE</code>: unsigned 8-bit integer, with values in [0, 255]<br> + 无符号的8位整数，范围[0, 255]</li> + <li><code>gl.UNSIGNED_SHORT</code>: unsigned 16-bit integer, with values in [0, 65535]<br> + 无符号的16位整数，范围[0, 65535]</li> + <li><code>gl.FLOAT</code>: 32-bit IEEE floating point number<br> + 32位IEEE标准的浮点数</li> + <li>When using a {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, the following values are available additionally:<br> + 使用WebGL2版本的还可以使用以下值： + <ul> + <li><code>gl.HALF_FLOAT</code>: 16-bit IEEE floating point number<br> + 16位IEEE标准的浮点数</li> + </ul> + </li> + </ul> + </dd> + <dt><code>normalized</code></dt> + <dd>A {{domxref("GLboolean")}} specifying whether integer data values should be normalized into a certain range when being casted to a float.<br> + 当转换为浮点数时是否应该将整数数值归一化到特定的范围。 + <ul> + <li>For types <code>gl.BYTE</code> and <code>gl.SHORT</code>, normalizes the values to [-1, 1] if true.<br> + 对于类型<code>gl.BYTE</code>和<code>gl.SHORT</code>，如果是true则将值归一化为[-1, 1]</li> + <li>For types <code>gl.UNSIGNED_BYTE</code> and <code>gl.UNSIGNED_SHORT</code>, normalizes the values to [0, 1] if true.<br> + 对于类型<code>gl.UNSIGNED_BYTE</code>和<code>gl.UNSIGNED_SHORT</code>，如果是true则将值归一化为[0, 1]</li> + <li>For types <code>gl.FLOAT</code> and <code>gl.HALF_FLOAT</code>, this parameter has no effect.<br> + 对于类型<code>gl.FLOAT</code>和<code>gl.HALF_FLOAT</code>，此参数无效</li> + </ul> + </dd> + <dt><code>stride</code></dt> + <dd>A {{domxref("GLsizei")}} specifying the offset in bytes between the beginning of consecutive vertex attributes. Cannot be larger than 255. If stride is 0, the attribute is assumed to be tightly packed, that is, the attributes are not interleaved but each attribute is in a separate block, and the next vertex' attribute follows immediately after the current vertex.</dd> + <dd>一个GLsizei，以字节为单位指定连续顶点属性开始之间的偏移量(即数组中一行长度)。不能大于255。如果stride为0，则假定该属性是紧密打包的，即不交错属性，每个属性在一个单独的块中，下一个顶点的属性紧跟当前顶点之后。</dd> + <dt></dt> + <dt><code>offset</code></dt> + <dd>A {{domxref("GLintptr")}} specifying an offset in bytes of the first component in the vertex attribute array. Must be a multiple of the byte length of <code>type</code>.</dd> + <dd>{{domxref("GLintptr")}}指定顶点属性数组中第一部分的字节偏移量。必须是类型的字节长度的倍数。</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>None.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<ul> + <li>A <code>gl.INVALID_VALUE</code> error is thrown if <code>offset</code> is negative.</li> + <li>如果偏移量为负，则抛出<code>gl.INVALID_VALUE</code>错误。</li> + <li>A <code>gl.INVALID_OPERATION</code> error is thrown if <code>stride</code> and <code>offset</code> are not multiples of the size of the data type.</li> + <li>如果<code>stride</code>和offset不是数据类型大小的倍数，则抛出<code>gl.INVALID_OPERATION</code>错误。</li> + <li>A <code>gl.INVALID_OPERATION</code> error is thrown if no WebGLBuffer is bound to the ARRAY_BUFFER target.</li> + <li>如果没有将WebGLBuffer绑定到<code>ARRAY_BUFFER</code>目标，则抛出<code>gl.INVALID_OPERATION</code>错误。</li> + <li>When using a {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, a <code>gl.INVALID_OPERATION</code> error is thrown if this vertex attribute is defined as a integer in the vertex shader (e.g. <code>uvec4</code> or <code>ivec4</code>, instead of <code>vec4</code>).</li> +</ul> + +<h2 id="Description">Description</h2> + +<p>Let's assume we want to render some 3D geometry, and for that we will need to supply our vertices to the Vertex Shader. Each vertex has a few attributes, like position, normal vector, or texture coordinate, that are defined in an {{jsxref("ArrayBuffer")}} and will be supplied to the Vertex Buffer Object (VBO). First, we need to bind the {{domxref("WebGLBuffer")}} we want to use to <code>gl.ARRAY_BUFFER</code>, then, with this method, <code>gl.vertexAttribPointer()</code>, we specify in what order the attributes are stored, and what data type they are in. In addition, we need to include the stride, which is the total byte length of all attributes for one vertex. Also, we have to call {{domxref("WebGLRenderingContext/enableVertexAttribArray", "gl.enableVertexAttribArray()")}} to tell WebGL that this attribute should be filled with data from our array buffer.</p> + +<p>Usually, your 3D geometry is already in a certain binary format, so you need to read the specification of that specific format to figure out the memory layout. However, if you are designing the format yourself, or your geometry is in text files (like <a href="https://en.wikipedia.org/wiki/Wavefront_.obj_file">Wavefront .obj files</a>) and must be converted into an <code>ArrayBuffer</code> at runtime, you have free choice on how to structure the memory. For highest performance, <a href="https://en.wikipedia.org/wiki/Interleaved_memory">interleave</a> the attributes and use the smallest data type that still accurately represents your geometry.</p> + +<p>The maximum number of vertex attributes depends on the graphics card, and you can call <code>gl.getParameter(gl.MAX_VERTEX_ATTRIBS)</code> to get this value. On high-end graphics cards, the maximum is 16, on lower-end graphics cards, the value will be lower.</p> + +<h3 id="Attribute_index">Attribute index</h3> + +<p>For each attribute, you must specify its index. This is independent from the location inside the array buffer, so your attributes can be sent in a different order than how they are stored in the array buffer. You have two options:</p> + +<ul> + <li>Either you specify the index yourself. In this case, you call {{domxref("WebGLRenderingContext.bindAttribLocation()", "gl.bindAttribLocation()")}} to connect a named attribute from the vertex shader to the index you want to use. This must be done before calling {{domxref("WebGLRenderingContext.linkProgram()", "gl.linkProgram()")}}. You can then provide this same index to <code>gl.vertexAttribPointer()</code>.</li> + <li>Alternatively, you use the index that is assigned by the graphics card when compiling the vertex shader. Depending on the graphics card, the index will vary, so you must call {{domxref("WebGLRenderingContext.getAttribLocation()", "gl.getAttribLocation()")}} to find out the index, and then provide this index to <code>gl.vertexAttribPointer()</code>.<br> + If you are using WebGL 2, you can specify the index yourself in the vertex shader code and override the default used by the graphics card, e.g. <code>layout(location = 3) in vec4 position;</code> would set the <code>"position"</code> attribute to index 3.</li> +</ul> + +<h3 id="Integer_attributes">Integer attributes</h3> + +<p>While the <code>ArrayBuffer</code> can be filled with both integers and floats, the attributes will always be converted to a float when they are sent to the vertex shader. If you need to use integers in your vertex shader code, you can either cast the float back to an integer in the vertex shader (e.g. <code>(int) floatNumber</code>), or use {{domxref("WebGL2RenderingContext.vertexAttribIPointer()", "gl.vertexAttribIPointer()")}} from WebGL2.</p> + +<h3 id="Default_attribute_values">Default attribute values</h3> + +<p>The vertex shader code may include a number of attributes, but we don't need to specify the values for each attribute. Instead, we can supply a default value that will be identical for all vertices. We can call <code>{{domxref("WebGLRenderingContext.disableVertexAttribArray()", "gl.disableVertexAttribArray()")}}</code> to tell WebGL to use the default value, while calling {{domxref("WebGLRenderingContext.enableVertexAttribArray()", "gl.enableVertexAttribArray()")}} will read the values from the array buffer as specified with <code>gl.vertexAttribPointer()</code>.</p> + +<p>Similarily, if our vertex shader expects e.g. a 4-component attribute with <code>vec4</code> but in our <code>gl.vertexAttribPointer()</code> call we set the <code>size</code> to <code>2</code>, then WebGL will set the first two components based on the array buffer, while the third and fourth components are taken from the default value.</p> + +<p>The default value is <code>vec4(0.0, 0.0, 0.0, 1.0)</code> by default but we can specify a different default value with <code>{{domxref("WebGLRenderingContext.vertexAttrib()", "gl.vertexAttrib[1234]f[v]()")}}</code>.</p> + +<p>For example, your vertex shader may be using a position and a color attribute. Most meshes have the color specified at a per-vertex level, but some meshes are of a uniform shade. For those meshes, it is not necessary to place the same color for each vertex into the array buffer, so you use <code>gl.vertexAttrib4fv()</code> to set a constant color.</p> + +<h3 id="Querying_current_settings">Querying current settings</h3> + +<p>You can call {{domxref("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} and {{domxref("WebGLRenderingContext.getVertexAttribOffset()", "gl.getVertexAttribOffset()")}} to get the current parameters for an attribute, e.g. the data type or whether the attribute should be normalized. Keep in mind that these WebGL functions have a slow performance and it is better to store the state inside your JavaScript application. However, these functions are great for debugging a WebGL context without touching the application code.</p> + +<h2 id="Examples">Examples</h2> + +<p>This example shows how to send your vertex attributes to the shader program. We use an imaginary data structure where the attributes of each vertex are stored interleaved with a length of 20 bytes per vertex:</p> + +<ol> + <li><strong>position:</strong> We need to store the X, Y and Z coordinates. For highest precision, we use 32-bit floats; in total this uses 12 bytes.</li> + <li><strong>normal vector:</strong> We need to store the X, Y and Z components of the normal vector, but since precision is not that important, we use 8-bit signed integers. For better performance, we align the data to 32 bits by also storing a fourth zero-valued component, bringing the total size to 4 bytes. Also, we tell WebGL to normalize the values because our normals are always in range [-1, 1].</li> + <li><strong>texture coordinate:</strong> We need to store the U and V coordinates; for this 16-bit unsigned integers offer enough precision, the total size is 4 bytes. We also tell WebGL to normalize the values to [0, 1].</li> +</ol> + +<p>For example, the following vertex:</p> + +<pre class="brush: json">{ + "position": [1.0, 2.0, 1.5], + "normal": [1.0, 0.0, 0.0], + "texCoord": [0.5, 0.25] +} +</pre> + +<p>Will be stored in the array buffer as follows:</p> + +<table style="width: auto;"> + <tbody> + <tr> + <td style="background-color: #ccf;">00 00 80 3F</td> + <td style="background-color: #ddf;">00 00 00 40</td> + <td style="background-color: #ccf;">00 00 0C 3F</td> + <td style="background-color: #cfc;">7F</td> + <td style="background-color: #dfd;">00</td> + <td style="background-color: #cfc;">00</td> + <td style="background-color: #dfd;">00</td> + <td style="background-color: #fcc;">7F FF</td> + <td style="background-color: #fdd;">3F FF</td> + </tr> + </tbody> +</table> + +<h3 id="Creating_the_array_buffer">Creating the array buffer</h3> + +<p>First, we dynamically create the array buffer from JSON data using a {{domxref("DataView")}}. Note the use of <code>true</code> because WebGL expects our data to be in little-endian.</p> + +<pre class="brush: js">//load geometry with fetch() and Response.json() +const response = await fetch('assets/geometry.json'); +const vertices = await response.json(); + +//Create array buffer +const buffer = new ArrayBuffer(20 * vertices.length); +//Fill array buffer +const dv = new DataView(buffer); +for (let i = 0; i < vertices.length; i++) { + dv.setFloat32(20 * i, vertices[i].position[0], true); + dv.setFloat32(20 * i + 4, vertices[i].position[1], true); + dv.setFloat32(20 * i + 8, vertices[i].position[2], true); + dv.setInt8(20 * i + 12, vertices[i].normal[0] * 0x7F); + dv.setInt8(20 * i + 13, vertices[i].normal[1] * 0x7F); + dv.setInt8(20 * i + 14, vertices[i].normal[2] * 0x7F); + dv.setInt8(20 * i + 15, 0); + dv.setUint16(20 * i + 16, vertices[i].texCoord[0] * 0xFFFF, true); + dv.setUint16(20 * i + 18, vertices[i].texCoord[1] * 0xFFFF, true); +}</pre> + +<p>For higher performance, we could also do the previous JSON to ArrayBuffer conversion on the server-side, e.g. with Node.js. Then we could load the binary file and interpret it as an array buffer:</p> + +<pre class="brush: js">const response = await fetch('assets/geometry.bin'); +const buffer = await response.arrayBuffer(); +</pre> + +<h3 id="Consume_array_buffer_with_WebGL">Consume array buffer with WebGL</h3> + +<p>First, we create a new Vertex Buffer Object (VBO) and supply it with our array buffer:</p> + +<pre class="brush: js">//Bind array buffer to a Vertex Buffer Object +const vbo = gl.createBuffer(); +gl.bindBuffer(gl.ARRAY_BUFFER, vbo); +gl.bufferData(gl.ARRAY_BUFFER, buffer, gl.STATIC_DRAW); +</pre> + +<p>Then, we specify the memory layout of the array buffer, either by setting the index ourselves:</p> + +<pre class="brush: js, highlight:[3, 6, 9]">//Describe the layout of the buffer: +//1. position, not normalized +gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 20, 0); +gl.enableVertexAttribArray(0); +//2. normal vector, normalized to [-1, 1] +gl.vertexAttribPointer(1, 4, gl.BYTE, true, 20, 12); +gl.enableVertexAttribArray(1); +//3. texture coordinates, normalized to [0, 1] +gl.vertexAttribPointer(2, 2, gl.UNSIGNED_SHORT, true, 20, 16); +gl.enableVertexAttribArray(2); + +//Set the attributes in the vertex shader to the same indices +gl.bindAttribLocation(shaderProgram, 0, 'position'); +gl.bindAttribLocation(shaderProgram, 1, 'normal'); +gl.bindAttribLocation(shaderProgram, 2, 'texUV'); +//Since the attribute indices have changed, we must re-link the shader +//Note that this will reset all uniforms that were previously set. +gl.linkProgram(shaderProgram); +</pre> + +<p>Or we can use the index provided by the graphics card instead of setting the index ourselves; this avoids the re-linking of the shader program.</p> + +<pre class="brush: js, highlight:[2, 6, 10]">const locPosition = gl.getAttribLocation(shaderProgram, 'position'); +gl.vertexAttribPointer(locPosition, 3, gl.FLOAT, false, 20, 0); +gl.enableVertexAttribArray(locPosition); + +const locNormal = gl.getAttribLocation(shaderProgram, 'normal'); +gl.vertexAttribPointer(locNormal, 4, gl.BYTE, true, 20, 12); +gl.enableVertexAttribArray(locNormal); + +const locTexUV = gl.getAttribLocation(shaderProgram, 'texUV'); +gl.vertexAttribPointer(locTexUV, 2, gl.UNSIGNED_SHORT, true, 20, 16); +gl.enableVertexAttribArray(locTexUV); +</pre> + +<h2 id="Specifications">Specifications</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.10", "vertexAttribPointer")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glVertexAttribPointer.xml", "glVertexAttribPointer")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.vertexAttribPointer")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://www.khronos.org/opengl/wiki/Vertex_Specification">Vertex Specification</a> on the OpenGL wiki</li> + <li>{{domxref("WebGL2RenderingContext.vertexAttribIPointer()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/viewport/index.html b/files/zh-cn/web/api/webglrenderingcontext/viewport/index.html new file mode 100644 index 0000000000..5ec23528a3 --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/viewport/index.html @@ -0,0 +1,91 @@ +--- +title: WebGLRenderingContext.viewport() +slug: Web/API/WebGLRenderingContext/viewport +tags: + - WebGL + - viewport +translation_of: Web/API/WebGLRenderingContext/viewport +--- +<div>{{APIRef("WebGL")}}</div> + +<p><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 的 <strong><code>WebGLRenderingContext.viewport()</code></strong> 方法，用来设置视口，即指定从标准设备到窗口坐标的x、y仿射变换。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var><em>void gl</em>.viewport</var><var>(x, y, width, height);</var> +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>x</code></dt> + <dd>{{domxref("GLint")}}，用来设定视口的左下角水平坐标。默认值：0。</dd> + <dt><code>y</code></dt> + <dd>{{domxref("GLint")}}，用来设定视口的左下角垂直坐标。默认值：0。</dd> + <dt>width</dt> + <dd>非负数{{domxref("Glsizei")}}，用来设定视口的宽度。默认值：canvas的宽度。</dd> + <dt>height</dt> + <dd>非负数{{domxref("Glsizei")}}，用来设定视口的高度。默认值：canvas的高度。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>None.</p> + +<h3 id="异常错误">异常错误</h3> + +<p>只要宽度或高度有一个为负值，<code>gl.INVALID_VALUE错误将被抛出。</code>.</p> + +<h2 id="样例">样例</h2> + +<p>当你第一次创建WebGL上下文的时候，视口的大小将和canvas的大小是匹配的。然而，如果你重新改变了canvas的大小，你需要告诉WebGL上下文设定新的视口。在这里，你可以使用<code>gl.viewport。</code></p> + +<pre class="brush: js">gl.viewport(0, 0, canvas.width, canvas.height); +</pre> + +<p>视口的宽度和高度的设定范围是依赖于底层如何实现的。如果你要获取这个范围，你可以查询<code>MAX_VIEWPORT_DIMS</code> 常量，它将返回 {{jsxref("Int32Array")}}。</p> + +<pre class="brush: js">gl.getParameter(gl.MAX_VIEWPORT_DIMS); +// e.g. Int32Array[16384, 16384] +</pre> + +<p>如果要获取当前的视口，则可以查询<code>VIEWPORT</code> 常量。</p> + +<pre class="brush: js">gl.getParameter(gl.VIEWPORT); +// e.g. Int32Array[0, 0, 640, 480] +</pre> + +<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.4", "viewport")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glViewport.xml", "glViewport")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.viewport")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.scissor()")}}</li> + <li>{{domxref("WebGLRenderingContext.getParameter()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/多边形偏移(polygonoffset)/index.html b/files/zh-cn/web/api/webglrenderingcontext/多边形偏移(polygonoffset)/index.html new file mode 100644 index 0000000000..a62d4aeafa --- /dev/null +++ b/files/zh-cn/web/api/webglrenderingcontext/多边形偏移(polygonoffset)/index.html @@ -0,0 +1,76 @@ +--- +title: WebGLRenderingContext.polygonOffset() +slug: Web/API/WebGLRenderingContext/多边形偏移(polygonOffset) +translation_of: Web/API/WebGLRenderingContext/polygonOffset +--- +<div>{{APIRef("WebGL")}}</div> + +<p>The <strong><code>WebGLRenderingContext.polygonOffset()</code></strong> method of the <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> specifies the scale factors and units to calculate depth values.</p> + +<p>The offset is added before the depth test is performed and before the value is written into the depth buffer.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">void <var>gl</var>.polygonOffset(<var>factor</var>, <var>units</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>factor</dt> + <dd>A {{domxref("GLfloat")}} which sets the scale factor for the variable depth offset for each polygon. 默认值为 0.</dd> + <dt>units</dt> + <dd>A {{domxref("GLfloat")}} which sets the multiplier by which an implementation-specific value is multiplied with to create a constant depth offset. 默认值为 0.</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>None.</p> + +<h2 id="例子">例子</h2> + +<p>The polygon offset fill is disabled by default. To enable or disable polygon offset fill, use the {{domxref("WebGLRenderingContext.enable", "enable()")}} and {{domxref("WebGLRenderingContext.disable", "disable()")}} methods with the argument <code>gl.POLYGON_OFFSET_FILL</code>.</p> + +<pre class="brush: js">gl.enable(gl.POLYGON_OFFSET_FILL); +gl.polygonOffset(2, 3); +</pre> + +<p>想要查看当前多边形偏移的 factor 或 units, 查询 <code>POLYGON_OFFSET_FACTOR</code> 和<code>POLYGON_OFFSET_UNITS</code> 的内容即可.</p> + +<pre class="brush: js">gl.getParameter(gl.POLYGON_OFFSET_FACTOR); // 2 +gl.getParameter(gl.POLYGON_OFFSET_UNITS); // 3 +</pre> + +<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.3", "polygonOffset")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glPolygonOffset.xml", "glPolygonOffset")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Man page of the OpenGL API.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.polygonOffset")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.depthFunc()")}}</li> +</ul> |