WebGL警告：drawArraysInstanced：单元0的TEXTURE_2D不完整：“ level_base”的尺寸并不全为正数

Question

我正在尝试在webgl上使用纹理。

导入此图像的代码是：

var image = new Image();  // Create the image object
image.onload = loadTexture(gl, n, texture, u_Sampler, image);
image.crossOrigin = "";
image.src = 'beacon.png';

function loadTexture(gl, n, texture, u_Sampler, image) {
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); // Flip the image's y axis
  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
  gl.uniform1i(u_Sampler, 0);
  gl.clear(gl.COLOR_BUFFER_BIT);   // Clear <canvas>
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, n); // Draw the rectangle
}

包括line image.crossOrigin =“”阻止了CORS错误在firefox中显示（但在chrome中不显示？但是在页面尝试加载时，firefox确实给出了另外三个警告：

unreachable code after return statement

^即使从程序中删除了所有return语句，也会发生这种情况。

Exceeded 16 live WebGL contexts for this principal, losing the least recently used one.

和

WebGL warning: drawArraysInstanced: TEXTURE_2D at unit 0 is incomplete: The dimensions of `level_base` are not all positive.

未加载纹理，画布显示为黑色正方形

Answer 1

您通常需要run a server for images in WebGL。

如果您的图像位于同一域中，则应不是设置crossDomain。如果它在不同的域上，那么您应该，尽管服务器仍然需要授予使用该图像的权限。参见this

否则，代码会有一些问题

1. 实际上不是在图像上设置onload回调

   此行

   image.onload = loadTexture(gl, n, texture, u_Sampler, image);
   

   在功能上等同于

   const result = loadTexture(gl, n, texture, u_Sampler, image);
   image.onload = result;
   

   该行必须是这样的，以便loadTexture在图片加载之后调用，而不是在之前

   image.onload = () => loadTexture(gl, n, texture, u_Sampler, image);
   

2. 您可能需要将换行设置为CLAMP_TO_EDGE

   // these two lines needed in WebGL1 but not WebGL2 if the image is not
   // power of 2 in both dimension
   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);
   

   您的标题通过提及drawAraysInstanced来建议您使用WebGL2，但您发布的代码未使用该代码，并且未标记webgl2

const vs = `
void main() {
  gl_Position = vec4(0, 0, 0, 1);
  gl_PointSize = 100.0;
}
`;

const fs = `
precision mediump float;
uniform sampler2D u_Sampler;
void main() {
  gl_FragColor = texture2D(u_Sampler, gl_PointCoord.xy);
}
`;

const gl = document.querySelector('canvas').getContext('webgl');
const prg = twgl.createProgram(gl, [vs, fs]);
const u_Sampler = gl.getUniformLocation(prg, 'u_Sampler');

gl.useProgram(prg);

const texture = gl.createTexture();
const n = 4;

var image = new Image();  // Create the image object
image.onload = () => loadTexture(gl, n, texture, u_Sampler, image);
image.crossOrigin = "";
image.src = 'https://i.imgur.com/ZKMnXce.png';

function loadTexture(gl, n, texture, u_Sampler, image) {
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); // Flip the image's y axis
  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
// these two lines needed in WebGL1 but not WebGL2
// if the image is not power-of-2 in both dimensions
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);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
  gl.uniform1i(u_Sampler, 0);
  gl.clear(gl.COLOR_BUFFER_BIT);   // Clear <canvas>
  //gl.drawArrays(gl.TRIANGLE_STRIP, 0, n); // Draw the rectangle
  gl.drawArrays(gl.POINTS, 0, 1);
}

<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>
<canvas></canvas>

关于其他警告。

返回语句后无法访问的代码

您没有发布足够的代码来找到该警告，但它的含义与所说的完全一样。例如

function foo() {
  return;
  console.log('here');
}

将生成该警告

超过此主体的16个实时WebGL上下文，丢失了最近最少使用的上下文。

这可以说是a bug in Firefox，尽管如果代码很糟糕（例如，如果它正在循环中创建画布和上下文），则存在此警告的合法情况。通常，它会像在Web开发期间一样，将页面重新加载17次。希望Firefox将对其进行修复，以便仅在合法时显示警告。