chtmlopengl-eswebglfragment-shader

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.


Solution

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