WebGL

介绍 WebGL 入门概念，建立一个初步的认识，知道 WebGL 是啥和能干啥。没有代码，只有文字和图。

WebGL 在 GPU 上的工作可以总结： 第一步是将顶点（或数据流）转换到裁剪空间坐标； 第二步是基于第一部分的结果绘制像素点。 然后每一帧运行都会重复第1、2步

顶点着色器和片元着色器是自定义绘图的主要工作，当把数据准备好之后，就需要在两个着色器里面进行表演了。

WebGLBuffer 像一个数据包，可以存放顶点坐标、颜色之类的数据，可以通过 WebGL API 把 JS 数据写入 Buffer，着色器也可以从Buffer中读取。

和 WebGLBuffer 类似，不过 WebGLTexture 是存储传输纹理数据的，纹理数据通常来自一个 Image 对象。

WebGL相关的几个坐标系：屏幕坐标系、浏览器坐标系、Canvas坐标系、WebGL 坐标系、纹理坐标系

在对空间图形进行位置变换（平移、旋转、缩放）、计算光线、颜色、投影的时候，使用向量和矩阵来计算要简洁高效。

在二维屏幕上展现三维的世界的物体，需要经过一系列坐标变换。理解这一系列变换是进入 WebGL 三维世界的基础，最好可以亲自推导一遍，不手动推导也要多理解，反复举例验证。

真实世界里的灯光效果就是光线在物体表面进行反射和漫反射的结果，在 WebGL 里模拟这一效果需要知光源的位置、光线方向、光的强度和光线颜色等光源属性。

代码是 VUE3 ，里面包含了空间变换（矩阵运算）和灯光效果（向量运算）的示例代码，可以帮助理解前面三节文章的知识点。