- WoGL Tools
- Toolkit
Toolkit
Efectos de shader listos para tu web
198 obras de shader¿Qué es un shader?Un programa pequeño que corre en la GPU y decide el color de un solo pixel. La GPU lo ejecuta para todos los píxeles a la vez. vivas en 6 familias, cada una con su código GLSL¿Qué es GLSL?El idioma en el que le hablas a tu tarjeta gráfica. Cada shader que escribes vive en GLSL, y la GPU lo lee millones de veces por segundo para decidir el color de cada pixel. Se parece a C, pero nació para una sola cosa: pintar luz en tiempo real., más 14 modelos 3D dibujados con raymarching¿Qué es raymarching?Avanzar un rayo paso a paso por el espacio hasta que choca con una superficie. Cada paso usa un SDF para saber cuánto avanzar sin pasarse. Así se dibujan mundos 3D enteros dentro de un shader 2D.. Abre una, lee su código y cópialo a tu web.
Qué puedes hacer
- 01
Explora por familia
Seres, naturaleza, cosmos, objetos, abstracto y materia: 33 obras cada una, todas corriendo en vivo.
- 02
Lee y copia el código
Cada obra muestra su GLSL; Copiar shader lo pone en tu portapapeles.
- 03
Suma 3D sin polígonos
14 modelos en 4 familias, hechos con formas SDF¿Qué es un SDF?Signed Distance Function: una función que te dice qué tan lejos estás de una forma, con signo. Positivo afuera, negativo adentro, cero en la orilla. Con ese número dibujas formas nítidas sin un solo polígono. y dibujados en tiempo real.
Cómo funciona
- 1
Elige una familia
Filtra la biblioteca por familia o búscala.
- 2
Abre una obra
Se reproduce a pantalla completa con su nombre y sus etiquetas.
- 3
Copia
Ve el código GLSL y copia el shader a tu proyecto.
Preguntas
¿Toolkit es gratis?
Sí. Corre en tu navegador y no necesita cuenta.
¿Qué copio?
El shader GLSL de la obra, el mismo código que la dibuja en pantalla.
¿Los modelos 3D usan mallas?
No. Cada uno es un SDF¿Qué es un SDF?Signed Distance Function: una función que te dice qué tan lejos estás de una forma, con signo. Positivo afuera, negativo adentro, cero en la orilla. Con ese número dibujas formas nítidas sin un solo polígono. dibujado con raymarching¿Qué es raymarching?Avanzar un rayo paso a paso por el espacio hasta que choca con una superficie. Cada paso usa un SDF para saber cuánto avanzar sin pasarse. Así se dibujan mundos 3D enteros dentro de un shader 2D. dentro de un fragment shader.