@@ -6,9 +6,7 @@ TOC: 顶点拉取
6
6
7
7
传统上,WebGL应用会将几何数据放入缓冲区中,然后通过属性(attributes)自动将这些缓冲区中的顶点数据传递给顶点着色器,由程序员编写代码将其转换为裁剪空间(clip space)坐标。
8
8
9
- 这里的 ** “传统上”** 非常重要。
10
- 这只是一种** 传统做法** ,并不是必须如此。
11
- WebGL 并不关心我们是如何处理的,它只关心顶点着色器是否为 ` gl_Position ` 赋予了裁剪空间坐标。
9
+ 这里的 ** “传统上”** 非常重要。这只是一种** 传统做法** ,并不是必须如此。WebGL 并不关心我们是如何处理的,它只关心顶点着色器是否为 ` gl_Position ` 赋予了裁剪空间坐标。
12
10
13
11
让我们使用类似于 [ 纹理] ( webgl-3d-textures.html ) 中示例的方式,绘制一个带纹理映射的立方体。我们通常会说需要至少 24 个唯一顶点,这是因为虽然立方体只有 8 个角点位置,但每个角点会出现在立方体的 3 个不同面上,而每个面又需要不同的纹理坐标。
14
12
@@ -18,7 +16,6 @@ WebGL 并不关心我们是如何处理的,它只关心顶点着色器是否
18
16
19
17
通常,我们是通过将 8 个角点位置扩展为 24 个顶点来实现这一点的。
20
18
21
-
22
19
``` js
23
20
// front
24
21
{ pos: [- 1 , - 1 , 1 ], uv: [0 , 1 ], }, // 0
@@ -156,15 +153,13 @@ const texcoordTexture = makeDataTexture(gl, uvs, 2);
156
153
157
154
接着,我们会创建一个顶点数组对象(vertex array)来保存我们的属性状态。
158
155
159
-
160
156
``` js
161
157
// create a vertex array object to hold attribute state
162
158
const vao = gl .createVertexArray ();
163
159
gl .bindVertexArray (vao);
164
160
```
165
161
166
-
167
- Next we need upload the position and texcoord indices to a buffer.
162
+ 接下来,我们需要将位置索引和纹理坐标索引上传到缓冲区。
168
163
169
164
``` js
170
165
// 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)
221
216
这里我们用一个 4x4 的数据纹理,内容是棋盘格图案。
222
217
纹理格式使用 ` gl.LUMINANCE ` ,因为这样每个像素只需要一个字节。
223
218
224
-
225
219
``` js
226
220
// Create a checker texture.
227
221
const checkerTexture = gl .createTexture ();
0 commit comments