initial commit

1 files changed, 102 insertions, 0 deletions

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>