本文标题:WebGL第六课:回顾总结-重点概念
WebGL 能干什么
在 canvas
上 画点
,画线
,画三角形
。
进而模拟出丰富多彩的2D
和 3D
世界。
WebGL 运行在哪里
运行在 GPU 上,使用者需要自己提供可以运行的代码传到 GPU。
WebGL 可以运行什么形式的代码
vertex shader
和 fragment shader
, 这两个成对出现,合起来称之为 program
。WebGL 可以运行的东西就是 program
。
用户使用什么语言编写 program
使用的语言叫做GL Shader Language
,简称GLSL
。
vertex shader 的功能是什么
- 计算顶点的最终位置 (
gl_Position
) - 传递一些数据给
fragment shader
(例如:buffer
中的数据)
fragment shader 的功能是什么
根据顶点的最终位置 (gl_Position
)和其他数据, 最终计算出一个颜色(gl_FragColor
)。然后绘制到canvas
。
用户如何向 program
中传递数据
-
buffer : buffer 是一个二进制的连续的平坦的一维数组。用户需要在
绘制
之前,将数据传到GPU中。这部分数据通常包含:顶点坐标
、顶点颜色
等等。但是实际上,只要你愿意,你可以将任何东西放进来,以备后续之用。指的一提的是,只有vertex shader
才能访问 buffer,访问的方式就是 利用attribute 变量
去接收。例如:attribute vec2 a_PointVertex;
。 -
varying :
vertex shader
可以向fragment shader
传递一些数据,传递的方式就是在 两个程序里都声明同名的 varying 变量:例如varying vec3 color;
。 然后在vertex shader
main 函数里,对这个变量进行赋值即可。 -
uniform : buffer 数据通常很大,我们不会经常的去修改 buffer 中的数据。而且 buffer 中的数据一般是
逐点的
。也就是说,通常情况下,只能全部改掉,而不会发生只改其中一个数据的情况。例如将所有坐标全部变成以前的一半。此时,我们可以利用uniform变量
来完成这个事情。uniform 变量
是存在于vertex shader
和fragment shader
中的,两者都可以使用。并且,WebGL提供了随时修改 uniform 变量的 api。 -
uniform texture :这也是一大块需要
事先
上传到显卡的数据。刚才说到buffer
是用来逐点
计算的。也就是说,buffer
不能随机访问
,只能是WebGL 进行顺序的,迭代访问
。那texture
的区别就是可以随机访问
,原理上讲,你可以像使用数组那样,去根据索引,访问其中的数据。我们一般这样来声明texture
:uniform sampler2D u_texture;
。由于大多数情况下,这种类型的变量都是用来进行纹理贴图
,所以大部分情况下,我们都是根据一个坐标点,去到这张图中去采样一个颜色。
GLSL 数据类型
float:浮点数
vec2: 含有两个float
元素的向量类型。x
,y
分别就是其中的第一个分量
和第二个分量
。
vec3 : 同上。第三个分量叫 z。
vec4 : 同上。第四个分量叫 w。
mat3 : 三阶方阵,行数,列数 都是三的矩阵。
等等
js、WebGL、显卡、buffer、vertex shader 、fragment shader、 canvas 等等等等的关系是什么
js 中利用 WebGL 提供的api,将数据传递到显卡中。
显卡中存储用户数据的东西叫buffer(顺序逐点由vertex shader进行访问
)。另一种叫texture(随机,采样访问
)。
vertex shader 可以接受 buffer 中的数据(attribute变量
),进行计算或者传递给fragment shader。
fragment shader 可以计算决定最终的颜色是什么。
vertex shader 和 fragment shader 成对出现,合成 program。
vertex shader 可以利用 varying 变量,往 fragment shader 传递数据。
显卡中可以有多个 buffer,多个program。
uniform 属于某一个 program,并不是显卡全局可用的。
不同的 program 中可以拥有不同数量,不同类型的 uniform。
js 中可以随时切换 program, 然后进行绘制
。
js 中可以随时设置 某一个 program 中的 uniform 变量。
js 中可以随时切换 某一个 program 中的 buffer 来源。(如果你有多个buffer)
js 中可以执行 绘制 draw
指令, 在 canvas
中画画。
等等 等等 等等。
正文结束,下面是答疑
小丫丫:这一课的内容好像划重点一样,考试感极强!
答:不考试,,不考试。。。