WoGL
ToolsCrea con shadersShader MakerCrea shaders gratis en líneaToolkitObras de shaders listas para tu webSketcher LabPinta el hero de tu landing con shaders3D StudioEl editor Three.js en tu navegador
GamesJuega con shadersOnomatoShaderEscribe una palabra y explótalaThe WatcherUn ojo que te sigueAetherVidrio líquido con un ojo adentroBloomcoreUna palabra hace crecer un jardín de luzPyrokineAvienta fuego a la paredVoltaicLa pirámide lanza rayosSurfSurfea un océano de shader
  1. WoGL Tools
  2. Shader Maker

Shader Maker

Crea shaders gratis en línea

Elige uno de 37 shaders¿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. 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. vivos, dale forma con sliders y copia su código. Corre en tu GPU¿Qué es la GPU?El procesador masivamente paralelo de tu máquina. Corre el mismo shader en miles de núcleos a la vez, uno por fragment, por eso pinta millones de píxeles sesenta veces por segundo sin despeinarse., en el navegador con WebGL¿Qué es WebGL?El puente que lleva tu shader GLSL del navegador a la GPU. Sin él, tu código sería solo texto; con él, se vuelve imagen en tiempo real dentro de una página web.; no hay nada que instalar.

Abrir Shader Maker →Cómo funciona
37 shaders vivos · GLSL · WebGL 2Gratis

Qué puedes hacer

  1. 01

    Empieza con un shader vivo

    El índice tiene 37 shaders curados, cada uno corriendo en tiempo real.

  2. 02

    Dale forma con sliders

    Cada slider alimenta un uniform¿Qué es un uniform?Un valor que entra al shader desde afuera y es igual para todos los fragments en ese frame, como el tiempo o el mouse. Cambia entre frames, no entre píxeles: por eso anima toda la imagen a la vez., así que el color, la velocidad y la forma cambian mientras lo mueves.

  3. 03

    Llévate el código

    Copia el fragment shader en GLSL a tu proyecto WebGL, a un ShaderMaterial de Three.js o a tu web.

Cómo funciona

  1. 1

    Elige

    Abre el índice y escoge un shader.

  2. 2

    Dale forma

    Mueve los sliders hasta que sea tuyo.

  3. 3

    Copia

    Presiona Copiar código y pégalo en tu proyecto.

Preguntas

¿Shader Maker es gratis?

Sí. Corre en tu navegador y no necesita cuenta.

¿Puedo usar el código en Three.js?

Sí. El código que copias es un fragment shader en GLSL; en Three.js va dentro de un ShaderMaterial.

¿Necesito saber GLSL?

No. Los sliders le dan forma al shader; WoGL Academy enseña GLSL desde cero si quieres ir más lejos.