CODEWITHSUNDEEP
graphicscolorswebglcolor-scheme
Ωmega
Ωmega

Reputation: 43703

WebGL color mix calculation

What is WebGL color mix calculation algorithm? I need to draw quadrangle with 4-way gradient color fill and I decided to do it with 3-way gradient triangles (like this), calculating the center of quadrangle and using such point for 4 triangles to get the best result of gradient smoothness. To do it right, I need to calculate the color of the center of quadrangle by same way as WebGL calculates color mix for 3-way gradient fill. What is the formular for such calculation?

Upvotes: 1

Views: 3079

Answers (1)

Kevin Reid
Kevin Reid

Reputation: 43902

WebGL uses linear interpolation for vertex attributes. The formula for interpolating a value across a square given samples at the four corners is simply linear interpolation applied twice. In GLSL,

mix(mix(color00, color01, y), mix(color10, color11, y), x)

If you are interested in the center point in particular, this is just

0.25 * (color00 + color01 + color10 + color11)

However, if your goal is to interpolate the four colors smoothly across a square, in a WebGL application, then you don't actually need to perform this calculation yourself, and you don't need to use four triangles!

  1. Create a 2×2 texture with your four colors.
  2. Set its TEXTURE_MAG_FILTER to LINEAR.
  3. Draw your square with that texture applied in the usual fashion, but with texture coordinates ranging from 0.25 to 0.75.

This performs the same interpolation you're looking for, but using built-in facilities. If you wanted, you could also skip using a texture, but still have “texture” coordinates, and use the mix formula above to map the coordinates to your four colors.

The reason this works is that texture coordinates, unlike arbitrary colors, are such that linearly interpolating between 3 points gives you non-degenerate results which you can then use to lookup the color taking into consideration all 4 color values.

Upvotes: 5

Related Questions