【笔记】《WebGL编程指南》学习（0）

WebGL编程指南学习，界明城，2022-3-1

0. WebGL编程，从入坑到放弃

• 知识路径
• 《WebGL编程指南》环境搭建
• WebGL编程范式

0.1 知识路径

• Level 1：了解计算机图形学，尤其是渲染相关概念
• Level 2：用过OpenGL，知道

0.2 《WebGL编程指南》环境搭建

0.2.1 TODO

对本书的评价，将在整本书读完后更新

0.2.2 代码运行环境

• 本机运行环境：MacOS Monterey 12.2.1
• 编辑器：VS Code
• 本书对WebGL特性的支持：WebGL 1.0 API
• 本书提供的库文件：
  • webgl-utils.js: 主要作用是获取WebGL运行的浏览器的上下文
  • webgl-debug.js：主要提供对WebGL代码，尤其是着色器代码的调试功能
  • cuon-utils.js：作者自定义的获取WebGL上下文的函数，还有一些着色器常用函数
  • cuon-matrix.js：作者自定义的一些矩阵运算函数，其他数学相关的东西
• 库文件下载地址：链接: https://pan.baidu.com/s/1PBWKxVcl_Kv7iUVf8RtfoQ 密码: cocs
• 支持的浏览器：建议Chrome

0.3 WebGL编程范式

0.3.1 WebGL软件结构

0.3.2 WebGL应用范式

HTML5引入的标签使JavaScript动态绘制图形成为可能

编程范式

• HTML文件：
  • 建立一个，使绘制图形成为可能
  • 调用JavaScript文件，在JavaScript文件中使用WebGL进行渲染
• JavaScript程序：
  • 获取元素
  • 获取WebGL绘图上下文（即告诉WebGL绘制的区域是）
  • OpenGL渲染管线

0.3.3 WebGL网页的渲染管线

TODO

0.3.4 WebGL 渲染管线

1. 执行JavaScript程序，调用WebGL相关方法
2. 执行WebGL相关方法
   1. 逐顶点操作——顶点着色器
   2. 逐片元操作——片元着色器
3. 渲染到颜色缓冲区
4. 显示

0.3.5 WebGL程序结构

1. 获取元素
2. 获取WebGL绘图上下文
3. 初始化着色器
4. 设置颜色缓冲区（也就是）背景色
5. 绘制

JavaScript程序

// 从HTML获取canvas元素
var canvas = document.getElementById('webgl');
// 获取WebGL上下文
var gl = getWebGLContext(canvas);
if (!gl){
  console.log('获取不到WebGL上下文');
  return;
}
// 初始化着色器
if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)){
  console.log('初始化着色器失败');
  return;
}
// 设置颜色缓冲区背景
gl.clearColor(0.0, 0.0, 0.0, 1.0)
// 清除颜色缓冲区
gl.clear(gl.COLOR_BUFFER_BIT)
// 绘制
gl.drawArrays(gl.POINTS, 0, 1)

着色器Shader（字符串形式写在JavaScript里）

var VSHADER_SOURCE = ''
var FSHADER_SOURCE = ''

0.3.6 初始化着色器

initShaders()的细节：

1. 根据获取的WebGL上下文、顶点着色器与片元着色器，创建一个连接好的程序对象的实例（Program）
2. 告诉WebGL渲染引擎，要使用这个程序对象
3. 获取WebGL上下文（告诉WebGL程序对象是谁）

创建程序对象的方法

1. 实例化着色器对象
2. 实例化程序对象
3. 把着色器分配给程序对象
4. 连接着色器
5. 检查连接

function createProgram(gl, vshader, fshader){
  // 实例化着色器对象
  var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader);
  var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader);
  ...
  // 创建程序对象
  var program = gl.createProgram();
  ...
  // 把着色器分配给程序对象
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  // 连接着色器
  gl.linkProgram(program);
  // 检查连接
  var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
  ...
  return program;
}

加载着色器的方法

1. 声明着色器对象
2. 为其分配着色器源代码
3. 编译着色器
4. 检查着色器的编译状态

function loadShader(gl, type, source){
  // gl - WebGL上下文；type - 着色器类型；source - 着色器源代码
  // 创建着色器对象
  var shader = gl.createShader(type);
  ...
  // 设置着色器的源代码
  gl.shaderSource(shader, source);
  // 编译着色器
  gl.compileShader(shader);
  // 检查着色器的编译状态
  var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
  ...
  return shader;
}