WebGL基础笔记

WebGL基础笔记

个人参加字节跳动的青训营时写的笔记。这部分是月影老师讲的WebGL基础。

1. 简介

WebGL代码有两部分：

• 运行在CPU上的JavaScript
• 运行在GPU上的GLSL

CPU和GPU：

• CPU适合比较复杂的任务，不适合量大但每个单元比较简单的任务
• GPU有大量的小运算单元构成，每个运算单元只负责处理简单的计算，每个运算单元彼此独立。所有计算可以并行处理。适合量大但每个单元比较简单的任务。

图像的处理适合交给GPU，因为图像会有很多的像素点需要处理。

2. 流程

这部分只能说似懂非懂(任重而道远啊)，先贴一下课上的示例代码，方便之后看。

1. 创建WebGL上下文

   const canvas = document.querySelector('canvas');
   const gl = canvas.getContext('webgl');
   

2. 创建WebGL程序(GLSL，顶点着色器、片元着色器)

   顶点着色器(Vertex Shader)：

   

   片元着色器(Fragment Shader)：顶点之间的轮廓中的所有像素都会经过片元着色器处理。(并行处理)

   

   

3. 将数据存入缓冲区

   

4. 将缓冲区数据读取到GPU

   

5. GPU执行WebGL程序，输出结果

   

完整代码：

// 1. 创建WebGL上下文
const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl');

// 2. 创建WebGL程序

// 2.1 顶点着色器
const vertex = `
  attribute vec2 position;

  void main() {
    gl_PointSize = 1.0;
    gl_Position = vec4(position, 1.0, 1.0);
  }
`;

// 2.2 片元着色器
const fragment = `
  precision mediump float;

  void main()
  {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);	// 类似rgba
  }    
`;

// 2.3 加载、编译、使用着色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertex);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragment);
gl.compileShader(fragmentShader);


const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

const points = new Float32Array([
  -1, -1,
  0, 1,
  1, -1,
]);

// 3. 将数据存入缓存区
const bufferId = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

// 4. 将缓冲区数据读取到GPU
const vPosition = gl.getAttribLocation(program, 'position');
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);

// 5. GPU执行WebGL程序
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, points.length / 2);  // points中有六个点，实际上只有三个点，所以需要除以2

效果：

canvas 2D版本：

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(250, 0);
ctx.lineTo(500, 500);
ctx.lineTo(0, 500);
ctx.fillStyle = 'red';
ctx.fill();

效果和上图所示一样。(比原生WebGL简单好多)

3. 多边形

多边形需要进行三角划分

Earcut

// 1. 创建WebGL上下文
const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl');

// 2. 创建WebGL程序

// 2.1 顶点着色器
const vertex = `
  attribute vec2 position;

  void main() {
    gl_PointSize = 1.0;
    gl_Position = vec4(position, 1.0, 1.0);
  }
`;

// 2.2 片元着色器
const fragment = `
  precision mediump float;

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

// 2.3 加载、编译、使用着色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertex);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragment);
gl.compileShader(fragmentShader);


const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

// 顶点集
const vertices = [
  [-1, -1],
  [-1, 0],
  [0, 0],
  [0, -1],
];  

const points = vertices.flat();  // 点集
const triangles = earcut(points);  // 三角形集(三角划分后的三角性)

const position = new Float32Array(points);
const cells = new Uint16Array(triangles);

// 3. 将数据存入缓存区，这时候需要分点和三角形来分别存
const pointBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, pointBuffer);
gl.bufferData(gl.ARRAY_BUFFER, position, gl.STATIC_DRAW);

const cellsBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cellsBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, cells, gl.STATIC_DRAW);

// 4. 将缓冲区数据读取到GPU
const vPosition = gl.getAttribLocation(program, 'position');
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);

// 5. GPU执行WebGL程序
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawElements(gl.TRIANGLES, cells.length, gl.UNSIGNED_SHORT, 0);  // 这部分还不是很明白

效果：

4. 变换

• 平移
• 旋转
• 缩放

5. 3D标准模型的四个齐次矩阵

• 投影矩阵
• 模型矩阵
• 视图矩阵
• 法向量矩阵

挖了个大坑

6. 相关链接

• The Book of Shaders
• 着色器分享
• Mesh.js
• glsl-doodle
• SpriteJS
• three.js