I’m currently a student in interactive dev and I’m working part-time in a web dev agency.
We have created a point and click game for a project using angular 8 and threejs with layers (planes) to have a nice parallax effect with hidden creatures and objects due to the parallax.
It works nice on chrome (60 constant when the page is fully loaded, 1 to 40~ when page loading content) but in firefox, it is really laggy (15 ~ constant when the page is fully loaded)…
We’ve tried to implement the tips for performance on threejs.org and threejsfundamentals.org + this forum and others discussions but we still have issues on it…
We are not used to build this kind of website and experiences so we’re a bit lost in the middle of the sea.
The app instantiate 3 planes (~ 1024x512 or 2048x1024) + ~ 1 to 5 planes for custom shader and 2 - 3 little icons / UI elements (max. 64x64) on each page (places in the game).
We’ve implemented dispose for all objects at each routing change, we’re using BufferGeometry for all objects, we use service workers (angular built-in) but it seems that we have too many scripts / render / loop running that decrease the fps and fluidity of the app…
I don’t know if this is the place to ask it or if there is a place for “code review & optimization tips” haha
In such situations, it’s important to find the bottleneck. It seems your application is fragment shader bound since if I make the browser window noticeably smaller, the performance gets better.
I’m afraid not on my iMac 5K (although Chrome renders a bit faster than FF). It’s hard to guess the framerate but it’s definitely not 60 FPS.
Looking at your assets, it seems you are using too much high-resolution textures which can quickly occupy a lot of memory and bandwidth. For all background textures, try to set Texture.minFilter to THREE.LinearFilter in order to avoid the generation of mipmaps. If that does not help, try to reduce the resolution of your textures by half.
What does this imply to have the app fragment shader bound?
About the textures, they are all in 72ppp but those that are on not in the background are in png for transparency and parallax effect and they are 2Mo size average… if we reduce their size or quality it appears really pixelated on desktop screen…
And all textures have the minFilter set to THREE.LinearFilter both png or jpg textures.
Well, there are too much resources required to render all fragments. If you lower the resolution for example by making the app window smaller, you can easily lower the amount of fragments that have to be processed.
