Question

我使用twgl在webgl中渲染一些图像。我需要动态地将Image添加到这个2d Textures数组中。我正在使用twgl.createTexture函数执行此操作，直到知道但存在问题。在我将一些新图像推送到我的图像数组并调用twgl.createTexture将其传递给webgl之后，然后渲染我的对象，图像将无法正确显示，而不是图像，将出现蓝色方块。当我再次手动渲染它时它是正确的，并且在再次使用twgl.createTexture之前它不会中断。

我认为这是因为这个函数会创建一个新的webglTexture而不是更新前一个

我想知道有没有办法用最后一个将一些新图像推入其中的特殊数组来更新最后一个纹理？

**当我说图像时我的意思是base64字符串或加载和缓存的网址**

Answer 1

从v4.4.0开始，没有办法。 twgl只是帮手，它不会做任何事情所以你总是可以手动完成。

function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = resolve;
    img.onerror = reject;
    img.src = url;
  };
});

function updateSlice(gl, texture, slice, img, options);
  const format = options.format || gl.RGBA; 
  const type = options.type || gl.UNSIGNED.BYTE;
  const level = options.level || 0;

  gl.bindTexture(gl.TEXTURE_2D_ARRAY, texture);
  gl.texSubImage3D(gl.TEXTURE_2D_ARRAY, level, 0, 0, slice, img.width, img.height, 1,
                   format, type, img);
  gl.generateMipmap(gl.TEXTURE_2D_ARRAY);
}

function updateSliceFromImage(gl, texture, slice, url, options) {
  loadImage(url)
  .then((e) => {
    updateSlice(gl, texture, slice, e.target, options);
  });
}

通过twgl.js更新webgl中的texture_2d_array

1 个答案: