这是我参与「第五届青训营 」伴学笔记创作活动的第 17 天
今日学习重点，理解WebGL是什么，了解GPU和CPU的区别，如何绘制图形。
WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。
作者：三石青韦
链接：www.jianshu.com/p/fd4bbf7d0…
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
- 光栅(Raster) : 几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。像素(Pixel):-个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
- 帧缓存(Frame Buffer) : 在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。
- CPU (Central Processing Unit) : BAALIE#T, ñá L Eit# o
- GPU (Graphics Processing Unit)图形处理单元，负责图形计算。
图形系统是工作的
- 轮廓提取
- 光栅化j
- 帧缓存
- 渲染
了解GPU
- GPU由大量的小运算单元构成
- 每个运算单元只负责处理很简单的计算
- 每个运算单元彼此独立
- 因此所有计算可以并行处理
WebGL Startup
- 创建web GL上下文
- 创建WebGL Program
- 将数据存入缓冲区
- 将缓冲区数据读取到GPU
- GPU执行WebGL程序，输出结果
gl_Position: 为一种vec4类型的变量，且必须被赋值。四维坐标矢量，我们称之为齐次坐标，即(x,y,z,w)等价于三维左边(x/w,y/w,z/w)，w相当于深度，没有特殊要求设置为1.0即可。
gl_PointSize：表示顶点的尺寸，也是浮点数，为非必填项，如果不填则默认显示为1.0。
gl_FragColor：该变量为片元着色器唯一的内置变量，表示其颜色，也是一个vec4类型变量，分别代表（R,G,B,A），不过颜色范围是从0.0-1.0对应Javascript中的 #00-#FF
作者：三石青韦
链接：www.jianshu.com/p/fd4bbf7d0…
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
3D标准模型的四个齐次矩阵
- 投影矩阵
- 模型矩阵
- 视图矩阵
- 法向量矩阵
