FIELD — Cuatro estados de un búfer

Un búfer se convierte sucesivamente en un campo de hierba, una marea, brasas y una retícula: 262,144 hebras recalculadas por una pasada de cómputo WebGPU en cada fotograma.

Probar el Agente de sitios web

Loading preview...

Comenzar con este prompt

Un búfer se convierte sucesivamente en un campo de hierba, una marea, brasas y una retícula: 262,144 hebras recalculadas por una pasada de cómputo WebGPU en cada fotograma.

Probar el Agente de sitios web

Crea una página de escena procedimental con WebGPU llamada FIELD: cuatro estados de un búfer. Toda la página funciona con un único búfer fijo que cuatro escenas reutilizan sucesivamente: un campo de hierba movido por el viento, una marea que sube y baja, brasas que se apagan y una retícula regular. Las 262,144 briznas de hierba, o las partículas equivalentes en las escenas posteriores, se reescriben por completo mediante una pasada de cómputo en cada fotograma, por lo que nada en pantalla es una textura ni un modelo; cada hebra se calcula. A medida que el visitante se desplaza hacia abajo, los cuatro estados pasan suavemente de uno a otro mientras el mismo búfer sigue reutilizándose por debajo. Cada estado incluye breves notas de implementación que explican cómo funciona el efecto, junto con una lectura en tiempo real de la tasa de fotogramas. Cuando el navegador no es compatible con WebGPU, la página muestra un mensaje alternativo adecuado en lugar de la escena, para que el visitante sepa por qué no se renderiza nada. Página estática de un solo archivo.

Agregar controles deslizantes de parámetros

La hierba, la marea, las brasas y la retícula cuentan con controles deslizantes en tiempo real para la densidad, la velocidad del viento y el color, de modo que al arrastrarlos la escena cambia de inmediato; las notas de implementación y la lectura de la tasa de fotogramas se mantienen.

Probar el Agente de sitios web

Crea una página de escena procedimental con WebGPU llamada FIELD: cuatro estados de un búfer. Toda la página funciona con un único búfer fijo que cuatro escenas reutilizan sucesivamente: un campo de hierba movido por el viento, una marea que sube y baja, brasas que se apagan y una retícula regular. Las 262,144 briznas de hierba, o las partículas equivalentes en las escenas posteriores, se reescriben por completo mediante una pasada de cómputo en cada fotograma, por lo que nada en pantalla es una textura ni un modelo; cada hebra se calcula. A medida que el visitante se desplaza hacia abajo, los cuatro estados pasan suavemente de uno a otro mientras el mismo búfer sigue reutilizándose por debajo. Cada estado incluye breves notas de implementación que explican cómo funciona el efecto, junto con una lectura en tiempo real de la tasa de fotogramas. Cuando el navegador no es compatible con WebGPU, la página muestra un mensaje alternativo adecuado en lugar de la escena, para que el visitante sepa por qué no se renderiza nada. Página estática de un solo archivo.

Agregar un quinto estado

Agrega un quinto estado después de la retícula: un campo de nieve que cae suavemente, que aparece al desplazarse con la misma fluidez que los primeros cuatro estados.

Probar el Agente de sitios web

Crea una página de escena procedimental con WebGPU llamada FIELD: cuatro estados de un búfer. Toda la página funciona con un único búfer fijo que cuatro escenas reutilizan sucesivamente: un campo de hierba movido por el viento, una marea que sube y baja, brasas que se apagan y una retícula regular. Las 262,144 briznas de hierba, o las partículas equivalentes en las escenas posteriores, se reescriben por completo mediante una pasada de cómputo en cada fotograma, por lo que nada en pantalla es una textura ni un modelo; cada hebra se calcula. A medida que el visitante se desplaza hacia abajo, los cuatro estados pasan suavemente de uno a otro mientras el mismo búfer sigue reutilizándose por debajo. Cada estado incluye breves notas de implementación que explican cómo funciona el efecto, junto con una lectura en tiempo real de la tasa de fotogramas. Cuando el navegador no es compatible con WebGPU, la página muestra un mensaje alternativo adecuado en lugar de la escena, para que el visitante sepa por qué no se renderiza nada. Página estática de un solo archivo.

Agregar un modo de órbita

Agrega la posibilidad de orbitar al arrastrar el mouse sobre las transiciones de desplazamiento, para que el mismo campo recalculado en cada fotograma pueda verse desde otro ángulo.

Probar el Agente de sitios web

Crea una página de escena procedimental con WebGPU llamada FIELD: cuatro estados de un búfer. Toda la página funciona con un único búfer fijo que cuatro escenas reutilizan sucesivamente: un campo de hierba movido por el viento, una marea que sube y baja, brasas que se apagan y una retícula regular. Las 262,144 briznas de hierba, o las partículas equivalentes en las escenas posteriores, se reescriben por completo mediante una pasada de cómputo en cada fotograma, por lo que nada en pantalla es una textura ni un modelo; cada hebra se calcula. A medida que el visitante se desplaza hacia abajo, los cuatro estados pasan suavemente de uno a otro mientras el mismo búfer sigue reutilizándose por debajo. Cada estado incluye breves notas de implementación que explican cómo funciona el efecto, junto con una lectura en tiempo real de la tasa de fotogramas. Cuando el navegador no es compatible con WebGPU, la página muestra un mensaje alternativo adecuado en lugar de la escena, para que el visitante sepa por qué no se renderiza nada. Página estática de un solo archivo.