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完成

回答

相關問題