In my current project, I am dealing with 100 BoxGeometries, each containing its own image (approximately 10kb). Unfortunately, I have noticed performance issues and frame skipping on mobile devices during the initial rendering of these boxes, and I am looking for ways to resolve this.
Currently, I preload all images and create textures before adding the boxes:
let loader = new THREE.TextureLoader()
for(let img of assets) {
loader.load(img.url, texture => {
textures[img.name] = texture
assets.splice(assets.indexOf(img),1)
if(!assets.length) {
addBoxes()
}
})
}
The boxes are then laid out in a grid, which can be illustrated using pseudo-code:
textures.forEach((texture,i) => {
let box = new THREE.Mesh(
new THREE.BoxGeometry(1, .04, 1),
[
blackMaterial,
blackMaterial,
new THREE.MeshBasicMaterial({
map: Controller.textures[boxMaterial.postID]
}),
blackMaterial,
blackMaterial,
blackMaterial
]
)
box.position.x = (i % 10 - 5)
box.position.z = (Math.floor(i / 10) - 5)
scene.add( box )
})
requestAnimationFrame( step )
I am using a THREE.OrthographicCamera to pan and zoom around the boxes. When the boxes first appear on screen, there is a spike in memory usage. However, once all boxes have been loaded and seen, the memory consumption decreases significantly, resulting in smooth performance without any dropped frames.
It is worth noting that after 6 seconds, the memory usage stabilizes once all boxes have been viewed:
https://i.sstatic.net/Cumij.png
To address this issue, I tried setting the frustumCulled parameter on the boxes:
box.frustumCulled = false
This solution improved performance in some aspects. Once loaded, the performance is consistently smooth, and the memory issues are eliminated. However, I am facing challenges with detecting when all meshes have finished loading, resulting in slow initial load times and jittery animations and interactions occurring too early.
While eager loading may increase the initial load time, it could potentially solve the memory issues caused by lazyloading. Are there any other alternatives I should consider? Is setting box.frustumCulled the most effective approach?
Additionally, I am exploring options for implementing event listeners for loading activities. Ideally, I would like to preload all boxes as if they had already been viewed once, and only trigger an init method once the system is fully prepared.