充分理解WebGL

要理解和学会WebGL，并没有那么困难，我们只需要理解一下GPU，了解它与CPU的不同点，然后再理解运行GPU代码的语言——glsl，了解着色器的基本概念和用法，就可以轻松理解WebGL的本质。

接上一篇： https://juejin.cn/post/7098256201661546532 在这一讲我们讨论一种使用距离来构图的基本方法，用它可以来绘制各种直线和曲线。

在上一篇中，我们了解了基本的距离场构图法，在这一篇，我们来进一步利用距离场构图法来绘制更多有趣的图形。

我们已经知道**距离场构图法**的关键就是要构造距离场，并学习了如何构建圆、直线、线段的距离场，以及如果通过采样来构建连续函数曲线的距离场。接下来，我们来讨论如何构建三角形、正多边形和椭圆的距离场。

前面的绘图，我们采用的都是直角坐标系，我们可以用坐标变换，将坐标系从直角坐标转换为极坐标，这样一个简单的坐标变换，就能产生非常有趣的图形效果。

我们既然把shader中文翻译成“着色器”，顾名思义，“着色器”本身就是用来在画布上“着色”的，自然和颜色有着密切的关系。

大自然中有很多现象几乎是无序的，要模拟这些无序的自然现象，就要用到随机。着色器没有现成的随机函数，只能通过人工来构建随机函数。

真正的大自然在无序中孕育着秩序。空气看似无序的扰动，产生了气流，气流汇聚形成季风；水波看似无序，然而产生水流，形成河流、洋流；岩石的生长看似无序，但形成山脉，连绵不断……随机无处不在，秩序也无处不在。

网格噪声（Cellular Noise）是一种现在被广泛使用的程序生成纹理技术，它的原理是将噪声和网格结合起来。