WebGL текстуры вопрос в Firefox

Question

Я пытаюсь присвоить изображение в текстуру, а иногда это вызывает следующие сообщения об ошибках:

WebGL: texImage2D: Не удалось получить данные из DOM элемента. Неявная ширина и высота загрузки для этого будет нулевой

WebGL: drawElements: Активные текстуры 0 для целевой 0x0de1 является «неполным», и будут оказаны, как RGBA (0,0,0,1), согласно GLES 2.0.24 $ 3.8.2: Размеры level_base не все положительные

Когда я перезагружаю страницу, текстура появляется нормально.

Я понял, что это происходит только в Firefox, и кажется, что изображение не обрабатывается полностью. Есть ли способ проверить изображение, готовое к обработке, или обходной путь для этой проблемы.

Спасибо заранее и извините за мой плохой английский.

UPDATE: создать структуру с довольно сложной архитектурой, так что это очень упрощенная версия кода:

1. создать текстуру оболочку, которая содержит экземпляр объекта WebGL текстуры.

function Texture (gl) { 
// Here the texture does not keep any data. 
this.texture = gl.createTexture(); 

};

2. Когда это необходимо текстура получает экземпляр изображения и выполняет процедуру инициализации по умолчанию:

function initializeTexture (image) { 
gl.bindTexture(gl.TEXTURE_2D, this.texture); 

// Set pixel storing mode. 
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY); 

// Pass image data into the texture. 
gl.texImage2D(gl.TEXTURE_2D, 0, this.format, this.format, this.type, image); 

// Handle mipmapping option. 
if (this.enableMipmap && 
    Math.isPowerOfTwo(this.width) && 
    Math.isPowerOfTwo(this.height)) { 
    gl.generateMipmap(gl.TEXTURE_2D); 
} 

// Set filtering modes. 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, this.magFilter); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, this.minFilter); 

// Set wrapping modes. 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, this.wrapS); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, this.wrapT); 

// Unbind the texture. 
gl.bindTexture(gl.TEXTURE_2D, null); 

}

3. В игровом цикле есть еще один набор действий по умолчанию:

function applyTexture (value) { 
// Pass the texture into shader program. 
gl.uniform1i(uniform.location, uniform.id); 

// Activate the texture. 
gl.activeTexture(gl.TEXTURE0 + uniform.id); 

// Bind passed texture. 
gl.bindTexture(gl.TEXTURE_2D, value.texture); 

};

Answer 1

WebGL: texImage2D: Не удалось получить данные из элемента DOM. Неявная ширина и высота для этой загрузки будут равны

Это просто: texImage2D не смог получить данные из вашего элемента изображения. Обычно это происходит потому, что изображение еще не загрузило текущий ток src.

Когда я перезагружаю страницу, текстура появляется нормально.

Эта ошибка обычно возникает из-за неправильного ожидания загрузки изображения, так как при последующих нагрузках данные изображения обычно извлекаются из кеша http, что приводит к почти мгновенной загрузке.

Есть ли способ проверить изображение, готовое к обработке или обходное решение для этой проблемы.

'нагрузка' событие, так как связаны @gman: WebGL - wait for texture to load