Learn to Create Everything In a Fragment Shader(译)

学习在片元着色器中创建一切

介绍

这篇博客翻译自Shadertoy: learn to create everything in a fragment shader

大纲

本课程将介绍使用Shadertoy在Web浏览器中使用片段着色器的创新，艺术和创造性方法。 与会者将通过使用实时编码学习诸如raymarching，程序内容创建（纹理，建模和动画），图像压缩和体积渲染等技术。 本课程涵盖的算法是stateoftheart，它们目前用于不同的行业，如互动娱乐或电影。

以下说明旨在对2014年Siggraph亚洲课程中深入探讨的主题进行高级描述

预备知识

目标受众是那些对计算机图形学感兴趣的专业人士或学生，他们希望了解代码和艺术之间的交集。 这包括游戏开发者，电影制片人和艺术家。

课程需要中级知识：基本计算机图形学，阴影/光照模型，着色语言（GLSL，HLSL或RSL），代数和几何。

平台简介

Shadertoy是一个网络工具，它允许全球的开发人员使用WebGL将代码中的像素推送到屏幕上。 在不到两年的时间里，我们的用户创建了数以千计的片段着色器，可以探索各种各样的实时图形算法。 Shadertoy也是一个社交平台，专业人士和学生都可以学习和讲授视觉，互动，反应性，程序建模，GPU内部结构和底纹。

来自Shadertoy的挑战

Shadertoy有一个挑战，贡献者只能写一个自动应用于四元组的片段着色器。 这种限制使创作过程非常简约，但与此同时，它引发了创造难以想象的内容的新方法。

一个简单的例子：

Code Editor and Visualizer

在Shadertoy中，创建环境在可视化器和代码编辑器之间分开。

可视化器具有通常的选项，如播放或倒带，但它也包含着色器的描述和其他相关元数据。

代码编辑器具有语法高亮显示功能，并且还显示编译错误和其他相关信息。 用户还可以看到着色器中提供的“着色器输入”，或者通过按下“添加”按钮创建一个新的“通过”以向着色器添加音频。

资源

Shadertoy中的每个着色器都可以（随意）使用有限数量的纹理，声音或视频。 一旦用户在编辑器下面的框中选择了一个，那么他们可以通过纹理提取访问。

社区

Shadertoy是一个拥有数千用户的社区。 为了发布内容，用户需要一个免费的账户。 用户可以检查其他用户的配置文件并浏览彼此的创作。 最重要的是，每个着色器都包含一个评论部分，内容创建者可以回答社区提问或接收反馈。

隐式思维，2d：非多边形形状

隐性思维导论

与通过在空间和时间上明确放置几何图形或颜色在不同位置构建图像的自然方式相反，Shadertoy鼓励（如果不强制的话）使用隐式方法来实现相同。 即使通常用程序方法构建的内容往往是明确的，理解和翻译成计算机程序可遵循的一系列例程或程序（因此是程序性的）也更简单。 这些例子包括LS系统，基于细分的几何体，布料模拟，地形侵蚀以及一般用于制作游戏或电影的所有常规建模和纹理/绘画管线。 只有少数流行的算法会以自然方式导致隐式描述，例如分形渲染或光线追踪。

因此，当需要Shadertoy中的复杂动画模型（比如说游泳的海豚，或避开太空船的障碍物）时，用户需要以隐式的方式定义其形状和建模，纹理和动画，尽管缺乏隐含的文化和传统方法。

因此，为了在Shadertoy中创建丰富的内容，用户往往需要围绕新的行事方式，这需要想象力和创造力。 有时，他们甚至可能会发现自己处于极少甚至甚至没有研究人员之前的地方！ 其他时候，这可能会帮助他们从一个非常不同的角度接近一个简单的挑战，让他们更深入地了解问题。

本节将快速回顾一些隐式整形的基本原则（建模的形式，纹理/曲面的颜色和动画的运动）。

坐标和颜色渐变

这第一个着色器将显示如何创建颜色渐变以确保了解坐标系统的矩形概念，值标准化和颜色表示。

实现代码如下：

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
	vec2 uv = fragCoord.xy / iResolution.xy;
	fragColor = vec4(uv,0.5+0.5*sin(iTime),1.0);
}

塑形

如何从矩形/直角坐标系转到圆形坐标？ 在这个例子中，观众将看到如何定义圆和径向模式。

平滑步将用于划分平面区域并对它们进行不同的着色。 这也可以作为对正弦信号中幅度，频率和相位概念的快速回顾。

https://www.shadertoy.com/view/4dXGzn

纹理映射

虽然纹理映射的使用违背了程序化构建所有内容的目的，但Shadertoy并不是关于程序性内容创作，而是关于隐性思维。

使用纹理可以通过高质量滤波以简单的方式添加细节（与纯程序模式相反）。

https://www.shadertoy.com/view/Xdf3Rn

动画

Shadertoy中的动画也需要隐含。

缺乏对帧/时间历史的访问使诸如物理集成或简单运动逻辑等事情变得不可能。 因此，在hadertoy中动画的所有内容都必须是时间的函数，除了时间之外别无其他。 没有IIR滤波器可以实现，没有力量可以被施加到质量块上以将其弯曲越过障碍物。 复杂的模仿避障的运动只能作为时间的函数来实现。

https://www.shadertoy.com/view/XsfGRn

反应性

为了让Shadertoy更具互动性和趣味性，我们确实允许使用预制声音波形来提供隐式着色器。

用户可以从中挑选一些配乐。 在渲染时间，音轨的实际波形和频谱被提取并复制到GPU，通过使用纹理使着色器消耗。

