WebGL 着色器中的十六进制转 RGB 值答案

【问题标题】：Hexadecimal to RGB values in WebGL ShaderWebGL 着色器中的十六进制转 RGB 值
【发布时间】：2014-04-06 14:15:58
【问题描述】：

我正在开发一个应用程序，我想采用单个整数输入（基本上是一种颜色），并使用 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, red=1.0, green=0.2, blue=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);

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

【问题讨论】：

没有位移，你可以使用/ 256和/ 65536。（但请检查这是否不会自动将您的数字转换为浮点数。如果是，您可能还需要使用 mod % 而不是 &。）
谢谢，当你提出这个建议时，我实际上正在努力！
这似乎是普遍接受的答案：stackoverflow.com/questions/18453302/…。随着“效率”的发展，我希望你的常量被片段编译器折叠。

标签： c html opengl-es webgl fragment-shader

【解决方案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);

【讨论】：

无论我使用的是浮点数还是整数，都会出现错误“仅在 GLSL ES 3.0 及更高版本中支持整数模运算符”。
@Curtis T'是一个 C 解决方案，因为问题被标记为 C。This 可能会有所帮助。