Translate zh_cn webgl-pulling-vertices.md

Author: colin3dmax

webgl/lessons/zh_cn/webgl-pulling-vertices.md

@@ -1,33 +1,23 @@
-Title: WebGL2 Pulling Vertices
-Description: Using independent indices
-TOC: Pulling Vertices
+Title: WebGL2 顶点拉取
+Description: 使用独立索引
+TOC: 顶点拉取
 
-This article assumes you've read many of the other articles
-starting with [the fundamentals](webgl-fundamentals.html).
-If you have not read them please start there first.
+本文假设你已经阅读了其他许多文章，从 [基础知识](webgl-fundamentals.html) 开始。如果你还没有阅读它们，请先从那里开始。
 
-Traditionally, WebGL apps put geometry data in buffers.
-They then use attributes to automatically supply vertex data from those buffers
-to the vertex shader where the programmer provides code to convert them to clip space.
+传统上，WebGL应用会将几何数据放入缓冲区中，然后通过属性（attributes）自动将这些缓冲区中的顶点数据传递给顶点着色器，由程序员编写代码将其转换为裁剪空间（clip space）坐标。
 
-The word **traditionally** is important. It's only a **tradition**
-to do it this way. It is in no way a requirement. WebGL doesn't
-care how we do it, it only cares that our vertex shaders
-assign clip space coordinates to `gl_Position`.
+这里的 **“传统上”** 非常重要。  
+这只是一种**传统做法**，并不是必须如此。  
+WebGL 并不关心我们是如何处理的，它只关心顶点着色器是否为 `gl_Position` 赋予了裁剪空间坐标。
 
-Let's draw a texture mapped cube using code like the examples in [the article on textures](webgl-3d-textures.html). 
-We're told we need at least 24 unique vertices. This is because even though there are only 8 corner
-positions the same corner gets used on 3 different faces of the
-cube and each face needs different texture coordinates.
+让我们使用类似于 [纹理](webgl-3d-textures.html) 中示例的方式，绘制一个带纹理映射的立方体。我们通常会说需要至少 24 个唯一顶点，这是因为虽然立方体只有 8 个角点位置，但每个角点会出现在立方体的 3 个不同面上，而每个面又需要不同的纹理坐标。
 
 <div class="webgl_center"><img src="resources/cube-vertices-uv.svg" style="width: 400px;"></div>
 
-In the diagram above we can see that the left face's use of corner 3 needs
-texture coordinates 1,1 but the right face's use of corner 3 needs texture coordinates
-0,1. The top face would need different texture coordinates as well.
+在上面的图示中，我们可以看到左侧面的角点 3 需要的纹理坐标是 (1,1)，而右侧面对角点 3 的使用则需要纹理坐标 (0,1)。顶部面则会需要另一组不同的纹理坐标。
+
+通常，我们是通过将 8 个角点位置扩展为 24 个顶点来实现这一点的。
 
-This is usually accomplished by expanding from 8 corner positions
-to 24 vertices
 
 ```js
   // front
@@ -62,13 +52,10 @@ to 24 vertices
   { pos: [-1, -1, -1], uv: [1, 0], }, // 23
 ```
 
-Those positions and texture coordinates are
-put into buffers and provided to the vertex shader
-via attributes.
+这些位置和纹理坐标通常会被放入缓冲区中，并通过属性传递给顶点着色器。
 
-But do we really need to do it this way? What if
-we wanted to actually have just the 8 corners
-and 4 texture coordinates. Something like
+但我们真的需要以这种方式来做吗？如果我们实际上只想保留 8 个角点和 4 个纹理坐标，会怎样？  
+类似于下面这样：
 
 ```js
 positions = [
@@ -89,8 +76,7 @@ uvs = [
 ];
 ```
 
-And then for each of the 24 vertices we'd specify which of those
-to use.
+然后，对于这 24 个顶点中的每一个，我们指定要使用哪一个位置和哪一个纹理坐标。
 
 ```js
 positionIndexUVIndex = [
@@ -127,11 +113,9 @@ positionIndexUVIndex = [
 ];
 ```
 
