Skip to content

Commit ca36b15

Browse files
colin3dmaxgreggman
authored andcommitted
small change
1 parent 57db2c1 commit ca36b15

File tree

1 file changed

+2
-8
lines changed

1 file changed

+2
-8
lines changed

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

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -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
162158
const vao = gl.createVertexArray();
163159
gl.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.
227221
const checkerTexture = gl.createTexture();

0 commit comments

Comments
 (0)