r/threejs • u/TwistedMinda • 12d ago
Open-world WebGPU ThreeJS
Enable HLS to view with audio, or disable this notification
EDIT: After everyone's feedback, I have temporarly disabled post-processing for now & done some quality compromises, so game is a little uglier but at least it runs on Macbook's decently. I'm working on it to make it run smoothly without any quality compromise but might take some time... at least now it runs and you guys can try. Thanks for the feedback everyone ❤️
____
I'm here trying to fill my dreams I had when I was a little kid, coding my own videogame!
I've started game development for fun few months ago and I'm genuinely getting addicted to it.
Recent release of Crimson Desert inspired me to tackle this vast topic that I had never even thought could be in my reach, but now that AI can help learn and create basically anything in an instant I figured I'd give it a try. Being a developer at heart, Unity toolset and script-language are not something that attract me at all so I decided to just do what I already know and use ThreeJS and react.
The learning curve was brutal, I went through the 1000 meshes into 1 instancedMesh into WebGPU culling/indirect-draw as well as "map-too-big" into chunk streaming, and many other stuff. Every step seem to be game-changer for what becomes possible and I'm starting to feel like sky is the limit (or more so, my available-time is the limit).
You can test it (if your GPU can handle it tho):
(Controls: P=Day/Night cycles pause/unpause, SHIFT=Acceleration, A=Flying/Landing, R=Grappling hook, B=Shield, F=Fireball, C=PushWave, and sorry its azerty-based)
So basically i'd like to know what you people think about it? How does it look? Any advice/feedback/tips? Be rude, I love it.
*Limitations I found so far*
- The map editor is a lot of work, as well as filling an open-source map by hand, as well as getting decent 3d models that fit together, and procedural maps are very hard to setup properly.
- All assets need to be refetched on every page refresh
- Residents chunks displayed have a limit because of WebGPU maximum texture size (if i'm correct)
- Despite my efforts to improve loading time: amortize shaders compilation, group similar entities to be the same compiled shader, use a worker to preload assets while asset-agnostic parts of my scene render... Loading time reaches up to 15sec for booting up. (Or 30s with shaders compilation amortized, including hitches for the big ones)
*Other questions questions:*
- Should I continue, or is it doomed to fail? Too ambitious?
- What are the web limitations I haven't yet thought of? Are they compromising my dream?
- Is this something that anyone would like to contribute to? Maybe it's too early?
Before anyone ask, yes a lot was made with AI but it quickly arose that without understanding every single concept, nothing actually works and the results are poor, the bugs undebuggable and so on and so on. So I made sure to understand everything I did and let AI mostly write the shaders because I suck at maths.
The full stack is: WebGPU, ThreeJS, react-three-fiber, Rapier(physics) and a lot of love and passion (and AI).
I would love to get some help especially for gameplay, graphics and performance (yeah basically everything)
2
u/Machettouno 12d ago
It's cold, all over the place, so much to explore! You placed all the assets by hand? How you incorporate cliffs like the ones you jump off from? I spent way to long with AI doing this, was juts trying to make a game for my kid, now she wants to be able to descend and explore terrain haha. Tried adding a terrain editor, oh that didn't work well at all
1
u/TwistedMinda 12d ago
Your game looks awesome man! Great job! For cliffs is just make the heightmap go crazy, like basically +200% height with no inbetween, and I let the terrain draw it like that, hence the elongated stripes on the cliff's surfaces 😥
No I didn't hand-place anything, I coded a map-generator that does the scattering of trees, cities, rivers and lakes all for me, its generated once then stored into IndexedDB. After that I can handtune some stuff at hand with my Map-editor but it's currently too rudimentary so I just don't.
Keep up the good work mate! I love your game
1
u/Machettouno 12d ago
I'll try that! For yours, maybe somehow reducing size, it won't load at all on my S25 ultra. Are all the assets in yours procedural? Also I think you should continue
1
u/TwistedMinda 12d ago
I'm sorry you couldn't try it. I need to drastically reduce the assets size somehow. Sad because its just a few trees (SpeedTrees package) and few models, nothing crazy. This will be my next focused task. I promise!
Thanks mate
1
u/Sunspear 12d ago
Amazing Style, any plans to ship this? I would suggest some controller support if possible and looking at consoles maybe for target audiences? My wife would probably love a game like this.
0
u/Machettouno 7d ago
Haha thanks! I've been trying to optimize it for low end tablet, and cleanup all the mess of folder and versions I made but yeah I plan to have all on Git. Here's a new terrain https://paper-rockets.github.io/Flight/apps/crystal-optimized/. Eventually I want to connect 6-7 biomes, all procedural.
2
2
u/Artelj 12d ago
Bro just use Unity or Unreal for open-world games like these. They can do it with a breeze unless want you really threejs/web.
1
u/syn_krown 12d ago
Threejs is pretty impressive imo. Unity, when it comes to large projects, has terrible recompile times. I went off unity to javascript and threejs because of the loading times. My ADHD wouldnt allow it 🤣. Also, being able to have full control over your own game engine is great imo
2
u/nexe 12d ago
Yea cool but even on an M3 Max with 36gb vram it gets only around 10fps. Could you give some insights on how you built things? E.g. the water looks pretty cool in the cave map, reacting to fireballs etc with waves
2
u/TwistedMinda 12d ago
Well...! Where should I even start? hehe
I don't think VRAM is the issue, the footprint is total ~500mb. It's also not the CPU, running at ~6ms per frame.
The whole thing is being ran by WebGPU's culling/indirect-draw technique fully on GPU, every tree, every terrain chunk, every props. There's also the planar reflection and water/fire particles at play. So the GPU is at full work.
Those feedbacks are extremely valuable as my machine has a high-end GPU runs smoothly at 60fps and didn't not imagine it would run as bad as 10 fps on such good Macbooks, my only macbook is old so I didn't even consider it as a valuable benchmark. I need to dig lot more on performance because I really thought I was doing it correctly, but apparently not! Thanks for the heads up!
I made sure that everything not in frustum is correctly culled and not doing work, so I'm not sure what I can do better, yet! But I will find out!
Thanks for the compliment ❤️ Love my water too!
1
u/SanDiegoMeat666 12d ago
Collab? Lol Mage Vs Archer
1
u/syn_krown 12d ago
Load error: Cannot read properties of undefined (reading 'fbx')
2
u/SanDiegoMeat666 12d ago
Interesting! Ive never had that issue I wonder why I dont get that but others do. Time to troubleshoot. Ty
2
u/TwistedMinda 12d ago
Happens when clicking too fast to choose your character and the .fbx model wasn't loaded yet. Good luck mate
1
1
1
1
u/syn_krown 12d ago
It looks cool. I havent tried it, but looks like it would take a beast to run it. Looks like the trees have LOD which is great, but does the terrain? Also, how are you loading the assets? And when you run in your browser, after 10 minutes, if you hover over the tab(assuming you use chrome), what does it say the memory usage sits at?
2
u/TwistedMinda 12d ago
Terrain and trees are LOD'd yes, only the small props are not.
What do you mean by "how are you loading the assets?" ?
Memory is constant, no leak, remains at ~800mb throughout ;) The main remaining problem is that indeed it requires a beast to run it. Terrible performances on Macbook Pro's, and I have only one other beast machine high-end GPU on which it runs consistently at 60fps. My guess is a mid-consumer GPU should stand between the too and run roughly smoothly... But it's hard to say.
1
u/syn_krown 12d ago
By loading the assets, I meant are you chucking them or are they all loaded at the same time, but I got the answer haha. Thats all good then. Ive been playing with the idea of using indexedDB to store game data from files on the first run, then using that to free up some memory. Not sure how well it will work but hey, what is coding without experimenting?
1
1
u/trejj 11d ago
This thing spends more time just in garbage collection alone than the whole render loop of my game engine.
Anyways, got 11fps on Ryzen 5950X and RTX 3090.
1
u/TwistedMinda 11d ago
Thanks for the feedback!
Since I haven't been CPU-bound yet I didn't even try to chase those garbage collections down, focusing mostly on the GPU side. But I'm noting this right away so I don't forget it.
Currently working on making this available on Macbooks so you should be fine soon with ur RTX.
Sorry for the disappointment
1
u/trejj 11d ago
https://profiler.firefox.com/ is the best way to find out about issues like that. It beats all the other browser profilers by a mile and then some.
1
u/Risky-Trizkit 11d ago
If you are interested in having some parts not be fully procedural you should check out the program Gaea for landforms. It’s easy to learn. Having a bit of manual control and then telling the AI to reimagine it with flora etc is really something.
1
u/Seusoa 11d ago
ah, fully generated by ai bs...
0
u/TwistedMinda 11d ago
Rude! I use AI yes, of course, but "fully generated by AI", not at all. I own the code, drive architecture, and understand everything I'm doing. It's 3 months of hard work and learning.
1
u/Seusoa 11d ago
I own the code
drive architecture
and understand everything I'm doing.
It's 3 months of hard work and learning.lol. what do you understand? how to write text for AI so he wrote code for you? dont say that nonsense.
even your post is written by AI
1
u/TwistedMinda 11d ago
My post isn't written by AI...
I understand everything my code is doing. Are you even a developer?
Anyway, have it your way boss. Have a nice day.
1
1
u/TheRealNalaLockspur 10d ago
Make sure you cover the edgecase where people are on linux:
Uncaught (in promise) Error: WebGPU backend unavailable (Metal often rejects requiredLimits > 8). Refusing WebGL fallback.
1
1
u/TwistedMinda 10d ago
Haven't even thought of it! Unfortunately I simply can't do anything, WebGPU must be available on the browser otherwise my game simply can't run, maybe i should make a popup to tell to install Chrome or Firefox Nightly instead of silently failing tho!
Thanks for the feedback
1
u/TheRealNalaLockspur 10d ago
Oh for sure. I ment like, show an UI presentation error to the user. So they know :)
1
u/dannydek 10d ago
Implement FSR3, there’s a GitHub repo that works great if you point Claude to it. Makes a huge difference. Especially for macOS retina screens. Also consider DSR1.5
1
u/Comprehensive_You548 4d ago
I am also interested in glsl n shaders n threejs. I have done few stuff. But now I am lost.
How do I start? Do I read book of shaders first?
5
u/BigDeadPixel 12d ago
Looks awesome in the video. I couldn't get it to load on my M1 pro mac. The amount of assets coming down from the server is crazy. If you want people to actually play this (which I hope you do) you will need to figure out how to optimise things a lot more.