Threejs is slower than zen-3d

Describe the bug

ThreeJS slower than GitHub - shawn0326/zen-3d: JavaScript 3D library.
when animating sky/water shader, i would love if threejs was the same performance

To Reproduce

run sky/water on threejs and compare with zen3d… move the sun for example, inclination… see the difference in FPS

Code

compare both lib shaders is nearly identical as zen was inspired (not totally forked as others) in three

Expected behavior

Same performance, if it´s the same “thing” and shader

i did the fiddle tooo fast… okay change the fiddles, and try to be faster than zen3d… i tried that in many ways in last years

Thanks

ok here we go

threejs one:

zen3d one:

sorry base64 on zen one, i cant managed to put image link didn´t worked

observations:
on my computer three gives oscillations down in fps… but zen3d 60 61 fps stable

on my mobile, threejs capped to 29 30, while zen-3d 30 ~46 fps… but i remember 3 years ago testing, that it´s more on the stable side of 46 when interacting, maybe i forced too hard the auto senoid demo… also jsfiddle i dunno if it make slower on mobile…

veredict: there´s some performance culprit occult inside threejs (i mean even if it´s not a ‘slowering feature’ we are using)

Thanks.

while reflecting about what i just said… i would like to add that… if you test it non in jsfiddle, but fullscreen in mobile… the impact difference i think will be bigger… because 3 yrs ago when i found this, i tested in 100% scale

It’s not… the performance comparison you are doing isn’t fair, because as Mugen said, you are performing tone mapping AND pmrem generation in the threejs example. Trying commenting out the line scene.environment = pmremGenerator.fromScene( sky ).texture; in your updateSun function - PMREM generation is expensive and can take many milliseconds on a low-end device. Getting rid of that line should make the threejs scene perform as well, if not better, than the “zen3d” scene.

1 Like

you two, said that… but im saying that in the past i tested in many ways… when i have some time i will change the fiddle to prove it, Thanks

I tested the fiddle on my machine - without the PM-REM generator, the THREE.JS example ran at around 1000 FPS compared to the 260-300FPS of the zen3d example.

2 Likes

can u post the fiddle fixed? so i can ran the same test on my desktop and mobile?

Just delete the line I told you to.

yeah i deleted pmrem on update, i know that i dont have tested with that on update loop in the past…

the fps increased, but on mobile i only tested in a tiny window, in this way jsfiddle harms a bit the test vs a 100% screen one… when i got time i will remake the tests outside jsfiddle

Alright - tell me how it goes!

Okay, i´ve found a super fast and easy way to prove my point…

just open the ocean example from threejs site, on a mobile and look to the fps

i can achieve many more fps with same stuff in zen3d

my mobile is not from NASA, neither JURASSIC… i have a snapdragon 660 mobile cpu
the question is… why i can achieve so much more in zen?

i can screen record for you to see if u want

I’d love to see! For me on desktop (with an M1 Mac) threejs outperforms zen3d… maybe something is going on with modern versions of three that isn’t mobile-friendly?

i´ve found this 3 years ago, when i got haunted by threejs BLACK textures in some mobiles…
i looked desesperately to a framework, zen3d saved me… but later i decided to move on with old mobiles…

they can do pbr without artifacts on old mobiles i dunno how… it´s one of the reasons that i ask the folks take a deeper look on zen… he got mobile in mind

but as added bonus i´ve also found this problematic behaviour with sky/ocean SUPER LOW performance also (low without interaction, and VERY low with interaction of uniforms)

TBH you’d have to take these issues up with someone more versed in the internals of threejs and zen3d. I hope you discover the thing slowing the water example down.

2 Likes