WebGL Shader 中的十六进制到 RGB 值

Question

我正在开发一个应用程序，我想采用单个整数输入（基本上是一种颜色），并使用 WebGL 着色器为给定输入的框着色。我最初计划通过轮班和面罩的组合来做到这一点，如下所示：

uniform int u_color;

float rValue = (((u_color) >> 16) & 0xFF) / 255.0;
float gValue = (((u_color) >> 8) & 0xFF) / 255.0;
float bValue = ((u_color) & 0xFF) / 255.0;
gl_FragColor = vec4(rValue, gValue, bValue, 1.0);

因此给定 int 0xFF33CC，红色=1.0，绿色=0.2，蓝色=0.8

但是，我遇到了一个问题，发现 WebGL 着色器无法执行按位移位。

我想知道如何从给定的整数有效地生成正确的 FragColor（如果可能的话）。

编辑：经过一番尝试和错误，感谢@Jongware，我想出了一个解决方案

uniform int u_color;
float rValue = float(u_color / 256 / 256);
float gValue = float(u_color / 256 - int(rValue * 256.0));
float bValue = float(u_color - int(rValue * 256.0 * 256.0) - int(gValue * 256.0));
gl_FragColor = vec4(rValue / 255.0, gValue / 255.0, bValue / 255.0, 1.0);

除了清理之外，这段代码非常适合这项工作，但是我总是对与上述方法不同的任何其他方法感兴趣。

Answer 1

要添加自己的答案，请考虑继续使用整数数学直到最后。

uniform int u_color;
unsigned rIntValue = (u_color / 256 / 256) % 256;
unsigned gIntValue = (u_color / 256      ) % 256;
unsigned bIntValue = (u_color            ) % 256;
gl_FragColor = vec4(rIntValue / 255.0f, gIntValue / 255.0f, bIntValue / 255.0f, 1.0);

Answer 2

我知道这已经晚了，但在类似的情况下，我需要将 0-255

RGB

值转换为

webGL

颜色范围（即小数）的 0-1 空间。

只需将颜色值乘以

1/255

例如RGB(100, 115, 128) 的 RGB 值可以写为 RGB(100 / 255, 115 / 255, 128 / 255)

自

multiplication is faster than division

以来，以下内容更加高效：

RGB(100 * 0.00392156862, 115 * 0.00392156862, 128 * 0.00392156862);