javascript - shadertoy tutorial

WebGL/GLSL-¿Cómo funciona un ShaderToy?

Question

Estuve visitando a Shadertoy - https://www.shadertoy.com/ - recientemente, en un esfuerzo por aprender más sobre OpenGL y GLSL en particular.

Por lo que entiendo hasta ahora, el usuario de OpenGL primero tiene que preparar toda la geometría que se utilizará y configurar el servidor OpenGL (cantidad de luces permitidas, almacenamiento de texturas, etc.). Una vez hecho esto, el usuario debe proporcionar al menos un programa de sombreado de vértices y un programa de sombreado de fragmentos antes de compilar un programa de OpenGL.

Sin embargo, cuando miro las muestras de código en Shadertoy, solo veo un programa de sombreado, y la mayoría de la geometría utilizada parece escribirse directamente en el código GLSL.

¿Cómo funciona?

Supongo que un sombreador de vértices ya está preparado por adelantado, y que el sombreador editable / de muestra es solo un sombreador de fragmentos. Pero eso no explica la geometría en algunos de los ejemplos más complejos ...

¿Alguien puede explicar cómo funciona Shadertoy?

Answer 1

Básicamente, se trata de empujar el código fuente del sombreador de píxeles GLSL directamente sobre la tarjeta gráfica. La magia real ocurre en los algoritmos increíblemente inteligentes que las personas usan para crear efectos asombrosos, como la marcha de rayos, el fundido de rayos y el trazado de rayos. Lo mejor es echar un vistazo a otros sandboxes en vivo de GLSL como: http://glsl.heroku.com/ y http://webglplayground.net/ . Básicamente está creando una ventana típicamente dos triángulos que representan la pantalla, luego el sombreador funciona en cada píxel como un rastreador de rayos.
Los he estado viendo desde hace un tiempo, y los algoritmos que las personas usan son alucinantes, necesitarás algunos consejos matemáticos serios y buscar el código fuente de la "codificación demo" para poder abarcarlos. Muchos en shader toy, ¡solo deja volar tu mente! Para resumir, solo necesita aprender algoritmos y codificación de sombreado GLSL. No es una solución fácil.

Answer 2

ShaderToy es una herramienta para escribir sombreadores de píxeles.

¿Qué son los sombreadores de píxeles?

Si representas un cuadrante de pantalla completa, lo que significa que cada uno de los cuatro puntos se ubica en una de las cuatro esquinas de la ventana gráfica, el sombreador de fragmentos para ese cuadrante se llama sombreador de píxeles, porque podrías decir que ahora cada fragmento corresponde exactamente a uno pixel de la pantalla. Por lo tanto, un sombreador de píxeles es un sombreador de fragmentos para un quad de pantalla completa.

Entonces los atributos son siempre los mismos y también lo es un sombreador de vértices:

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] ]

Y ese quad se representa como TRIANGLE_STRIP . Además, en lugar de establecer los UVs explícitamente, algunos prefieren usar la variable gl_FragCoord fragment shader, gl_FragCoord , que luego se divide con, por ejemplo, un uniform vec2 uScreenResolution .

Vertex shader:

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

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

Y el sombreador de fragmentos se vería así:

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 puede proporcionarle algunos uniformes por defecto, iResolution (también uScreenResolution como uScreenResolution ), iGlobalTime , iMouse , ... que puede usar en su sombreador de píxeles.

Para codificar la geometría directamente en el sombreador de fragmentos (también conocido como pixel shader), el desarrollador usa algo llamado ray-tracing. Esa es una área bastante compleja de programación, pero en resumen: presenta su geometría a través de algunas fórmulas matemáticas, y más tarde en el sombreador de píxeles, cuando desea verificar si un píxel es parte de su geometría, usa esa fórmula para recuperar esa información. Google-ing un poco debería darle muchos recursos para leer de qué y cómo se construyen los trazadores de rayos exactamente, y esto podría ayudar: ¿Cómo hacer el trazado de rayos en OpenGL moderno?

Espero que esto ayude.

Answer 3

ShaderToy muestra GLSL simple que está programado para manejar toda la iluminación, geometría, etc., no es geometría de vértices, está emitiendo rayos en su mayor parte, las cosas en 3D, o puedes hacer sombreadores 2D, etc.

Cualquier color y matemática espacial se puede programar en lenguaje GLSL. Las combinaciones de algoritmos avanzados crean isosuperficies, formas y luego proyecta texturas en isosuperficies, y raycasting, enviando líneas imaginarias desde el espectador a la distancia, intercepta cualquier cosa en el camino, hay muchas técnicas de raycasting para 3D.

visite www.iquilezles.org para tener una idea de las diferentes herramientas que se usan en los gráficos shadertoy / glsl

Answer 4

Tradicionalmente, en gráficos por computadora, la geometría se crea utilizando vértices y se representa utilizando algún tipo de material (por ejemplo, texturas con iluminación). En GLSL, el sombreador de vértices procesa los vértices y el sombreador de fragmentos (píxeles) procesa los materiales.

Pero esa no es la única forma de definir formas. Del mismo modo que una textura podría definirse por procedimientos (en lugar de buscar sus télelos), una forma podría definirse proceduralmente (en lugar de buscar su geometría).

Entonces, de forma similar al trazado de rayos, estos sombreadores de fragmentos son capaces de crear formas sin tener su geometría definida por vértices.

Todavía hay más formas de definir formas. Por ejemplo, datos de volumen (vóxeles), curvas de superficie, etc. Un texto de gráficos por computadora debería cubrir algunos de ellos.