1

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

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

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

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

4

1 回答 1

2

从 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);
  });
}
于 2018-02-01T14:58:13.830 回答