Fixes #4 Shader for color mappings

[freydev]

Here's a shader that renders color mappings extremely quickly.
There's just one issue: I haven't yet figured out how to draw a white pixel for the P3 boundary. So, I just slightly increased the color gamma beyond the sRGB space. So maybe this okay.

[ai]

Sending PR with code style changes together with feature is not cool.

It is always better to keep the current formatting and send them in another PR.

[freydev]

yeah, it was some auto-changes, fixed

[ai]

There is a way to draw P3 colors in WebGL context (for instance, Three.js use it)

I found docs like:
https://ccameron-chromium.github.io/webgl-examples/p3.html

Do they help you?

As I understand there are 2 modes:

1. We have Figma in sRGB mode. In this case there is no sense to render P3 space.
2. We have Figma in P3 mode. In this case we should start <canvas> in the same P3 mode and RGB will be values in P3, not sRGB.

[freydev]

Yes, I've seen that documentation. There was no issue with displaying P3 colors. I added the canvas mode switch following the profile, but the problem was in displaying the boundary between sRGB and P3. I've figured out how to calculate this boundary in the shader. Now, everything is working as planned.

[ai]

@dokozero we are ready to check out PR! 🎉

[dokozero]

Hello,

Thanks a lot for your help @freydev, I tested your code and indeed it's superfast! From an average of 20ms to render one hue to 0.1ms and sometimes even less 🎉 (used performance.measure()).

The render is also much nicer on a 2x screen, that's perfect.

I know that Figma also uses WebGL for low level rendering and I can see why, we can now even use a value below 1 for LOW_RES_FACTOR_OKLCH, I might just rename it to RES_FACTOR_OKLCH 😉 .

However, I set it up to 0.25 instead because with 0.2 on a 1x screen, I get a result that is too pixelated. With 0.25, the result is good on both 1x and 2x screens:

I also modified this in the fragment shader code, from 0.002 to 0.003:

if (abs(c - maxChroma) < 0.003) {
    col = vec3(1, 1, 1);
}

With 0.002, the sRGB limit is discontinued (visible with a res factor of 1), leading to pixels not totally white with a smaller factor like 0.25.

But before merging, I want to check with you that my updates are OK? Did some tests and I don't see any problem from this change.

[freydev]

@dokozero You're right, I noticed that the white line separator is poorly displayed on different screens due to supersampling.

Yes, this is the gap in which you need to draw a white dot, it can be changed in any direction,

if (abs(c - maxChroma) < 0.003) {
    col = vec3(1, 1, 1);
}

But sometimes there was more than one dot in this interval, it was a little annoying

Check again, I came up with a new solution, rendering the separator just with an svg element, it slightly reduced performance, but the white line became much clearer on any screen.

I also fixed the wrong gamma correction to 2.2.

[dokozero]

Thanks, I checked and it's better 👍 but indeed we increased a bit the rendering time (average of 2ms) which is still low so good for me.

If it's good for you I can merge the pull request.

[ai]

I want to write a tweet about this amazing PR. @freydev do you have twitter/mastodon account?

[freydev]

@dokozero Of course, this completely solves the problem now, I will continue to think about how to return to 0.1ms because the topic with rendering optimization is very exciting.

And I will follow your plugin, if you still need help, it's an honor to take part in the promotion of a new color format on the web, thank you and martians for that.

@ai yes, @futuramafrey, but I hardly use it

[dokozero]

@freydev Merge is done and the OkColor@5.0 is live 🚀 . Many thanks again for your welcome help and this impressive PR!
Btw I didn't find your nickname on Figma (for the release changelog on the Figma page), you can give me if you want to include it.

@ai Also thanks to have made this collaboration possible 🤝 . I will wait for your tweet and do one from my account after with a link to it.

[freydev]

@dokozero actually I haven't used community profile in Figma before, maybe now is the time, I registered same name @freydev