从零开始学习 GLSL 着色器【中字】

在本课程中，我们将学习 GLSL（OpenGL 着色语言），以创建令人惊叹的效果。

也许您是：

• 设计师，看到过一些使用酷炫过渡效果的一流网站，并想知道它们是如何做到的。您可能听说过 WebGL，并知道可以使用一些简单的 THREE.js 代码来做一些了不起的事情。

• 试图以引人注目的方式将数据可视化的开发人员。

• 游戏开发人员，希望为 3D 物体表面添加一些自定义特效。

  
  

GLSL 是使用 OpenGL 显示曲面的方法。代码语法基于 C 语言，但不用担心，我们将假设您完全不懂这门语言，正如课程标题所述，我们将从头开始学习。GLSL 使用 GPU（图形处理器）同时处理多个程序，因此速度快得令人难以置信。

在课程中，我们将为浏览器编写代码，因为这样我们就可以专注于 GLSL，而无需担心安装任何其他软件。我们将使用 THREE.js WebGL 库和 CodePen，这样您就可以立即编辑源代码并查看结果，只需浏览器即可进行实验。我们只使用了少量的 Javascript，但我们会对其进行详细讲解。但你也可以在 C/C++/C# 程序或 Python 程序中使用所学的 GLSL。

我们将从非常简单的示例开始，在开发自定义着色器的每个阶段慢慢推进。您可以在 CodePen 上使用着色器代码，这样您就可以尝试使用不同的值来查看其对最终结果的影响。

GLSL 着色器分为顶点着色器和片段着色器，我们将首先关注片段着色器，基本上在 2d 环境中工作。课程资源中包含了数十种着色器，您将循序渐进地学习这门语言。

创建自己的着色器意味着理解 GLSL 语言，这也是本课程的目的所在。您可以在 ShaderToy、ShaderFrog 或 glslViewer 上搜索合适的着色器，然后尝试修改代码。但是，如果不了解这种语言，你会发现这很难做到。要想真正有效，您需要了解 GLSL 语言、塑形函数、平铺、极坐标和光照计算。为此，您需要跟上课程，完成课程中提出的许多挑战。最后，您将能够创建任何您能想象到的着色器。