Search code examples
javascriptthree.jstexturesgpu

When is a Three.js Texture sent to the GPU?


I am building an application that dynamically loads images from a server to use as textures in the scene and I am working on how to load/unload these textures properly.

My simple question is; Where, in the Three.js call graph, does textures get loaded and/or updated into the GPU? Is it when I create a texture (var tex = new THREE.Texture()) or when I apply it to a mesh (var mesh = new THREE.Mesh(geom, mat))? The Texture class of Three suggests that textures are not loaded when creating the texture. But I cannot find anything in Mesh either.

Am I missing something? Are textures loaded in the render loop rather than on object creation? That would probably make sense.

Thanks in advance!


Solution

  • All GPU instructions have been abstracted away to the WebGLRenderer.

    This means the creation of any object within three.js will not interact with the GPU in the slightest until you call:

    renderer.render(scene, camera);
    

    This call will automatically setup all the relevant WebGL buffers, shaders, attributes, uniforms, textures, etc. So until that point in time, all three.js meshes with their materials and geometries are really just nicely abstracted objects, completely separated from the way they are rendered to the screen (why assume they will be rendered at all?).

    The main reason for this is that there are other renderers, such as the CanvasRenderer, which have an entirely different API.