Improve performance and resolution

[ai]

Let’s backport optimizations from OKLCH color picker. It will allow improving <canvas> resolution.

I am creating this issue to refer it later for other developers.

[dokozero]

Thanks for the help! For any developer that would like to work on it:

I already use imageData to render the color picker (in "renderImageData.ts") but as I see, the main optimization would be on the resolution of the image.

For now, it's on full scale only for OkLCH, you can see it in the "constants.ts" file with the var "LOW_RES_FACTOR_OKLCH". We can see that if we set it to 2 or 1.5 the plugin get faster.

I use 1 and not a higher value as the border of the OkLCH would become too blurry, but if we can have a factor of 2 or 1.5 for inside the triangle and 1 only for its border, it would be a good optimization if I'm not mistaken.

[freydev]

#5

Apparently, the main optimization mechanism in OKLCH Picker is distributing the load among a group of workers, but Figma currently has serious limitations for using workers. I couldn't find a way to use them, so I thought of writing a shader for displaying color mappings. Now they are extremely fast, tenths of milliseconds at a resolution of 1200x1200.

There's just one issue: I haven't yet figured out how to calculate when to draw a white pixel for the P3 boundary. So, I just slightly increased the color gamma beyond the sRGB space. If that's okay, everything works like a charm.

[ai]

Apparently, the main optimization mechanism in OKLCH Picker is distributing the load among a group of workers

No, but this is the main optimization.

Other main optimization:

1. Using ImageData instead of ctx.rect()
2. Combine all color math to avoid doing the same job multiple times
3. Draw only border of OKLCH space in full resolution. Inside the shape use 2×2 or 2×1 blocks.