CODEWITHSUNDEEP
chtmlopengl-eswebglfragment-shader
Alex Roth
Alex Roth

Reputation: 162

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.

Upvotes: 6

Views: 9885

Answers (2)

David Syengo
David Syengo

Reputation: 29

I know this is late but was in similar situation where I needed to convert the 0-255 RGB values into a 0-1 space for the webGL color range (which is decimals).

just multiply the color value by 1/255 e.g. an RGB value of RGB(100, 115, 128) can be written as RGB(100 / 255, 115 / 255, 128 / 255)

Since multiplication is faster than division, the below is more efficient:

RGB(100 * 0.00392156862, 115 * 0.00392156862, 128 * 0.00392156862);

Upvotes: 0

chux
chux

Reputation: 154090

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

Upvotes: 7

Related Questions