I have been experimenting with three.js for a few months now. Recently, I began working on a project involving a 3D webgl product catalogue where we store base64 images in the browser's indexeddb and create the catalogue upon app load. The issue arises due to performance problems, especially when dealing with categories containing hundreds or even thousands of products.
Each category presents models (planes) in a unique way, requiring textures to be generated and pre-loaded before the app starts to provide a smooth user experience. However, this approach causes crashes on hardware with limited RAM and onboard GPUs that share memory with the CPU, such as Chrome crashing.
We attempted loading textures on demand, but it significantly impacts user experience by causing the app to freeze for a few seconds. Currently, materials are created for each product without any textures, while textures are stored separately based on the product ID. When a category loads, we assign the appropriate texture to each model and dispose of unnecessary textures from materials.
The challenge lies in storing 2000 textures which is not memory efficient and leads to crashes on low-budget hardware. On-demand texture loading results in freezes during use, impacting user experience negatively. Furthermore, considering that each model is draggable via touch events complicates the situation.
I do not face any coding issues at the moment, so sharing code would serve no purpose unless requested specifically. My main concern revolves around finding a more effective architectural solution for implementing such an app. I have considered using particle systems, but having a different texture for each particle could yield similar problematic outcomes.