Diseños gráficos
Diseño de shader de escultura con raymarching
Cinco formas de campo de distancia, fusionadas con suavidad, orbitan sobre un lienzo azul marino, con sombras suaves, bordes brillantes, una órbita lenta y automática de la cámara, y tipografía fija.
Usos del arte con raymarching
- Muestras de tecnología creativaPresenta experimentos visuales basados en shaders como composiciones de apertura inmersivas.
- Secciones hero con WebGLUsa movimiento procedural para dar a una landing page un punto focal vivo.
- Portfolios de arte generativoExplica el renderizado con campos de distancia con signo mediante un estudio visual claro y legible.
Aspectos destacados del shader de escultura
- Escultura con fragment shaderLas formas se renderizan por píxel, sin mallas convencionales.
- Composición en órbitaVarias formas verdes cambian de posición a lo largo de los estados visuales capturados.
- Iluminación suave de bordesLos bordes brillantes y los realces describen el volumen sobre el azul marino profundo.
- Capa editorial superpuestaLa tipografía grande ancla el experimento técnico como un hero.
Tres momentos de la escultura con raymarching
1 / 3
Un hero construido con píxeles
El diseño de shader de escultura con raymarching presenta una gran forma procedural verde sobre un campo azul marino profundo. El titular visible, “3D that lives in a fragment shader.”, plantea la imagen como un estudio de renderizado y no como un recurso 3D convencional. Esa combinación permite al visitante entender la premisa técnica antes de examinar la superficie de la escultura.
El fragment shader hace sphere tracing de la unión suave de cinco campos de distancia de esferas, cuyos centros orbitan con el tiempo. Un segundo trazado, más corto, estima las sombras suaves; las normales por diferencias finitas permiten los brillos y un borde de tipo Fresnel. Una órbita lenta y automática de la cámara cambia la vista. Las formas verdes parecen escultóricas, pero no se aporta ninguna malla de escultura, textura de imagen ni simulación de fluidos.
El diseño mantiene la explicación técnica bajo el título sobredimensionado: “No meshes” da paso al método de renderizado y luego al movimiento orbital indicado. Este orden hace legible la idea visual de un vistazo; como contrapartida, el vocabulario del shader presupone cierta familiaridad con la programación gráfica.
Dónde encaja la composición
Este diseño es adecuado para un hero de primera pantalla donde importan más la atmósfera y la identidad técnica que una navegación densa. La escultura ocupa la mayor parte del campo visual, mientras que la etiqueta y el párrafo inferiores izquierdos ofrecen un punto de entrada a quien quiera saber qué está viendo.
Los tres estados aportados muestran el mismo sistema textual mientras las formas renderizadas cambian de disposición. Un estado centra una gran forma redondeada, otro introduce formas superpuestas y un tercero empuja una forma de bordes brillantes por el campo superior. El texto repetido convierte el movimiento en el protagonista, sin requerir controles ni una galería de escenas separadas.
Landing pages técnicas
Usa la composición para presentar herramientas gráficas, investigación de renderizado o experimentos visuales en el navegador antes de pasar a los detalles de implementación.
Aperturas de arte animado
Usa el campo cambiante como estado visual de llegada, manteniendo estables el título y la breve explicación mientras la imagen procedural aporta variación.
Portfolios de arte técnico
Usa el contraste entre la insignia técnica y la escultura expresiva para conectar el lenguaje de implementación con un resultado visible de inmediato.
Cómo leer la insignia de estado
La insignia superior derecha conserva sus etiquetas GPU y Raymarch y añade una estimación de FPS calculada localmente. Las tres capturas muestran 2FPS en este entorno, mientras que el texto explicativo dice 60fps. No son pruebas equivalentes: el contador describe la cadencia de redibujado de la sesión de captura, y el texto de origen no establece una garantía de rendimiento válida en distintos dispositivos.
Composición mediante luz y escala
La escultura es deliberadamente sobredimensionada. En la primera captura, su cuerpo redondeado entra por los bordes superior y derecho, dejando espacio negativo azul marino alrededor de la tipografía; los estados posteriores acercan varias formas entre sí. Recortar las formas en el límite del viewport hace que el objeto parezca mayor que la página, pero también reduce el contorno que el lector puede examinar.
El sombreado de verde a casi negro aporta la principal pista de profundidad. Los puntos brillantes se sitúan cerca de los bordes superiores izquierdo o derecho de las formas, mientras un borde pálido sigue ciertos contornos. Así el ojo recorre formas que, por lo demás, son oscuras. La contrapartida es el contraste: el verde neón tiene mucha fuerza visual, por lo que el párrafo técnico, más discreto, debe ser breve y estar bien colocado.
La capa editorial usa una pequeña etiqueta en mayúsculas “RAYMARCHED HERO”, un título muy grande de dos líneas y un párrafo explicativo compacto. La etiqueta establece la categoría, el título enuncia la idea y el párrafo nombra la técnica. Esa secuencia de tres niveles es propia de este artefacto porque cada capa de texto se refiere directamente a la escultura con raymarching y no describe un hero genérico.
Empieza por el campo
Establece el lienzo azul marino oscuro y una única forma verde sobredimensionada para que el modelo de iluminación pueda leerse antes de que otras formas compitan por la atención.
Añade pistas de volumen
Usa sombras suaves, brillos concentrados y un borde fresnel contenido para describir la forma de distancia con signo sin introducir detalles propios de una malla.
Coloca la explicación
Mantén en ese orden la etiqueta de categoría, la frase principal y la oración técnica para que el experimento visual siga siendo comprensible cuando el movimiento esté en pausa.
Límite de capacidades
Este ejemplo oficial de OpenDesign contiene una implementación local real en WebGL2, no solo una etiqueta de renderizado simulada. Un triángulo a pantalla completa ejecuta por píxel un sphere trace de un máximo de 90 pasos, se detiene en un umbral de distancia de 0.001 o un alcance superior a ocho, y usa hasta 24 pasos para las sombras suaves. Son datos del código fuente, no prueba de preparación para producción ni de un servicio conectado.
La escena y la cámara se animan automáticamente. El cambio de tamaño es el único evento de entrada, y el DPR de renderizado está limitado a 1.5 para reducir el trabajo por píxel. No hay controles de puntero, teclado, dirección de cámara, edición de materiales ni parámetros. La estimación local de FPS se actualiza en ventanas de aproximadamente medio segundo; ni ella ni la mención de 60fps del código fuente establecen una referencia válida entre dispositivos.
Verificado en el artefacto
El código fuente implementa cinco formas de campo de distancia con unión suave, sphere tracing, sombras suaves, iluminación especular y de contorno, y movimiento automático de la cámara; las capturas muestran la escultura verde resultante y la capa superpuesta fija.
Aún propuesto o sin verificar
Este ejemplo no establece el rendimiento en distintos dispositivos, los servicios conectados, el despliegue en producción ni ningún control de cámara o edición de materiales por parte del usuario.
Cómo crear un diseño de shader de escultura con raymarching en OpenDesign
Define el hero con raymarching
Plantea el tema como un lienzo hero azul marino oscuro con una escultura verde sobredimensionada de campo de distancia con signo, una pequeña insignia técnica y tipografía editorial en la parte inferior izquierda.
Prompt sugeridoCrea un hero WebGL2 animado automáticamente sobre un lienzo azul marino oscuro. Haz sphere tracing de un campo de distancia con signo formado por cinco esferas en órbita con uniones suaves, y añade sombras suaves, brillos especulares y un borde de tipo Fresnel. Haz orbitar la cámara lentamente, sin controles de puntero. Superpone RAYMARCHED HERO, la frase “3D that lives in a fragment shader.” y una descripción técnica concisa en la parte inferior izquierda. Mantén una pequeña insignia GPU/Raymarch y una estimación local de fotogramas por segundo. No prometas 60fps ni insinúes servicios conectados.
Refina los estados renderizados
Compara al menos tres estados visuales: una forma dominante recortada, una disposición con formas superpuestas y una composición alternativa más cercana. Comprueba que los brillos sigan siendo legibles y que el fondo azul marino siga separando la silueta.
Comprueba el equilibrio editorial
Mantén la etiqueta de categoría, la frase sobredimensionada de dos líneas y la breve explicación del shader ancladas en la zona inferior izquierda. Confirma que la escultura puede cambiar de posición sin tapar el título ni convertir la insignia técnica en una afirmación de rendimiento.
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