如何在glsl / webgl中将一个32位整数打包成4个8位整数？

Question

我正在寻找并行化一些复杂的数学，而webgl看起来是做这件事的完美方式。问题是，你只能从纹理中读取8位整数。理想情况下，我希望从纹理中获得32位数字。我的想法是使用4个颜色通道来获得每像素32位，而不是4乘以8位。

我的问题是，glsl没有"%“运算符或任何按位运算符！

如何使用glsl中的运算符将32位数转换为4位8位数？

关于该技术的一些额外信息(使用按位运算符)：

How to store a 64 bit integer in two 32 bit integers and convert back again

Answer 1

可以通过乘以/除以2的幂来进行位移位移。

正如我在评论中指出的，我最初发布的方法是有效的，但不正确，here's one by Aras Pranckevičius，请注意，帖子中的源代码本身包含一个拼写错误，并且是HLSL，这是一个更正了拼写错误的GLSL端口：

const vec4 bitEnc = vec4(1.,255.,65025.,16581375.);
const vec4 bitDec = 1./bitEnc;
vec4 EncodeFloatRGBA (float v) {
    vec4 enc = bitEnc * v;
    enc = fract(enc);
    enc -= enc.yzww * vec2(1./255., 0.).xxxy;
    return enc;
}
float DecodeFloatRGBA (vec4 v) {
    return dot(v, bitDec);
}

Answer 2

在WebGl中如何处理这样的事情，每个人都是绝对正确的，但我想分享一个取值和取值的技巧。

假设您想对适合16位的两个值进行一些比较：

// Generate a list of random 16bit integers
let data16bit = new Uint16Array(1000000);
for(let i=0; i < data16bit.length; i+=2){
    data16bit[i]   = Math.random()*(2**16);
    data16bit[i+1] = Math.random()*(2**16);
}
// Read them one byte at a time, for writing to 
// WebGL
let texture = new Uint8Array(data16bit.buffer);

现在，当您在片段着色器中获取值时，可以拾取要操纵的数字：

vec4 here = texture2D(u_image, v_texCoord);
// Read the "red" byte and the "green" byte together (as a single thing) 
// as well as the "blue" byte and the "alpha" byte together as a single
// thing
vec2 a = here.rg;
vec2 b = here.ba;
// now compare the things
if(a == b){
    here.a = 1;
}
else{
    here.a = 0;
}
// return the boolean value
gl_FragColor = here;

这一点只是提醒你，你可以将同一块JavaScript内存视为不同的大小：Uint16Array和Uint8Array (而不是试图进行位移位并将其拆分)。

更新

为了响应更多详细信息请求，代码非常接近于直接从this code and explanation进行剪切/粘贴。

可以在GitLab上的相应samples (同一文件的两个部分)上找到它的确切用法