Skip to content

Commit 3f7a606

Browse files
zhangqfzhangqf
committed
错别字 更正
1 parent d422e4a commit 3f7a606

File tree

2 files changed

+23
-54
lines changed

2 files changed

+23
-54
lines changed

‎docs/WebGL/Chapter2.md‎

Lines changed: 7 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ outlineText: "33"
99
已经了解了如何获取`WebGL上下文`，清空`<canvas>`为2D/3D绘图作准备，探究了顶点着色器与片元着色器的功能与特征，以及使用着色器进行绘图的方法。
1010

1111
本章学习内容：
12+
1213
1. 三角形在三维图形学中的重要地位，以及WebGL如何绘制三角形
1314
2. 使用多个三角形绘制其他类型的基本图形
1415
3. 利用简单的方程对三角形做基本地变换，如移动、旋转和缩放
@@ -20,8 +21,7 @@ outlineText: "33"
2021

2122
上一章中的方式只能绘制一个点。对于那些由多个顶点组成的图形，比如三角形、矩形和立方体来说，我们需要一次性地将图形的顶点全部传出顶点着色器，然后才能把图形画出来。
2223

23-
24-
WebGL提供了提供了一种很方便的机制，记缓冲区对象（buffer object），他可以一次性地向着色器传入多个顶点的数据。缓冲区对象是`WebGL`系统中的一块内存区域，
24+
WebGL提供了提供了一种很方便的机制，即缓冲区对象（buffer object），他可以一次性地向着色器传入多个顶点的数据。缓冲区对象是`WebGL`系统中的一块内存区域，
2525
我们可以一次性地向缓冲区对象中填充大量的顶点数，然后将这些数据保存在其中供`顶点着色器`使用。
2626

2727
```js
@@ -112,6 +112,7 @@ function initVertexBuffers(gl) { // [!code ++]
112112
}
113113

114114
```
115+
115116
流程：
116117

