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

Question

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

我想使用 webGl 来执行 compression/decompression，因为它的速度更快。然而，据我所知，webGl 在它可以计算的数学类型方面有些局限。

所以我的问题是，是否可以将下面的 "logic" 移植到 webgl 中，而不是运行使用普通 javascript 的计算？

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

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

这个数组中的模式是从 1 开始计数，但有时它会跳过几个数字然后重新开始。我利用此模式的方法是将此单个数组转换为 2 个数组。

第一个数组跟踪 "where" 个数字 "jump"。第二个数组在每次跳跃后跟踪第一个数字，所以我知道从哪里开始再次计数。

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

我 "rebuild" 使用 canvas 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 中复制的主要逻辑是如何更快地构建最终数组 "speed" 然后我通读构建它的前 2 个数组。

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

非常感谢！

Answer 1

However is there anyway to make it read a certain pixel based on the data already stored in another array?

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);

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

Is it possible for webgl to use logic when processing pixels

javascript

canvas

webgl