Создание нескольких текстур webgl в Chrome

Question

У меня есть две модели, которые я загрузил, и с разными текстурами. Все отлично работает на Firefox, я могу применять обе текстуры к каждому объекту. Однако в Chrome вторая текстура никогда не появляется. Я очень упростил свой код и обнаружил, что он, вероятно, имеет какое-то отношение к тому, как я загружаю свои текстуры.

function texture() { 
    this.texture = null; 
} 

texture.prototype.loadTexture = function(gl, img) { 
    gl.bindTexture(gl.TEXTURE_2D, this.texture); 
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); 
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img); 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 
    gl.bindTexture(gl.TEXTURE_2D, null); 
} 

texture.prototype.load = function(gl, name) { 
    this.texture = gl.createTexture(); 
    var img = new Image(); 
    that = this; 
    img.onload = function() { 
     that.loadTexture(gl, img); 
    } 
    img.src = name; 
} 

Путь создать новую текстуру является:

var texture = new texture(); 
texture.load(gl, "foo.bar"); 

Когда я сделать каждую модель отдельно, это делает их должным образом. Проблема в том, что я использую обе модели в одной и той же сцене. У меня нет этой проблемы с Firefox. Я создал массив из 2 текстур, используя вышеупомянутый метод, и заставил обе модели визуализировать первую текстуру. Это прекрасно работает. Однако, когда я делаю вторую текстуру, в Chrome ничего не происходит, но она работает на Firefox. Chrome на самом деле делает много непредсказуемых вещей, в зависимости от того, какая текстура была загружена первой, и какая текстура заставляю обе модели использовать. В общем, Chrome выбрасывает «ПРЕДУПРЕЖДЕНИЕ RENDER: текстура, привязанная к текстурному блоку 0, не является рендерируемой»

Таким образом, это заставляет меня думать, что что-то не так в том, как я загружаю свои текстуры. Поэтому мой вопрос: правильно ли это загружать текстуры? Я получил это из онлайн-учебника, и они, похоже, только используют 1 текстуру/модель за раз. Я запускаю Chromium для Linux, я еще не тестировал в Windows (если это помогает).

Answer 1

После нескольких исследований я решил свою проблему. Я использовал функцию загрузки с сайта разработчика Mozilla: https://developer.mozilla.org/en-US/docs/Web/WebGL/Using_textures_in_WebGL

Единственная разница между этим и моим кодом заключается в том, что версия Mozilla использует функцию, тогда как я использую объект (я также не искал свою текстуру, но я не знаю, думаю, что это проблема).

Так что теперь я смущен, почему это работает, но моя первоначальная реализация не делает.

Answer 2

Если вы не генерируете mips, тогда вы не настраиваете фильтрацию текстур, чтобы не нуждаться в mips, тогда ваши текстуры НЕ ДОЛЖНЫ ОКАЗЫВАТЬ. Если это ошибка в браузере. Код, который у вас выше, предполагает наличие mips. Чтобы отключить необходимость трудоемкости набор текстур обертывание для CLAMP_TO_EDGE и установить фильтрацию NEAREST или LINEAR (эта часть вы уже делали)

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 

Answer 3

Эта линия

that = this; 

задавливает глобальную переменную в второй раз, когда вы это называете.