Search code examples
javascriptperformancethree.jstextures

How to pre initialize textures in THREE.JS


I preload and create materials textures before start render and animate of objects.
But THREE JS upload texture to GPU only when object will be shown in camera.
So when new object comes on a screen animation is jerking because of texture sends on GPU. The question is how to send textures to GPU during creation of texture for avoiding it during runtime? enter image description here Loading images to GPU takes a lot of time.


Solution

  • My guess is to walk your object tree, set each object's frustumCulled flag to false, call renderer.render(scene, ...) once, then put the flags back to true (or whatever they were).

    function setAllCulled(obj, culled) {
      obj.frustumCulled = culled;
      obj.children.forEach(child => setAllCulled(child, culled));
    }
    
    setAllCulled(scene, false);
    renderer.render(scene, camera);
    setAllCulled(scene, true);
    

    You can also call renderer.setTexture2D(texture, 0) to force a texture to be initialized.