Render delays on multiple BoxBufferGeometries with 6 materials

Questions
,
1

In my application I have 70 THREE.BoxBufferGeometries created, and as each BBG has different size, each side has a different texture, in the sense that the image used is the same but map.rotation, map.repeat and map.offset varies.

Basically, the ‘draw’ function below is executed 70 times…

loadingManager performs apparently well, and fires when the images are loaded (caching enabled).

But there is a delay of, im my specific case, 2.5 sec between loadingManager finishes and the scene is rendered.

How can I debug or find the source of this delay.
Alternatively, is there a ‘three.scene.onLoad’ event?

----- code excerpt ----
THREE.Cache.enabled=true;

var loadingManager = new THREE.LoadingManager();

loadingManager.onStart = function ( url, itemsLoaded, itemsTotal ) {
RESOURCES_LOADED=false
};

loadingManager.onLoad = function ( ) {
console.log(‘done’)
RESOURCES_LOADED=true
};

function draw(x,y,z) {
var geometry = new THREE.BoxBufferGeometry( x, y, z)
for (var i=0;i<6;i+=1) {
materials.push(
new THREE.MeshBasicMaterial({
name: _materialcodes[i],
map: new THREE.TextureLoader(loadingManager).load(’/image/e/512x512/’+_materialcodes[i]+’.png’)})
)}
materials[0].map.repeat.set(z/50,y/50)
materials[1].map.repeat.set(z/50,y/50)
materials[2].map.repeat.set(z/50,x/50)
materials[3].map.repeat.set(z/50,x/50)
materials[4].map.repeat.set(x/50,y/50)
materials[5].map.repeat.set(x/50,y/50)

materials.forEach(function(mat) {
mat.map.encoding = THREE.sRGBEncoding;
map.map.anisotropy = 16;
mat.map.wrapS = mat.map.wrapT = THREE.MirroredRepeatWrapping
mat.map.offset.set( 50Math.random(), 50Math.random() )
mat.map.needsUpdate=true;
})

materials[4].map.offset.copy(materials[2].map.offset)
materials[5].map.offset.copy(materials[3].map.offset.subScalar(50))

var mesh= new THREE.Mesh(geometry , materials );
var edges = new THREE.EdgesGeometry( geometry )
var line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( {color: 0x000000,linewidth: .1} ) );
var _g=new THREE.Group
_g.add(mesh, line)
return _g
}

2

Without doing a performance analysis its hard to specific the root cause but I feel the number of texture uploads is responsible for the performance problems.

In general, you should load the textures only ones and not per invocation of draw() and then just clone the textures for your each material. Besides, you only need a single instance of TextureLoader.

Unfortunately, even with those changes the performance won’t be much better because the engine has currently a design limitation that prevents a more efficient texture upload when using shared images. We hope to resolve this issue with the following PR: WebGLTextures: Avoid unnecessary texture uploads. by Mugen87 · Pull Request #17949 · mrdoob/three.js · GitHub

In any event, you can also try to work with ImageBitmapLoader instead which will mitigate the decode overhead.

3

Thanks for your prompt reply! Much apprecited.
I’ll apply your suggestions in my code.

Is there a possibility to have some kind of a loading screen while rendering is in progress?

M

4

Loading screens are possible, but three.js does not provide them. You will probably want to use normal HTML/CSS made with whatever web development tools you prefer.