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

前端技术栈之初识WebGL｜ 青训营笔记

什么是WebGL

• WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了。
• GPU ≠ WebGL ≠ 3D
• WebGL为什么不像其他前端技术那么简单？

Modern Graphics System

• 光栅：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图形的像素阵列。
• 像素：一个像素对应图像的一个点，它通常保存图像上的某个具体位置的颜色等信息。
• 帧缓存：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。
• CPU：中央处理单元，负责逻辑计算。
• GPU：图形处理单元，负责图形计算。

过程：

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

CPU vs GPU

GPU：

• 叫做图形处理器，又称显示核心、视觉处理器、显示芯片，是一种专门在个人电脑、工作站、游戏机和一些移动设备(如平板电脑、智能手机等)上做图像和图形相关运算工作的微处理器
• GPU由大量的小运算单元构成
• 每个运算单元只负责处理很简单的计算
• 每个运算单元彼此独立
• 因此所有计算可以并行处理

CPU：

• CPU：叫做中央处理器(central processing unit)作为计算机系统的运算和控制核心，是信息处理、程序运行的最终执行单元，
• 需要少量的运算单元，强大的逻辑运算能力。
• 需要足够的控制单元实现复杂的数据控制和数据转发。
• 需要足够的缓存单元去存放一些已经计算完成的结果，或者是后面马上要用到的数据。

综合对比：

• 计算量比较

  • CPU：计算量小，原理：只有4个运算单元
  • GPU：计算量大，原理：有1000个运算单元

• 计算复杂度比较

  • CPU：可计算复杂的运算，比如积分微分，4个运算单元都属于专家级别
  • GPU：只可以计算简单的1+1算术题，不能计算复杂的微分积分，1000个运算单元属于小学生水平。

• 对于单个积分微分的计算速度比较

  • CPU：较快。原理：单线程计算(比如机器人运动控制)，单个芯片性能强劲，计算能力强，能计算出来
  • GPU：较慢，甚至可能计算不了;原理：单个芯片性能弱，计算能力弱，可能算不出来，或速度很慢

• 适用场景

  • CPU：适合需要前后计算步骤严密关联的计算场景。这些任务涉及到“流”的问题，必须先计算完第一步，再去计算第二步;比如你去相亲，双方看着顺眼才能继续发展。总不能你这边还没见面呢，那边找人把证都给领了。这种比较复杂的问题都是CPU来做的，生活中大部分用的都是CPU，例如武器装备运动控制、个人电脑使用等
  • GPU：适合前后计算步骤无依赖性，相互独立的计算场景。很多涉及到大量计算的问题基本都有这种特性，比如你说的破解密码，挖矿和很多图形学的计算。这些计算可以分解为多个相同的简单小任务，每个任务就可以分给一个小学生去做。

本章片段部分内容属于自行查阅借鉴得来

WebGL Startup

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

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

1. 投影矩阵
2. 模型矩阵
3. 视图矩阵
4. 法向量矩阵