WebGL干了什么工作

Posted 2021-04-25 创业大坑

这段时间一直在和各种三维打交道，所以把之前的东西总结一下，随便总结一下写一写。

WebGL（全写Web Graphics Library）是一种3D绘图标准，这种绘图技术标准把javascript这种编程语言和OpenGL绘图库结合在一起，从而为html5 提供硬件3D加速渲染，于是软件开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型。

用官方的话来说，WebGL绘制过程主要是，第一步，获取顶点坐标，第二步，图元装配，第三步，光栅化，然后用人话解释一下这到底是什么东东。

首先，看一下HTML5相关文档，可以发现，Canvas提供的接口主要可以用来绘制直线、矩形、圆、弧线、贝塞尔曲线等几个接口，那复杂的模型如何绘制呢，其实也是通过这几个简单的接口来的。如下图所示，其实所有静物无非也是通过这些简单的多边形绘制而来。

好了，有了这个认知，咱们再来看看他的绘制流程，第一步，获取顶点坐标，顾名思义，其实就是获得所有多边形，如上图茶壶的三角形的顶点绝对坐标。现在用一个简单的正方体和三角形来做示例，其中黑点则代表了三角形与正方体的顶点位置。

当然，对于复杂的模型，比如汽车这种，从3D软件制作完成后导出则可以获得其所有的顶点坐标。当WebGL获取到顶点坐标后，由于复杂模型顶点坐标成千上万，所以会把写入到缓存区，利于GPU运算时进行优化。

然后进入下一步，图元装配，简单来说，就是把顶点坐标绘制成一个又一个三角形。这其中引入了一个顶点着色器的概念，其由opengl编写，然后javascript以字符串的形式定义并传递给GPU来生成，当坐标转换完毕并传输完成后，就可以交给GPU来进行图元装配，简单来说，会应用了一个叫做投影矩阵，将三维世界坐标转换成屏幕坐标。

最后一步就是光栅化，即生成一个个像素点，在图元生成完毕后，就会开始给模型“上色”，通过颜色，贴图，灯光等计算后给每个像素上色。

最后咱们再看一眼，WebGL的工作流程流程：

1    定义多边形顶点坐标，将所有多边形的顶点全部传入。

2    根据顶点坐标，转换为屏幕相关坐标，并一个一个绘制所有多边形

3    根据光照效果，阴影，贴图等，以及根据深度缓存区判断哪些不需要绘制，逐步在屏幕上渲染所有像素点

更多创业技术和创业故事搜索"创业大坑"或者扫描以下二维码进行关注