webgl 性能优化初尝

上次文章介绍了如何用 webgl 快速创建一个自己的小世界，在我们入门 webgl 之后，并且可以用原生 webgl 写 demo 越来越复杂之后，大家可能会纠结一点：就是我使用 webgl 的姿势对不对。因为 webgl 可以操控 shader 加上超底层 API，带来了一个现象就是同样一个东西，可以有多种的实现方式，而此时我们该如何选择呢？这篇文章将稍微深入一点 webgl，给大家介绍一点 webgl 的优化知识。

讲 webgl 优化之前我们先简单回忆一下 canvas2D 的优化，常用的 display list、动态区域重绘等等。用 canvas2D 多的同学应该对以上的优化或多或少都有了解，但是你对 webgl 的优化了解么，如果不了解的话往下看就对了~这里会先从底层图像是如何渲染到屏幕上开始，逐步开始我们的 webgl 优化。

gpu 如何渲染出一个物体

先看一个简单的球的例子，下面是用 webgl 画出来的一个球，加上了一点光的效果，代码很简单，这里就不展开说了。
一个球
这个球是一个简单的 3D 模型，也没有复杂的一些变化，所以例子中的球性能很好，看 FPS 值稳定在 60。后面我们会尝试让它变得复杂起来，然后进行一些优化，不过这一节我们得先了解渲染的原理，知其根本才能知道优化的原理。

我们都知道 webgl 与着色器是密不可分的关系，webgl 当中有顶点着色器和片段着色器，下面用一张图来简单说明下一个物体由 0 到 1 生成的过程。