如果您必须使用 `new Image` 在 WebGL 中渲染图像

Question

我见过的WebGL绘制图片的例子都是用DOM图片对象：

var image = new Image();
image.src = "resources/f-texture.png";
image.addEventListener('load', function() {
  // Now that the image has loaded make copy it to the texture.
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,gl.UNSIGNED_BYTE, image);
  gl.generateMipmap(gl.TEXTURE_2D);
});

想知道是否有任何方法可以将像素放在 ArrayBuffer 或其他东西中，而不是使用 Image 对象，然后将其绘制为图像。如果是这样，一般想知道代码看起来像完成那个。那太好了，因为这样我也可以将像素数据用于其他用途，因此不会重复下载图像像素数据。

Answer 1

你应该read some tutorials on WebGL

是的，您可以从 ArrayBuffer 加载数据到纹理

gl.bindTexure(gl.TEXTURE_2D, tex);
const data = new Uint32Array([
   255, 0, 0, 255, // red
   0, 255, 0, 255, // green
   0, 0, 255, 255, // blue
   255, 255, 0, 255, // yellow
]);
const level = 0;
const internalFormat = gl.RGBA;
const width = 2;
const height = 2;
const border = 0;
const format = gl.RGBA;
const type = gl.UNSIGNED_BYTE
gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, width, height, border,
              format, type, data);
gl.generateMipmap(gl.TEXTURE_2D);

如果您必须使用 `new Image` 在 WebGL 中渲染图像

If you have to use `new Image` to render an image in WebGL

browser

image

pixel

webgl