RENDER WARNING: texture bound to texture unit 0 is not renderable. 它可能是非power-of-2或有不兼容的纹理过滤（可能）？

Question

我试图在WebGL中渲染没有动画的二维图像。我发现了这个问题。因为我已经传递了正确的图像数据。下面是代码，我缺少了什么？或者如何渲染文字或图像。

没有矩阵就不能渲染图像或文本吗？当我说图像或文本时，它意味着它是纯粹的2D而不是3D。

const vsSource = `
attribute vec4 a_position;
attribute vec2 a_texcoord;

uniform mat4 u_matrix;

varying vec2 v_texcoord;

void main() {
  gl_Position = u_matrix * a_position;
  v_texcoord = a_texcoord;
}
`;

// Fragment shader program

const fsSource = `
precision mediump float;

varying vec2 v_texcoord;

uniform sampler2D u_texture;

void main() {
  gl_FragColor = texture2D(u_texture, v_texcoord);
}
`;


function loadTexture(gl, url) {
  var texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);


  var textureInfo = {
    width: 1, // we don't know the size until it loads
    height: 1,
    texture: texture,
  };
  var img = new Image();
  img.src = url;
  //img.crossOrigin="*"
  img.addEventListener('load', function() {
    textureInfo.width = img.width;
    textureInfo.height = img.height;

    gl.bindTexture(gl.TEXTURE_2D, textureInfo.texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    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);
  });

  return textureInfo;
}


drawImage(texture);

function drawImage(tex) {
  // gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

  gl.clear(gl.COLOR_BUFFER_BIT);

  gl.clearColor(1, 1, 0.0, 1.0); // Clear to black, fully opaque
  //  gl.clearDepth(1.0);                 // Clear everything
  // gl.enable(gl.DEPTH_TEST);           // Enable depth testing
  //  gl.depthFunc(gl.LEQUAL);  
  var positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

  // Put a unit quad in the buffer
  var positions = [
    0, 0,
    0, 1,
    1, 0,
    1, 0,
    0, 1,
    1, 1,
  ];
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

  var texcoordBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer);

  // Put texcoords in the buffer
  var texcoords = [
    0, 0,
    0, 1,
    1, 0,
    1, 0,
    0, 1,
    1, 1,
  ];
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texcoords), gl.STATIC_DRAW);

  gl.bindTexture(gl.TEXTURE_2D, tex.texture);

  // Tell WebGL to use our shader program pair
  gl.useProgram(programInfo.program);

  // Setup the attributes to pull data from our buffers
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);

  gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition, 2, gl.FLOAT, false, 0, 0);
  gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer);

  gl.enableVertexAttribArray(programInfo.attribLocations.textureCoord);
  gl.vertexAttribPointer(programInfo.attribLocations.textureCoord, 2, gl.FLOAT, false, 0, 0);

  gl.uniform1i(programInfo.uniformLocations.textureLocation, 0);

  >
  Here getting issue


  gl.drawArrays(gl.TRIANGLES, 0, 6);
}

Answer 1

你的代码从来没有创建一个纹理。它从来没有调用 loadImage. 如果它真的打电话 loadImage 代码在图像加载后没有绘制。

我建议你调用 loadImage 并在里面 load 处理程序，您调用 drawImage.

我还建议你用一个像素来初始化纹理，这样如果你碰巧想在图像加载之前画画，它就可以立即使用。这就是 本文不