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

Is it possible for webgl to use logic when processing pixels

本文关键字：可以使 是否 处理 像素 webgl      更新时间：2023-09-26

我正在做一个尝试压缩数据数组的项目。 到目前为止，我一直在使用 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

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

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

非常感谢！

但是，无论如何都可以使其根据已经存储在另一个数组中的数据读取某个像素？

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);
相关文章：