WebGL第六课:回顾总结-重点概念

877 阅读4分钟
本文标题:WebGL第六课:回顾总结-重点概念

WebGL 能干什么

canvas 上 画,画线,画三角形
进而模拟出丰富多彩的2D3D 世界。

WebGL 运行在哪里

运行在 GPU 上,使用者需要自己提供可以运行的代码传到 GPU。

WebGL 可以运行什么形式的代码

vertex shaderfragment 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 shaderfragment 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 中画画。

等等 等等 等等。




正文结束,下面是答疑
小丫丫:这一课的内容好像划重点一样,考试感极强!

答:不考试,,不考试。。。