Sandbox em Three.js e GLSL para ajustar efeitos visuais de habilidades no estilo de jogos, com controles deslizantes que continuam editáveis durante a pausa da simulação.
1,1 mil+15 esta semana215JavaScriptMITAtualizado há 2 meses
Humpalumps/Ultra-Water
Renderizador de oceano em tempo real para three.js (WebGL2), com ondas FFT, arrebentação, espuma, cáusticas, visualização subaquática e objetos flutuantes.
- Estrelas
- 643
- Forks
- 97
- Issues abertas
- 0
- Último commit
- há 5 dias
O que é?
Ultra Water é um renderizador de oceano em tempo real baseado em three.js e WebGL2, que vem com uma cena de demonstração com uma ilha. As ondas são geradas por uma simulação FFT no estilo Tessendorf, distribuída em quatro cascatas, com uma faixa capilar para pequenas ondulações. A superfície é sombreada por pixel, com especular solar GGX, reflexos planares da ilha, refração e absorção de Beer-Lambert.
Além de águas abertas, o projeto inclui arrebentação na costa controlada por um campo de tempo de percurso eikonal, espuma nas cristas e rendilhada, avanço e recuo da água na praia e anéis de impacto quando objetos atingem a água. As cáusticas são calculadas projetando luz refratada em planos a várias profundidades. No modo subaquático, são renderizados a janela de Snell, os raios solares e a neve marinha quando a câmera está na superfície ou abaixo dela.
Caixas, barris, boias e barcos flutuantes usam alturas da água amostradas na GPU para simular flutuabilidade e arrasto, com um mapa de sombras separado. O projeto inclui um HUD de desempenho e um benchmark na própria página, além de ajustar o perfil de qualidade para celulares e tablets.
Recursos principais
- 01Ondas oceânicas baseadas em FFT em quatro cascatas, com ondulações capilares.
- 02Arrebentação na costa com inclinação da onda mergulhante, cristas que se desenrolam e efeito de águas rasas.
- 03Espuma branca nas cristas e espuma rendilhada, cuja cobertura se desgasta com o tempo.
- 04Cáusticas, janela de Snell subaquática e raios solares.
- 05Simulação de flutuabilidade para caixas, barris, boias e barcos.
- 06Perfil para dispositivos móveis com ajuste automático de resolução.
Casos de uso
- Adicionar um cenário realista de oceano ou lago a uma cena web em three.js.
- Estudar técnicas de sombreamento de oceanos com FFT, cáusticas e espuma em WebGL2.
- Prototipar barcos ou objetos flutuantes que respondem às ondas.
- Medir o desempenho de renderização da GPU no navegador.
Início rápido
- 1
Instale as dependências
npm install - 2
Inicie o servidor de desenvolvimento e abra a URL de localhost exibida
npm run dev
Antes de usar
- Para manter uma taxa de quadros fluida, é necessário um navegador compatível com WebGL2 e uma GPU com potência suficiente.
- O desempenho em celulares e tablets varia conforme a temperatura e o dispositivo; além disso, as configurações para desktop podem causar quedas na taxa de quadros em celulares.
Tópicos
Perguntas frequentes
- O que é Ultra-Water?
- Renderizador de oceano em tempo real para three.js (WebGL2), com ondas FFT, arrebentação, espuma, cáusticas, visualização subaquática e objetos flutuantes. Ultra Water é um renderizador de oceano em tempo real baseado em three.js e WebGL2, que vem com uma cena de demonstração com uma ilha. As ondas são geradas por uma simulação FFT no estilo Tessendorf, distribuída em quatro cascatas, com uma faixa capilar para pequenas ondulações. A superfície é sombreada por pixel, com especular solar GGX, reflexos planares da ilha, refração e absorção de Beer-Lambert.
- Ultra-Water é gratuito? Qual é a licença?
- Ultra-Water é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
- Ultra-Water ainda é mantido?
- Manutenção ativa. O último commit de Ultra-Water foi em 2 de nov. de 2026.
- Para que posso usar Ultra-Water?
- Adicionar um cenário realista de oceano ou lago a uma cena web em three.js. Estudar técnicas de sombreamento de oceanos com FFT, cáusticas e espuma em WebGL2. Prototipar barcos ou objetos flutuantes que respondem às ondas. Medir o desempenho de renderização da GPU no navegador.
- Como instalar Ultra-Water?
- Instale as dependências: npm install Inicie o servidor de desenvolvimento e abra a URL de localhost exibida: npm run dev
- Onde consigo Ultra-Water?
- O código-fonte e as instruções de instalação estão no GitHub: https://github.com/Humpalumps/Ultra-Water
Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.
Projetos relacionados
Um wrapper funcional para WebGL que elimina o estado compartilhado da GPU, permitindo descrever chamadas de desenho como comandos e compilá-los em JavaScript otimizado.
5,6 mil+1 esta semana329JavaScriptMITAtualizado há 22 dias
Biblioteca de pós-processamento para three.js que encadeia efeitos de tela cheia, como bloom, SSAO e correção de cor, em cenas WebGL.
3 mil+45 esta semana258JavaScriptZlibAtualizado há 6 dias
Uma coleção aberta de mais de 100 transições GLSL criadas pela comunidade entre duas imagens, para web, dispositivos móveis, Apple, Android, Rust e ferramentas de vídeo.
2,2 mil+18 esta semana331GLSLOtherBem mantidoAtualizado há 3 horas
Uma jornada de barco em 3D por um vale fluvial japonês, direto no navegador e renderizada em tempo real com three.js, em quatro estações e a qualquer hora do dia.
146+9 esta semana17JavaScriptOtherAtualizado há 18 dias
Um renderizador de path tracing para three.js com WebGPU, que usa three-mesh-bvh para gerar imagens com iluminação fisicamente realista no navegador.
2 mil+86 esta semana200JavaScriptMITAtualizado há 13 horas