这是我参与「第四届青训营 」笔记创作活动的的第14天
Webgl是什么？
WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。
Modern Graphics System
-
光栅 (Raster)：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。
-
像素（Pixel)：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
-
帧缓存 (Frame Buffer）：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址，
-
CPU (Central Processing Unit )：中央处理单元，负责逻辑计算。
-
GPU (Graphics Processing Unit )：图形处理单元，负责图形计算 步骤
- 轮廓提取 / meshing
- 光栅化
- 帧缓存
- 渲染
WebGL & OpenGl
OpenGL, OpenGL ES, WebGL, GLSL, GLSL ES API Tables (umich.edu)
WebGL Startup
- 创建 WebGL 上下文
- 创建 WebGL Program
- 将数据存入缓冲区
- 将缓冲区数据读取到 GPU
- GPU执行 webGL 程序，输出结果
创建WebGL Program
- 顶点着色器 Vertex Shader ： 用于处理顶点的位置
- 片元着色器 Fragment Shader: 并行处理顶点包围内的所有像素，处理次数更多。颜色取值 从 0.0 - 1.0 的浮点范围。
- 用浮点类型数组表示顶点数据，创建buffer后将返回的bufferid绑定到上下文
大致步骤
- 创建WebGL Program
- 将数据存入缓冲区Frame Buffer
- 将缓冲区数据读取到GPU Buffer to GPU
- GPU执行WebGL程序，输出结果 Output
坐标系知识
坐标系知识：canvas和浏览器的坐标轴都是左上角为原点。但WebGL的坐标体系，是一个以绘制画布的中心为原点，范围从 -1 到 1。在3D的情况下，z轴正方向是向外的。
其他方式绘图
- 使用 canvas 2D
- 使用mesh.js的开源库
- 其他图形（Polygons）的绘制
方法：三角剖分
- 使用3D Meshing
步骤：
- 设计软件设计模型
- 提取所有的顶点数据
- 渲染
图形的变换
平移
x=x0+x1x = x0 + x1x=x0+x1
y=y0+y1y = y0 + y1y=y0+y1
旋转
x=x0∗cos()+y0sin()x=x0*cos()+y0sin()x=x0∗cos()+y0sin()
y=x0∗sin()+y0∗cos()y=x0sin()+y0cos()y=x0∗sin()+y0∗cos()
缩放
x=Sx∗x0x=Sx*x0x=Sx∗x0
y=Sy∗y0y=Sy*y0y=Sy∗y0
旋转+缩放是线性变换
3D Matrix
3D 标准模型的四个齐次矩阵 (mat4)
- 投影矩阵 Proiection Matrix
- 模型矩阵 Model Matrix
- 视图矩阵 View Matrix
- 法向量矩阵 Normal Matrix
扩展阅读
mesh-js/mesh.js: A graphics system born for visualization 😘. (github.com)
SpriteJS ~ Next - 下一代 SpriteJS