-Could we use this on the GPU? Why not!?
+我们能在 GPU 上使用这种方式吗？为什么不可以！
 
-We'll upload the positions and texture coordinates
-each to their own textures like
-we covered in [the article on data textures](webgl-data-textures.html).
+我们会将位置和纹理坐标分别上传到各自的纹理中，就像我们在 [数据纹理](webgl-data-textures.html) 中讲到的那样。
 
 ```js
 function makeDataTexture(gl, data, numComponents) {
@@ -168,10 +152,10 @@ const positionTexture = makeDataTexture(gl, positions, 3);
 const texcoordTexture = makeDataTexture(gl, uvs, 2);
 ```
 
-Since textures have up to 4 values per pixel `makeDataTexture`
-expands whatever data we give it to 4 values per pixel. 
+由于纹理每个像素最多可以存储 4 个值，`makeDataTexture` 会将我们提供的数据扩展为每像素 4 个值。
+
+接着，我们会创建一个顶点数组对象（vertex array）来保存我们的属性状态。
 
-Then we'll create a vertex array to hold our attribute state
 
 ```js
 // create a vertex array object to hold attribute state
@@ -191,7 +175,7 @@ gl.bindBuffer(gl.ARRAY_BUFFER, positionIndexUVIndexBuffer);
 gl.bufferData(gl.ARRAY_BUFFER, new Uint32Array(positionIndexUVIndex), gl.STATIC_DRAW);
 ```
 
-and setup the attribute
+接下来，我们需要将位置索引和纹理坐标索引上传到一个缓冲区。
 
 ```js
 // Turn on the position index attribute
@@ -209,14 +193,13 @@ gl.enableVertexAttribArray(posTexIndexLoc);
 }
 ```
 
-Notice we're calling `gl.vertexAttribIPointer` not `gl.vertexAttribPointer`.
-The `I` is for integer and is used for integer and unsigned integer attributes.
-Also note the size is 2, since there is 1 position index and 1 texcoord
-index per vertex.
+注意这里调用的是 `gl.vertexAttribIPointer`，而不是 `gl.vertexAttribPointer`。  
+其中的 `I` 表示整数，用于整数和无符号整数类型的属性。  
+另外，`size` 设置为 2，因为每个顶点包含 1 个位置索引和 1 个纹理坐标索引。
+
+虽然我们只需要 24 个顶点，但绘制 6 个面，每个面 12 个三角形，每个三角形 3 个顶点，总共 36 个顶点。
+为了指定每个面使用哪 6 个顶点，我们将使用 [顶点索引](webgl-indexed-vertices.html)。
 
-Even though we only need 24 vertices we still need draw 6 faces, 12 triangles
-each, 3 vertices per triangle for 36 vertices. To tell it which 6 vertices
-to use for each face we'll use [vertex indices](webgl-indexed-vertices.html).
 
 ```js
 const indices = [
@@ -234,9 +217,10 @@ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
 ```
 
-As we want to draw an image on the cube itself we need a 3rd texture
-with that image. Let's just make another 4x4 data texture with a checkerboard.
-We'll use `gl.LUMINANCE` as the format since then we only need one byte per pixel.
+由于我们想要在立方体上绘制一张图像，因此还需要第三个纹理存储这张图像。  
+这里我们用一个 4x4 的数据纹理，内容是棋盘格图案。  
+纹理格式使用 `gl.LUMINANCE`，因为这样每个像素只需要一个字节。
+
 
 ```js
 // Create a checker texture.
@@ -263,17 +247,16 @@ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
 ```
 
-On to the vertex shader... We can look up a pixel from the texture like
-this
+接下来是顶点着色器……  
+我们可以像这样从纹理中查找一个像素：
 
 ```glsl
 vec4 color = texelFetch(sampler2D tex, ivec2 pixelCoord, int mipLevel);
 ```
 
-So given an integer pixel coordinate the code above will pull out a pixel value.
+因此，给定一个整数像素坐标，上述代码将提取出对应的像素值。
 
