在WebGL着色器中将十六进制转换为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);

除了清理一下代码，这段代码非常适合这个任务，但我始终对除上述方法之外的其他方法感兴趣。

- Alex Roth

---

没有位移操作，你可以使用 / 256 和 / 65536。 （但请检查是否会自动将您的数字转换为浮点数。如果是，则还需要使用模运算符 % 而不是 &。） - Jongware

谢谢，你建议的时候我正在处理这个问题！ - Alex Roth

这似乎是普遍接受的答案：https://dev59.com/dWMl5IYBdhLWcg3wXWET。就“效率”而言，我希望您的常量能够被片段编译器折叠。 - Jongware

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

- chux - Reinstate Monica

---

无论我使用浮点数还是整数，都会出现“仅支持GLSL ES 3.0及以上版本的整数模运算符”错误。 - Curtis

@Curtis 这是一个 C 语言的解决方案，因为问题标记为 C。这个链接可能会有所帮助。 - chux - Reinstate Monica