Question

How can I determine if a buffer has been allocated on GPU memory on three.js?

The first time that I call renderer.render(), it renders the mesh without textures (looks black) which makes me think that textures are not available yet on GPU memory when the function is called. After 5-10 calls, the texture appears on screen.

Why is this important? I’m triggering the render function just when the view needs updating. If a new model is loaded, the render function should wait until all the data is available for rendering.

How can I assure that all the data is ready to be used on the GPU?

Pseudo code:

textures = LoadTextures()
material = CreateMaterial(textures)
geometry = loader.load( "path/to/file" )

if( materialLoaded && geometryLoaded ) {
    needsUpdate = true
}

if( needsUpdate ) {
    renderer.render()
    needsUpdate = false
}

Answer 1

Textures are available on the GPU when image.onload is called. I put a flag there to determine whether a given image (loaded as texture) has been loaded or not.

LITEV.Texture = function( src )
{
    [...]
    this.loaded = false;
}

LITEV.Texture.prototype =
{
    load : function( path, callback, callbackError )
    {
        image.onload = function () 
        {
            [...]
            texture.needsUpdate = true; 
            if ( callback ) 
            {
                callback( this ); 
            }
            this.loaded = true;
            [...]
        }
    },
    [...]
}