WebGL / GLSL – ShaderToy如何工作？
最近，我一直在围绕着Shadertoy – https://www.shadertoy.com/ ，努力学习更多关于OpenGL和GLSL的知识。
从我目前所了解的情况来看，OpenGL用户首先必须准备好要使用的所有几何graphics，并configurationOpenGL服务器（光源数量，纹理存储等）。 一旦完成，用户必须在OpenGL程序编译之前至less提供一个顶点着色器程序和一个片段着色器程序。
但是，当我查看Shadertoy上的代码示例时，我只能看到一个着色器程序，并且大部分使用的几何graphics似乎直接写入GLSL代码。
这是如何运作的？
我的猜测是顶点着色器已经预先准备好了，可编辑/采样着色器只是一个片段着色器。 但是这并不能解释一些更复杂的例子中的几何。
任何人都可以解释Shadertoy是如何工作的？
ShaderToy是一个写像素着色器的工具。
什么是像素着色器？
如果渲染一个全屏的四边形，意味着四个点中的每一个被放置在视口的四个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 。 此外，不是明确设置UVs ，而是使用片段着色器的内置variablesgl_FragCoord ，然后用例如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 ，…你可以在你的像素着色器中使用。
为了将几何直接编码到片段着色器（又名像素着色器）中，开发人员使用一种称为光线追踪的方法。 这是相当复杂的编程领域，但总之：通过一些math公式呈现几何graphics，然后在像素着色器中，当您想检查某个像素是否是几何graphics的一部分时，使用该公式检索该信息。 谷歌一点点，应该给你足够的资源来读取什么和如何光线追踪完全build立，这可能会有所帮助： 如何在现代OpenGL光线追踪？
希望这可以帮助。
它基本上是直接将GLSL像素着色器源代码直接推送到显卡上。真正的奇迹发生在令人难以置信的聪明的algorithm中，人们使用这些algorithm创造惊人的效果，如光线投射，光线投射，光线追踪。 最好看看其他一些GLSL沙盒，如http://glsl.heroku.com/和http://webglplayground.net/ 。 它基本上创build了一个窗口，通常是两个代表屏幕的三angular形，然后着色器就像光线追踪器一样在每个像素上工作。
我一直在看这些东西，而人们使用的algorithm是令人兴奋的，你需要一些严肃的mathsorting，并且查找“演示编码”的源代码，以便能够围绕在他们头上。 许多着色器玩具，只是吹嘘你的想法！ 所以总结一下，你只需要学习GLSL着色器编码和algorithm。 不容易的解决scheme
ShaderToy显示简单的GLSL，它被编程为处理所有的光照，几何等，它不是顶点几何体，大部分是光线投射，3D的东西，或者你可以做2D着色器等。
任何颜色和空间math都可以用GLSL语言编程。 高级algorithm的组合使得等值面，形状，然后将纹理投影到等值面上，并且进行光线投射，从观察者到距离发送虚线，截取任何东西，还有许多用于3D的光线投射技术。
请访问www.iquilezles.org ，了解在shadertoy / glslgraphics中使用的不同工具的概念
传统上在计算机graphics学中，使用顶点创build几何graphics，并使用某种forms的材质（例如纹理与照明）进行渲染。 在GLSL中，顶点着色器处理顶点，片段（像素）着色器处理材质。
但是，这不是定义形状的唯一方法。 正如一个纹理可以被程序化地定义（而不是查找它的纹理元素），一个形状可以在程序上被定义（而不是查看它的几何形状）。
所以，类似于光线追踪，这些片段着色器能够创build形状，而不用由顶点定义的几何形状。
还有更多的方法来定义形状。 例如体积数据（体素），曲面曲线等。 计算机graphics文字应该涵盖其中的一些。
