通过像素解包缓冲区将纹理图集转换为纹理阵列

我有两个问题:

首先,在WebGL中,有没有比我下面所做的更直接、更合理的方法从纹理图集图像到纹理数组?我还没有尝试过这个,但是完全在WebGL中完成它似乎是可能的,尽管这是工作的四倍,而且我仍然需要两次往返到GPU才能完成。

我说得对吗 缓冲区数据 对于 texImage3D() 一定是从哪里来的 PIXEL_UNPACK_BUFFER ,该数据必须直接来自CPU端?也就是说,无法从一块GPU内存复制到另一块 像素解包缓冲区 不需要先将其复制到CPU。我很确定答案是“不”。

以防我的问题本身 愚蠢的 (可能是这样),我的最终目标是将纹理图集PNG转换为纹理阵列。根据我的尝试,到目前为止最快的方法是通过 像素解包缓冲区 ,而不是提取每个子图像并一次发送一个,这对于大型地图集来说非常缓慢。

这就是我目前获取像素数据的基本方式。

const imageToBinary = async (image: HTMLImageElement) => {
    const canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;

    const context = canvas.getContext('2d');
    context.drawImage(image, 0, 0);

    const imageData = context.getImageData(0, 0, image.width, image.height);

    return imageData.data;
};

所以,我正在创建一个HTMLImageElement对象,它包含我想要的未压缩像素数据,但没有直接获取它的方法。然后我再次创建一个包含相同像素数据的2D上下文版本。然后我第三次用相同的像素数据重新填充GPU。对我来说似乎很疯狂,但我看不到解决的办法。