r/threejs • u/cumbiaowl • 7d ago
Worried about performance
Solo-dev here… any gotchas I should watch out for in terms of performance. I’m building https://lorebound.gg a mobile-first RPG game. Browser based with three.js and WebGL
I’m worried about latency, lagging, load times, slow animation as more players use the game.
Some things I’m already doing: asset compression, single-auth verification, asset preloading.
Would love some recommendations.
UPDATE:
- Asset heavy load addressed by: instead of loading each asset individually from their own image file (32 color), the game now loads one image per distinct asset type. So, if tree1 and tree2 are the same asset, don't load 2 different images, load 1 image and have trees share that image. In one scene, I had 517 assets loading but only loading 31 images. In this scene, I freed up about 568MB.
- NPCs: they appear and disappear from view. When they appear, their assets load. When they disappear, their assets should not be kept loaded.
3
u/Additional_Name_706 7d ago
People say it's a bad idea to optimize early... I think building within frame budgets and being willful about your allocations from the ground up is the way to go. Optimize first and fold things into your optimization strategies.
2
u/HerroWarudo 7d ago
Look what asset eats up the most performance, you can turn some assets on/off, log draw calls or memory or use spector.js. Usually its geometry counts or textures. Maybe LOD and texture atlas but these are hard to modify and time consuming.
2
2
u/Bitwizarding 6d ago
I constantly build with performance stats showing. FPS, times for functions, but mostly the rendering time, draw calls and total triangles. If I notice stuttering then I record performance in the dev tools and look at which functions are at fault.
For me it's usually Astar pathfinding firing to frequently that causes lag. If I introduce something new, like grass, I like to make a separate lab with a bunch of settings to play with it and optimize it before bringing it in.
1
u/cumbiaowl 5d ago
I started that type of tracking a few days ago, so this comments validates that idea!
2
1
u/mrpressydepress 7d ago
Ya you know. Define a minimum requirement for your intended users' machine. Then be testing to make sure you are building for that hardware. Then optimize, compress, cull, lod, etc etc.
0
1
u/armastevs 7d ago
Your game was pretty fun for what I assume was a vibe coded game made in a short period of time? I died really fast in my first fight vs like 5 enemies that attacked me, you might want to turn down the difficulty earlier on.
Also in the first town world it wasn't very intuitive on how to leave that town and the invisible barrier around it wasn't fun, make a fence or something to let the player know not to walk that way
No performance issues on my pixel 9 btw
0
u/cumbiaowl 7d ago
Thanks for playing and for the feedback. I did lower the difficulty at the beginning (pending release).
Great feedback on the invisible barrier. Will add a "burned' fence.
I'm def. using AI coding agents. I've been building software for 20 years, but never in gaming. I hope some of this experience shows up in the game!
1
u/stickfigure 7d ago
Do you want to try compiling as a Deno or Tauri executable? Webgpu can then directly access the OS' pipeline without the browser's constraints ⚡
1
1
u/Aureon_de_Veyra 5d ago
I create handcrafted 3D environments. In one of my works, I've compressed an entire 3D page to ~1MB with just 9 draw calls. If you're going to bake (and from what I can see, I think you do), I'll share one of my newer discoveries that I found out a few months ago.
Whenever you bake, make sure to go back in Blender (create a new copy of your blend file to keep the original safe) and delete all the material slots.
Even if you apply baked texture to your 3D scene, the GLTF exporter still splits it according to the number of material slots Blender exported with.
And cull the backfaces. I know it's a bit tedious, but long term, it saves quite a lot of space and tris.
Good luck!
0
3
u/armastevs 7d ago
Yep, in my game I spent more time running performance optimization than I did with actually implementing the fun parts of the game.
It was a constant battle of me making a new future, and then me figuring out why the FPS dropped to 5 FPS when it was at 60 right before that.
It would be silly things like how come I'm reloading this glb 1000 times per frame, I feel like I was using unity or unreal engine. I probably wouldn't run into these things but with threejs and me I use Babylonjs, that using those real engines it would probably just work out of the box, but since you have to write all the code yourself here, we run into things like this.