After much, much longer than I’d like to admit, I finally got “sliced” coloring to work! Naturally we need a better name, but that can wait.

A bit on implementation

So, for Kolori, we use OpenGL to render scenes on the GPU. Specifically, we target at minimum desktop OpenGL 3.3, and the GLSL shaders are written for GL ES 3.0 (we plan to target WebGL in the future, maybe moving to WebGPU later. Maybe.). We implement the “slices” coloring mode as follows:

• The user inputs a list of colors
• We store these colors as a variable-length array (VLA) which can grow dynamically
• but, instead of giving these values to the GPU as an array, we instead upload the color data onto the GPU as a one-dimensional texture, since GLSL doesnt support VLAs (and I didn’t want to limit the amount of colors one can add).

Though, I did still do that inadvertently. Slice colors are managed by color edit widgets. Each widget’s ID (which must be unique) is generated using the index of the slice color it controls, casted to a byte. Thus, the number of colors cannot exceed 256. Something I hope to fix in the future.

Also, an interesting note: GLSL for GLES 3.0 doesn’t support the sampler1D type (which literally represents a 1D texture), so one would have to use the type that represents a 2D texture, but set the height of the texture to 1, to emulate the same behavior and structure.

This means that there are now two textures we handle in the shaders: the image texture that holds a user-uploaded image for the “Use an Image” coloring mode, and the slices texture that holds the selected colors for the “(Pizza) Slices” coloring mode.

OK, but why’d you take so long?

The major obstacle that was ran into was texture data mix-up: the data for the image texture would always overwrite the data for the slices texture, and it would even seem that the two textures were pointing to the same data, even though I assigned separate texture units to each one, and made sure to set the active texture each time before binding textures.

OK, can I see it?

See the demo below :)

They don’t really start to look like “pizza slices” until you have 5+ slices. There are some really interesting graphs you can create using this, such as the graph of the Joukowski function, defined as: f(z)=(z+1/z)/2 (unfortunately not pictured below).