webgl在处理像素时是否可以使用逻辑

Question

我正在开展一个尝试压缩数据数组的项目。到目前为止，我一直在使用 Canvas 元素和 putImageData/getImageData 进行计算。我知道通常 Canvas 和 webGl 用于图像处理，但在这种情况下，我将像素值转换为我需要的数字，它工作正常。

我想使用 webGl 来执行压缩/解压缩，因为它提高了速度。然而，据我了解，webGl 在它可以计算的数学类型方面有些限制。

所以我的问题是，是否可以将以下“逻辑”移植到 webgl 中，而不是使用纯 JavaScript 运行计算？

这是我试图复制的逻辑。假设您有一个如下所示的数据数组：

1、2、3、4、5、10、11、12、13、16、17、18、19

这个数组的模式是它加 1，但偶尔会跳过几个数字然后重新开始。我利用这种模式的方法是将这个单个数组转换为 2 个数组。

第一个数组跟踪数字“跳跃”的“位置”。第二个数组跟踪每次跳跃后的第一个数字，所以我知道从哪里开始再次计数。

所以压缩后的数据如下所示： 第一个数组（存储跳跃的位置）：1、6、10 第二个数组（存储每次跳转的值）：1,10,16

我使用画布 imgData 处理“重建”原始数组的方式是使用 for 循环。程序如下所示：

//Setup some variables
var jumpDistance = 0;
var y = 0;

for(x = 0; x < 13; x ++){  //13 is the length of the original array

    jumpDistance = firstArray[y];
    originalArray[x] = originalArray[x] + secondArray [y];

    for(var jd = 1; jd < jumpDistance + 1; jd ++){
        originalArray[x + jd] = originalArray[x + jd] + 1;
    }

    y = y + 1;
    x = x + jumpDistance;
}

我希望在 webGl 中复制的主要逻辑是如何以更快的“速度”构建最终数组，然后通读构建它的前 2 个数组。

我知道 webGl 能够读取当前像素周围的其他像素。但是，无论如何让它根据已经存储在另一个数组中的数据读取某个像素？如果可以，请告诉我！

非常感谢！

Answer 1

但是有没有办法让它根据已经存储在另一个数组中的数据读取某个像素？

WebGL 使用纹理坐标从纹理（数据数组）中查找数据。因此，您可以使用一个纹理的结果来查找另一个纹理的数据。

// get a pixel from someTexture (a type of array)
vec4 pixel = texture2D(someTexture, someTextureCoordinate);

// use it to look up data from another texture (a type of array)
vec2 otherTexCoord = pixel.xy;  // OR whatever math you want
vec4 pixel2 = texture2D(someTexture2, otherTexCoord);