javascript - WebGL/GLSL - ShaderToy 是如何工作的？

Question

我一直在逛 Shadertoy - https://www.shadertoy.com/ - 最近，为了学习更多关于 OpenGL 和 GLSL 的知识。

据我所知，OpenGL 用户首先必须准备好所有要使用的几何体并配置 OpenGL 服务器(允许的灯光数量、纹理存储等)。完成后，用户必须在 OpenGL 程序编译之前提供至少一个顶点着色器程序和一个片段着色器程序。

但是，当我查看 Shadertoy 上的代码示例时，我只看到一个着色器程序，而且使用的大部分几何体似乎直接写入 GLSL 代码中。

它是如何工作的？

我的猜测是顶点着色器已经预先准备好了，可编辑/样本着色器只是一个片段着色器。但这并不能解释一些更复杂示例中的几何形状......

谁能解释一下 Shadertoy 的工作原理？

Answer 1

ShaderToy 是一种用于编写像素着色器的工具。

什么是像素着色器？

如果您渲染一个全屏四边形，这意味着四个点中的每一个都位于视口(viewport)的四个 Angular 之一，那么该四边形的片段着色器称为像素着色器，因为您可以说现在每个片段对应精确到屏幕的一个像素。所以像素着色器是全屏四边形的片段着色器。

所以属性总是相同的，顶点着色器也是如此:

positions = [ [-1,1], [1,1], [-1,-1], [1,-1] ]
uv = [ [0.0, 0.0], [1.0, 0.0], [0.0, 1.0], [1.0, 1.0] ]

那个四边形呈现为 TRIANGLE_STRIP。此外，有些人更喜欢使用片段着色器的内置变量 gl_FragCoord，而不是显式设置 UVs，然后将其除以 uniform vec2 uScreenResolution 。

顶点着色器:

attribute vec2 aPos;
attribute vec2 aUV;
varying vec2 vUV;

void main() {
    gl_Position = vec4(aPos, 0.0, 1.0);
    vUV = aUV;
}

然后片段着色器看起来像这样:

uniform vec2 uScreenResolution;
varying vec2 vUV;

void main() {
    // vUV is equal to gl_FragCoord/uScreenResolution
    // do some pixel shader related work
    gl_FragColor = vec3(someColor);
}

ShaderToy 可以默认为您提供一些制服，iResolution(又名 uScreenResolution)、iGlobalTime、iMouse,...您可以在像素着色器中使用它。

为了将几何图形直接编码到片段着色器(也称为像素着色器)中，开发人员使用了一种称为光线追踪的技术。这是一个相当复杂的编程领域，但简而言之:你通过一些数学公式来呈现你的几何图形，然后在像素着色器中，当你想检查某个像素是否是你的几何图形的一部分时，你可以使用该公式来检索该信息。谷歌一下应该会给你足够的资源来阅读光线追踪器的确切构建方式和构建方式，这可能会有所帮助: How to do ray tracing in modern OpenGL?

希望这对您有所帮助。