图解WebGL与Threejs工作原理

Posted 2021-04-21 前端末班车

webgl简单说就是浏览器中的opengl，给予web开发者直接在浏览器中利用gpu，进行3d绘制的能力。

文中第一部分简单说了一下矩阵的变换的数学原理，这部分就是线性代数的基础，也是opengl的数学基础。

WebGL的完整工作流程

至此，实质上，WebGL经历了如下处理流程：

1、准备数据阶段

在这个阶段，我们需要提供顶点坐标、索引（三角形绘制顺序）、uv（决定贴图坐标）、法线（决定光照效果），以及各种矩阵（比如投影矩阵）。

其中顶点数据存储在缓存区（因为数量巨大），以修饰符attribute传递给顶点着色器；

矩阵则以修饰符uniform传递给顶点着色器。

2、生成顶点着色器

根据我们需要，由javascript定义一段顶点着色器（opengl es）程序的字符串，生成并且编译成一段着色器程序传递给GPU。

3、图元装配

GPU根据顶点数量，挨个执行顶点着色器程序，生成顶点最终的坐标，完成坐标转换。

4、生成片元着色器

模型是什么颜色，看起来是什么质地，光照效果，阴影（流程较复杂，需要先渲染到纹理，可以先不关注），都在这个阶段处理。

5、光栅化

通过片元着色器，我们确定好了每个片元的颜色，以及根据深度缓存区判断哪些片元被挡住了，不需要渲染，最终将片元信息存储到颜色缓存区，最终完成整个渲染。

three.js

辅助我们导出了模型数据；

自动生成了各种矩阵；

生成了顶点着色器；

辅助我们生成材质，配置灯光；

根据我们设置的材质生成了片元着色器。

而且将webGL基于光栅化的2D API，封装成了我们人类能看懂的 3D API。

结论 three.js是一个webgl的封装，不仅有利于使用的api，也简化了3d绘制建模的难度，并且由于他中文资料较多，如果需要用到webgl，他是非常适合使用的。

点击左下角“阅读原文”。如有侵权，请联系删除