如何在GLSL / WebGL的浮点数中存储状态标志

Question

我最近了解到storing boolean flags in integers using bitmasks。我想知道你怎么能这样做来存储和检索JavaScript的布尔标志，并存储和检索GLSL的标志。这需要浮点位掩码，而不是整数位掩码。这样我就可以在JavaScript中编码一些状态标志，然后在GLSL中解压缩它们。同样，如果我将数据写入GLSL中的像素作为状态标志，我可以在JavaScript中读出它们。

Answer 1

在WebGL2中的GLSL ES 3.0中，有些操作就像大多数语言一样

uint flags = ??;

...

bool flag1 = (flags & 0x1) > 0;
bool flag2 = (flags & 0x2) > 0;
bool flag3 = (flags & 0x4) > 0;

在WebGL1中，您可以将值修改为某个限制

float flags = ??;

bool flag1 = mod(flags, 2.0) > 0.;
bool flag2 = mod(floor(flags / 2.0), 2.0) > 0.;
bool flag3 = mod(floor(flags / 4.0), 2.0) > 0.;

只要flags是highp值并且是正整数值，这应该适用于前23位。

当然这取决于flags的来源。例如，如果您将标志存储为纹理或属性中的UNSIGNED_BYTE，那么您将把它们作为每个通道的8位值（红色，绿色，蓝色，alpha）拉出来。例如，8比特小于23比特的限制

vec4 flags = texture2D(textureWithFlags, someUV) * 255.0;

现在qazxsw poi或qazxsw poi是前8位，qazxsw poi是接下来的8位等。

要么

flags.r

你使用UNSIGNED_BYTE值和normalize = false设置属性，然后就像上面的每个标志通道一样，你的原始数据是8位

GLSL不鼓励分支。通常，如果要执行2个或更多不同的操作，而不是添加标记，请为每个变体编写或生成着色器。这是大多数3D引擎所做的，包括Unity，Unreal，Three.js等......

另一方面，有时，在适当的时候，你可以做一些事情，比如使用flags[0]和flags.g。例如

attribute vec4 flags;

上面的代码中没有分支。

以同样的方式

step

可以翻译成

mix