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

Question

我最近一直在浏览 Shadertoy - https://www.shadertoy.com/ - 以努力了解更多关于 OpenGL 和 GLSL 的信息。

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

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

这是如何运作的？

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

谁能解释一下 Shadertoy 是如何工作的？

原文由 Charlie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

什么是像素着色器？

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

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

 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 can supply you with a few uniforms on default, iResolution (aka uScreenResolution ), iGlobalTime , iMouse ,… which you可以在你的像素着色器中使用。

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

希望这可以帮助。

原文由 Dragan Okanovic 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

ShaderToy 显示简单的 GLSL，它被编程为处理所有光照、几何等，它不是顶点几何，它大部分是光线投射，3D 的东西，或者你可以做 2D 着色器等。

任何颜色和空间数学都可以用 GLSL 语言进行编程。高级算法的组合制作等值面、形状，然后将纹理投射到等值面上，以及光线投射，将假想线从观察者发送到远处，拦截任何挡路的东西，有许多 3D 光线投射技术。

访问 www.iquilezles.org 以了解在 shadertoy/glsl 图形中使用的不同工具

原文由 LifeInTheTrees 发布，翻译遵循 CC BY-SA 3.0 许可协议