-Using the `texelFetch` function we can take a 1D array index
-and lookup a value out of a 2D texture like this
+使用 `texelFetch` 函数，我们可以将一维数组索引转换为二维纹理坐标，并从二维纹理中查找对应的值，方式如下：
 
 ```glsl
 vec4 getValueByIndexFromTexture(sampler2D tex, int index) {
@@ -284,7 +267,7 @@ vec4 getValueByIndexFromTexture(sampler2D tex, int index) {
 }
 ```
 
-So given that function here is our shader
+有了这个函数，我们的着色器如下所示：
 
 ```glsl
 #version 300 es
@@ -321,16 +304,11 @@ void main() {
 }
 ```
 
-At the bottom it's effectively the same shader we used
-in [the article on textures](webgl-3d-textures.html).
-We multiply a `position` by `u_matrix` and we output
-a texcoord to `v_texcoord` to pass on the fragment shader.
+在底部，它实际上和我们在 [纹理](webgl-3d-textures.html) 中使用的着色器是一样的。我们将 `position` 与 `u_matrix` 相乘，并将纹理坐标输出到 `v_texcoord`，以传递给片元着色器。
 
-The difference is only in how we get the position and
-texcoord. We're using the indices passed in and getting
-those values from their respective textures.
+不同之处仅在于我们获取 `position` 和 `texcoord` 的方式。我们使用传入的索引，从各自的纹理中提取这些值。
 
-To use the shader we need to lookup all the locations
+要使用这个着色器，我们需要查找所有相关的变量位置。
 
 ```js
 // setup GLSL program
@@ -347,7 +325,7 @@ const program = webglUtils.createProgramFromSources(gl, [vs, fs]);
 +const u_textureLoc = gl.getUniformLocation(program, "u_texture");
 ```
 
-At render time we setup the attributes
+在渲染阶段，我们设置属性（attributes）。
 
 ```js
 // Tell it to use our program (pair of shaders)
@@ -357,8 +335,7 @@ gl.useProgram(program);
 gl.bindVertexArray(vao);
 ```
 
-Then we need to bind all 3 textures and setup all the
-uniforms
+然后，我们需要绑定全部 3 个纹理，并设置所有的 uniform。
 
 ```js
 // Set the matrix.
@@ -383,74 +360,69 @@ gl.bindTexture(gl.TEXTURE_2D, checkerTexture);
 gl.uniform1i(u_textureLoc, 2);
 ```
 
-And finally draw
+最后，执行绘制操作。
 
 ```js
 // Draw the geometry.
 gl.drawElements(gl.TRIANGLES, 6 * 6, gl.UNSIGNED_SHORT, 0);
 ```
 
-And we get a textured cube using only 8 positions and
-4 texture coordinates
+最终，我们只使用了 8 个位置和 4 个纹理坐标，就得到了一个带贴图的立方体。
 
 {{{example url="../webgl-pulling-vertices.html"}}}
 
