WebGL - drawElements: Текстура не имеет текстуры или не заполнена mipmap

Question

Я рисую <video> на холсте webgl. У меня он работает в chrome и firefox, но IE11, похоже, выдает ошибку. Ошибка гласит:

drawElements: The texture is a non-power-of-two texture or not mipmap complete 

и относится к этой конкретной линии:

gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); 

У меня работает с requestAnimationFrame цикла, который обновляет свой холст. Я прочитал, что эта ошибка может быть вызвана тем, что изображение не готово или не загружено. Вот моя петля:

(function loop() 
{ 
    if (!$this.paused && !$this.ended) 
    { 

    gl.clear(gl.COLOR_BUFFER_BIT); 

    gl.activeTexture(gl.TEXTURE0); 
    gl.bindTexture(gl.TEXTURE_2D, tex); 

    if (!$this.paused && !$this.ended) 
    { 
     try 
     { 
     // update the video frame 
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, player); 
     } 
     catch(e) 
     { 
     log(e); 
     } 
    } 

    gl.bindBuffer(gl.ARRAY_BUFFER, vx); 
    gl.vertexAttribPointer(vx_ptr, 2, gl.FLOAT, false, 0, 0); 

    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ix); 
    gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); 
    window.requestAnimationFrame(loop); 
    } 
})(); 

Что, по-видимому, вызывает это? Я искал не повезло. До моего цикла работает, я настроить WebGL холст с этим кодом:

$scope.prepWebGL = function() 
{ 
     // prepare visible WebGL 
     vs = gl.createShader(gl.VERTEX_SHADER); 
     gl.shaderSource(vs, "attribute vec2 vx;varying vec2 tx;void main(){gl_Position=vec4(vx.x*2.0-1.0,1.0-vx.y*2.0,0,1);tx=vx;}"); 
     gl.compileShader(vs); 

     ps = gl.createShader(gl.FRAGMENT_SHADER); 
     gl.shaderSource(ps, "precision mediump float;uniform sampler2D sm;varying vec2 tx;void main(){gl_FragColor=texture2D(sm,tx);}"); 
     gl.compileShader(ps); 

     shader = gl.createProgram(); 
     gl.attachShader(shader, vs); 
     gl.attachShader(shader, ps); 
     gl.linkProgram(shader); 
     gl.useProgram(shader); 

     vx_ptr = gl.getAttribLocation(shader, "vx"); 
     gl.enableVertexAttribArray(vx_ptr); 
     gl.uniform1i(gl.getUniformLocation(shader, "sm"), 0); 

     vx = gl.createBuffer(); 
     gl.bindBuffer(gl.ARRAY_BUFFER, vx); 
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0,0, 1,0, 1,1, 0,1]), gl.STATIC_DRAW); 

     ix = gl.createBuffer(); 
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ix); 
     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0,1,2, 0,2,3]), gl.STATIC_DRAW); 

     tex = gl.createTexture(); 
     gl.bindTexture(gl.TEXTURE_2D, tex); 
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T,  gl.CLAMP_TO_EDGE); 
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S,  gl.CLAMP_TO_EDGE); 
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 
}; 

Answer 1

Если проблема на самом деле, что видео не загружается, вы можете добавить флаг видео, чтобы показать, что видео загружается

player.loaded = false; 
player.onload = function() { 
    this.loaded = true; 
} 

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

if (!$this.paused && !$this.ended && player.loaded) 
{ 
    try 
    { 
    // update the video frame 
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, player); 
    } 
    catch(e) 
    { 
    log(e); 
    } 
} 

Answer 2

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

Странно, что вы используете gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);, которые, предположительно, не используют карты mip, и вы используете gl.CLAMP_TO_EDGE. Возможно, это ошибка с IE?

Answer 3

Возможно, у вас будет какая-то проблема с масштабом, но вы можете использовать видеоформаты, такие как 512 * 512 или 1024 * 512, что решит вашу проблему с вашей проблемой совместимости, вы также можете включить свое видео в видео в правильном размере с помощью некоторые видеоконвертеры или некоторые средства редактирования видео. Чтобы не потерять коэффициент масштабирования вашего исходного видео