Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hexadecimal to RGB values in WebGL Shader

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.

like image 536
Alex Roth Avatar asked Oct 02 '22 02:10

Alex Roth


1 Answers

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);
like image 154
chux - Reinstate Monica Avatar answered Oct 13 '22 00:10

chux - Reinstate Monica