javascript - WebGL - 绘制元素 : The texture is a non-power-of-two texture or not mipmap complete

Question

我正在画一个<video>到 webgl Canvas 上。我可以在 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循环运行正在更新我的 Canvas 。我读过此错误可能是由于图像未准备好或加载造成的。这是我的循环:

(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 Canvas :

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