3D Hair & Beauty Commerce

Write a React Three Fiber component that applies a real-time hair color preview shader to a 3D hair mesh using a custom GLSL ShaderMaterial. Requirements: (1) The hair mesh is a GLTF model with a UV-mapped texture (the base hair texture provides strand detail and specularity). (2) ShaderMaterial uniforms: u_baseTexture (sampler2D — the original hair texture), u_targetHue (float, 0.0–1.0), u_targetSaturation (float, 0.0–1.0), u_targetLightness (float, 0.0–1.0), u_colorIntensity (float, 0.0–1.0 — blend between original and target color), u_highlightHue (float), u_highlightMask (sampler2D — grayscale texture defining highlight placement), u_rootDarkness (float, 0.0–1.0 — how dark the roots are relative to lengths). (3) Fragment shader: (a) Provide complete RGB↔HSL conversion functions in GLSL. (b) Sample u_baseTexture — extract its luminance to preserve strand detail. (c) Convert u_targetHue/Saturation/Lightness to RGB. (d) Apply u_rootDarkness: darken the color based on UV.y (roots at top, tips at bottom — adjust lightness by mix(targetL * (1.0 - u_rootDarkness), targetL, uv.y)). (e) Blend highlight color at u_highlightMask regions. (f) Multiply final color by original luminance to preserve strand shading. (g) mix() between original texture color and computed color by u_colorIntensity. (4) React component: HairColorPreview with props shadeHex: string (convert to HSL for uniforms), highlightHex: string, rootDarkness: number, colorIntensity: number. Update uniforms reactively on prop change. (5) Outside Canvas: a shade swatch grid component showing 24 color options, clicking one updates shadeHex. Full TypeScript.

Write a TypeScript module that analyzes a user's hair color from their webcam and recommends the closest products from a shade library. Requirements: (1) captureHairSample(): request getUserMedia({ video: { facingMode: "user" } }), draw a single frame to a hidden canvas, sample a 40x40 pixel region in the upper-center of the frame (where hair typically appears), compute the average RGB of all pixels. (2) rgbToLab(r, g, b): implement the full sRGB → XYZ → CIELAB conversion in TypeScript (provide the complete math — D65 illuminant, gamma correction, XYZ matrix). (3) deltaE(lab1, lab2): implement CIE76 color difference formula: sqrt((L1-L2)^2 + (a1-a2)^2 + (b1-b2)^2). (4) Shade library: define a ShadeLibrary type: Array<{ id: string, name: string, hex: string, skuId: string, level: 1|2|3|4|5|6|7|8|9|10 }>. Convert each shade hex to LAB on initialization. (5) findClosestShades(sampledRgb, library, topN = 3): convert sampled RGB to LAB, compute deltaE against all library shades, return top N sorted by ascending deltaE with their deltaE scores. (6) React component: ShadeMatcher — shows a "Scan My Hair Color" button, activates camera, captures sample, displays top 3 recommended shades with product names, swatch colors, and "Add to Cart" buttons. Handle camera permission denial gracefully. Full TypeScript.