Diseños gráficos
Diseño de shader de galaxia de partículas
Tres tenues brazos en espiral evolucionan sobre un lienzo WebGL2 oscuro, bajo una tipografía fija, con recuentos de puntos y llamadas de dibujo definidos en el código y una lectura local de FPS.
Usos de la galaxia de partículas
- Experimentación con WebGLEstudia la composición de partículas impulsada por la GPU y el movimiento guiado por shaders.
- Identidad visual animadaCrea escenas hero atmosféricas en torno a una única forma en evolución.
- Presentaciones de creative codingCombina restricciones técnicas con una tipografía editorial sobria.
Aspectos destacados de la galaxia procedural
- Campo de partículas en espiralPuntos tenues verdes y azules forman tres amplios brazos en espiral.
- Bloque de contexto de renderizadoPuntos, llamada de dibujo y FPS se agrupan de forma compacta arriba a la derecha.
- Tipografía editorialUna frase grande ancla la composición bajo la obra.
- Enfoque en un único lienzoEl campo visual sostiene la experiencia sin controles visibles.
Tres momentos de la galaxia de partículas
1 / 3
Tres brazos en espiral, una sola llamada de dibujo de puntos
Particle Galaxy es un ejemplo oficial de OpenDesign centrado en un lienzo oscuro, casi vacío, y un gran campo de partículas tenues. El título creado, “Fifty thousand points, one draw call.”, convierte la premisa técnica en parte de la identidad visual en lugar de esconderla tras elementos de interfaz.
El campo de partículas y el título fijo de abajo a la izquierda comparten un mismo viewport; el titular no es una sección separada bajo el pliegue. Puntos tenues verdes, azules y pálidos dejan amplios huecos oscuros entre los tres brazos. El equilibrio visual es claro: el campo sobrio resulta silencioso junto a la tipografía brillante, pero su bajo contraste exige mirar con atención la imagen a tamaño completo.
Dónde encaja este diseño
Este diseño es adecuado para una escena de aterrizaje de creative coding, una muestra tecnológica interactiva o un estudio WebGL con dirección artística. Su valor es mayor cuando lo visual es el protagonista y el texto de apoyo puede ser breve.
La ausencia de controles estáticos mantiene la atención en el campo de partículas cambiante. Esa sobriedad también limita la capacidad de descubrimiento: el marcado proporcionado no muestra controles creados, así que el diseño comunica mediante movimiento, tipografía y el bloque compacto de estadísticas, no mediante señales explícitas de interacción.
Muestra de creative coding
Usa el gran campo de partículas para presentar un experimento de renderizado antes de explicar su técnica.
Escena hero con WebGL
Adapta el lienzo oscuro como apertura visual de una experiencia digital de enfoque técnico.
Editorial centrado en el movimiento
Deja que una forma que cambia lentamente capte la atención mientras un texto conciso establece el contexto.
Cómo funciona la composición
El bloque de arriba a la derecha muestra 50,000 POINTS, 1 DRAW CALL y una estimación cambiante de FPS. El vertex shader deriva las posiciones de los puntos a partir de gl_VertexID, los reparte entre tres brazos y varía su velocidad angular para que los puntos interiores giren más rápido. Una inclinación fija y un giro general que cambia lentamente definen la perspectiva del disco. Los sprites de punto suaves y la mezcla aditiva dan brillo a las partículas verdes, cian y pálidas.
Las estadísticas usan numerales blancos grandes y etiquetas más pequeñas con espaciado, mientras que la obra emplea partículas verdes, azules y pálidas de contraste mucho menor. Esta separación hace que los metadatos se lean con facilidad sin competir con la galaxia. También crea un equilibrio perceptivo: el bloque de rendimiento es legible de inmediato, mientras que los brazos de partículas requieren una mirada más larga y un contraste de pantalla adecuado.
Las capturas muestran distintos valores de FPS mientras conservan las mismas etiquetas de recuento de puntos y llamadas de dibujo. Esa variación hace que el campo de FPS se lea como un estado de visualización local cambiante, no como una afirmación estable sobre el rendimiento en distintos dispositivos.
Premisa técnica
El titular vincula la idea del número de partículas y las llamadas de dibujo con lo visual, en lugar de presentarlas como metadatos inconexos.
Densidad visual
Los amplios brazos en espiral permanecen dispersos sobre el negro, y preservan el espacio negativo alrededor del título y las estadísticas.
Variación de estado
Las capturas conservan 50000 puntos y una llamada de dibujo mientras muestran distintos valores de FPS, lo que separa las etiquetas fijas del estado de visualización cambiante.
Límites de capacidad
El código WebGL2 define N = 50000 y llama a gl.drawArrays con POINTS una vez por fotograma renderizado. Las posiciones de las partículas se calculan en el vertex shader, no mediante un búfer de posiciones actualizado en la CPU. El hilo principal sigue encargándose de la configuración, los uniforms de tiempo, el redimensionado y el dibujo. No hay controles de puntero, teclado, dirección de cámara ni parámetros. Es un efecto visual procedural similar a una galaxia, no una simulación gravitacional científica.
Los comentarios del código afirman 60fps, pero las capturas fijas aisladas y el contador local de FPS no establecen un rendimiento garantizado. Tampoco demuestran un despliegue en producción, servicios conectados ni un proceso histórico de generación. Los recuentos de puntos y llamadas de dibujo son hechos del código; la lectura de la tasa de fotogramas es una observación que depende del entorno.
Qué describen los contadores
La cifra de puntos procede del valor N configurado, y la etiqueta de llamada de dibujo coincide con la única llamada POINTS del bucle de renderizado. El valor de FPS estima la cadencia de requestAnimationFrame en ventanas de aproximadamente medio segundo. Mantener separados estos significados conserva un contexto técnico útil sin convertir la obra en un benchmark sin respaldo.
Cómo crear un diseño de shader de galaxia de partículas en OpenDesign
Establece la composición del lienzo
Empieza con un campo oscuro que ocupe todo el lienzo, un grupo compacto de estadísticas arriba a la derecha y tipografía fija abajo a la izquierda. Mantén la etiqueta verde del tema, la frase grande y el párrafo explicativo dentro del mismo viewport, en lugar de añadir una segunda sección debajo de la obra.
Da forma al campo de partículas
Construye tres brazos en espiral tenues a partir de puntos derivados del ID de vértice, con un movimiento angular más rápido cerca del centro y sprites de punto suaves con mezcla aditiva. Conserva los huecos oscuros y la tipografía fija. Trata la galaxia como un patrón visual, no como un modelo astronómico validado físicamente.
Revisa las etiquetas y los límites de capacidad
Mantén Points, Draw Call y FPS visualmente diferenciados y asegúrate de que los valores cambiantes de FPS se presenten como estado de visualización local, no como afirmaciones universales de rendimiento. Verifica que el movimiento y el redimensionado se mantengan locales al lienzo renderizado.
Prompt sugeridoCrea una galaxia de partículas en WebGL2 con animación automática y 50000 puntos posicionados a partir de gl_VertexID y renderizados en una sola llamada POINTS por fotograma. Dispónlos en tres amplios brazos en espiral con movimiento angular más rápido hacia el centro, una inclinación fija y un giro general lento. Usa sprites de punto aditivos en verde suave y cian, tipografía fija abajo a la izquierda con el texto “Fifty thousand points, one draw call.” y, arriba a la derecha, etiquetas de puntos y llamadas de dibujo definidas en el código con una estimación local de FPS. No añadas controles de usuario, simulación física de galaxias, servicios conectados, almacenamiento ni garantías universales 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