I'm working on an application where I would like to take a single integer input (basically a color) and, using WebGL shaders, color a box with the given input. I planned, originally, to do this with a combination of shifts & a mask as demonstrated below:
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);
so given the int 0xFF33CC, red=1.0, green=0.2, blue=0.8
However, I ran into a problem and found out that WebGL shaders can't perform bitwise shifts.
I'm wondering how would I be able to efficiently produce the proper FragColor from the given integer, if that's even possible.
EDIT: After a bit of trial and error, and thanks to @Jongware, I've come up with a solution
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);
Other than a clean up, this code is perfect for the job, however I'd always be interested in any other methods different from the one mentioned above.
To add to your own answer, consider staying with integer math until the end.
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);