这是我参与「第四届青训营 」笔记创作活动的第14天
初识WebGL
什么是WebGL
- WebGL就是可以帮助你在浏览器上创建和渲染三维图形的一个API集，也就是专门用于Web页面的OpenGL
WebGL起源
- 如上图所示，现在WebGL有两个版本，分别是WebGL 1.0和WebGL 2.0，它们都起源于OpenGL 1.5，但WebGL 1.0基于OpenGL ES 2.0，OpenGL ES 2.0又是OpenGL 2.0的子集
- 而WebGL 2.0基于OpenGL ES 3.0，OpenGL ES 3.0又是OpenGL 3.3的子集
- 上图中有一句话"蓝色区域中版本支持着色器语言"，着色器语言(shading language)它是一种类似于C语言可以实现精美视觉效果的编程语言，WebGL使用的着色器语言与OpenGL一样也是 GLSL ES
WebGL特点与优势
- WebGL内嵌在浏览器中，不需要安装插件和库就可以直接使用
- 由于WebGL基于浏览器，不是基于操作系统。所以可以直接在多种平台运行WebGL程序
- WebGL程序由HTML和JavaScript文件组成，可以直接发送给对方在浏览器中展示
- 不需要搭建开发环境，可以直接通过文本编辑器开发
- 由于WebGL继承自OpenGL，所以OpenGL相关资料都可以拿来参考
总结
- WebGL是一门非常强大的语言，也是一门需要花费大量精力去掌握的语言，随着5G时代的来临，工业4.0的到来，智慧城市的创建，物联网的快速发展，智能可视化的兴起等这些契机的出现，三维图形展示与WebGL必将越来越受重视，越来越多的被使用。
Modern Graphics System
- 光栅(Raster):几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。
- 像素(Pixel):一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
- 帧缓存（Frame Buffer）:在绘图过程中，像素信息被存放于帧缓存中,帧缓存是一块内存地址。
- CPU (Central Processing Unit):中央处理单元，负责逻辑计算。
- GPU (Graphics Processing Unit):图形处理单元，负责图形计算。
CPU vs GPU
- GPU由大量的小运算单元构成
- 每个运算单元只负责处理很简单的计算每个运算单元彼此独立
- 因此所有计算可以并行处理
WebGL Startup
- 创建WebGL上下文
- 创建WebGL Program
- 将数据存入缓冲区
- 将缓冲区数据读取到GPU
- GPU执行WebGL程序，输出结果
Transforms
3D Matrix
3D标准模型的四个齐次矩阵 （mat4)
- 投影矩阵Projection Matrix
- 模型矩阵Model Matrix
- 视图矩阵View Matrix
- 法向量矩阵 Normal Matrix
