Saltar al contenido

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

Estate atento porque en este tutorial vas a encontrar el resultado que buscas.Esta sección fue probado por nuestros especialistas para asegurar la calidad y exactitud de nuestro contenido.

Solución:

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

¿Qué son los sombreadores de píxeles?

Si representa un cuádruple de pantalla completa, lo que significa que cada uno de los cuatro puntos se coloca en una de las cuatro esquinas de la ventana gráfica, entonces el sombreador de fragmentos para ese cuádruple se llama sombreador de píxeles, porque podría decir que ahora cada fragmento corresponde exactamente a uno píxel de la pantalla. Entonces, un sombreador de píxeles es un sombreador de fragmentos para un quad de pantalla completa.

Entonces attributes 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 UVs explícitamente, algunos prefieren usar la variable integrada de fragment shader gl_FragCoord, que luego se divide con, por ejemplo, un uniform vec2 uScreenResolution.

Sombreador de vértices:

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

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

Y fragment shader 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 conocido como uScreenResolution), iGlobalTime, iMouse,… que puedes usar en tu pixel shader.

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

Espero que esto ayude.

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

Cualquier color y matemáticas espaciales se pueden programar en lenguaje GLSL. Las combinaciones de algoritmos avanzados crean isosuperficies, formas y luego proyectan texturas en isosuperficies, y el raycasting, que envía 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 utilizan en los gráficos shadertoy/glsl

Básicamente, se trata de insertar el código fuente del sombreador de píxeles GLSL directamente en la tarjeta gráfica. La verdadera magia ocurre en los algoritmos increíblemente inteligentes que la gente usa para crear efectos sorprendentes, como la marcha de rayos, la emisión de rayos y el trazado de rayos. lo mejor es echar un vistazo a otros sandboxes GLSL en vivo como: http://glsl.heroku.com/ y http://webglplayground.net/. Básicamente, crea una ventana, generalmente dos triángulos que representan la pantalla, luego el sombreador funciona en cada píxel como un trazador de rayos.
He estado mirando esto por un tiempo, y los algoritmos que usa la gente son alucinantes, necesitarás algunas habilidades matemáticas serias y buscar el código fuente de “codificación de demostración” para poder entenderlos. Muchos en Shader Toy, ¡simplemente vuélvete loco! Entonces, para resumir, solo necesita aprender la codificación y los algoritmos de sombreado GLSL. Ninguna solución fácil.

Reseñas y puntuaciones

Si aceptas, tienes la habilidad dejar un enunciado acerca de qué le añadirías a este enunciado.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *