palette-shader 0.1.0

package/dist/palette-shader.js

@@ -0,0 +1,1691 @@
+import { ShaderMaterial as v, Scene as m, OrthographicCamera as k, WebGLRenderer as w, PlaneGeometry as y, Mesh as C, WebGLRenderTarget as R, LinearFilter as T, DoubleSide as H, PerspectiveCamera as P, BoxGeometry as B, NearestFilter as L, AmbientLight as $, DirectionalLight as V, MeshStandardMaterial as Y, Vector3 as x, CylinderGeometry as Z, SphereGeometry as K, Object3D as j, Color as I, InstancedMesh as z, DataTexture as X, RGBAFormat as J, FloatType as Q, ClampToEdgeWrapping as E } from "three";
+const A = `// https://lygia.xyz/
+float srgb2rgb(const in float v) {   return (v < 0.04045) ? v * 0.0773993808 : pow((v + 0.055) * 0.947867298578199, 2.4); }
+vec3 srgb2rgb(const in vec3 srgb) {  return vec3(srgb2rgb(srgb.r), srgb2rgb(srgb.g), srgb2rgb(srgb.b)); }
+vec4 srgb2rgb(const in vec4 srgb) {  return vec4(srgb2rgb(srgb.rgb), srgb.a); }
+`, O = `// Copyright(c) 2021 Björn Ottosson
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy of
+// this softwareand 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 noticeand 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.
+
+#define M_PI 3.1415926535897932384626433832795
+
+float cbrt( float x )
+{
+    return sign(x)*pow(abs(x),1.0f/3.0f);
+}
+
+float srgb_transfer_function(float a)
+{
+	return .0031308f >= a ? 12.92f * a : 1.055f * pow(a, .4166666666666667f) - .055f;
+}
+
+float srgb_transfer_function_inv(float a)
+{
+	return .04045f < a ? pow((a + .055f) / 1.055f, 2.4f) : a / 12.92f;
+}
+
+vec3 linear_srgb_to_oklab(vec3 c)
+{
+	float l = 0.4122214708f * c.r + 0.5363325363f * c.g + 0.0514459929f * c.b;
+	float m = 0.2119034982f * c.r + 0.6806995451f * c.g + 0.1073969566f * c.b;
+	float s = 0.0883024619f * c.r + 0.2817188376f * c.g + 0.6299787005f * c.b;
+
+	float l_ = cbrt(l);
+	float m_ = cbrt(m);
+	float s_ = cbrt(s);
+
+	return vec3(
+		0.2104542553f * l_ + 0.7936177850f * m_ - 0.0040720468f * s_,
+		1.9779984951f * l_ - 2.4285922050f * m_ + 0.4505937099f * s_,
+		0.0259040371f * l_ + 0.7827717662f * m_ - 0.8086757660f * s_
+	);
+}
+
+vec3 oklab_to_linear_srgb(vec3 c)
+{
+	float l_ = c.x + 0.3963377774f * c.y + 0.2158037573f * c.z;
+	float m_ = c.x - 0.1055613458f * c.y - 0.0638541728f * c.z;
+	float s_ = c.x - 0.0894841775f * c.y - 1.2914855480f * c.z;
+
+	float l = l_ * l_ * l_;
+	float m = m_ * m_ * m_;
+	float s = s_ * s_ * s_;
+
+	return vec3(
+		+4.0767416621f * l - 3.3077115913f * m + 0.2309699292f * s,
+		-1.2684380046f * l + 2.6097574011f * m - 0.3413193965f * s,
+		-0.0041960863f * l - 0.7034186147f * m + 1.7076147010f * s
+	);
+}
+
+// Finds the maximum saturation possible for a given hue that fits in sRGB
+// Saturation here is defined as S = C/L
+// a and b must be normalized so a^2 + b^2 == 1
+float compute_max_saturation(float a, float b)
+{
+	// Max saturation will be when one of r, g or b goes below zero.
+
+	// Select different coefficients depending on which component goes below zero first
+	float k0, k1, k2, k3, k4, wl, wm, ws;
+
+	if (-1.88170328f * a - 0.80936493f * b > 1.f)
+	{
+		// Red component
+		k0 = +1.19086277f; k1 = +1.76576728f; k2 = +0.59662641f; k3 = +0.75515197f; k4 = +0.56771245f;
+		wl = +4.0767416621f; wm = -3.3077115913f; ws = +0.2309699292f;
+	}
+	else if (1.81444104f * a - 1.19445276f * b > 1.f)
+	{
+		// Green component
+		k0 = +0.73956515f; k1 = -0.45954404f; k2 = +0.08285427f; k3 = +0.12541070f; k4 = +0.14503204f;
+		wl = -1.2684380046f; wm = +2.6097574011f; ws = -0.3413193965f;
+	}
+	else
+	{
+		// Blue component
+		k0 = +1.35733652f; k1 = -0.00915799f; k2 = -1.15130210f; k3 = -0.50559606f; k4 = +0.00692167f;
+		wl = -0.0041960863f; wm = -0.7034186147f; ws = +1.7076147010f;
+	}
+
+	// Approximate max saturation using a polynomial:
+	float S = k0 + k1 * a + k2 * b + k3 * a * a + k4 * a * b;
+
+	// Do one step Halley's method to get closer
+	// this gives an error less than 10e6, except for some blue hues where the dS/dh is close to infinite
+	// this should be sufficient for most applications, otherwise do two/three steps 
+
+	float k_l = +0.3963377774f * a + 0.2158037573f * b;
+	float k_m = -0.1055613458f * a - 0.0638541728f * b;
+	float k_s = -0.0894841775f * a - 1.2914855480f * b;
+
+	{
+		float l_ = 1.f + S * k_l;
+		float m_ = 1.f + S * k_m;
+		float s_ = 1.f + S * k_s;
+
+		float l = l_ * l_ * l_;
+		float m = m_ * m_ * m_;
+		float s = s_ * s_ * s_;
+
+		float l_dS = 3.f * k_l * l_ * l_;
+		float m_dS = 3.f * k_m * m_ * m_;
+		float s_dS = 3.f * k_s * s_ * s_;
+
+		float l_dS2 = 6.f * k_l * k_l * l_;
+		float m_dS2 = 6.f * k_m * k_m * m_;
+		float s_dS2 = 6.f * k_s * k_s * s_;
+
+		float f = wl * l + wm * m + ws * s;
+		float f1 = wl * l_dS + wm * m_dS + ws * s_dS;
+		float f2 = wl * l_dS2 + wm * m_dS2 + ws * s_dS2;
+
+		S = S - f * f1 / (f1 * f1 - 0.5f * f * f2);
+	}
+
+	return S;
+}
+
+// finds L_cusp and C_cusp for a given hue
+// a and b must be normalized so a^2 + b^2 == 1
+vec2 find_cusp(float a, float b)
+{
+	// First, find the maximum saturation (saturation S = C/L)
+	float S_cusp = compute_max_saturation(a, b);
+
+	// Convert to linear sRGB to find the first point where at least one of r,g or b >= 1:
+	vec3 rgb_at_max = oklab_to_linear_srgb(vec3( 1, S_cusp * a, S_cusp * b ));
+	float L_cusp = cbrt(1.f / max(max(rgb_at_max.r, rgb_at_max.g), rgb_at_max.b));
+	float C_cusp = L_cusp * S_cusp;
+
+	return vec2( L_cusp , C_cusp );
+}
+
+// Finds intersection of the line defined by 
+// L = L0 * (1 - t) + t * L1;
+// C = t * C1;
+// a and b must be normalized so a^2 + b^2 == 1
+float find_gamut_intersection(float a, float b, float L1, float C1, float L0, vec2 cusp)
+{
+	// Find the intersection for upper and lower half seprately
+	float t;
+	if (((L1 - L0) * cusp.y - (cusp.x - L0) * C1) <= 0.f)
+	{
+		// Lower half
+
+		t = cusp.y * L0 / (C1 * cusp.x + cusp.y * (L0 - L1));
+	}
+	else
+	{
+		// Upper half
+
+		// First intersect with triangle
+		t = cusp.y * (L0 - 1.f) / (C1 * (cusp.x - 1.f) + cusp.y * (L0 - L1));
+
+		// Then one step Halley's method
+		{
+			float dL = L1 - L0;
+			float dC = C1;
+
+			float k_l = +0.3963377774f * a + 0.2158037573f * b;
+			float k_m = -0.1055613458f * a - 0.0638541728f * b;
+			float k_s = -0.0894841775f * a - 1.2914855480f * b;
+
+			float l_dt = dL + dC * k_l;
+			float m_dt = dL + dC * k_m;
+			float s_dt = dL + dC * k_s;
+
+
+			// If higher accuracy is required, 2 or 3 iterations of the following block can be used:
+			{
+				float L = L0 * (1.f - t) + t * L1;
+				float C = t * C1;
+
+				float l_ = L + C * k_l;
+				float m_ = L + C * k_m;
+				float s_ = L + C * k_s;
+
+				float l = l_ * l_ * l_;
+				float m = m_ * m_ * m_;
+				float s = s_ * s_ * s_;
+
+				float ldt = 3.f * l_dt * l_ * l_;
+				float mdt = 3.f * m_dt * m_ * m_;
+				float sdt = 3.f * s_dt * s_ * s_;
+
+				float ldt2 = 6.f * l_dt * l_dt * l_;
+				float mdt2 = 6.f * m_dt * m_dt * m_;
+				float sdt2 = 6.f * s_dt * s_dt * s_;
+
+				float r = 4.0767416621f * l - 3.3077115913f * m + 0.2309699292f * s - 1.f;
+				float r1 = 4.0767416621f * ldt - 3.3077115913f * mdt + 0.2309699292f * sdt;
+				float r2 = 4.0767416621f * ldt2 - 3.3077115913f * mdt2 + 0.2309699292f * sdt2;
+
+				float u_r = r1 / (r1 * r1 - 0.5f * r * r2);
+				float t_r = -r * u_r;
+
+				float g = -1.2684380046f * l + 2.6097574011f * m - 0.3413193965f * s - 1.f;
+				float g1 = -1.2684380046f * ldt + 2.6097574011f * mdt - 0.3413193965f * sdt;
+				float g2 = -1.2684380046f * ldt2 + 2.6097574011f * mdt2 - 0.3413193965f * sdt2;
+
+				float u_g = g1 / (g1 * g1 - 0.5f * g * g2);
+				float t_g = -g * u_g;
+
+				float b = -0.0041960863f * l - 0.7034186147f * m + 1.7076147010f * s - 1.f;
+				float b1 = -0.0041960863f * ldt - 0.7034186147f * mdt + 1.7076147010f * sdt;
+				float b2 = -0.0041960863f * ldt2 - 0.7034186147f * mdt2 + 1.7076147010f * sdt2;
+
+				float u_b = b1 / (b1 * b1 - 0.5f * b * b2);
+				float t_b = -b * u_b;
+
+				t_r = u_r >= 0.f ? t_r : 10000.f;
+				t_g = u_g >= 0.f ? t_g : 10000.f;
+				t_b = u_b >= 0.f ? t_b : 10000.f;
+
+				t += min(t_r, min(t_g, t_b));
+			}
+		}
+	}
+
+	return t;
+}
+
+float find_gamut_intersection(float a, float b, float L1, float C1, float L0)
+{
+	// Find the cusp of the gamut triangle
+	vec2 cusp = find_cusp(a, b);
+
+	return find_gamut_intersection(a, b, L1, C1, L0, cusp);
+}
+
+vec3 gamut_clip_preserve_chroma(vec3 rgb)
+{
+	if (rgb.r < 1.f && rgb.g < 1.f && rgb.b < 1.f && rgb.r > 0.f && rgb.g > 0.f && rgb.b > 0.f)
+		return rgb;
+
+	vec3 lab = linear_srgb_to_oklab(rgb);
+
+	float L = lab.x;
+	float eps = 0.00001f;
+	float C = max(eps, sqrt(lab.y * lab.y + lab.z * lab.z));
+	float a_ = lab.y / C;
+	float b_ = lab.z / C;
+
+	float L0 = clamp(L, 0.f, 1.f);
+
+	float t = find_gamut_intersection(a_, b_, L, C, L0);
+	float L_clipped = L0 * (1.f - t) + t * L;
+	float C_clipped = t * C;
+
+	return oklab_to_linear_srgb(vec3( L_clipped, C_clipped * a_, C_clipped * b_ ));
+}
+
+vec3 gamut_clip_project_to_0_5(vec3 rgb)
+{
+	if (rgb.r < 1.f && rgb.g < 1.f && rgb.b < 1.f && rgb.r > 0.f && rgb.g > 0.f && rgb.b > 0.f)
+		return rgb;
+
+	vec3 lab = linear_srgb_to_oklab(rgb);
+
+	float L = lab.x;
+	float eps = 0.00001f;
+	float C = max(eps, sqrt(lab.y * lab.y + lab.z * lab.z));
+	float a_ = lab.y / C;
+	float b_ = lab.z / C;
+
+	float L0 = 0.5;
+
+	float t = find_gamut_intersection(a_, b_, L, C, L0);
+	float L_clipped = L0 * (1.f - t) + t * L;
+	float C_clipped = t * C;
+
+	return oklab_to_linear_srgb(vec3( L_clipped, C_clipped * a_, C_clipped * b_ ));
+}
+
+vec3 gamut_clip_project_to_L_cusp(vec3 rgb)
+{
+	if (rgb.r < 1.f && rgb.g < 1.f && rgb.b < 1.f && rgb.r > 0.f && rgb.g > 0.f && rgb.b > 0.f)
+		return rgb;
+
+	vec3 lab = linear_srgb_to_oklab(rgb);
+
+	float L = lab.x;
+	float eps = 0.00001f;
+	float C = max(eps, sqrt(lab.y * lab.y + lab.z * lab.z));
+	float a_ = lab.y / C;
+	float b_ = lab.z / C;
+
+	// The cusp is computed here and in find_gamut_intersection, an optimized solution would only compute it once.
+	vec2 cusp = find_cusp(a_, b_);
+
+	float L0 = cusp.x;
+
+	float t = find_gamut_intersection(a_, b_, L, C, L0);
+
+	float L_clipped = L0 * (1.f - t) + t * L;
+	float C_clipped = t * C;
+
+	return oklab_to_linear_srgb(vec3( L_clipped, C_clipped * a_, C_clipped * b_ ));
+}
+
+vec3 gamut_clip_adaptive_L0_0_5(vec3 rgb, float alpha)
+{
+	if (rgb.r < 1.f && rgb.g < 1.f && rgb.b < 1.f && rgb.r > 0.f && rgb.g > 0.f && rgb.b > 0.f)
+		return rgb;
+
+	vec3 lab = linear_srgb_to_oklab(rgb);
+
+	float L = lab.x;
+	float eps = 0.00001f;
+	float C = max(eps, sqrt(lab.y * lab.y + lab.z * lab.z));
+	float a_ = lab.y / C;
+	float b_ = lab.z / C;
+
+	float Ld = L - 0.5f;
+	float e1 = 0.5f + abs(Ld) + alpha * C;
+	float L0 = 0.5f * (1.f + sign(Ld) * (e1 - sqrt(e1 * e1 - 2.f * abs(Ld))));
+
+	float t = find_gamut_intersection(a_, b_, L, C, L0);
+	float L_clipped = L0 * (1.f - t) + t * L;
+	float C_clipped = t * C;
+
+	return oklab_to_linear_srgb(vec3( L_clipped, C_clipped * a_, C_clipped * b_ ));
+}
+
+vec3 gamut_clip_adaptive_L0_L_cusp(vec3 rgb, float alpha)
+{
+	if (rgb.r < 1.f && rgb.g < 1.f && rgb.b < 1.f && rgb.r > 0.f && rgb.g > 0.f && rgb.b > 0.f)
+		return rgb;
+
+	vec3 lab = linear_srgb_to_oklab(rgb);
+
+	float L = lab.x;
+	float eps = 0.00001f;
+	float C = max(eps, sqrt(lab.y * lab.y + lab.z * lab.z));
+	float a_ = lab.y / C;
+	float b_ = lab.z / C;
+
+	// The cusp is computed here and in find_gamut_intersection, an optimized solution would only compute it once.
+	vec2 cusp = find_cusp(a_, b_);
+
+	float Ld = L - cusp.x;
+	float k = 2.f * (Ld > 0.f ? 1.f - cusp.x : cusp.x);
+
+	float e1 = 0.5f * k + abs(Ld) + alpha * C / k;
+	float L0 = cusp.x + 0.5f * (sign(Ld) * (e1 - sqrt(e1 * e1 - 2.f * k * abs(Ld))));
+
+	float t = find_gamut_intersection(a_, b_, L, C, L0);
+	float L_clipped = L0 * (1.f - t) + t * L;
+	float C_clipped = t * C;
+
+	return oklab_to_linear_srgb(vec3( L_clipped, C_clipped * a_, C_clipped * b_ ));
+}
+
+float toe(float x)
+{
+	float k_1 = 0.206f;
+	float k_2 = 0.03f;
+	float k_3 = (1.f + k_1) / (1.f + k_2);
+	return 0.5f * (k_3 * x - k_1 + sqrt((k_3 * x - k_1) * (k_3 * x - k_1) + 4.f * k_2 * k_3 * x));
+}
+
+float toe_inv(float x)
+{
+	float k_1 = 0.206f;
+	float k_2 = 0.03f;
+	float k_3 = (1.f + k_1) / (1.f + k_2);
+	return (x * x + k_1 * x) / (k_3 * (x + k_2));
+}
+
+vec2 to_ST(vec2 cusp)
+{
+	float L = cusp.x;
+	float C = cusp.y;
+	return vec2( C / L, C / (1.f - L) );
+}
+
+// Returns a smooth approximation of the location of the cusp
+// This polynomial was created by an optimization process
+// It has been designed so that S_mid < S_max and T_mid < T_max
+vec2 get_ST_mid(float a_, float b_)
+{
+	float S = 0.11516993f + 1.f / (
+		+7.44778970f + 4.15901240f * b_
+		+ a_ * (-2.19557347f + 1.75198401f * b_
+			+ a_ * (-2.13704948f - 10.02301043f * b_
+				+ a_ * (-4.24894561f + 5.38770819f * b_ + 4.69891013f * a_
+					)))
+		);
+
+	float T = 0.11239642f + 1.f / (
+		+1.61320320f - 0.68124379f * b_
+		+ a_ * (+0.40370612f + 0.90148123f * b_
+			+ a_ * (-0.27087943f + 0.61223990f * b_
+				+ a_ * (+0.00299215f - 0.45399568f * b_ - 0.14661872f * a_
+					)))
+		);
+
+	return vec2( S, T );
+}
+
+vec3 get_Cs(float L, float a_, float b_)
+{
+	vec2 cusp = find_cusp(a_, b_);
+
+	float C_max = find_gamut_intersection(a_, b_, L, 1.f, L, cusp);
+	vec2 ST_max = to_ST(cusp);
+	
+	// Scale factor to compensate for the curved part of gamut shape:
+	float k = C_max / min((L * ST_max.x), (1.f - L) * ST_max.y);
+
+	float C_mid;
+	{
+		vec2 ST_mid = get_ST_mid(a_, b_);
+
+		// Use a soft minimum function, instead of a sharp triangle shape to get a smooth value for chroma.
+		float C_a = L * ST_mid.x;
+		float C_b = (1.f - L) * ST_mid.y;
+		C_mid = 0.9f * k * sqrt(sqrt(1.f / (1.f / (C_a * C_a * C_a * C_a) + 1.f / (C_b * C_b * C_b * C_b))));
+	}
+
+	float C_0;
+	{
+		// for C_0, the shape is independent of hue, so vec2 are constant. Values picked to roughly be the average values of vec2.
+		float C_a = L * 0.4f;
+		float C_b = (1.f - L) * 0.8f;
+
+		// Use a soft minimum function, instead of a sharp triangle shape to get a smooth value for chroma.
+		C_0 = sqrt(1.f / (1.f / (C_a * C_a) + 1.f / (C_b * C_b)));
+	}
+
+	return vec3( C_0, C_mid, C_max );
+}
+
+vec3 okhsl_to_srgb(vec3 hsl)
+{
+	float h = hsl.x;
+	float s = hsl.y;
+	float l = hsl.z;
+
+	if (l == 1.0f)
+	{
+		return vec3( 1.f, 1.f, 1.f );
+	}
+
+	else if (l == 0.f)
+	{
+		return vec3( 0.f, 0.f, 0.f );
+	}
+
+	float a_ = cos(2.f * M_PI * h);
+	float b_ = sin(2.f * M_PI * h);
+	float L = toe_inv(l);
+
+	vec3 cs = get_Cs(L, a_, b_);
+	float C_0 = cs.x;
+	float C_mid = cs.y;
+	float C_max = cs.z;
+
+	float mid = 0.8f;
+	float mid_inv = 1.25f;
+
+	float C, t, k_0, k_1, k_2;
+
+	if (s < mid)
+	{
+		t = mid_inv * s;
+
+		k_1 = mid * C_0;
+		k_2 = (1.f - k_1 / C_mid);
+
+		C = t * k_1 / (1.f - k_2 * t);
+	}
+	else
+	{
+		t = (s - mid)/ (1.f - mid);
+
+		k_0 = C_mid;
+		k_1 = (1.f - mid) * C_mid * C_mid * mid_inv * mid_inv / C_0;
+		k_2 = (1.f - (k_1) / (C_max - C_mid));
+
+		C = k_0 + t * k_1 / (1.f - k_2 * t);
+	}
+
+	vec3 rgb = oklab_to_linear_srgb(vec3( L, C * a_, C * b_ ));
+	return vec3(
+		srgb_transfer_function(rgb.r),
+		srgb_transfer_function(rgb.g),
+		srgb_transfer_function(rgb.b)
+	);
+}
+
+vec3 srgb_to_okhsl(vec3 rgb)
+{
+	vec3 lab = linear_srgb_to_oklab(vec3(
+		srgb_transfer_function_inv(rgb.r),
+		srgb_transfer_function_inv(rgb.g),
+		srgb_transfer_function_inv(rgb.b)
+		));
+
+	float C = sqrt(lab.y * lab.y + lab.z * lab.z);
+	float a_ = lab.y / C;
+	float b_ = lab.z / C;
+
+	float L = lab.x;
+	float h = 0.5f + 0.5f * atan(-lab.z, -lab.y) / M_PI;
+
+	vec3 cs = get_Cs(L, a_, b_);
+	float C_0 = cs.x;
+	float C_mid = cs.y;
+	float C_max = cs.z;
+
+	// Inverse of the interpolation in okhsl_to_srgb:
+
+	float mid = 0.8f;
+	float mid_inv = 1.25f;
+
+	float s;
+	if (C < C_mid)
+	{
+		float k_1 = mid * C_0;
+		float k_2 = (1.f - k_1 / C_mid);
+
+		float t = C / (k_1 + k_2 * C);
+		s = t * mid;
+	}
+	else
+	{
+		float k_0 = C_mid;
+		float k_1 = (1.f - mid) * C_mid * C_mid * mid_inv * mid_inv / C_0;
+		float k_2 = (1.f - (k_1) / (C_max - C_mid));
+
+		float t = (C - k_0) / (k_1 + k_2 * (C - k_0));
+		s = mid + (1.f - mid) * t;
+	}
+
+	float l = toe(L);
+	return vec3( h, s, l );
+}
+
+
+vec3 okhsv_to_srgb(vec3 hsv)
+{
+	float h = hsv.x;
+	float s = hsv.y;
+	float v = hsv.z;
+
+	float a_ = cos(2.f * M_PI * h);
+	float b_ = sin(2.f * M_PI * h);
+	
+	vec2 cusp = find_cusp(a_, b_);
+	vec2 ST_max = to_ST(cusp);
+	float S_max = ST_max.x;
+	float T_max = ST_max.y;
+	float S_0 = 0.5f;
+	float k = 1.f- S_0 / S_max;
+
+	// first we compute L and V as if the gamut is a perfect triangle:
+
+	// L, C when v==1:
+	float L_v = 1.f   - s * S_0 / (S_0 + T_max - T_max * k * s);
+	float C_v = s * T_max * S_0 / (S_0 + T_max - T_max * k * s);
+
+	float L = v * L_v;
+	float C = v * C_v;
+
+	// then we compensate for both toe and the curved top part of the triangle:
+	float L_vt = toe_inv(L_v);
+	float C_vt = C_v * L_vt / L_v;
+
+	float L_new = toe_inv(L);
+	C = C * L_new / L;
+	L = L_new;
+
+	vec3 rgb_scale = oklab_to_linear_srgb(vec3( L_vt, a_ * C_vt, b_ * C_vt ));
+	float scale_L = cbrt(1.f / max(max(rgb_scale.r, rgb_scale.g), max(rgb_scale.b, 0.f)));
+
+	L = L * scale_L;
+	C = C * scale_L;
+
+	vec3 rgb = oklab_to_linear_srgb(vec3( L, C * a_, C * b_ ));
+	return vec3(
+		srgb_transfer_function(rgb.r),
+		srgb_transfer_function(rgb.g),
+		srgb_transfer_function(rgb.b)
+	);
+}
+
+vec3 srgb_to_okhsv(vec3 rgb)
+{
+	vec3 lab = linear_srgb_to_oklab(vec3(
+		srgb_transfer_function_inv(rgb.r),
+		srgb_transfer_function_inv(rgb.g),
+		srgb_transfer_function_inv(rgb.b)
+		));
+
+	float C = sqrt(lab.y * lab.y + lab.z * lab.z);
+	float a_ = lab.y / C;
+	float b_ = lab.z / C;
+
+	float L = lab.x;
+	float h = 0.5f + 0.5f * atan(-lab.z, -lab.y) / M_PI;
+
+	vec2 cusp = find_cusp(a_, b_);
+	vec2 ST_max = to_ST(cusp);
+	float S_max = ST_max.x;
+	float T_max = ST_max.y;
+	float S_0 = 0.5f;
+	float k = 1.f - S_0 / S_max;
+
+	// first we find L_v, C_v, L_vt and C_vt
+
+	float t = T_max / (C + L * T_max);
+	float L_v = t * L;
+	float C_v = t * C;
+
+	float L_vt = toe_inv(L_v);
+	float C_vt = C_v * L_vt / L_v;
+
+	// we can then use these to invert the step that compensates for the toe and the curved top part of the triangle:
+	vec3 rgb_scale = oklab_to_linear_srgb(vec3( L_vt, a_ * C_vt, b_ * C_vt ));
+	float scale_L = cbrt(1.f / max(max(rgb_scale.r, rgb_scale.g), max(rgb_scale.b, 0.f)));
+
+	L = L / scale_L;
+	C = C / scale_L;
+
+	C = C * toe(L) / L;
+	L = toe(L);
+
+	// we can now compute v and s:
+
+	float v = L / L_v;
+	float s = (S_0 + T_max) * C_v / ((T_max * S_0) + T_max * k * C_v);
+
+	return vec3 (h, s, v );
+}`, F = `vec3 hsl2rgb( in vec3 c ) {
+  vec3 rgb = clamp( abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 );
+  return c.z + c.y * (rgb-0.5)*(1.0-abs(2.0*c.z-1.0));
+}`, U = `vec3 hsv2rgb(vec3 c) {
+  vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+}`, G = `// slightly rearranged vector components so it matches with LCH
+// M_PI and srgb_transfer_function are provided by oklab.frag.glsl (included before this file)
+vec3 lch2rgb(vec3 lch) {
+    lch.y *= 0.34;
+
+    vec3 lab = vec3(
+        lch.x,
+        lch.y * cos(lch.z * M_PI*2.0),
+        lch.y * sin(lch.z * M_PI*2.0)
+    );
+
+    vec3 lms = vec3(
+        lab.x + 0.3963377774f * lab.y + 0.2158037573f * lab.z,
+        lab.x - 0.1055613458f * lab.y - 0.0638541728f * lab.z,
+        lab.x - 0.0894841775f * lab.y - 1.2914855480f * lab.z
+    );
+
+    lms = pow(max(lms, vec3(0.0)), vec3(3.0));
+
+    vec3 rgb = vec3(
+        +4.0767416621f * lms.x - 3.3077115913f * lms.y + 0.2309699292f * lms.z,
+        -1.2684380046f * lms.x + 2.6097574011f * lms.y - 0.3413193965f * lms.z,
+        -0.0041960863f * lms.x - 0.7034186147f * lms.y + 1.7076147010f * lms.z
+    );
+
+    return vec3(
+        srgb_transfer_function(rgb.r),
+        srgb_transfer_function(rgb.g),
+        srgb_transfer_function(rgb.b)
+    );
+}
+`, D = `// Kotsarenko/Ramos weighted RGB distance.
+// Operates on sRGB values directly (no linearisation needed).
+// Weights red and blue channels by the mean red value, which improves
+// perceptual uniformity compared to plain Euclidean RGB at minimal cost.
+float kotsarenkoRamos(vec3 c1, vec3 c2) {
+    float rMean = (c1.r + c2.r) * 0.5;
+    vec3 d = c1 - c2;
+    return sqrt((2.0 + rMean) * d.r*d.r + 4.0 * d.g*d.g + (3.0 - rMean) * d.b*d.b);
+}
+
+// ── CIELab ────────────────────────────────────────────────────────────────────
+// sRGB -> XYZ (D65) -> CIELab
+// Depends on: srgb2rgb() from srgb2rgb.frag.glsl, cbrt() from oklab.frag.glsl
+
+float _lab_f(float t) {
+    float delta = 6.0 / 29.0;
+    return t > delta * delta * delta
+        ? cbrt(t)
+        : t / (3.0 * delta * delta) + 4.0 / 29.0;
+}
+
+vec3 srgb_to_cielab(vec3 srgb) {
+    vec3 lin = srgb2rgb(srgb);
+
+    // Linear sRGB -> XYZ (D65 illuminant)
+    vec3 xyz = vec3(
+        0.4124564 * lin.r + 0.3575761 * lin.g + 0.1804375 * lin.b,
+        0.2126729 * lin.r + 0.7151522 * lin.g + 0.0721750 * lin.b,
+        0.0193339 * lin.r + 0.1191920 * lin.g + 0.9503041 * lin.b
+    );
+
+    // XYZ -> Lab (D65 white point: 0.95047, 1.00000, 1.08883)
+    float fx = _lab_f(xyz.x / 0.95047);
+    float fy = _lab_f(xyz.y);
+    float fz = _lab_f(xyz.z / 1.08883);
+
+    return vec3(
+        116.0 * fy - 16.0,   // L*
+        500.0 * (fx - fy),   // a*
+        200.0 * (fy - fz)    // b*
+    );
+}
+
+// CIE76: plain Euclidean distance in CIELab
+float deltaE76(vec3 lab1, vec3 lab2) {
+    vec3 d = lab1 - lab2;
+    return sqrt(d.x*d.x + d.y*d.y + d.z*d.z);
+}
+
+// CIEDE2000
+float deltaE2000(vec3 lab1, vec3 lab2) {
+    float L1 = lab1.x, a1 = lab1.y, b1 = lab1.z;
+    float L2 = lab2.x, a2 = lab2.y, b2 = lab2.z;
+
+    // Chroma
+    float C1 = sqrt(a1*a1 + b1*b1);
+    float C2 = sqrt(a2*a2 + b2*b2);
+    float Cavg = (C1 + C2) * 0.5;
+    float Cavg7 = pow(Cavg, 7.0);
+
+    // G factor: adjustment to a* axis
+    float G = 0.5 * (1.0 - sqrt(Cavg7 / (Cavg7 + 6103515625.0))); // 25^7
+
+    float a1p = a1 * (1.0 + G);
+    float a2p = a2 * (1.0 + G);
+    float C1p = sqrt(a1p*a1p + b1*b1);
+    float C2p = sqrt(a2p*a2p + b2*b2);
+
+    // Guard atan(0,0): GLSL ES leaves that undefined, so skip it for achromatic colors.
+    // When a color has no chroma its hue angle is meaningless — we just need it to
+    // be a well-defined number so it doesn't corrupt the rest of the formula.
+    bool c1Achromatic = C1p < 1e-6;
+    bool c2Achromatic = C2p < 1e-6;
+
+    float h1p = c1Achromatic ? 0.0 : atan(b1, a1p);
+    if (h1p < 0.0) h1p += TWO_PI;
+    float h2p = c2Achromatic ? 0.0 : atan(b2, a2p);
+    if (h2p < 0.0) h2p += TWO_PI;
+
+    // Deltas
+    float dLp = L2 - L1;
+    float dCp = C2p - C1p;
+
+    float dhp = 0.0;
+    if (!c1Achromatic && !c2Achromatic) {
+        dhp = h2p - h1p;
+        if      (dhp >  M_PI) dhp -= TWO_PI;
+        else if (dhp < -M_PI) dhp += TWO_PI;
+    }
+    float dHp = 2.0 * sqrt(C1p * C2p) * sin(dhp * 0.5);
+
+    // Averages
+    float Lp = (L1 + L2) * 0.5;
+    float Cp = (C1p + C2p) * 0.5;
+
+    // When one color is achromatic, its hue is 0 and the average is simply the other's hue
+    float hp;
+    if (c1Achromatic || c2Achromatic) {
+        hp = h1p + h2p;
+    } else if (abs(h1p - h2p) <= M_PI) {
+        hp = (h1p + h2p) * 0.5;
+    } else if (h1p + h2p < TWO_PI) {
+        hp = (h1p + h2p + TWO_PI) * 0.5;
+    } else {
+        hp = (h1p + h2p - TWO_PI) * 0.5;
+    }
+
+    float T = 1.0
+        - 0.17 * cos(hp - radians(30.0))
+        + 0.24 * cos(2.0 * hp)
+        + 0.32 * cos(3.0 * hp + radians(6.0))
+        - 0.20 * cos(4.0 * hp - radians(63.0));
+
+    // Weighting functions
+    float Lpm50sq = (Lp - 50.0) * (Lp - 50.0);
+    float SL = 1.0 + 0.015 * Lpm50sq / sqrt(20.0 + Lpm50sq);
+    float SC = 1.0 + 0.045 * Cp;
+    float SH = 1.0 + 0.015 * Cp * T;
+
+    // Rotation term
+    float Cp7 = pow(Cp, 7.0);
+    float RC = 2.0 * sqrt(Cp7 / (Cp7 + 6103515625.0));
+    float hpDeg = degrees(hp);
+    float dTheta = radians(30.0) * exp(-((hpDeg - 275.0) / 25.0) * ((hpDeg - 275.0) / 25.0));
+    float RT = -sin(2.0 * dTheta) * RC;
+
+    float dLn = dLp / SL;
+    float dCn = dCp / SC;
+    float dHn = dHp / SH;
+
+    return sqrt(dLn*dLn + dCn*dCn + dHn*dHn + RT * dCn * dHn);
+}
+`, N = `// distanceMetric uniform: 0 = rgb, 1 = oklab, 2 = deltaE76, 3 = deltaE2000
+vec3 closestColor(vec3 color, sampler2D paletteTexture, int paletteSize) {
+  float minDist = 1000000.0;
+  vec3 closest = vec3(0.0);
+
+  for (int i = 0; i < paletteSize; i++) {
+    vec3 paletteColor = texture2D(paletteTexture, vec2(float(i) / float(paletteSize), 0.5)).rgb;
+
+    float dist;
+    if (distanceMetric == 1) {
+      // OKLab: perceptually uniform Euclidean distance
+      dist = distance(linear_srgb_to_oklab(srgb2rgb(color)), linear_srgb_to_oklab(srgb2rgb(paletteColor)));
+    } else if (distanceMetric == 2) {
+      // CIE76: Euclidean distance in CIELab
+      dist = deltaE76(srgb_to_cielab(color), srgb_to_cielab(paletteColor));
+    } else if (distanceMetric == 3) {
+      // CIEDE2000: perceptually weighted color difference
+      dist = deltaE2000(srgb_to_cielab(color), srgb_to_cielab(paletteColor));
+    } else if (distanceMetric == 4) {
+      // Kotsarenko/Ramos: weighted RGB distance (fast, no conversion needed)
+      dist = kotsarenkoRamos(color, paletteColor);
+    } else {
+      // RGB: plain Euclidean distance in sRGB space
+      dist = distance(color, paletteColor);
+    }
+
+    if (dist < minDist) {
+      minDist = dist;
+      closest = paletteColor;
+    }
+  }
+
+  return closest;
+}
+`, tt = `
+#define TWO_PI 6.28318530718
+varying vec2 vUv;
+uniform float progress;
+uniform bool isPolar;
+uniform int distanceMetric;
+uniform int progress_axis;
+uniform sampler2D paletteTexture;
+uniform int paletteLength;
+uniform bool debug;
+uniform int polarColorModel;
+uniform bool invertZ;
+
+${A}
+${O}
+${F}
+${U}
+${G}
+${D}
+${N}
+
+// polarColorModel: 0=hsv, 1=okhsv, 2=hsl, 3=okhsl, 4=oklch
+vec3 polarToRGB(vec3 colorCoords) {
+  if (polarColorModel == 0) {
+    return hsv2rgb(colorCoords);
+  } else if (polarColorModel == 1) {
+    return okhsv_to_srgb(colorCoords);
+  } else if (polarColorModel == 2) {
+    return hsl2rgb(colorCoords);
+  } else if (polarColorModel == 3) {
+    return okhsl_to_srgb(colorCoords);
+  } else {
+    // oklch — lch2rgb uses the OKLab matrix so this is OKLCH
+    return lch2rgb(vec3(colorCoords.z, colorCoords.y, colorCoords.x));
+  }
+}
+
+void main(){
+  vec3 colorCoords = vec3(progress, vUv.x, vUv.y);
+  if(progress_axis == 1){
+    colorCoords = vec3(vUv.x, progress, vUv.y);
+  } else if(progress_axis == 2){
+    colorCoords = vec3(vUv.x, vUv.y, 1. - progress);
+  }
+
+  if(isPolar) {
+    vec2 toCenter = vUv - 0.5;
+    float angle = atan(toCenter.y, toCenter.x);
+    float radius = length(toCenter) * 2.0;
+
+    if(progress_axis == 2){
+      colorCoords = vec3((angle / TWO_PI), radius, 1. - progress);
+    } else if(progress_axis == 1){
+      colorCoords = vec3((angle / TWO_PI), 1. - progress, radius);
+      if (radius > 1.0) {
+        discard;
+      }
+    } else {
+      float hue = 1.0 - abs(0.5 - progress * .5) * 2.0;
+      if (vUv.x > 0.5) {
+        hue += 0.5;
+      }
+      colorCoords = vec3(hue, abs(0.5 - vUv.x) * 2.0, vUv.y);
+    }
+  }
+
+  if(invertZ){
+    colorCoords.z = 1. - colorCoords.z;
+  }
+
+  vec3 rgb = polarToRGB(colorCoords);
+  vec3 closest = closestColor(rgb, paletteTexture, paletteLength);
+
+  if (debug) {
+    closest = rgb;
+  }
+
+  gl_FragColor = vec4(closest, 1.);
+}`, et = `varying vec2 vUv;
+  void main(){
+    vUv = uv;
+    gl_Position = vec4(position, 1.);
+  }`, d = (u) => {
+  const t = new Float32Array(
+    u.flatMap((o) => {
+      try {
+        const i = new I(o).convertLinearToSRGB();
+        return [i.r, i.g, i.b, 1];
+      } catch {
+        return console.error(`Invalid color: ${o}`), [0, 0, 0, 1];
+      }
+    })
+  ), e = new X(t, u.length, 1, J, Q);
+  return e.needsUpdate = !0, e.wrapS = E, e.wrapT = E, e.minFilter = L, e.magFilter = L, e;
+}, M = (u = 20) => Array.from(
+  { length: u },
+  () => `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`
+);
+class it {
+  #t = [];
+  #r = 512;
+  #l = 512;
+  #P = 1;
+  // shader state
+  #f = 0;
+  #x = "y";
+  #C = "okhsv";
+  #p = "oklab";
+  #u = !0;
+  #g = !1;
+  #_ = !1;
+  // uniform value maps
+  #k = { x: 0, y: 1, z: 2 };
+  #h = { hsv: 0, okhsv: 1, hsl: 2, okhsl: 3, oklch: 4 };
+  #a = { rgb: 0, oklab: 1, deltaE76: 2, deltaE2000: 3, kotsarenkoRamos: 4 };
+  // three.js
+  #s;
+  #i;
+  #z;
+  #d;
+  #o;
+  #c;
+  #M;
+  #E;
+  #m = null;
+  // dom
+  #L;
+  constructor({
+    palette: t = M(),
+    width: e = 512,
+    height: o = 512,
+    pixelRatio: i = window.devicePixelRatio,
+    container: n = document.body,
+    colorModel: s = "okhsv",
+    distanceMetric: a = "oklab",
+    isPolar: l = !0,
+    axis: c = "y",
+    position: _ = 0,
+    invertLightness: f = !1,
+    showRaw: r = !1
+  } = {}) {
+    this.#t = t, this.#r = e, this.#l = o, this.#P = i, this.#C = s, this.#p = a, this.#u = l, this.#x = c, this.#f = _, this.#g = f, this.#_ = r, this.#L = n, this.#s = d(this.#t), this.#i = {
+      progress: { value: this.#f },
+      progress_axis: { value: this.#k[this.#x] },
+      polarColorModel: { value: this.#h[this.#C] },
+      isPolar: { value: this.#u },
+      distanceMetric: { value: this.#a[this.#p] },
+      paletteTexture: { value: this.#s },
+      paletteLength: { value: this.#t.length },
+      debug: { value: this.#_ },
+      invertZ: { value: this.#g }
+    }, this.#z = new v({ uniforms: this.#i, vertexShader: et, fragmentShader: tt }), this.#y();
+  }
+  #y() {
+    this.#E = new m(), this.#M = new k(-1, 1, 1, -1, 0.1, 1), this.#c = new w(), this.#c.setPixelRatio(this.#P), this.#c.setSize(this.#r, this.#l), this.#c.domElement.classList.add("palette-viz"), this.#d = new y(2, 2), this.#o = new C(this.#d, this.#z), this.#E.add(this.#o), this.#L.appendChild(this.#c.domElement), this.#e();
+  }
+  #e() {
+    this.#m !== null && cancelAnimationFrame(this.#m), this.#m = requestAnimationFrame(() => {
+      this.#c.render(this.#E, this.#M);
+    });
+  }
+  // ── Public API ────────────────────────────────────────────────────────────
+  get canvas() {
+    return this.#c.domElement;
+  }
+  get width() {
+    return this.#r;
+  }
+  get height() {
+    return this.#l;
+  }
+  resize(t, e = null) {
+    this.#r = t, this.#l = e === null ? t : e, this.#c.setSize(this.#r, this.#l), this.#M.updateProjectionMatrix(), this.#e();
+  }
+  destroy() {
+    this.#m !== null && (cancelAnimationFrame(this.#m), this.#m = null), this.#s.dispose(), this.#z.dispose(), this.#d.dispose(), this.#c.dispose(), this.#c.domElement.remove();
+  }
+  // ── Palette ───────────────────────────────────────────────────────────────
+  set palette(t) {
+    this.#t = t, this.#s = d(t), this.#i.paletteTexture.value = this.#s, this.#i.paletteLength.value = t.length, this.#e();
+  }
+  get palette() {
+    return this.#t;
+  }
+  setColor(t, e) {
+    if (e < 0 || e >= this.#t.length)
+      throw new Error(`Index ${e} out of range`);
+    this.#t[e] = t, this.#s = d(this.#t), this.#i.paletteTexture.value = this.#s, this.#e();
+  }
+  addColor(t, e) {
+    this.#t.splice(e ?? this.#t.length, 0, t), this.#s = d(this.#t), this.#i.paletteTexture.value = this.#s, this.#i.paletteLength.value = this.#t.length, this.#e();
+  }
+  removeColor(t) {
+    const e = typeof t == "number" ? t : this.#t.indexOf(t);
+    if (e === -1) throw new Error("Color not found in palette");
+    if (e < 0 || e >= this.#t.length) throw new Error(`Index ${e} out of range`);
+    this.#t.splice(e, 1), this.#s = d(this.#t), this.#i.paletteTexture.value = this.#s, this.#i.paletteLength.value = this.#t.length, this.#e();
+  }
+  // ── Shader properties ─────────────────────────────────────────────────────
+  set position(t) {
+    this.#f = t, this.#i.progress.value = t, this.#e();
+  }
+  get position() {
+    return this.#f;
+  }
+  set axis(t) {
+    if (!(t in this.#k)) throw new Error("axis must be 'x', 'y', or 'z'");
+    this.#x = t, this.#i.progress_axis.value = this.#k[t], this.#e();
+  }
+  get axis() {
+    return this.#x;
+  }
+  set colorModel(t) {
+    if (!(t in this.#h)) throw new Error("colorModel must be 'hsv', 'okhsv', 'hsl', 'okhsl', or 'oklch'");
+    this.#C = t, this.#i.polarColorModel.value = this.#h[t], this.#e();
+  }
+  get colorModel() {
+    return this.#C;
+  }
+  set distanceMetric(t) {
+    if (!(t in this.#a)) throw new Error("distanceMetric must be 'rgb', 'oklab', 'deltaE76', 'deltaE2000', or 'kotsarenkoRamos'");
+    this.#p = t, this.#i.distanceMetric.value = this.#a[t], this.#e();
+  }
+  get distanceMetric() {
+    return this.#p;
+  }
+  set isPolar(t) {
+    this.#u = t, this.#i.isPolar.value = t, this.#e();
+  }
+  get isPolar() {
+    return this.#u;
+  }
+  set invertLightness(t) {
+    this.#g = t, this.#i.invertZ.value = t, this.#e();
+  }
+  get invertLightness() {
+    return this.#g;
+  }
+  set showRaw(t) {
+    this.#_ = t, this.#i.debug.value = t, this.#e();
+  }
+  get showRaw() {
+    return this.#_;
+  }
+  static paletteToTexture = (t) => d(t);
+}
+const W = `
+varying vec2 vUv;
+void main() {
+  vUv = uv;
+  gl_Position = vec4(position, 1.0);
+}`, q = `
+#define TWO_PI 6.28318530718
+varying vec2 vUv;
+
+uniform float  slices;
+uniform bool   isPolar;
+uniform int    distanceMetric;
+uniform sampler2D paletteTexture;
+uniform int    paletteLength;
+uniform bool   debug;
+uniform int    polarColorModel;
+uniform bool   invertZ;
+
+${A}
+${O}
+${F}
+${U}
+${G}
+${D}
+${N}
+
+vec3 polarToRGB(vec3 cc) {
+  if (polarColorModel == 0) return hsv2rgb(cc);
+  if (polarColorModel == 1) return okhsv_to_srgb(cc);
+  if (polarColorModel == 2) return hsl2rgb(cc);
+  if (polarColorModel == 3) return okhsl_to_srgb(cc);
+  return lch2rgb(vec3(cc.z, cc.y, cc.x));
+}
+
+void main() {
+  // Decode which slice and the UV within that slice from the atlas Y coordinate.
+  float sliceF   = vUv.y * slices;
+  float progress = floor(sliceF) / (slices - 1.0); // 0…1 along value axis
+  vec2  sliceUV  = vec2(vUv.x, fract(sliceF));
+
+  vec3 colorCoords;
+  if (isPolar) {
+    vec2  toCenter = sliceUV - 0.5;
+    float angle    = atan(toCenter.y, toCenter.x);
+    float radius   = length(toCenter) * 2.0;
+    // Outside the unit circle: store black; display shader discards it.
+    if (radius > 1.0) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); return; }
+    colorCoords = vec3(angle / TWO_PI, radius, progress);
+  } else {
+    colorCoords = vec3(sliceUV.x, sliceUV.y, progress);
+  }
+
+  if (invertZ) colorCoords.z = 1.0 - colorCoords.z;
+
+  vec3 rgb = polarToRGB(colorCoords);
+  vec3 col = debug ? rgb : closestColor(rgb, paletteTexture, paletteLength);
+  gl_FragColor = vec4(col, 1.0);
+}`, nt = `
+varying vec3 vWorldPos;
+void main() {
+  vec4 wp    = modelMatrix * vec4(position, 1.0);
+  vWorldPos  = wp.xyz;
+  gl_Position = projectionMatrix * viewMatrix * wp;
+}`, st = `
+varying vec3 vWorldPos;
+
+uniform sampler2D atlas;
+uniform float     slices;
+uniform float     opacity;
+uniform bool      isPolar;
+
+void main() {
+  // World-space XZ → slice UV, Y → progress along value axis
+  vec2  sliceUV = vWorldPos.xz + 0.5;
+  float progress = vWorldPos.y + 0.5;
+
+  if (isPolar && length(sliceUV - 0.5) * 2.0 > 1.0) discard;
+
+  float si     = floor(progress * (slices - 1.0) + 0.5);
+  float atlasV = (si + sliceUV.y) / slices;
+  vec3  col    = texture2D(atlas, vec2(sliceUV.x, atlasV)).rgb;
+
+  gl_FragColor = vec4(col, opacity);
+}`;
+class ot {
+  #t = [];
+  #r = 512;
+  #l = 512;
+  #P = 1;
+  #f = 32;
+  #x = 64;
+  #C = "okhsv";
+  #p = "oklab";
+  #u = !1;
+  #g = !1;
+  #_ = !0;
+  #k = 0.15;
+  #h = 0.5;
+  #a = 0.4;
+  #s = 1.5;
+  #i = { hsv: 0, okhsv: 1, hsl: 2, okhsl: 3, oklch: 4 };
+  #z = { rgb: 0, oklab: 1, deltaE76: 2, deltaE2000: 3, kotsarenkoRamos: 4 };
+  // compute pass
+  #d;
+  #o;
+  #c;
+  #M;
+  #E;
+  #m;
+  // display pass
+  #L;
+  #y;
+  #e = [];
+  #v;
+  #S;
+  #n;
+  #w = null;
+  #U;
+  #b = null;
+  constructor({
+    palette: t = M(),
+    width: e = 512,
+    height: o = 512,
+    pixelRatio: i = window.devicePixelRatio,
+    container: n = document.body,
+    colorModel: s = "okhsv",
+    distanceMetric: a = "oklab",
+    invertLightness: l = !1,
+    showRaw: c = !1,
+    isPolar: _ = !0,
+    yaw: f = 0.5,
+    pitch: r = 0.4,
+    zoom: h = 1.5,
+    slices: b = 32,
+    sliceResolution: p = 64,
+    sliceOpacity: g
+  } = {}) {
+    this.#t = t, this.#r = e, this.#l = o, this.#P = i, this.#C = s, this.#p = a, this.#u = l, this.#g = c, this.#_ = _, this.#h = f, this.#a = r, this.#s = h, this.#f = Math.max(2, b), this.#x = p, this.#k = g ?? Math.min(1, 5 / this.#f), this.#U = n, this.#d = d(this.#t), this.#D(), this.#N(), this.#G(), this.#T();
+  }
+  // ── Atlas precomputation ───────────────────────────────────────────────────
+  #G() {
+    this.#o.paletteTexture.value = this.#d, this.#o.paletteLength.value = this.#t.length, this.#o.polarColorModel.value = this.#i[this.#C], this.#o.distanceMetric.value = this.#z[this.#p], this.#o.debug.value = this.#g, this.#o.invertZ.value = this.#u, this.#o.isPolar.value = this.#_, this.#n.setRenderTarget(this.#m), this.#n.render(this.#M, this.#E), this.#n.setRenderTarget(null);
+  }
+  // Recompute atlas then repaint — called for any setting that changes the Voronoi.
+  #R() {
+    this.#G(), this.#T();
+  }
+  // ── Camera ────────────────────────────────────────────────────────────────
+  #I() {
+    const t = this.#s * Math.sin(this.#h) * Math.cos(this.#a), e = this.#s * Math.sin(this.#a), o = this.#s * Math.cos(this.#h) * Math.cos(this.#a);
+    this.#S.position.set(t, e, o), this.#S.lookAt(0, 0, 0);
+  }
+  #T() {
+    this.#w !== null && cancelAnimationFrame(this.#w), this.#w = requestAnimationFrame(() => {
+      const t = this.#e.length;
+      this.#e.forEach((e, o) => {
+        e.renderOrder = this.#a >= 0 ? o : t - 1 - o;
+      }), this.#n.render(this.#v, this.#S);
+    });
+  }
+  // ── Three.js setup ────────────────────────────────────────────────────────
+  #D() {
+    this.#n = new w({ antialias: !0 }), this.#n.setPixelRatio(this.#P), this.#n.setSize(this.#r, this.#l), this.#n.domElement.classList.add("palette-viz-3d"), this.#U.appendChild(this.#n.domElement), this.#m = new R(
+      this.#x,
+      this.#x * this.#f,
+      { minFilter: T, magFilter: T }
+    ), this.#o = {
+      slices: { value: this.#f },
+      isPolar: { value: this.#_ },
+      distanceMetric: { value: this.#z[this.#p] },
+      paletteTexture: { value: this.#d },
+      paletteLength: { value: this.#t.length },
+      debug: { value: this.#g },
+      polarColorModel: { value: this.#i[this.#C] },
+      invertZ: { value: this.#u }
+    }, this.#c = new v({
+      uniforms: this.#o,
+      vertexShader: W,
+      fragmentShader: q
+    }), this.#M = new m(), this.#E = new k(-1, 1, 1, -1, 0.1, 1), this.#M.add(new C(new y(2, 2), this.#c)), this.#L = {
+      atlas: { value: this.#m.texture },
+      slices: { value: this.#f },
+      opacity: { value: this.#k },
+      isPolar: { value: this.#_ }
+    }, this.#y = new v({
+      uniforms: this.#L,
+      vertexShader: nt,
+      fragmentShader: st,
+      transparent: !0,
+      depthWrite: !1,
+      side: H
+    });
+    const t = this.#f, e = t > 1 ? 1.001 / (t - 1) : 1;
+    this.#v = new m(), this.#S = new P(60, this.#r / this.#l, 0.01, 10), this.#e = [];
+    for (let o = 0; o < t; o++) {
+      const i = new C(new B(1, e, 1), this.#y);
+      i.position.y = t > 1 ? o / (t - 1) - 0.5 : 0, this.#v.add(i), this.#e.push(i);
+    }
+    this.#I();
+  }
+  #N() {
+    const t = this.#n.domElement;
+    t.addEventListener("pointerdown", (e) => {
+      this.#b = { x: e.clientX, y: e.clientY, yaw: this.#h, pitch: this.#a }, t.setPointerCapture(e.pointerId);
+    }), t.addEventListener("pointermove", (e) => {
+      if (!this.#b) return;
+      const o = e.clientX - this.#b.x, i = e.clientY - this.#b.y;
+      this.#h = this.#b.yaw - o * 5e-3, this.#a = Math.max(-Math.PI / 2.1, Math.min(
+        Math.PI / 2.1,
+        this.#b.pitch + i * 5e-3
+      )), this.#I(), this.#T();
+    }), t.addEventListener("pointerup", () => {
+      this.#b = null;
+    }), t.addEventListener("pointercancel", () => {
+      this.#b = null;
+    }), t.addEventListener("wheel", (e) => {
+      e.preventDefault(), this.#s = Math.max(0.2, Math.min(5, this.#s + e.deltaY * 1e-3)), this.#I(), this.#T();
+    }, { passive: !1 });
+  }
+  // ── Public API ─────────────────────────────────────────────────────────────
+  get canvas() {
+    return this.#n.domElement;
+  }
+  get width() {
+    return this.#r;
+  }
+  get height() {
+    return this.#l;
+  }
+  resize(t, e = null) {
+    this.#r = t, this.#l = e ?? t, this.#n.setSize(this.#r, this.#l), this.#S.aspect = this.#r / this.#l, this.#S.updateProjectionMatrix(), this.#T();
+  }
+  destroy() {
+    this.#w !== null && (cancelAnimationFrame(this.#w), this.#w = null), this.#d.dispose(), this.#m.dispose(), this.#c.dispose(), this.#e.forEach((t) => t.geometry.dispose()), this.#y.dispose(), this.#n.dispose(), this.#n.domElement.remove();
+  }
+  // ── Palette ────────────────────────────────────────────────────────────────
+  set palette(t) {
+    this.#t = t, this.#d = d(t), this.#R();
+  }
+  get palette() {
+    return this.#t;
+  }
+  setColor(t, e) {
+    if (e < 0 || e >= this.#t.length) throw new Error(`Index ${e} out of range`);
+    this.#t[e] = t, this.#d = d(this.#t), this.#R();
+  }
+  // ── Shader properties — all trigger atlas recomputation ───────────────────
+  set colorModel(t) {
+    this.#C = t, this.#R();
+  }
+  get colorModel() {
+    return this.#C;
+  }
+  set distanceMetric(t) {
+    this.#p = t, this.#R();
+  }
+  get distanceMetric() {
+    return this.#p;
+  }
+  set isPolar(t) {
+    this.#_ = t, this.#L.isPolar.value = t, this.#R();
+  }
+  get isPolar() {
+    return this.#_;
+  }
+  set invertLightness(t) {
+    this.#u = t, this.#R();
+  }
+  get invertLightness() {
+    return this.#u;
+  }
+  set showRaw(t) {
+    this.#g = t, this.#R();
+  }
+  get showRaw() {
+    return this.#g;
+  }
+  // ── Orbit — cheap repaint only, no recomputation ──────────────────────────
+  set yaw(t) {
+    this.#h = t, this.#I(), this.#T();
+  }
+  get yaw() {
+    return this.#h;
+  }
+  set pitch(t) {
+    this.#a = Math.max(-Math.PI / 2.1, Math.min(Math.PI / 2.1, t)), this.#I(), this.#T();
+  }
+  get pitch() {
+    return this.#a;
+  }
+  set zoom(t) {
+    this.#s = Math.max(0.2, Math.min(5, t)), this.#I(), this.#T();
+  }
+  get zoom() {
+    return this.#s;
+  }
+}
+class rt {
+  #t = [];
+  #r = 512;
+  #l = 512;
+  #P = 1;
+  #f = 32;
+  #x = 8e-3;
+  #C = 8;
+  #p = "okhsv";
+  #u = "oklab";
+  #g = !1;
+  #_ = !1;
+  #k = !0;
+  #h = 0.5;
+  #a = 0.4;
+  #s = 1.5;
+  #i = { hsv: 0, okhsv: 1, hsl: 2, okhsl: 3, oklch: 4 };
+  #z = { rgb: 0, oklab: 1, deltaE76: 2, deltaE2000: 3, kotsarenkoRamos: 4 };
+  // compute pass — reuses module-level shader strings and ComputeUniforms3D type
+  #d;
+  #o;
+  #c;
+  #M;
+  #E;
+  #m;
+  // display
+  #L;
+  #y;
+  #e = null;
+  #v = null;
+  #S;
+  #n;
+  #w = null;
+  #U;
+  #b = null;
+  constructor({
+    palette: t = M(),
+    width: e = 512,
+    height: o = 512,
+    pixelRatio: i = window.devicePixelRatio,
+    container: n = document.body,
+    colorModel: s = "okhsv",
+    distanceMetric: a = "oklab",
+    invertLightness: l = !1,
+    showRaw: c = !1,
+    isPolar: _ = !0,
+    yaw: f = 0.5,
+    pitch: r = 0.4,
+    zoom: h = 1.5,
+    resolution: b = 32,
+    tubeRadius: p = 8e-3,
+    tubeSegments: g = 8
+  } = {}) {
+    this.#t = t, this.#r = e, this.#l = o, this.#P = i, this.#p = s, this.#u = a, this.#g = l, this.#_ = c, this.#k = _, this.#h = f, this.#a = r, this.#s = h, this.#f = Math.max(4, b), this.#x = p, this.#C = g, this.#U = n, this.#d = d(this.#t), this.#G(), this.#W(), this.#A();
+  }
+  #G() {
+    this.#n = new w({ antialias: !0 }), this.#n.setPixelRatio(this.#P), this.#n.setSize(this.#r, this.#l), this.#n.setClearColor(1118481), this.#n.domElement.classList.add("palette-viz-voronoi"), this.#U.appendChild(this.#n.domElement);
+    const t = this.#f;
+    this.#m = new R(t, t * t, {
+      minFilter: L,
+      magFilter: L
+    }), this.#o = {
+      slices: { value: t },
+      isPolar: { value: this.#k },
+      distanceMetric: { value: this.#z[this.#u] },
+      paletteTexture: { value: this.#d },
+      paletteLength: { value: this.#t.length },
+      debug: { value: this.#_ },
+      polarColorModel: { value: this.#i[this.#p] },
+      invertZ: { value: this.#g }
+    }, this.#c = new v({
+      uniforms: this.#o,
+      vertexShader: W,
+      fragmentShader: q
+    }), this.#M = new m(), this.#E = new k(-1, 1, 1, -1, 0.1, 1), this.#M.add(new C(new y(2, 2), this.#c)), this.#L = new m(), this.#y = new P(60, this.#r / this.#l, 0.01, 10), this.#L.add(new $(16777215, 0.5));
+    const e = new V(16777215, 1.5);
+    e.position.set(2, 3, 2), this.#L.add(e), this.#S = new Y({ roughness: 0.35, metalness: 0.1, vertexColors: !0 }), this.#F();
+  }
+  #R() {
+    this.#o.paletteTexture.value = this.#d, this.#o.paletteLength.value = this.#t.length, this.#o.polarColorModel.value = this.#i[this.#p], this.#o.distanceMetric.value = this.#z[this.#u], this.#o.debug.value = this.#_, this.#o.invertZ.value = this.#g, this.#o.isPolar.value = this.#k, this.#n.setRenderTarget(this.#m), this.#n.render(this.#M, this.#E), this.#n.setRenderTarget(null);
+  }
+  // Returns an encoded color label (R<<16|G<<8|B) for a voxel, or null if
+  // the voxel is out of bounds or (in polar mode) outside the unit disc.
+  #I(t, e, o, i) {
+    const n = this.#f;
+    if (e < 0 || e >= n || o < 0 || o >= n || i < 0 || i >= n) return null;
+    if (this.#k) {
+      const a = (e + 0.5) / n - 0.5, l = (o + 0.5) / n - 0.5;
+      if (Math.sqrt(a * a + l * l) * 2 > 1) return null;
+    }
+    const s = ((i * n + o) * n + e) * 4;
+    return t[s] << 16 | t[s + 1] << 8 | t[s + 2];
+  }
+  // Atlas corner (cx, cy, cz) → Three.js world position.
+  // Mirrors the display shader: sliceUV = worldPos.xz + 0.5, progress = worldPos.y + 0.5
+  #T(t, e, o) {
+    const i = this.#f;
+    return new x(t / i - 0.5, o / i - 0.5, e / i - 0.5);
+  }
+  // Walk all 3 families of axis-aligned grid edges.
+  // An edge is a Voronoi edge when its 4 surrounding voxels have ≥ 3 distinct labels.
+  #D(t) {
+    const e = this.#f, o = [], i = (n, s, a) => {
+      const l = [];
+      for (const [r, h, b] of n) {
+        const p = this.#I(t, r, h, b);
+        p !== null && l.push(p);
+      }
+      if (new Set(l).size < 3) return;
+      const c = /* @__PURE__ */ new Map();
+      for (const r of l) c.set(r, (c.get(r) ?? 0) + 1);
+      let _ = l[0], f = 0;
+      for (const [r, h] of c) h > f && (_ = r, f = h);
+      o.push({ p0: this.#T(...s), p1: this.#T(...a), label: _ });
+    };
+    for (let n = 0; n <= e; n++)
+      for (let s = 0; s <= e; s++)
+        for (let a = 0; a < e; a++)
+          i(
+            [[n - 1, s - 1, a], [n, s - 1, a], [n - 1, s, a], [n, s, a]],
+            [n, s, a],
+            [n, s, a + 1]
+          );
+    for (let n = 0; n <= e; n++)
+      for (let s = 0; s <= e; s++)
+        for (let a = 0; a < e; a++)
+          i(
+            [[a, n - 1, s - 1], [a, n, s - 1], [a, n - 1, s], [a, n, s]],
+            [a, n, s],
+            [a + 1, n, s]
+          );
+    for (let n = 0; n <= e; n++)
+      for (let s = 0; s <= e; s++)
+        for (let a = 0; a < e; a++)
+          i(
+            [[n - 1, a, s - 1], [n, a, s - 1], [n - 1, a, s], [n, a, s]],
+            [n, a, s],
+            [n, a + 1, s]
+          );
+    return o;
+  }
+  #N(t) {
+    if (this.#e && (this.#L.remove(this.#e), this.#e.geometry.dispose(), this.#e = null), this.#v && (this.#L.remove(this.#v), this.#v.geometry.dispose(), this.#v = null), t.length === 0) return;
+    const e = new Z(this.#x, this.#x, 1, this.#C), o = new K(this.#x, this.#C, this.#C >> 1), i = new j(), n = new x(0, 1, 0), s = new x(), a = new I();
+    this.#e = new z(e, this.#S, t.length);
+    const l = /* @__PURE__ */ new Map();
+    let c = 0;
+    for (let f = 0; f < t.length; f++) {
+      const { p0: r, p1: h, label: b } = t[f];
+      s.copy(h).sub(r);
+      const p = s.length();
+      if (p < 1e-7) continue;
+      i.position.copy(r).add(h).multiplyScalar(0.5), i.scale.set(1, p, 1), i.quaternion.setFromUnitVectors(n, s.divideScalar(p)), i.updateMatrix(), this.#e.setMatrixAt(c, i.matrix), a.setRGB((b >> 16 & 255) / 255, (b >> 8 & 255) / 255, (b & 255) / 255), this.#e.setColorAt(c, a), c++;
+      const g = `${r.x.toFixed(5)},${r.y.toFixed(5)},${r.z.toFixed(5)}`, S = `${h.x.toFixed(5)},${h.y.toFixed(5)},${h.z.toFixed(5)}`;
+      l.has(g) || l.set(g, { pos: r, label: b }), l.has(S) || l.set(S, { pos: h, label: b });
+    }
+    this.#e.count = c, this.#e.instanceMatrix.needsUpdate = !0, this.#e.instanceColor && (this.#e.instanceColor.needsUpdate = !0), this.#L.add(this.#e);
+    const _ = Array.from(l.values());
+    this.#v = new z(o, this.#S, _.length), i.scale.set(1, 1, 1), i.quaternion.set(0, 0, 0, 1);
+    for (let f = 0; f < _.length; f++) {
+      const { pos: r, label: h } = _[f];
+      i.position.copy(r), i.updateMatrix(), this.#v.setMatrixAt(f, i.matrix), a.setRGB((h >> 16 & 255) / 255, (h >> 8 & 255) / 255, (h & 255) / 255), this.#v.setColorAt(f, a);
+    }
+    this.#v.instanceMatrix.needsUpdate = !0, this.#v.instanceColor && (this.#v.instanceColor.needsUpdate = !0), this.#L.add(this.#v);
+  }
+  #A() {
+    this.#R();
+    const t = this.#f, e = new Uint8Array(t * t * t * 4);
+    this.#n.readRenderTargetPixels(this.#m, 0, 0, t, t * t, e);
+    const o = this.#D(e);
+    this.#N(o), this.#O();
+  }
+  #F() {
+    const t = this.#s * Math.sin(this.#h) * Math.cos(this.#a), e = this.#s * Math.sin(this.#a), o = this.#s * Math.cos(this.#h) * Math.cos(this.#a);
+    this.#y.position.set(t, e, o), this.#y.lookAt(0, 0, 0);
+  }
+  #O() {
+    this.#w !== null && cancelAnimationFrame(this.#w), this.#w = requestAnimationFrame(() => {
+      this.#n.render(this.#L, this.#y);
+    });
+  }
+  #W() {
+    const t = this.#n.domElement;
+    t.addEventListener("pointerdown", (e) => {
+      this.#b = { x: e.clientX, y: e.clientY, yaw: this.#h, pitch: this.#a }, t.setPointerCapture(e.pointerId);
+    }), t.addEventListener("pointermove", (e) => {
+      if (!this.#b) return;
+      const o = e.clientX - this.#b.x, i = e.clientY - this.#b.y;
+      this.#h = this.#b.yaw - o * 5e-3, this.#a = Math.max(-Math.PI / 2.1, Math.min(
+        Math.PI / 2.1,
+        this.#b.pitch + i * 5e-3
+      )), this.#F(), this.#O();
+    }), t.addEventListener("pointerup", () => {
+      this.#b = null;
+    }), t.addEventListener("pointercancel", () => {
+      this.#b = null;
+    }), t.addEventListener("wheel", (e) => {
+      e.preventDefault(), this.#s = Math.max(0.2, Math.min(5, this.#s + e.deltaY * 1e-3)), this.#F(), this.#O();
+    }, { passive: !1 });
+  }
+  // ── Public API ─────────────────────────────────────────────────────────────
+  get canvas() {
+    return this.#n.domElement;
+  }
+  get width() {
+    return this.#r;
+  }
+  get height() {
+    return this.#l;
+  }
+  resize(t, e = null) {
+    this.#r = t, this.#l = e ?? t, this.#n.setSize(this.#r, this.#l), this.#y.aspect = this.#r / this.#l, this.#y.updateProjectionMatrix(), this.#O();
+  }
+  destroy() {
+    this.#w !== null && (cancelAnimationFrame(this.#w), this.#w = null), this.#d.dispose(), this.#m.dispose(), this.#c.dispose(), this.#S.dispose(), this.#e?.geometry.dispose(), this.#v?.geometry.dispose(), this.#n.dispose(), this.#n.domElement.remove();
+  }
+  // ── Palette ────────────────────────────────────────────────────────────────
+  set palette(t) {
+    this.#t = t, this.#d = d(t), this.#A();
+  }
+  get palette() {
+    return this.#t;
+  }
+  setColor(t, e) {
+    if (e < 0 || e >= this.#t.length) throw new Error(`Index ${e} out of range`);
+    this.#t[e] = t, this.#d = d(this.#t), this.#A();
+  }
+  // ── Shader properties — all trigger a full rebuild ─────────────────────────
+  set colorModel(t) {
+    this.#p = t, this.#A();
+  }
+  get colorModel() {
+    return this.#p;
+  }
+  set distanceMetric(t) {
+    this.#u = t, this.#A();
+  }
+  get distanceMetric() {
+    return this.#u;
+  }
+  set isPolar(t) {
+    this.#k = t, this.#A();
+  }
+  get isPolar() {
+    return this.#k;
+  }
+  set invertLightness(t) {
+    this.#g = t, this.#A();
+  }
+  get invertLightness() {
+    return this.#g;
+  }
+  set showRaw(t) {
+    this.#_ = t, this.#A();
+  }
+  get showRaw() {
+    return this.#_;
+  }
+  // ── Orbit — no recomputation ───────────────────────────────────────────────
+  set yaw(t) {
+    this.#h = t, this.#F(), this.#O();
+  }
+  get yaw() {
+    return this.#h;
+  }
+  set pitch(t) {
+    this.#a = Math.max(-Math.PI / 2.1, Math.min(Math.PI / 2.1, t)), this.#F(), this.#O();
+  }
+  get pitch() {
+    return this.#a;
+  }
+  set zoom(t) {
+    this.#s = Math.max(0.2, Math.min(5, t)), this.#F(), this.#O();
+  }
+  get zoom() {
+    return this.#s;
+  }
+}
+export {
+  it as PaletteViz,
+  ot as PaletteViz3D,
+  rt as PaletteViz3DVoronoi,
+  tt as fragmentShader,
+  d as paletteToTexture,
+  M as randomPalette
+};
+//# sourceMappingURL=palette-shader.js.map