这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
因为可视化项目用到了webgl所以就开始学习了
介绍
WebGL（全写Web Graphics Library）字面意义理解就是web图像库.是一种3D绘图协议，也可以说是一个负责图形处理的JavaScript API，可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形，而无需使用插件.总结一句话,“webgl是一个专门计算或渲染3D图像的javascriptAPI也可以称之为专门处理3D图像的一种ｊａｖａｓｃｒｉｐｔ技术”．
起源
能不能让浏览器真正实现显卡级别的能够通过OpenGL来操作ｗｅｂ图形界面的真正的三维动画效果，而不是现在的伪三维(逐帧动画)．这个时候ｗｅｂＧＬ就应运而生了.
webGL 与canvas的结合使得我们可以在网页上显示 和操作三维图形. 比如开发三维的用户界面, 运行三维的网络游戏或是三维动画等等,这也是webGL 的优势
OpenGL
openGL是webGL的老大哥。
OpenGL是用于渲染2D, 3D图形的跨语言,跨平台的应用程序 编程接口.它可以通过exe的执行程序 去操作我们显卡驱动程序,通过显卡把图形图像渲染到显示器上,最终成现出三维效果.
WebGL工作原理
图像渲染其实是前端工程师使用CSS语言，去调用Web GL的API，然后通过WebGL去调用底层的openGL，来达到操作显卡驱动的目的。
OpenGL－ＥＳ
OpenGL－ＥＳ 是ｏｐｅｎＧＬ的一个精简版．专用于嵌入式计算机、智能手机、家用游戏机等设备。OpenGL ES移除了OpenGL中许多陈旧无用的新特性，并且增加了新特性。这使得OpenGL ES保持了轻量级的同时，还有足够的能力渲染出精美的三维图形。
webGL开发环境搭建
WebGL是内嵌在浏览器中的，所以我们只需要准备一个支持WebGL的浏览器 和 一个文本编辑器就可以了
webGL的程序 结构
WebGL程序/页面包含了三种语言：HTML5、JavaScript以及GLSL ES（着色器语言）。通常GLSL ES是以字符串的形式在JavaScript中编写的。所以实际上WebGL程序也只需要用到HTML文件(.html)和JavaScript(.js)文件。
学习WebGL能做些什么
随着webGL的出现, 直接开拓出我们前端开发的一个全新的技术领域. webGL技术很多 已经被 应用到了网络游戏\ 物理模型\虚拟现实\城市地图等等.
今日学习WebGL的重点
1.变换矩阵
变换矩阵是数学线性代数中的一个概念。在线性代数中，线性变换能够用矩阵表示。如果T TT是一个把R n R_nRn映射到R m R_mRm的线性变换，且x xx是一个具有n nn个元素的列向量 ，那么我们把m × n m×nm×n的矩阵A AA，称为T TT的变换矩阵。
平移
平移的数学原理很容易理解，在x y z的基础上分别加上一个平移量即可：
- x’ = x + Tx
- y’ = y + Ty
- z’ = z + Tz
但是这里有一个问题：根据前面矩阵相乘的理论，n维矩阵和n维向量相乘，不能实现向量和一个常量进行加减的操作：
为了解决这个问题，结合之前齐次坐标系的知识，可以使用一个4维的矩阵，同时将点坐标也扩充为vec4，设原始点坐标为（x,y,z,1）,平移后点坐标为（x’,y’,z’,1）：
换为表达式的形式则为：
比较x’，可得a=1,b=0,c=0,d=Tx；比较y’，可得f=1,e=0,g=0,h=Ty；比较z’，可得k=1,i=0,j=0,l=Tz；由此可得平移矩阵的表达式：
