Diseños gráficos
Diseño de shader Caustic Pool
Un campo de luz WebGL verde azulado combina filamentos de cáustica brillantes con tipografía fija y una ondulación activada al pulsar el puntero que curva brevemente el patrón.
Casos de uso del shader de cáusticas
- Experimentos visuales WebGLExplora el movimiento generado por shaders como una composición visual a pantalla completa.
- Páginas de aterrizaje interactivasCombina un mensaje contenido con un comportamiento local del lienzo que responda a la interacción.
- Estudios de programación creativaEstudia cómo las ondulaciones, la refracción y la luz crean formas cambiantes.
Aspectos destacados de la composición de luz y agua
- Ondulaciones deformadas por el dominioLa distorsión estratificada, similar a la del agua, produce estructuras luminosas cambiantes.
- Lienzo a pantalla completaEl campo visual ofrece al shader espacio para desarrollarse de forma continua.
- Indicación directa de ondulaciónUna instrucción de clic visible conecta la entrada del puntero con el movimiento.
- Superposición editorialLa tipografía grande y los metadatos pequeños enmarcan el campo abstracto.
Tres estados del campo de cáusticas
1 / 3
Un campo de agua luminoso
Caustic Pool es un ejemplo oficial de OpenDesign WebGL2 presentado como un lienzo completo, no como una secuencia de pantallas. Su encabezado creado expresamente, “CAUSTIC POOL”, se sitúa en la esquina inferior izquierda sobre un campo verde azulado profundo de filamentos pálidos y ramificados. El título grande de dos líneas establece primero el tema; el texto de apoyo denomina el efecto “domain-warped ripples” y “caustic filaments”.
Ese orden de lectura hace que la pieza sea comprensible antes de que comience la interacción. El borde superior contiene “OPENDESIGN · WEBGL PREVIEW” a la izquierda y “REAL-TIME · GPU” a la derecha, lo que proporciona a la superficie, por lo demás abstracta, un marco técnico compacto. El compromiso es deliberado: las etiquetas orientan al espectador, pero la superposición fija compite ligeramente con la atmósfera ininterrumpida.
El título antes que la técnica
“CAUSTIC POOL” nombra el mundo visual antes de que la descripción introduzca las ondulaciones deformadas por el dominio, lo que permite que el efecto siga siendo expresivo en lugar de puramente técnico.
Instrucción en el borde
“CLICK THE WATER ↗” se coloca en la esquina inferior derecha, alejada del bloque de título, para que la invitación siga siendo fácil de descubrir sin interrumpir el recorrido de lectura principal.
Dónde encaja la composición
El diseño es adecuado para contextos en los que el movimiento es el tema, no un elemento decorativo de apoyo. Un estudio de programación creativa puede utilizarlo para comparar campos de ondulación y concentración de luz; una página de aterrizaje interactiva puede usar la misma estructura para dar una dimensión espacial a un mensaje breve. El lienzo completo resulta especialmente útil cuando no hay una interfaz de producto que explorar.
La composición también funciona como telón de fondo visual para un evento, una instalación o una función web experimental, siempre que la experiencia que la rodea pueda admitir una superficie renderizada por GPU. Su principal limitación es el foco: como el campo no tiene controles creados expresamente en el marcado estático, la interacción se mantiene intencionadamente limitada y lo visual se encarga de la mayor parte de la comunicación.
Estudio y demostración
Usa la composición para examinar cómo las líneas refractadas se agrupan en filamentos brillantes, manteniendo visibles el título y el texto explicativo como ancla de lectura.
Punto de entrada atmosférico
Usa el lienzo como elemento visual de apertura, donde un único gesto del puntero basta para invitar a participar sin introducir un sistema de controles más amplio.
Cómo comparten espacio la ondulación y la tipografía
Las capturas muestran un único lienzo completo en estados visuales cambiantes, no pantallas separadas. En esos estados, el fondo verde azulado permanece continuo mientras la posición y la densidad de la red pálida cambian. Esa continuidad hace que el movimiento parezca una propiedad del campo de agua, no una transición de página. La consecuencia visual es una superficie serena y persistente; el compromiso es que el cambio de estado se comunica mediante un movimiento sutil del patrón en lugar de un texto de estado explícito.
El shader forma su red brillante mediante cinco rondas de cálculos de coordenadas plegadas. Al producirse pointer-down, reinicia una posición y una antigüedad de ondulación; después, una onda radial sinusoidal curva las coordenadas de muestreo y se desvanece con la distancia y la antigüedad. Esto produce una impresión de luz sobre el agua sin malla, textura externa ni solucionador de fluidos físico. El título fijo de la esquina inferior izquierda y la instrucción del borde opuesto permiten a los espectadores comparar ese campo cambiante con un texto estable.
Anclar
Mantén el título y el texto explicativo en un bloque estable en la esquina inferior izquierda para que el espectador pueda comparar los estados cambiantes del shader con una referencia fija.
Contrastar
Usa filamentos brillantes contra el campo verde azulado más oscuro para que la red de refracción sea legible sin añadir gráficos, controles ni paneles decorativos.
Invitar
Coloca una única instrucción concisa para el puntero en el borde inferior opuesto, conectando el gesto local con la metáfora visual del agua.
Una sola superficie, varios estados
Las capturas alternativas conservan las mismas etiquetas, título, descripción e indicación de clic mientras cambian las líneas luminosas. Esa superposición repetida separa el contenido del estado animado: los espectadores pueden comparar el campo sin tener que reaprender la interfaz. Una recreación debería conservar esa capa editorial estable y permitir que la salida del shader varíe por debajo.
Límite de capacidades
La fuente implementa renderizado local WebGL2, entrada pointer-down, gestión del redimensionamiento y un bucle de dibujo. Cada pulsación reemplaza la ondulación anterior en lugar de acumular varias ondas independientes. La antigüedad de la ondulación aumenta en 1/60 por fotograma de animación, por lo que su temporización de decaimiento depende de la frecuencia real de fotogramas. Las tres capturas muestran estados de un único lienzo; sin trazas de entrada registradas, no demuestran de forma independiente una respuesta al clic.
Se trata de una aproximación visual de cáusticas, no de una simulación de agua validada. La fuente no establece servicios conectados, datos de usuario almacenados, rendimiento de GPU medido, compatibilidad universal de entrada ni el modelo utilizado originalmente para generarlo. Para una adaptación de producción, prueba el comportamiento de entrada local y de temporización en el entorno previsto en lugar de tratar la etiqueta GPU o la metáfora del agua creada expresamente como evidencia de aceptación.
Cómo crear el diseño de shader Caustic Pool en OpenDesign
Configurar la composición del lienzo
Crea un lienzo WebGL verde azulado a pantalla completa con un bloque de título en la esquina inferior izquierda que muestre “CAUSTIC POOL”, una breve descripción sobre las ondulaciones deformadas por el dominio y pequeñas etiquetas en el borde superior para OpenDesign y el contexto de la vista previa.
Prompt sugeridoCrea una composición de piscina de cáusticas WebGL a pantalla completa: campo de agua verde azulado profundo, filamentos de ondulación pálidos deformados por el dominio, título grande CAUSTIC POOL en la esquina inferior izquierda, texto explicativo debajo, OPENDESIGN · WEBGL PREVIEW en la esquina superior izquierda, REAL-TIME · GPU en la esquina superior derecha y CLICK THE WATER ↗ en la esquina inferior derecha. Usa únicamente comportamiento local del lienzo; no añadas servicios, almacenamiento, vídeo, audio ni afirmaciones de rendimiento no verificadas.
Dar forma al campo de ondulaciones
Perfecciona la red de líneas visible para que se perciba como agua refractada en lugar de una textura plana. Compara curvas amplias y nebulosas con filamentos brillantes más estrechos, conservando suficiente campo oscuro para que la superposición blanca siga siendo legible.
Comprobar la indicación de interacción
Usa pointer-down para establecer una única posición local de ondulación y reiniciar su antigüedad, conservando la superposición fija. Si adaptas la fuente, usa una temporización basada en el tiempo transcurrido para lograr un decaimiento uniforme entre distintas frecuencias de fotogramas. Mantén la instrucción diferenciada de un botón y no afirmes una precisión de simulación física.
Exportar y obtener un enlace para compartir
Exporta tu diseño terminado y luego usa Compartir en OpenDesign para obtener un enlace. Abre el enlace en una ventana del navegador independiente y comprueba que la versión prevista y sus recursos estén disponibles antes de enviarlo.
Diseño de póster editorial sobre flujos de trabajo con IA
El diseño de póster editorial sobre flujos de trabajo con IA presenta seis afirmaciones sobre los flujos de trabajo, con capítulos numerados, ejemplos concretos de prompts y acentos tipográficos color óxido sobre un fondo crema.
Diseños gráficos
Diseño de carrusel social sobre flujos de trabajo con IA
Siete tarjetas verticales utilizan encabezados chinos sobredimensionados, hábitos numerados, campos de color cambiantes y una declaración final para explicar los flujos de trabajo de edición con IA.
Diseños gráficos
Diseño de shader Aurora Field
Un campo de ruido azul verdoso animado automáticamente aporta atmósfera a un hero WebGL, mientras un titular fijo y una pequeña insignia local de frecuencia de fotogramas anclan la escena.
Diseños gráficos
Diseño de shader Aurora Veil
Aurora Veil es una composición de shader interactiva que convierte la luz en capas, las estrellas y el movimiento del cursor en un hero atmosférico de WebGL.
Diseños gráficos