版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/liyangyang08/article/details/79839845
webGL3D基础知识
3D坐标系
- webGL坐标系统，x沿水平方向从左到右，y垂直向上，z指向屏幕向外这些都是正方向
- canvas坐标系统，z，x一样，但是y是向下的。
- 浏览器坐标系，x，是向左、y是向下的。
- tip: 鼠标点击的是浏览器的坐标系统，要先转换为Canvas的坐标系统，也就是0点是不一致的。然后就是webGL的坐标要进行归一化。同时把原点切换到Canvas的中心。
网格，多边形，顶点
- 网格：就是有一个或多个多边形拼接而成的，网格只能确定形状不能确定色彩和明暗等
- 多边形：多指三角形和四边形
- 模型：也就是3D的网格的别名
- 顶点：就是定义多边形位置的3D空间位置，也就是x,y,z的一组值
材质，纹理，光源
- 这些属性都是用来描述网格外观，包括简单的色彩属性和复杂的反射，明暗etc
- 纹理映射（也就是通常说的纹理）：就是使用一个或多个位图表示外观信息
- 材质：网格外观属性的统称
- 光源：光源可以是一个或多个，决定了场景被照亮的模式
变换，矩阵
- 要区别世界坐标系和视图坐标投影坐标和对象坐标转换的矩阵
- 矩阵都是4*4的
- 变换是通过矩阵来实现的，要区别左右？
- 不要傻傻的想for一个一个点来操作。
- 可以参考这个文章https://learnopengl-cn.readthedocs.io/zh/latest/01%20Getting%20started/08%20Coordinate%20Systems/
相机，透视，窗口，投影
- 相机 就是对应的观察点，决定了位置和方向，其实它一般是一个矩阵
- 透视 就是远小近大
- 视口 浏览器窗口和canvas元素决定的
- 其实所有的变换都是矩阵操作。也可以参考上面的那个链接
着色器
-顶点和片元也叫片选
主要工作就是定义顶点和变换以及材质光源和相机相互作用生成的图像，是一段类C的高级代码，被GPU执行，同样着色器可以控制页面中的CSS元素的展现和动画。
- webGL着色器的编写与其它的是不太一样的，但是原理都是通用的。
-css 自定义滤镜也可以达到某些效果，可能更复杂一点没有尝试过。