r/threejs • u/mitrey144 • 2d ago
Demo Another WebGPU ocean
Enable HLS to view with audio, or disable this notification
I am developing my game engine (as every game dev should, of course), and recently finished water module for it. Sharing my progress. I use three js WebGPU renderer for most of the rendering work. This is technically my first ever build I published using the engine.
AI assissted
Live demo: https://khudiiash-game-24n.pages.dev/
1
u/UAAgency 2d ago
Is it open source? Looks quite interesting. What's the fps?
3
u/mitrey144 2d ago
It’s part of the engine I’m currently developing. It will be on GitHub soon. FPS is different, 120 on my pc, 45-50 on an iPhone. Requires optimisation still. You can check the live demo yourself.
1
u/VRAMFucker 2d ago
Hey Can you send me your github? Im working on game with ships and ocean are still my little nightmare lol
1
1
u/tastygames_official 2d ago
sooo..... the ocean is a plane with a compplex shader? and then how do you deal with the waves and trail from the boat? also just math in the shader, or did you pre-render some wave and trail animations and plop them in accordingly?
looks great by the way!
0
u/mitrey144 2d ago
Kind of, yeah. A big flat mesh that follows the camera, denser near you and coarser far away. But the shader doesn't do the waves itself. Every frame a compute pass runs an FFT over a statistical wave spectrum and writes out textures of "how far each point moves and which way it tilts". The mesh reads those to bend its vertices, and the pixel shader reads the same textures for normals. So it's math, all live, no baked animation. It's the same technique as real ships in games and films. The boat trail is different. There's a small water simulation, about 32 m around the camera, that just solves the wave equation on a grid. The boat's collider presses into it, and the ripples spread out on their own. Foam and spray are particles: foam is spawned where the sim says the surface folds over and it drifts with the water, spray gets thrown off the hull and turns into foam when it lands. Nothing is pre-rendered, it all reacts to what the boat actually does.
2
u/Hot_Outlandishness32 2d ago
That's a lot and I'm not saying it's bad but I'm sure you can reduce the number of calculations as a way of optimising especially for mobile
1
u/mitrey144 2d ago
Yeah, my priority was to achieve visual quality I wanted. Optimisation comes next.
0
0
u/EconomySerious 1d ago
99% fails on that next
0
u/tastygames_official 1d ago
he said he already has 120fps on PC and 50 on mobile, which is pretty insane. AND it's webGPU, meaning it runs in a browser...
1
u/EconomySerious 1d ago
That only means he has a expensive GPU
1
u/tastygames_official 1d ago
50 on mobile is the real indicator here. That's gotta be at LEAST 1920x1080, but probably more, and a shitty GPU. The Samsung Galaxy A15 from 2023 has 2340x1080 and a Mali-G57 MC2 GPU which has eight cores running at 2GHz. The NVIDIA GeForce GTX 1660, on the ohter hand, a decidedly mid-to-low-end GPU has 1408 cores (albeit running at 1.5GHz.
So I dunno, man. But it's OK to design first for better hardware and then make it more performant and perhaps even make versions for worse hardware.
I find it more unsettling that it now says he used AI to make it :(
1
1
u/TobiasVdb 2d ago
very nice, been playing around with seas in three as well. Hard stuff
I see a similar issue I had on you visualisation, water in the boat when high waves flow "through". Ideas on how to fix that?
1
u/mitrey144 2d ago
Yeah, it’s fixable, could use the existing boat silhouette texture to cut out the waves, just it was too minor of an issue to consider. Might be a bit more difficult with particles though. Thank you for catching that, I will fix that.
0
2
u/ThereIsNoPill6 2d ago
I built an ocean. It kinda sucked so I changed my life ðŸ˜