Repolode
Enviar
Humpalumps

Humpalumps/Ultra-Water

Renderizador oceánico en tiempo real para three.js (WebGL2), con olas FFT, rompientes, espuma, cáusticas, vista submarina y objetos flotantes.

Ver en GitHub
Estrellas
634
Forks
94
Issues abiertos
0
Último commit
hace 4 días

¿Qué es?

Ultra Water es un renderizador oceánico en tiempo real basado en three.js y WebGL2, que incluye una escena de demostración con una isla. Las olas se generan mediante una simulación FFT al estilo de Tessendorf con cuatro cascadas y una banda capilar para las pequeñas ondulaciones. La superficie se sombrea píxel a píxel con reflejos especulares del sol mediante GGX, reflejos planos de la isla, refracción y absorción de Beer-Lambert.

Además de las aguas abiertas, incluye rompientes costeras impulsadas por un campo de tiempo de viaje eikonal, espuma en crestas y encaje, oleaje en la playa y anillos de impacto cuando los objetos golpean el agua. Las cáusticas se calculan proyectando luz refractada sobre planos a varias profundidades. El modo submarino renderiza la ventana de Snell, rayos solares y nieve marina cuando la cámara está en la superficie o por debajo de ella.

Cajas, barriles, boyas y barcos flotantes usan alturas del agua muestreadas en la GPU para calcular la flotabilidad y el arrastre, con un mapa de sombras independiente. El proyecto incluye un HUD de rendimiento integrado en la página y una prueba de rendimiento, y adapta su perfil de calidad para teléfonos y tabletas.

Funciones clave

  • 01Olas oceánicas basadas en FFT en cuatro cascadas, con ondulaciones capilares.
  • 02Rompeolas con inclinación de las olas al romper, crestas que se desplazan y formación de bajos.
  • 03Aguas blancas en las crestas y espuma en encaje, con una cobertura que se erosiona con el tiempo.
  • 04Cáusticas, ventana de Snell submarina y rayos solares.
  • 05Simulación de flotabilidad para cajas, barriles, boyas y barcos flotantes.
  • 06Perfil móvil con ajuste automático de la resolución.

Casos de uso

  • Añadir un fondo realista de océano o lago a una escena web de three.js.
  • Estudiar técnicas de sombreado oceánico con FFT, cáusticas y espuma en WebGL2.
  • Crear prototipos de barcos u objetos flotantes que reaccionen a las olas.
  • Evaluar el rendimiento del renderizado con GPU en el navegador.

Inicio rápido

  1. 1

    Instala las dependencias

    npm install
  2. 2

    Inicia el servidor de desarrollo y abre la URL de localhost que aparece

    npm run dev

Antes de usarlo

  • Para mantener una frecuencia de fotogramas fluida, se necesita un navegador compatible con WebGL2 y una GPU con suficiente potencia.
  • El rendimiento en teléfonos y tabletas varía según la temperatura y el dispositivo; además, la configuración de escritorio puede provocar caídas de fotogramas en los teléfonos.

Temas

#three-js#webgl#graphics#water-simulation#fft#shaders#real-time-rendering#game-dev

Preguntas frecuentes

¿Qué es Ultra-Water?
Renderizador oceánico en tiempo real para three.js (WebGL2), con olas FFT, rompientes, espuma, cáusticas, vista submarina y objetos flotantes. Ultra Water es un renderizador oceánico en tiempo real basado en three.js y WebGL2, que incluye una escena de demostración con una isla. Las olas se generan mediante una simulación FFT al estilo de Tessendorf con cuatro cascadas y una banda capilar para las pequeñas ondulaciones. La superficie se sombrea píxel a píxel con reflejos especulares del sol mediante GGX, reflejos planos de la isla, refracción y absorción de Beer-Lambert.
¿Ultra-Water es gratuito? ¿Qué licencia tiene?
Ultra-Water es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿Ultra-Water sigue mantenido?
Mantenimiento activo. El último commit de Ultra-Water fue el 2 nov 2026.
¿Para qué puedo usar Ultra-Water?
Añadir un fondo realista de océano o lago a una escena web de three.js. Estudiar técnicas de sombreado oceánico con FFT, cáusticas y espuma en WebGL2. Crear prototipos de barcos u objetos flotantes que reaccionen a las olas. Evaluar el rendimiento del renderizado con GPU en el navegador.
¿Cómo se instala Ultra-Water?
Instala las dependencias: npm install Inicia el servidor de desarrollo y abre la URL de localhost que aparece: npm run dev
¿Dónde consigo Ultra-Water?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/Humpalumps/Ultra-Water

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados