-
-
Notifications
You must be signed in to change notification settings - Fork 2
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fixes #4 Shader for color mappings #5
Fixes #4 Shader for color mappings #5
Conversation
ui/App.tsx
Outdated
@@ -1212,7 +1256,7 @@ export const App = function() { | |||
<div class="u-flex u-items-center u-justify-between u-px-16 u-mt-18"> | |||
|
|||
<div class="c-fill-stroke-selector" ref={fillOrStrokeSelector} onClick={fillOrStrokeHandle} data-has-fill="true" data-has-stroke="true" data-active="fill" > | |||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yeah, it was some auto-changes, fixed
There is a way to draw P3 colors in WebGL context (for instance, Three.js use it) I found docs like: Do they help you? As I understand there are 2 modes:
|
7ebf61e
to
87405d7
Compare
87405d7
to
bc35ea7
Compare
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. |
@dokozero we are ready to check out PR! 🎉 |
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. |
@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,
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. |
aa8c24b
to
ca4a98f
Compare
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. |
I want to write a tweet about this amazing PR. @freydev do you have twitter/mastodon account? |
@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 |
@freydev Merge is done and the OkColor@5.0 is live 🚀 . Many thanks again for your welcome help and this impressive PR! @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. |
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.