https://www.shadertoy.com/view/lsBSRR

隐式思维，3D

Raymarching

Raymarching是在Shadertoy中获得3D场景的最流行的技术。 它分享了光线追踪的简单性和隐含性，但它提供了一种更加强大的方式来描述3D形状和光照。

本课程将花费大量时间来确保参加者了解技术，以及控制图像质量和速度的不同参数，例如步数，步长乘数，基于距离的距离场 前进vs线性等

本节还将介绍表面的隐式定义如何导出字段的概念以及如何为其提取法线以进行照明。

以下部分将成为本课程其余部分的基础，因此将花费时间来深入了解基于raymarching的图像创建过程。

https://www.shadertoy.com/view/XsX3RB

建模

通过使用基元和运算符可以将隐式距离场的建模转换为显式问题。

基元以分析封闭形式定义简单的形状。 球体，圆形盒子，螺旋线等等都是很好的例子。

域操作符允许缩放，弯曲，扭曲和重复形状。 范围操作员允许组合和移位和变形形状。

许多这些操作员只要满足一些条件就不需要在数学上完美无缺，从而使建模过程非常具有探索性和直观性。

https://www.shadertoy.com/view/ldl3zN

位移

位移可能是操作中最简单的，它很容易理解。 它的能力来自于需要理解的权衡（例如打破距离度量条件，需要用更小的步长来补偿）。

然而它是一个非常强大的技术。 例如，竖直圆柱体可以在其基部以及一些全局噪声下以指数移位，以便使树干变皱。

https://www.shadertoy.com/view/XsfGD4

域重复

根据所使用的技术，构建巨大的3D设置（或无限）有时可能具有挑战性。 在raymarching的情况下，域重复是以一种非常便宜的方式用一行代码实现这一点的一种方法。

有些规则需要遵循才能运用，但一旦理解了这些规则，这是隐式程序建模工具箱中非常强大的工具。

https://www.shadertoy.com/view/lsf3zr

形状混合

形状混合，类似于位移，是一个范围操作符。 然而，这种方法可以用于以类似于产生C1连续曲面的联合操作的方式组合形状，而它在表面上只能接近一个曲面的空间区域中表现得非常接近。

这种技术对于创建光滑的形状非常有用。

https://www.shadertoy.com/view/MsXGWr

无状态的动画

程序动画

游戏和电影制作常常依赖增量动画系统，其中元素的最终位置由随时间推移的瞬时力量和速度的综合决定。 这样的系统可以很容易地对场景中不同元素的相对位置作出反应并创建丰富的行为。 玩家和敌人在物理模拟游戏中的定位就是这样的例子。 在Shadertoy中，程序动画的时间轴也是隐含的，就像图像一样。 没有数据通过帧边界传递，因此无法实现集成器或增量对象定位。

相反，所有着色器都需要找到产生合理动画的隐式公式或算法，这可能具有挑战性。 然而，避障，行为模拟和物理可以通过不同的方式实现。 以下部分将解释如何解决这些挑战。

https://www.shadertoy.com/view/4dSGW1

混合动画曲线

以同样的方式，表面的隐式建模可以利用分层的方法，其中简单的形状被组合并混合在一起以构建更高复杂度的表面，可以以类似的方式丰富隐式动画。 鉴于隐式动画，例如水下游泳和失水跳跃动画，我们将看到一个以平滑方式混合的示例，以便可以将不同的行为组合为新的单个动画功能。

https://www.shadertoy.com/view/4sS3zG

物理模拟

物理整合是一个明确的程序过程的典型例子，当然这在Shadertoy中是不可能实现的。 因此，物理学必须以不同的方式解决。 通过简化系统的规则（其中的物体之间不发生碰撞），我们可以找到解析系统中物体的完整运动的解析解，并创建基于物理的动画。

https://www.shadertoy.com/view/MdB3Rc

Pro-Tricks

景深

在光线追踪和光线追踪的情况下，可以通过对渲染图像进行超级采样并对镜头进行采样（射线的原点和方向）来平均解决景深（DoF）或镜头散焦问题。 然而，该技术对于实时渲染而言非常快速地变得昂贵。

幸运的是，在过去的几个月中，Shadertoy的用户已经找到了利用Shadertoy中使用的大多数隐式建模的距离场表示的方法

https://www.shadertoy.com/view/Md23z1

运动模糊

运动模糊传统上也是通过多重采样来解决的。 然而，有时候有必要重新思考一个问题，并试图找出是否有更快的方法来解决问题。

在某些特定情况下，Motion Blur实际上可以通过分析来解决，这是令人惊讶的，但它也带有一系列问题和挑战。

https://www.shadertoy.com/view/MdB3Dw

软阴影

软阴影（半影）是计算机图形学中基于光线渲染算法的另一个解决问题的例子，它通过多重采样进行积分。

然而，距离场又一次提供了关于场景的足够全局信息，即通过单一投影来创建令人信服的柔和阴影。



https://www.shadertoy.com/view/ldl3zl

环境光遮蔽

Ambient Occlusion是一种廉价的方法，可以在不解决全局照明问题的情况下将全局照明外观渲染。

本节将介绍如何使用距离场和隐式程序创建4种不同的环境遮挡算法，这些算法的速度足以实时呈现。

https://www.shadertoy.com/view/XsjXR1

大气干扰

在传达场景中的尺度感时，大气效应起着重要作用。 虽然本节中的技巧同样适用于基于普通光栅化的渲染器，但Shadertoy的实时编码功能使其成为一个很好的框架，可以解释一些创造有趣的雾和线索的艺术可能性和技巧。

https://www.shadertoy.com/view/MdBGzG