117118
1. 获取WebGL绘图上下文
@@ -121,12 +122,10 @@ function initVertexBuffers(gl) { // [!code ++]
121122
5. 清空`<canvas>`
122123
6. 绘制
123124

124-
125125
`initVertexBuffers()`函数的任务是创建顶点缓冲区对象，并将多个顶点的数据保存在缓冲区中，然后将缓冲区传入给顶点着色器。
126126

127127
`gl.drawArrays(gl.POINTS, 0, n)`, 这里的n为要画的顶点数，因为在`initVertexBuffers()`函数中利用缓冲区对象向顶点着色器传输了多个顶点数据，所以需要通过第3个参数告诉`gl.drawArrays()`函数需要绘制多少个顶点。
128128

129-
130129
### 使用缓冲区对象
131130

132131
使用缓冲区对象需要遵循五个步骤：
@@ -137,8 +136,8 @@ function initVertexBuffers(gl) { // [!code ++]
137136
4. 将缓冲区对象分配给一个attribute变量（gl.vertexAttribPointer()）
138137
5. 开启attribute变量（gl.enableVertexAttribArray()）
139138

140-
141139
#### 创建缓冲区对象 （gl.createBuffer()）
140+
142141
使用`gl.createBuffer()`方法来创建缓冲区对象
143142

144143
![原理图](./images/createBuffer.png)
@@ -157,7 +156,6 @@ function initVertexBuffers(gl) { // [!code ++]
157156
| 返回值 | 无 |
158157
| 错误 | 无 |
159158

160-
161159
#### 绑定缓冲区 （gl.bindBuffer()）
162160

163161
将创建好的缓冲区对象绑定到`WebGL`系统中以及存在的目标上。这个目标表示缓冲区对象的用途，这样`WebGL`才能够正确处理其中的内容。
@@ -178,7 +176,6 @@ gl.bindBuffer(target, buffer)
178176
|--------------|------------------------------|
179177
| INVALID_ENUM | target不是上述值之一，这时将保持原有的绑定情况不变 |
180178

181-
182179
#### 向缓冲区对象中写入数据（gl.bufferData()）
183180

184181
开辟空间，并向缓冲区中写入数据。
@@ -202,7 +199,6 @@ gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
202199
| gl.STREAM_DRAW | 只会向缓冲区对象中写入一次数据，然后绘制若干次；表示缓冲区的数据会快速改变，通常在每次绘制之前都会更新 |
203200
| gl.DYNAMIC_DRAW | 会向缓冲区对象中多次写入数据，并绘制很多次；表示缓冲区的数据会频繁改变，但不一定在每次绘制时都更新。适合在多个绘制调用之间修改数据的情况 |
204201

205-
206202
### 类型化数组
207203

208204
`javascript`中常见的`Array`对象，是一种通用的类型，既可以存储数字，也可以存错字符串，而并没有对“大量元素都是同一类型”这种情况进行优化。为了解决这个问题，`WebGL`引入了类型化数组。
@@ -232,7 +228,6 @@ WebGL使用的各种类型化数组
232228
| length | 数组的长度 |
233229
| BYTES_PER_ELEMENT | 数组中每个元素所占的字节数 |
234230

235-
236231
**创建类型化数组的唯一方法就是使用`new`运算符**
237232

238233
```js
@@ -246,7 +241,6 @@ var vertices = new Float32Array(4)
246241

247242
**以上就是建立和使用缓冲区的前三个步骤（在WebGL系统中创建缓冲区， 绑定缓冲区对象到目标，向缓冲区对象中写入数据）**
248243

249-
250244
### 将缓冲区对象分配给attribute变量（gl.vertexAttribPointer()）
251245

252246
可以使用`gl.vertexAttrib[1234]f系列函数为attribute变量分配值。但是，这些方法一次只能向attribute变量分配一个值。而现在，需要将整个数组中的所有值，一次性第分配给一个attribute变量。
@@ -280,7 +274,6 @@ gl.vertexAttribPointer()方法解决了这个问题，他可以将整个缓冲
280274

281275
![原理图](./images/bufferObjectToAttribute.png)
282276

283-
284277
### 开启attribute变量（gl.enableVertexAttribArray()）
285278

286279
为了是顶点着色器能够访问缓冲区内的数据，需要使用`gl.enableVertexAttribArray()`方法来开启`attribute`变量
@@ -305,7 +298,6 @@ gl.vertexAttribPointer()方法解决了这个问题，他可以将整个缓冲
305298
| 错误 | 描述 |
306299
| INVALID_VALUE | location 大于等于attribute变量的最大数量（默认为8） |
307300

308-
309301
### 绘制点
310302

311303
`gl.drawArrays(mode, first, count)`
@@ -316,8 +308,6 @@ gl.vertexAttribPointer()方法解决了这个问题，他可以将整个缓冲
316308
| first | 指定从哪个顶点开始绘制（整型数） |
317309
| count | 指定绘制需要用到多少个顶点（整型数） |
318310

319-
320-
321311
**`gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)`完整流程图**
322312

323313
![效果图](./images/completeProcess.png)
@@ -420,7 +410,6 @@ function initVertexBuffers(gl) {
420410

421411
![效果图](./images/triangles.png)
422412

423-
424413
`gl.drawArrays(gl.TRIANGLES, 0, n)`
425414

426415
gl.drawArrays()方法的第一个参数 mode 改为gl.TRIANGLES, 就相当于告诉WebGL， 从缓冲区中的第1个顶点开始，使顶点着色器执行3次，用这3个顶点绘制出一个三角形
@@ -429,7 +418,7 @@ gl.drawArrays() 即强大又灵活，通过给第一个参数指定不同的值
429418

430419
**WebGL可以绘制的基本图形**
431420

432-
| 基本图形 | 参数mode | 描述 |
421+
| 基本图形 | 参数mode | 描述 |
433422
|:------|:--------------------:|:------------------------------------------------------------------------------------------------------------------------|
434423
| 点 | gl.POINTS | 一系列点，绘制在v0、v1、v2...处 |
435424
| 线段 | gl.LINES | 一系列单独的线段，绘制在（v0, v1）、（v2， v3）、（v4，v5）...处，<br/> 如果点的个数是奇数，最好一个将被忽略 |
@@ -439,10 +428,8 @@ gl.drawArrays() 即强大又灵活，通过给第一个参数指定不同的值
439428
| 三角带 | gl.TRIANGLES_STRIP | 一系列条带状的三角形，前三个点构成了第一个三角形，从第2个点开始的三个点<br/>‘成了第2个三角形，以此类推。这些三角形被绘制在（v0，v1，v2）、（v2，v1，v3）、<br/>（v2，v3、v4）...处 |
440429
| 三角扇 | gl.TRIANGLES_FAN | 一系列三角形组成的类似与扇形的图形。前三个点构成了第一个三角形，接下来的<br/>一个点和前一个三角形的最后一条边组成接下来的一个三角形。这些三角形被绘制<br/>在（v0，v1，v2）、（v0，v2，v3）、（v0、v3、v4）...处 |
441430

442-
443431
![示例图](./images/gl.drawArraysMode.png)
444432

445-
446433
修改例中的`gl.drawArrays(gl.LINES, 0, n)`
447434

448435
![效果图](./images/line.png)
@@ -455,7 +442,6 @@ gl.drawArrays() 即强大又灵活，通过给第一个参数指定不同的值
455442

456443
![效果图](./images/line_loop.png)
457444

458-
459445
## Rectangle
460446

461447
```js
@@ -554,15 +540,12 @@ function initVertexBuffers(gl) {
554540

555541
![效果图](./images/Rectangle.png)
556542

557-
558543
`gl.drawArrays(gl.TRIANGLE_FAN, 0, n)`
559544

560545
![效果图](./images/Triangle_fan.png)
561546

562-
563547
### 移动、旋转和缩放
564548

565-
566549
```js
567550
const VSHADER_SOURCE =
568551
'attribute vec4 a_Position;\n' +
@@ -665,7 +648,6 @@ function initVertexBuffers(gl) {
665648

666649
![效果图](./images/translation.png)
667650

668-
669651
```js
670652

671653
const VSHADER_SOURCE =
@@ -775,4 +757,5 @@ function initVertexBuffers(gl) {
775757
}
776758

777759
```
778-
![效果图](./images/rotate.png)
760+
761+
![效果图](./images/rotate.png)

0 commit comments

Comments
 (0)