-
默认情况下，canvas是透明的。
-
canvas可以灵活地支持二维图形和三维图形，它不直接提供绘图方法，而是提供一种叫
上下文（context）的机制来进行绘图。 -
WebGL 中的颜色取值
rgba继承OpenGL， 取值为0.0 — 1.0
gl.clearColor()
如果没有指定背景色，默认值如下:
default-bg-color
-
gl.clear(gl.COLOR_BUFFER_BIT)清空绘图区域，实际上是在清空颜色缓冲区（color buffer）。
WebGL中除了颜色缓冲区，还有比如深度缓冲区（DEPTH_BUFFER_BIT）、模板缓冲区（STENCIL_BUFFER_BIT）等。 -
gl.clearColor()指定了背景色以后，背景色会驻存在WebGL系统中，在下一次调用gl.clearColr()方法前不会改变。即，如果后面你想用同一种颜色再清空一次绘图区，没必要再指定一次背景色。 -
WebGL依赖一种新的称为
着色器（shader）的绘图机制。 -
WebGL需要两种着色器：
（1）顶点着色器（Vertex shader）：用来描述顶点的特性（如位置、颜色等）。
（2）片元着色器（Fragment shader） ： 进行逐片处理过程（如光照等），片元也可以理解为像素（图像的单元）。
- WebGL程序执行流程
webgl-flow
最右边的是颜色缓冲区不是浏览器，因为颜色缓冲区的内容会自动显示在浏览器中。
- 初始化着色器
initShaders()的行为
initShades()
在初始化着色器之前，顶点着色器和片元着色器都是空白的，我们需要将字符串形式的着色器代码从JavaScript传给WebGL系统，并建立着色器，这就是initShaders()所做的事情。
注意：
着色器代码运行在WebGL系统中，而不是JavaScript程序中。
顶点着色器先执行，片元着色器后执行。
-
WebGL程序包括运行在浏览器中的JavaScript和运行在WebGL 系统中的着色器这两部分。
-
顶点着色器
var VSHADER_SOURCE =
'void main() {\n' +
' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // Set the vertex coordinates of the point
' gl_PointSize = 10.0;\n' + // Set the point size
'}\n';
（1）void → 没有返回值
（2）不能为main函数指定参数
（3）gl_Position 表示位置，是内置变量，必须被赋值，否则着色器无法工作
（4）gl_PointSize 表示尺寸，也是内置变量，默认值为1.0
vshader
GLSE_data_type
vec4
gl_Position = vec4(0.0, 0.0, 1.0, 1.0)
前三个分量分别为X, Y, Z，最后一个分量为 齐次坐标
齐次坐标
- 片元着色器
// Fragment shader program
var FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // Set the point color
'}\n';
fshader
- 绘制操作
步骤：
（1）清空绘制区
（2）gl.drawArrays(mode, first, count)
gl.drawArrays()
gl.drawArrays(mode, first, count) 将会执行 count 次
shader-flow
- WebGL 坐标系统
webgl-coord
- attribute 变量 和 uniorm 变量
attribute 变量： GLSL ES变量，传输的是那些与顶点相关的数据（外部向顶点着色器传输，只有顶点着色器能使用）。
uniform 变量： 传输的是那些与所有顶点都相同（或与顶点无关）的数据 （数据传输的目标是片元着色器，而非顶点着色器）。
data-transfer
为了使用 attribute 变量：示例程序需要包含以下步骤：
（1）在顶点着色器中，声明 attribute 变量；
attribute vec4 a_Position;
attribute 被称为存储限定符（storage qualifier），它表示接下来的变量，attribute变量必须声明为全局变量。
storage-qualifier
（2）将 attribute 变量赋值给 gl_Position 变量；
先获取 attribute变量的存储位置:
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
gl.program => 程序对象，包含了顶点着色器和片元着色器
gl.getAttribLotation()
（3）向 attribute 变量传输数据；
将顶点位置传输给 attribute 变量：
gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);
vertexAttrib3f
gl.vertexAttrib3f()的同族函数:
vertexAttribnf
WebGL 相关函数命名规范：
webgl-function-standard
使用 uniform 变量步骤：
（1）在片元着色器中准备 uniform 变量；
uniform vec4 u_FragColor;
uniform-declaration
precision mediump float; 精度限定词（precision qualifier） ,指定变量的范围（最大值与最小值）和精度。
（2）用这个 uniform 变量向 gl_FragColor 赋值；
获取 uniform 变量的存储地址。
getUniformLocation.png
（3）将颜色数据从JavaScript传给该 uniform 变量。
向 uniform 变量赋值 gl.uniform4f(location, v0, v1, v2, v3)
uniform4f
gl.uniform4f()的同族函数
uniformnf
网友评论