-Some things to note. The code is lazy and uses 1D
-textures for the positions and texture coordinates.
-Textures can only be so wide. [How wide is machine
-specific](https://web3dsurvey.com/webgl/parameters/MAX_TEXTURE_SIZE) which you can query with 
+有几点需要注意：代码实现较为简化，使用了 1D 纹理来存储位置和纹理坐标。  
+但纹理的宽度是有限的，[具体有多宽依赖于硬件](https://web3dsurvey.com/webgl/parameters/MAX_TEXTURE_SIZE)，  
+你可以通过以下方式查询：
 
 ```js
 const maxSize = gl.getParameter(gl.MAX_TEXTURE_SIZE);
 ```
 
-If we wanted to handle more data than that we'd need
-to pick some texture size that fits our data, and spread
-the data across multiple rows possibly
-padding the last row to make a rectangle.
+如果我们想处理比最大纹理宽度还多的数据，就需要选择一个合适的纹理尺寸，并将数据分布到多行中，可能还需要对最后一行进行填充以保持矩形结构。
+
+我们在这里还做了另一件事：使用了两张纹理，一张存储位置，另一张存储纹理坐标。  
+其实我们完全可以将这两类数据存储在同一张纹理中，例如交错（interleaved）存储。
 
-Another thing we're doing here is using 2 textures,
-one for positions, one for texture coordinates.
-There is no reason we couldn't put both data in the
-same texture either interleaved
 
     pos,uv,pos,uv,pos,uv...
 
-or in different places in the texture
+或者将它们存储在纹理的不同区域。
 
     pos,pos,pos,...
     uv, uv, uv,...
 
-We'd just have to change the math in the vertex shader
-that computes how to pull them out of the texture.
+我们只需要修改顶点着色器中的数学逻辑，以正确地从纹理中提取对应的数据。
+
+那么问题来了：是否应该用这种方式？  
+答案是“视情况而定”。具体效果可能因 GPU 而异，有些情况下这比传统方式还慢。
+
+本文的重点再次强调：  
+WebGL 并不在意你是如何为 `gl_Position` 设置裁剪空间坐标的，也不在意你是如何输出颜色的。它只关心你是否设置了这些值。纹理，本质上只是可以随机访问的二维数组。
+
+当你在 WebGL 中遇到问题时，请记住，WebGL 只是运行一些着色器程序，而这些着色器可以通过以下方式访问数据。
 
-The question comes up, should you do things like this?
-The answer is "it depends". Depending on the GPU this
-might be slower than the more traditional way.
+- uniforms（全局变量）
+- attributes（每个顶点着色器执行时接收的数据）
+- textures（可以随机访问的二维数组）
 
-The point of this article was to point out yet again,
-WebGL doesn't care how you set `gl_Position` with
-clip space coordinates nor does it care how you
-output a color. All it cares is that you set them.
-Textures are really just 2D arrays of random access
-data.
+不要让传统的 WebGL 使用方式限制了你的思维。  
+WebGL 实际上具有极强的灵活性。
 
-When you have a problem you want to solve in WebGL
-remember that WebGL just runs shaders and those shaders
-have access to data via uniforms (global variables),
-attributes (data that comes per vertex shader iteration),
-and textures (random access 2D arrays). Don't let the
-traditional ways of using WebGL prevent you from
-seeing the real flexibility that's there.
+当你想在 WebGL 中解决问题时，请记住 WebGL 只是运行着色器，
+这些着色器可以通过 uniforms（全局变量）、attributes（每次顶点着色器执行时传入的数据）
+以及 textures（可随机访问的二维数组）来访问数据。
+不要让传统的 WebGL 使用方式阻碍你发现它真正的灵活性。
 
 <div class="webgl_bottombar">
-<h3>Why is it called Vertex Pulling?</h3>
-<p>I'd actually only heard the term recently (July 2019)
-even though I'd used the technique before. It comes
-from <a href='https://www.google.com/search?q=OpenGL+Insights+"Programmable+Vertex+Pulling"+article+by+Daniel+Rakos'>OpenGL Insights "Programmable Vertex Pulling" article by Daniel Rakos</a>.
+<h3>为什么叫做顶点拉取（Vertex Pulling）？</h3>
+<p>实际上我最近（2019年7月）才听到这个术语，  
+尽管我之前就用过这种技术。  
+它来源于  
+<a href='https://www.google.com/search?q=OpenGL+Insights+"Programmable+Vertex+Pulling"+article+by+Daniel+Rakos'>  
+OpenGL Insights 中 Daniel Rakos 撰写的“可编程顶点拉取”文章</a>。  
 </p>
-<p>It's called vertex *pulling* since it's the vertex shader
-that decides which vertex data to read vs the traditional way where
-vertex data is supplied automatically via attributes. Effectively
-the vertex shader is *pulling* data out of memory.</p>
+<p>之所以叫做顶点*拉取*，是因为顶点着色器决定读取哪个顶点数据，  
+而传统方式是通过属性自动提供顶点数据。  
+实际上，顶点着色器是在*拉取*内存中的数据。</p>
 </div>