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 ), iGlobalTimeiMouse ,…你可以在你的像素着色器中使用。

为了将几何直接编码到片段着色器(又名像素着色器)中,开发人员使用一种称为光线追踪的方法。 这是相当复杂的编程领域,但总之:通过一些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文字应该涵盖其中的一些。

Interesting Posts