这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天 冲冲冲！
初识WebGL
WebGL是用于基于OpenGL ES的低级3D图形API的跨平台，免版税的Web标准，并通过HTML5 Canvas元素公开给ECMAScript。链接 熟悉OpenGL ES 2.0的开发人员将WebGL视为使用GLSL的基于Shader的API，其构造在语义上与基础OpenGL ES API相似。
WebGL（Web图形库）是一个JavaScript API，可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0非常一致的API来做到这一点，该API可以在HTML5 元素中使用。 这种一致性使API可以利用用户设备提供的硬件图形加速。
原理
webgl本身是作用到canvas上的；基于左手笛卡尔坐标系建立三维空间模型，然后通过光栅化的模型，通过相机视角远近着色渲染到canvas上呈现3D效果。
why WebbGL / why GPU
- WebGL是什么
- GPU != WebGL != 3D
- WebGL为什么不像其他前端技术那么简单
Modern Graphics System
-
光栅(Raster)：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列
-
像素(Pixel)：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息
-
帧缓存(Frame Buffer)：在绘制过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址
-
CPU(Central Processing Unit)：中央处理单元，负责逻辑计算。
-
GPU(Graphics Processing Unit)：图像处理单元，负责图形计算
-
轮廓提取/meshing
-
光栅化
-
帧缓存
-
渲染
The Pipeline
CPU vs GPU
-
GPU由大量运算单元构成
-
每个运算单元只负责处理很简单的计算
-
每个运算单元彼此独立
-
因此所有计算可以并行处理
WebGL & OpenGL
WebGL Startup
- 创建WebGL上下文
- 创建WebGL Program
- 将数据存入缓存区
- 将缓存区数据读取到GPU
- GPU执行WebGL程序，输出结果
Create WebGL Context
The Shaders
-
Vertex Shader
-
Fragment Shader
Create Program
Data to Frame Buffer
Axes
Typed Array
Frame Buffer to GPU
WebGL
Mesh.js
Polygons
Triangulations
Draw Polygon with 2D Triangulations
使用Earcut进行三角剖分
3DMeshing
Tansforms
旋转+缩放是线性变换
Apply TransForms
3D Matrix
3D标准模型的四个齐次矩阵
- 投影矩阵Project Matrix
- 模型矩阵Model Matrix
- 视图矩阵View Matrix
- 法向量矩阵Normal Matrix
