渲染警告:绑定到纹理单元 0 的纹理不可渲染.它可能是非 2 次方或具有不兼容的纹理过滤(也许)?

Question

我正在尝试在WebGL中渲染2d图像，没有动画。我遇到了问题。因为我已经传递了正确的图像数据。这是代码。我错过了什么？或者如何呈现文本或图像。

没有矩阵，我们不能渲染图像或文本吗？ 当我说图像或文本时，这意味着它是纯粹的 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.

我还建议您使用单个像素初始化纹理，这样如果您碰巧想在图像加载之前绘制，则可以立即使用它。这就是本文所做的