WebGL - drawElements：纹理是非功率纹理或不是mipmap完成

我正在绘制<video>到webgl画布上。我有它在铬和Firefox的工作，但IE11似乎是抛出一个错误。该错误提示：WebGL - drawElements：纹理是非功率纹理或不是mipmap完成

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

，指的是这个特定的行：

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

我有一个更新我的画布环运行。我读过这个错误可能是由于图像未准备好或加载而导致的。这是我的循环：

(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); 
};

来源

2015-08-28 Ronnie

如果问题确实该视频是不是装的，你可以一个标志添加到您的视频，以表明视频加载

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); 
    } 
}

来源

2015-08-28 23:39:10

这不起作用遗憾 – Ronnie

的错误意味着您当前使用的质地是不是2的幂和WebGL有限的2纹理支持非权力。特别是，你不能生成具有2个纹理的非功率的mip贴图，也不能将它们设置为重复。

奇怪的是，您正在使用gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);，它肯定不使用mip贴图，而且您也使用gl.CLAMP_TO_EDGE。也许这是一个与IE浏览器的错误？

来源

2015-08-29 04:27:47

我明白错误意思是纹理不能被二整除。我需要知道如何解决它。我只能在IE11中找到一个可用的WebGL视频演示：http://plugincc.fabiobiondi.com/assets/videogl/demo/大多数其他WebGL视频演示在IE11中不起作用。 – Ronnie

尝试将MIN_FILTER设置为gl.NEAREST，尝试使用2个纹理的实际功率（使您的画布功率为2），在texImage2D中使用gl.RGBA尝试。如果他们都没有工作，那么你将不得不做实验。 –

不，不工作。 gl.NEAREST在所有浏览器中都打破了。我没有注意到RGB和RGBA之间的区别。我认为这是IE11中的一个错误，需要很长时间才能修复。 https://connect.microsoft.com/IE/feedback/details/927217/webgl-video-texture-support-is-broken-possible-regression – Ronnie

也许你会遇到一些规模问题，但你可以使用512 * 512或1024 * 512等视频格式，这将解决你的问题，你的兼容性问题，你也可以将视频以正确的大小包含在视频中一些视频转换器或一些视频编辑工具。为了不失去你的源视频的比例

来源

2016-02-19 09:47:06

WebGL - drawElements：纹理是非功率纹理或不是mipmap完成

回答

相关问题