这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天

一、本堂课重点内容：

本堂课的知识要点有哪些？

• 认识WebGL
• WebGL Startup
• Read More

二、详细知识点介绍：

认识WebGL

WebGL是什么

GPU ≠ WebGL ≠ 3D

WebGL全称是Web Graphics Library，是一种3D绘图协议，但是WebGL通过增加OpenGL ES 2.0的一个JavaScript绑定，可以为HTML5 Canvas提供硬件3D加速渲染，减去了开发网页专用渲染插件的麻烦，还可以创建复杂3D结构的网站页面和用来设计3D网页游戏等等。

WebGL为什么不简单？像其他前端技术一样

Modern Graphics System

• 光栅（Raster）：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是构成图像的像素阵列
• 像素（Pixel）：一个像素对应图像上的一个点，通常保存图像上某个具体位置的颜色等信息
• 帧缓存（Frame Buffer）：绘图过程中，像素信息被存放于帧缓存中
• CPU（Central Processing Unit）：中央处理，单元负责逻辑计算
• GPU(Graphics Processing Unit)：图形处理单元负责图形计算

轮廓提取→CPU→光栅化→GPU→帧缓存→渲染到用户界面

1. 轮廓提取/meshing
2. 光栅化
3. 帧缓存
4. 渲染

The Pipeline

Data → Processor → Frame buffer → Pixels

CPU vs GPU

• CPU：由数百万个晶体管组成，有多个处理内核，被称为计算机的大脑，是所有现代计算系统必不可缺的组成部分，主要执行计算机和操作系统所需要的命令和流程。
• GPU：由大量的小运算单元构成，每个运算单元只负责处理简单的计算，由于每一个单元都是独立的，所以所有计算都可以并行处理。
• 两个都是基本的计算引擎，GPU适合用在处理从串行计算到数据库运行这种一系列广泛的工作中，而GPU则更适合用在图像处理和游戏中。

选择GPU的原因：处理好点阵信息，用简单运算处理，不用复杂运算（CPU）

WebGL Startup：

1. 创建WebGL上下文（canvas对象）
2. 创建WebGL Program
3. 将数据存入缓冲区
4. 将缓冲区数据读取到GPU
5. GPU执行WebGL程序，输出结果

过程一览

• raw vertices & primitives
• → vertex processor(programmable)
• → transformed vertices & primitives
• → rasterizer
• → fragments
• → fragment processor(programmable)
• → processed fragments
• → output merging
• → pixels

Create WebGL Context

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

function create3DContext(canvas, options) {
  const names = ['webgl','experimental-webgl','webkit-3d','moz-webgl'];   
  if(options.webgl2) names.unshift('webgl2');
  let context = null;
  for( let ii = 0; ii < names.length; ++ii) {
    try {
      context = canvas.getContext(names[ii], options);
    } catch (e) {
      // no-empty
    }
    if(context) {
      break;
    }
  }
  return context;
}

The Shaders

着色器： 通过GLSL编写，输入顶点信息，输出每个像素的坐标和颜色。可分为顶点着色器，片段着色器。 网格化、贴图。

顶点着色器(Vertex Shader)

主要用于处理图形轮廓，用来描述顶点的位置、颜色等特性。顶点是指二维或三维空间中的一个点，比如二维或三维图形的端点或交点。

attribute vec2 position;

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

片元着色器(Fragment Shader)

主要用于处理颜色，进行逐片元处理过程如光照的程序。片元是一个WebGL术语，可以将其理解为像素。

precision mediump float;

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

创建项目

这个流程主要分为:

1、创建对应的着色器(顶点着色器，片元着色器), createShader()

2、设置着色器的数据源(设置着色器的GLSL程序代码), shaderSource()

3、编译创建的着色器(使其成为为二进制数据，然后就可以被WebGLProgram对象所使用)，compileShader()

4、添加到 WebGL 渲染上下文中，attachShader()

5、链接，从而完成为程序的片元和顶点着色器准备GPU代码的过程

6、将创建的着色器添加到当前的渲染状态中 useProgram()

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);

Data to Frame Buffer

Typed Array

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

const bufferId = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,bufferId);
gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

Frame Buffer to GPU

const vPosition = gl.getAttribLocation(program, 'position');//获取顶点着色器中的position变量的地址
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);//给变量设置长度和类型
gl.enableVertexAttribArray(vPosition);//激活变量

attribute vec2 position;

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

青训营-WebGL-1 Output

WebGL

WebGL完美地解决了现有的Web交互式三维动画的两个问题：

• 通过HTML脚本本身实现Web交互式三维动画的制作，WebGL无需任何浏览器插件支持；
• WebGL利用底层的图形硬件可以加速进行图形渲染。

GitHub - mesh-js/mesh.js: A graphics system born for visualization 😘.

2D VS WebGL

青训营-WebGL-2-2D

青训营-WebGL-3-WebGL

Polygons

• polygons：凸/凹多边形，复杂多边形
• triangulations

基本图元：

• 点
• 线
• 三角

任意的多边形都可以由三角形组成：三角剖分。

Draw Polygon with 2D Triangulations

GitHub - mapbox/earcut: The fastest and smallest JavaScript polygon triangulation library for your WebGL apps

3D Meshing

SpriteJS/next - The next generation of spritejs.

Transform：线性变化 矩阵乘法

• 平移
• 旋转
• 缩放

青训营-WebGL-4-Apply Transforms

值得注意的是，虽然webGL与canvas2d都可以暴露在canvas元素中，但webGL的坐标系是以画布中心为坐标原点的坐标系而非canvas2d那种以左上角为原点的坐标系。

图像基本概念

图像分辨率：用于确定组成一副图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。

图像深度：图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色值，或可能的灰度级数。

视频基本概念

分辨率：每个帧的图像分辨率

帧率：视频单位时间内包含的视频帧的数量

码率：就是指视频单位时间内传输的数据量，一般我们用kbps来表示，即千位每秒

3D Matrix

3D标准模型的四个齐次矩阵(mat4)：

1. 投影矩阵 Projection Matrix

2. 模型矩阵 Model Matrix

3. 视图矩阵 View Matrix

4. 法向量矩阵 Normal Matrix

Read More

• The Book of Shaders
• GitHub - mesh-js/mesh.js: A graphics system born for visualization 😘.
• Glsl Doodle (webgl.group)
• SpriteJS ~ Next - 下一代 SpriteJS
• Three.js – JavaScript 3D Library (threejs.org)
• Shadertoy BETA
• 充分理解WebGL - 十年踪迹的专栏 - 掘金 (juejin.cn)

三、引用参考：

• ‌WebGL 月影带练.pptx
• OpenGL, OpenGL ES, WebGL, GLSL, GLSL ES API Tables (umich.edu)