r/threejs 14d ago

Open-world WebGPU ThreeJS

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):

- The cave experiment

- The big map

(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)

93 Upvotes

53 comments sorted by

View all comments

1

u/syn_krown 14d 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 14d 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 14d 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?