WebGL 基础知识

1. 类型化数组

类型

• Int8Array 8位符号整数，每个元素占一个字节
• Uint8Array 8位无符号整数，每个元素占一个字节
• Uint8ClampedArray 8位无符号整数，每个元素占一个字节，超出范围的值会被 clamp 到 0 或 255
• Int16Array 16位符号整数，每个元素占两个字节
• Uint16Array 16位无符号整数，每个元素占两个字节
• Int32Array 32位符号整数，每个元素占四个字节
• Uint32Array 32位无符号整数，每个元素占四个字节
• Float32Array 32位浮点数，每个元素占四个字节
• Float64Array 64位浮点数，每个元素占八个字节

::: waring 警告

有符号和无符号整数在计算机中存储整数数据时使用两种表示方式，他们的却别在于内存中的二进制数据最高位

• 有符号整数：最高位为符号位，0 表示正数，1 表示负数
• 无符号整数：最高位不是符号位，所有位都用于表示数值

:::

创建和使用类型化数组

类型化数组每一种都对应了一个构造函数（类）

let intArray = new Int32Array(10);
for (let i = 0; i < intArray.length; i++) {
  intArray[i] = i * 2;
}
let sum = 0;
for (let i = 0; i < intArray.length; i++) {
  sum += intArray[i];
}
console.log(sum);

类型化数组在WebGL中的应用 比如几何图形

const vertices = new Float32Array([
  0.0,
  0.5, //第一个顶点的坐标【0.0, 0.5】
  -0.5,
  -0.5, //第二个顶点的坐标【-0.5, -0.5】
  0.5,
  -0.5, //第三个顶点的坐标【0.5, -0.5】
]);

2. 着色器的基础知识

通俗的讲，着色器就是画点的。

着色器的类型

• 顶点着色器：负责处理每个顶点的位置和属性，如位置、法线、纹理坐标等。主要任务是将顶点从对象坐标转化到屏幕坐标系，并传递其他顶点实行给片段着色器。
• 片元着色器：负责处理每个像素的颜色和其他属性。他接收来自顶点着色器的插值结果，并根据这些结果计算出每个像素的颜色。

着色器的语法

着色器基本类型

• 基本数据类型： float int bool
• 向量类型：vec2 vec3 vec4 (浮点型) | ivec2 ivec3 ivec4 (整数型) | bvec2 bvec3 bvec4 (布尔型)
• 矩阵类型：mat2 mat3 mat4
• 采样器类型：sampler2D samplerCube（用于纹理采样）

变量修饰符

用于指定变量的作用域、生命周期和用途。不同的修饰符在顶点着色器和片段着色器中起到不同的作用

• attribute ：用于顶点着色器，定义从顶点缓冲区传入的变量（仅在顶点着色器中使用）
• uniform ：在整个渲染过程中保持不变。常用于传递变换矩阵、光照参数等。
• varying ：用于顶点着色器和片段着色器，定义在顶点着色器和片段着色器之间传递的变量（在顶点着色器中赋值，在片段着色器中使用）

内置变量

• 顶点着色器内置变量
  • gl_Position：输出变量，指定顶点的位置（vec4 类型）
  • gl_PointSize：输出变量，指定点的大小（float 类型）
• 片段着色器内置变量
  • gl_FragColor：输出变量，指定片段的颜色（vec4 类型）

函数

• 常用数学函数： sin，cos， tan ，pow， exp, log, sqrt, abs, min, max, radians
• 向量函数：dot,cross, normalize, length, distance
• 纹理采样函数：texture2D, textureCube

定义精度

precision 关键字用于定于声明变量的精度

GLSL 支持三种不同的精度修饰符

• highp：高精度，用于需要较高精度的计算，如位置、颜色等。
• mediump：中精度，用于中等精度的计算，如法线、纹理坐标等。
• lowp：低精度，用于较低精度的计算，如透明度等。

precision highp float;

主函数
着色器必须要有一个主函数 void main()

void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

向量