Insane Performance Issues (tragic)

[MTSyntho]

Yesterday, I was working on my game engine, built on three.js, and decided to add the ability to read project files, although through doing so, the engine cant even reach 1fps anymore.

It does a fetch request to 2 or 3 json files, each containing different information about the project, after fetching, it reads them, and calls a bunch of functions (gzjs.functionname) to do various things, like creating a sky, adding shadows, tonemapping, and adding objects into the scene. Before adding this project loading feature, everything worked flawlessly, with decent performance (around 40-50fps which i’d planned to optimize later)

i wish i could provide a code-snippet but problem is idk what file is causing this, i can only guide you to the files i’ve modified and added

GitHub - MTSyntho/glunzunk-engine: Glunzunk Engine is a free 3D Game Engine for...

changed files:

scripts/editor/init.js
scripts/editor/loadproject.js (might wanna take a look at this)
scripts/engine/glunzunk.js
scripts/engine/gzjs/gzjs.objects.js

added files:

scripts/engine/gzjs/gzjs.fog.js
scripts/engine/gzjs/gzjs.lighting.js
scripts/engine/gzjs/gzjs.shadow.js
scripts/engine/gzjs/gzjs.sky.js
scripts/engine/gzjs/gzjs.tonemapping.js

Testing the engine on mobile seems to pose no issues whatsoever

If you wanna test the project out for yourself, you may check it out here ^^
https://mtsyntho.github.io/glunzunk-engine

[manthrax]

You’re calling :

renderer.setAnimationLoop( animate );

But then your animate function is also re-triggering itself:

function animate() {
	requestAnimationFrame(animate); //This is bad
	renderer.render( scene, activeCamera );
}

Animate should just be:

function animate() {
	renderer.render( scene, activeCamera );
}

Either way can work, but they can’t work together.
Calling requestAnimationFrame(animate); is the Old way that animation loop worked, but this turned out to be bad for cases when multiple renders need to occur per frame (VR/AR) so setAnimationLoop was introduced. setAnimationLoop lets threejs decide when/how to rerender.

On a side note… you’re using a lot of css effects like drop shadows and stuff… those types of effects can nuke performance as well.

I don’t know if you’re using a bundler on this… some of the names looked obfuscated…
but… be really careful with bundler settings, that advertise “backward compatibility” because these can often introduce performance de-optimizations.

p.s.= Once you fix that animation loop… .try enabling antialias:true on your renderer as well.

const renderer = new THREE.WebGLRenderer({ canvas: renderCanvas, antialias:true });

[MTSyntho]

Thank you soo much