JavaScript WebGL 基础疑惑点
引子
JavaScript WebGL 绘制一条直线 之后总算是熟悉了一点，但还是有些疑惑，在此集中记录一下。
- Origin
- My GitHub
示例，最后只绘制了垂直直线：
let vertices = [-0.5, 0, 0.0, 0.5, 0, 0.0]; // 水平直线
let vertices2 = [0, 0.5, 0.0, 0, -0.5, 0.0]; // 垂直直线
setBuffers(glContext, vertices);
setBuffers(glContext, vertices2);
vertexAttribPointer 每次都需要重新解析顶点，还是解析一次就足够了？
let vertices = [-0.5, 0, 0.0, 0.5, 0, 0.0]; // 水平直线
let vertices2 = [0, 0.5, 0.0, 0, -0.5, 0.0]; // 垂直直线
setBuffers(glContext, vertices);
setBuffers(glContext, vertices2);
vertexAttribPointer 每次都需要重新解析顶点，还是解析一次就足够了？
在绘制直线示例的基础上尝试发现：
- 要先保证已缓冲了数据，该函数才能有效解析。
- 每次更新了缓冲，需要重新解析才能生效。
enableVertexAttribArray 方法也是类似。
useProgram 是否需要重新激活？
在绘制直线示例的基础上尝试发现只需要激活一次，这是示例。
WebGL 1.0 卡片索引。
存储限定符
- const ： 编译时常量，或只读函数参数。
- attribute ： 用这个修饰的变量，表示是用于顶点着色器和 OpenGL ES 之间的链接。
- varying ： 用这个修饰的变量，表示是用于顶点着色器和片元着色器之间的链接。
- uniform ： 用这个修饰的变量，表示全局且唯一的变量，可以在任意阶段访问到，变量的值会一直保存。
基本类型
| 类型 | 含义 |
|---|---|
| void | 没有返回值的函数或空参数列表 |
| bool | 布尔值 |
| int | 有符号整数 |
| float | 浮点标量 |
| vec2, vec3, vec4 | 2/3/4 分量的浮点向量 |
| bvec2, bvec3, bvec4 | 2/3/4 分量的布尔向量 |
| ivec2, ivec3, ivec4 | 2/3/4 分量的有符号整数向量 |
| mat2, mat3, mat4 | 2x2, 3x3, 4x4 浮点数矩阵 |
| sampler2D | 2D 纹理 |
| samplerCube | 立体贴图纹理 |
WebGL 1.0 卡片索引。
顶点着色器特殊变量
输入：
| 变量 | 描述 | 单位或坐标系统 |
|---|---|---|
| highp vec4 gl_Position; | 转换顶点位置 | 剪切坐标 |
| mediump float gl_PointSize; | 变换点大小（仅点光栅化） | 像素 |
片元着色器特殊变量
输入：
| 变量 | 描述 | 单位或坐标系统 |
|---|---|---|
| mediump vec4 gl_FragCoord; | 帧缓冲区内的片元位置 | 窗口坐标 |
| bool gl_FrontFacing; | 片元属于前向基本体 | 布尔值 |
| mediump vec2 gl_PointCoord; | 点内的片元位置（仅点光栅化） | 每个组件从 0.0 到 1.0 |
输出：
| 变量 | 描述 | 单位或坐标系统 |
|---|---|---|
| mediump vec4 gl_FragColor; | 片元颜色 | RGBA 颜色 |
| mediump vec4 gl_FragData[n] | 颜色附件n的片元颜色 | RGBA 颜色 |