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
Here the website (not the final version though, still on dev env for optimization and client ask) : The Kingdom of Istyald - An interactive journey | Fantasy - BnF
Any help will be appreciated!