From 325497faaca27356980fc9e5b9106a60c801fad6 Mon Sep 17 00:00:00 2001 From: yum Date: Mon, 20 Nov 2023 18:59:54 -0800 Subject: Initial commit --- README.md | 62 +++++++++++++++++++++++ hsv_vs_oklab_gradient.PNG | Bin 0 -> 73427 bytes oklab.cginc | 122 ++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 184 insertions(+) create mode 100644 README.md create mode 100644 hsv_vs_oklab_gradient.PNG create mode 100644 oklab.cginc diff --git a/README.md b/README.md new file mode 100644 index 0000000..a96a417 --- /dev/null +++ b/README.md @@ -0,0 +1,62 @@ +## An HLSL implementation of OKLAB + +OKLAB is a perceptually uniform color space. That means that blending +between colors in OKLAB space produces more perceptually uniform gradients, +without weird transitional colors or changes in perceptual brightness or +saturation. + +![HSV vs OKLCH gradient](hsv_vs_oklab_gradient.PNG) +*Top: HSV gradient varying only hue; Bottom: OKLCH gradient varying only hue.* + +The [original OKLAB blog post](https://bottosson.github.io/posts/oklab/) +explains its merits very well. + +OKLAB [should be supported in Unity +2022](https://twitter.com/bjornornorn/status/1512428218892095496?lang=en), but +for us stuck on older versions, a library like this is necessary. + +This is exploratory code and is *not* optimized. If using in a performance +critical setting, you should premultiply all matrices in your desired +transformation. + +APIs provided: +``` +float3 LRGBtoXYZ(float3 c); +float3 XYZtoLRGB(float3 c); + +float3 XYZtoOKLAB(float3 c); +float3 OKLABtoXYZ(float3 c); + +// Note: OKLCH hue is on the range [0, 2*PI], not [0, 1]. +float3 OKLABtoOKLCH(float3 c); +float3 OKLCHtoOKLAB(float3 c); + +// Everything below this line is unoptimized syntactic sugar. +float3 LRGBtoOKLAB(float3 c); +float3 OKLABtoLRGB(float3 c); + +float3 LRGBtoOKLCH(float3 c); +float3 OKLCHtoLRGB(float3 c); +``` + +The gradient above was generated with this fragment shader: +``` +fixed4 frag(v2f i) : SV_Target +{ + float4 albedo = 1; + + if (i.uv.y > 0.5) { + // HSV gradient + albedo.xyz = HSVtoRGB(float3(i.uv.x, 1.0, 1.0)); + } else { + // OKLAB gradient + float3 c0 = LRGBtoOKLCH(float3(1, 0, 0)); + c0.z += i.uv.x * 2 * 3.14159265; + albedo.xyz = OKLCHtoLRGB(c0); + } + + return albedo; +} +``` + +This content is released under the MIT license. diff --git a/hsv_vs_oklab_gradient.PNG b/hsv_vs_oklab_gradient.PNG new file mode 100644 index 0000000..1b62fa3 Binary files /dev/null and b/hsv_vs_oklab_gradient.PNG differ diff --git a/oklab.cginc b/oklab.cginc new file mode 100644 index 0000000..f6b788c --- /dev/null +++ b/oklab.cginc @@ -0,0 +1,122 @@ +/* + * MIT License + * + * Copyright (c) 2023 yum_food + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to + * deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING + * FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE + * SOFTWARE. + */ + +#ifndef __OKLAB_INC +#define __OKLAB_INC + +// Utilities relating to the OKLAB color space, as defined here: +// https://bottosson.github.io/posts/oklab/ +// Code is derived from the samples there, which are in the public domain. + +// Weights: https://en.wikipedia.org/wiki/SRGB +float3 LRGBtoXYZ(float3 c) { + float3x3 rgb_to_xyz = float3x3( + 0.4124, 0.3576, 0.1805, + 0.2126, 0.7152, 0.0722, + 0.0193, 0.1192, 0.9505 + ); + return mul(rgb_to_xyz, c); +} + +// Weights: https://en.wikipedia.org/wiki/SRGB +float3 XYZtoLRGB(float3 c) { + float3x3 xyz_to_rgb = float3x3( + 3.24062548, -1.53720797, -0.4986286, + -0.96893071, 1.87575606, 0.04151752, + 0.05571012, -0.20402105, 1.05699594 + ); + return mul(xyz_to_rgb, c); +} + +// Source: https://bottosson.github.io/posts/oklab/ +float3 XYZtoOKLAB(float3 c) { + float3x3 m1 = float3x3( + 0.8189, 0.3618, -0.1288, + 0.0329, 0.9293, 0.0361, + 0.0482, 0.2643, 0.6338 + ); + float3x3 m2 = float3x3( + 0.2104, 0.7936, -0.0040, + 1.9779, -2.4285, 0.4505, + 0.0259, 0.7827, -0.8086 + ); + c = mul(m1, c); + c = pow(c, 0.33333333333); + return mul(m2, c); +} + +// Source: https://bottosson.github.io/posts/oklab/ +float3 OKLABtoXYZ(float3 c) { + float3x3 m1i = float3x3( + 1.22700842, -0.5576564 , 0.28111404, + -0.04047048, 1.11219073, -0.07157255, + -0.07643651, -0.42138367, 1.58625265 + ); + float3x3 m2i = float3x3( + 1.00003964, 0.39638005, 0.21589049, + 0.99998945, -0.10553958, -0.06374665, + 0.99999105, -0.08946276, -1.291495 + ); + c = mul(m2i, c); + c = pow(c, 3); + return mul(m1i, c); +} + +// Source: https://bottosson.github.io/posts/oklab/ +float3 OKLABtoOKLCH(float3 c) { + float c_ = length(c.yz); + float h_ = atan2(c.z, c.y); + return float3(c.x, c_, h_); +} + +// Source: https://bottosson.github.io/posts/oklab/ +// Note: hue must be in units of radians. +float3 OKLCHtoOKLAB(float3 c) { + float a = c.y * cos(c.z); + float b = c.y * sin(c.z); + return float3(c.x, a, b); +} + +float3 LRGBtoOKLAB(float3 c) { + return XYZtoOKLAB(LRGBtoXYZ(c)); +} + +float3 OKLABtoLRGB(float3 c) { + return XYZtoLRGB(OKLABtoXYZ(c)); +} + +float3 LRGBtoOKLCH(float3 c) { + return OKLABtoOKLCH(XYZtoOKLAB(LRGBtoXYZ(c))); +} + +float3 OKLCHtoLRGB(float3 c) { + return XYZtoLRGB(OKLABtoXYZ(OKLCHtoOKLAB(c))); +} + +#endif // __OKLAB_INC + -- cgit v1.2.3