WebGL 与动画实现

这是我参与「第四届青训营」笔记创作活动的第14天

1.初识WebGL

WebGL（Web 图形库）是一个 JavaScript API，可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形，而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 非常一致的 API 来做到这一点，该 API 可以在 HTML5元素中使用。这种一致性使 API 可以利用用户设备提供的硬件图形加速。

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

2.CPUvsGPU

GPU由大量的小运输单元构成
每个运算单元只负责处理简单的计算
每个运算单元彼此独立
因此素有计算可以并行处理

3.WebGL Startup

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

4.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("wegl2")
     let context = null;
     for(let i=0;i<name.length;i++){
         try{
             context = canvas.getContext(names[i],options);
         }catch(e){
         
         }
         if(context) break
         
     }
     return context
 }

4.3D Matrix

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

5.WebGL 基本原理

WebGL 的出现使得在浏览器上面实现显示 3D 图像成为可能，WebGL 本质上是基于光栅化的 API ,而不是基于 3D 的 API。. WebGL 只关注两个方面，即投影矩阵的坐标和投影矩阵的颜色。. 使用 WebGL 程序的任务就是实现具有投影矩阵坐标和颜色的 WebGL 对象即可。. 可以使用“着色器”来完成上述任务。. 顶点着色器可以提供投影矩阵的坐标，片段着色器可以提供投影矩阵的颜色。. 无论要实现的图形尺寸有多大，其投影矩阵的坐标的范围始终是从 -1 到 1 。

WebGL 与动画实现 ｜ 青训营笔记