@@ -6,9 +6,7 @@ TOC: 顶点拉取
66
77传统上,WebGL应用会将几何数据放入缓冲区中,然后通过属性(attributes)自动将这些缓冲区中的顶点数据传递给顶点着色器,由程序员编写代码将其转换为裁剪空间(clip space)坐标。
88
9- 这里的 ** “传统上”** 非常重要。
10- 这只是一种** 传统做法** ,并不是必须如此。
11- WebGL 并不关心我们是如何处理的,它只关心顶点着色器是否为 ` gl_Position ` 赋予了裁剪空间坐标。
9+ 这里的 ** “传统上”** 非常重要。这只是一种** 传统做法** ,并不是必须如此。WebGL 并不关心我们是如何处理的,它只关心顶点着色器是否为 ` gl_Position ` 赋予了裁剪空间坐标。
1210
1311让我们使用类似于 [ 纹理] ( webgl-3d-textures.html ) 中示例的方式,绘制一个带纹理映射的立方体。我们通常会说需要至少 24 个唯一顶点,这是因为虽然立方体只有 8 个角点位置,但每个角点会出现在立方体的 3 个不同面上,而每个面又需要不同的纹理坐标。
1412
@@ -18,7 +16,6 @@ WebGL 并不关心我们是如何处理的,它只关心顶点着色器是否
1816
1917通常,我们是通过将 8 个角点位置扩展为 24 个顶点来实现这一点的。
2018
21-
2219``` js
2320 // front
2421 { pos: [- 1 , - 1 , 1 ], uv: [0 , 1 ], }, // 0
@@ -156,15 +153,13 @@ const texcoordTexture = makeDataTexture(gl, uvs, 2);
156153
157154接着,我们会创建一个顶点数组对象(vertex array)来保存我们的属性状态。
158155
159-
160156``` js
161157// create a vertex array object to hold attribute state
162158const vao = gl .createVertexArray ();
163159gl .bindVertexArray (vao);
164160```
165161
166-
167- Next we need upload the position and texcoord indices to a buffer.
162+ 接下来,我们需要将位置索引和纹理坐标索引上传到缓冲区。
168163
169164``` js
170165// Create a buffer for the position and UV indices
@@ -221,7 +216,6 @@ gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW)
221216这里我们用一个 4x4 的数据纹理,内容是棋盘格图案。
222217纹理格式使用 ` gl.LUMINANCE ` ,因为这样每个像素只需要一个字节。
223218
224-
225219``` js
226220// Create a checker texture.
227221const checkerTexture = gl .createTexture ();
0 commit comments