¿Qué es Playground de Shaders WebGL?

Escribe shaders GLSL de vértices y fragmentos y mira el resultado renderizado al instante vía WebGL. No requiere configuración local. Úsalo para aprender programación de shaders, prototipar efectos o probar gráficos acelerados por GPU.

Los uniforms incorporados son `u_time` para animación, `u_resolution` para el tamaño del canvas, `u_mouse` para la posición del puntero, `u_frame` para el recuento de fotogramas renderizados y una textura de ruido teselable `sampler2D u_noise` lista para usar. Sube cualquier imagen para enlazarla como `sampler2D u_texture` y muestrearla desde el fragment shader. Diez presets (gradient wave, plasma, circle SDF, noise tunnel, Mandelbrot, ray march sphere, metaballs, voronoi, starfield, worley cells), un control deslizante de velocidad de animación, un indicador de FPS en vivo, conmutador de autocompilación, control de pausa para congelar la línea de tiempo, enlace compartible que viaja con todo el código fuente y exportación a PNG del cuadro actual completan el conjunto.

Cómo usar

1. Escribe o pega tu código de shader de fragmentos GLSL en el editor. Ya hay un shader predeterminado cargado.
2. La vista previa en vivo se actualiza mientras escribes. Los uniforms integrados incluyen tiempo, resolución y posición del ratón.
3. Exporta tu shader como captura de pantalla PNG o copia el código para usarlo en tus propios proyectos WebGL.

Cuándo usar

• Aprender GLSL sin montar un proyecto local de C++ o Three.js.
• Probar un efecto de fragment shader antes de portarlo a un motor de juego o a una web.
• Generar capturas de fondos animados para portfolios, presentaciones o redes sociales.

Resultado

Un desarrollador de videojuegos que prototipa un efecto de ondas en el agua escribe un shader de fragmentos con ondas sinusoidales y el uniform de tiempo. El panel de vista previa muestra el resultado animado actualizándose en vivo.

Preguntas frecuentes

¿Necesito saber C o programación gráfica para usarlo?

GLSL es un lenguajito tipo C: bucles, condicionales y matemáticas con floats. Si has tocado C, Java o JavaScript te resultará familiar. Los shaders preestablecidos vienen comentados, así que toquetear valores suele bastar para empezar sin experiencia previa en GPU.

Mi shader compila pero la vista previa está en negro, ¿por qué?

Causas típicas: escribir en `gl_FragColor` fuera de la función main, devolver `vec3` en vez de `vec4`, o dividir entre cero en una función de ruido. Abre la consola del navegador: WebGL imprime avisos útiles aunque la compilación parezca correcta.

¿Puedo muestrear una textura o pasar mi propia imagen?

Sí. Pulsa Subir imagen en la barra de previsualización para enlazar cualquier PNG o JPG como `sampler2D u_texture`. Un float compañero, `u_hasTexture`, pasa a 1.0 cuando la imagen está lista, de modo que el shader puede decidir si hay textura disponible, igual que los channel inputs de Shadertoy.

¿Qué versión de WebGL utiliza?

WebGL 1 con GLSL ES 1.0. Eso significa `varying` en lugar de `in/out`, `gl_FragColor` en lugar de una salida con nombre y nada de texturas enteras. Los shaders escritos para WebGL 2 u OpenGL 3+ de escritorio necesitan retocar la sintaxis para correr aquí.

¿Se envía algo a un servidor?

No. La compilación y el renderizado pasan en tu GPU a través del navegador. El código del shader no sale de la página: si cierras la pestaña sin copiarlo, se pierde.

Herramientas relacionadas