@ume-group/contracts 0.2.1

package/dist/layer2/shaders.js

@@ -0,0 +1,604 @@
+/**
+ * Shared WebGL shaders for Layer 2 webcam compositing
+ *
+ * These shaders are used by both editor and player for consistent rendering.
+ * The fragment shader supports multiple modes:
+ * - AI segmentation (MediaPipe)
+ * - Chroma key (green/blue/custom with HSV window option)
+ * - Procedural silhouette (fallback/placeholder)
+ * - Full view mode (no masking)
+ *
+ * ArchiMate: Application Component (Shared Rendering Logic)
+ */
+/**
+ * Simple vertex shader for webcam plane rendering
+ */
+export const webcamVertexShader = `
+	varying vec2 vUv;
+	void main() {
+		vUv = uv;
+		gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+	}
+`;
+/**
+ * Fragment shader for webcam compositing with background removal
+ *
+ * Supports:
+ * - AI segmentation mask
+ * - Chroma key with HSV or YCbCr algorithms
+ * - Garbage matte (rectangle crop with feathering)
+ * - Color correction (brightness, contrast, saturation, temperature)
+ * - Pre-multiplied alpha for correct edge blending
+ *
+ * Uniforms:
+ * - webcamTexture: The live webcam VideoTexture
+ * - segmentationMask: AI-generated mask (white = person)
+ * - hasTexture: Whether webcam texture is available
+ * - useAIMask: Enable AI segmentation mode
+ * - maskThreshold: AI mask threshold (0.0 - 1.0)
+ * - aspectRatio: Plane aspect ratio for silhouette proportions (always >= 1.0)
+ * - videoAspectRatio: Actual video W/H (may be < 1.0 for portrait), used for cover-crop UV
+ * - useChromaKey: Enable chroma key mode
+ * - chromaKeyColor: Key color in RGB (0.0 - 1.0)
+ * - chromaKeyTolerance: Color tolerance (0.0 - 1.0)
+ * - chromaKeySpill: Spill suppression amount (0.0 - 1.0)
+ * - chromaKeyEdge: Edge softness (0.0 - 1.0)
+ * - setupMode: Show silhouette overlay for positioning (editor only)
+ * - useHsvWindow: Enable HSV window mode for advanced keying
+ * - hsvMinHue/hsvMaxHue: Hue range (0-360)
+ * - hsvMinSat/hsvMaxSat: Saturation range (0-1)
+ * - hsvMinVal/hsvMaxVal: Value range (0-1)
+ * - useGarbageMatte: Enable garbage matte cropping
+ * - garbageMatteIsRect: True = rectangle, false = polygon texture
+ * - garbageMatteRect: Rectangle bounds (x1, y1, x2, y2)
+ * - garbageMatteInvert: Invert mask
+ * - garbageMatteFeather: Edge softness in UV units
+ * - garbageMatteFeatherEdges: Per-edge feather (top, right, bottom, left)
+ * - usePerEdgeFeather: Enable per-edge feathering
+ * - ccBrightness/ccContrast/ccSaturation/ccTemperature: Color correction
+ * - fullViewMode: Show entire webcam without masking
+ * - darkOpacity: Opacity for areas outside silhouette (editor preview)
+ * - placeholderColor/placeholderOpacity: Editor placeholder when no webcam
+ */
+export const webcamFragmentShader = `
+	uniform sampler2D webcamTexture;
+	uniform sampler2D segmentationMask;
+	uniform float darkOpacity;
+	uniform bool hasTexture;
+	uniform bool useAIMask;
+	uniform float maskThreshold;
+	uniform vec3 placeholderColor;
+	uniform float placeholderOpacity;
+	uniform float aspectRatio;
+	uniform float videoAspectRatio;
+	// Chroma key uniforms
+	uniform bool useChromaKey;
+	uniform vec3 chromaKeyColor;
+	uniform float chromaKeyTolerance;
+	uniform float chromaKeySpill;
+	uniform float chromaKeyEdge;
+	uniform bool setupMode;
+	// HSV window uniforms
+	uniform bool useHsvWindow;
+	uniform float hsvMinHue;
+	uniform float hsvMaxHue;
+	uniform float hsvMinSat;
+	uniform float hsvMaxSat;
+	uniform float hsvMinVal;
+	uniform float hsvMaxVal;
+	// Garbage matte uniforms
+	uniform bool useGarbageMatte;
+	uniform bool garbageMatteIsRect;
+	uniform vec4 garbageMatteRect;
+	uniform sampler2D garbageMatteMask;
+	uniform bool garbageMatteInvert;
+	uniform float garbageMatteFeather;
+	uniform vec4 garbageMatteFeatherEdges;
+	uniform bool usePerEdgeFeather;
+	// Color correction uniforms
+	uniform float ccBrightness;
+	uniform float ccContrast;
+	uniform float ccSaturation;
+	uniform float ccTemperature;
+	// Full view mode
+	uniform bool fullViewMode;
+	// Debug: visualize the AI mask as a color overlay
+	uniform bool debugShowMask;
+	// Silhouette scale for generous capture (participantHeight / captureHeight)
+	uniform float silhouetteScale;
+
+	varying vec2 vUv;
+
+	// Check if point is inside an ellipse (for head)
+	bool inEllipse(vec2 p, vec2 center, vec2 radius) {
+		vec2 d = (p - center) / radius;
+		return dot(d, d) <= 1.0;
+	}
+
+	// Check if point is inside a rectangle
+	bool inRect(vec2 p, vec2 center, vec2 halfSize) {
+		vec2 d = abs(p - center);
+		return d.x <= halfSize.x && d.y <= halfSize.y;
+	}
+
+	// Convert RGB to HSV (Hue 0-6, Saturation 0-1, Value 0-1)
+	// Based on legacy Gausst chroma key implementation
+	vec3 rgb2hsv(vec3 c) {
+		float minVal = min(min(c.r, c.g), c.b);
+		float maxVal = max(max(c.r, c.g), c.b);
+		float delta = maxVal - minVal;
+
+		float h = 0.0;
+		float s = (maxVal > 0.0) ? delta / maxVal : 0.0;
+		float v = maxVal;
+
+		if (delta > 0.001) {
+			if (c.r == maxVal) {
+				if (minVal == c.g) {
+					h = 5.0 + (1.0 - c.b / c.r);
+				} else {
+					h = c.g / c.r;
+				}
+			} else if (c.g == maxVal) {
+				if (minVal == c.r) {
+					h = 2.0 + (1.0 - c.b / c.g);
+				} else {
+					h = 1.0 + c.r / c.g;
+				}
+			} else {
+				if (minVal == c.r) {
+					h = 3.0 + (1.0 - c.g / c.b);
+				} else {
+					h = 4.0 + c.r / c.b;
+				}
+			}
+		}
+
+		return vec3(h, s, v);
+	}
+
+	// Convert RGB to HSV with 0-360 degree hue for Gausst window mode
+	vec3 rgb2hsv360(vec3 c) {
+		vec3 hsv = rgb2hsv(c);
+		hsv.x = hsv.x * 60.0;
+		return hsv;
+	}
+
+	// Garbage matte mask function
+	// Returns 1.0 = keep pixel, 0.0 = discard pixel
+	float getGarbageMatteMask(vec2 uv) {
+		if (!useGarbageMatte) return 1.0;
+
+		float mask;
+		if (garbageMatteIsRect) {
+			float x1 = garbageMatteRect.x;
+			float y1 = garbageMatteRect.y;
+			float x2 = garbageMatteRect.z;
+			float y2 = garbageMatteRect.w;
+
+			bool isFullFrame = x1 < 0.01 && y1 < 0.01 && x2 > 0.99 && y2 > 0.99;
+
+			bool hasFeather = usePerEdgeFeather
+				? (garbageMatteFeatherEdges.x > 0.0 || garbageMatteFeatherEdges.y > 0.0 ||
+				   garbageMatteFeatherEdges.z > 0.0 || garbageMatteFeatherEdges.w > 0.0)
+				: (garbageMatteFeather > 0.0);
+
+			if (hasFeather && !isFullFrame) {
+				float dLeft = x1 - uv.x;
+				float dRight = uv.x - x2;
+				float dTop = y1 - uv.y;
+				float dBottom = uv.y - y2;
+
+				float featherTop = usePerEdgeFeather ? garbageMatteFeatherEdges.x : garbageMatteFeather;
+				float featherRight = usePerEdgeFeather ? garbageMatteFeatherEdges.y : garbageMatteFeather;
+				float featherBottom = usePerEdgeFeather ? garbageMatteFeatherEdges.z : garbageMatteFeather;
+				float featherLeft = usePerEdgeFeather ? garbageMatteFeatherEdges.w : garbageMatteFeather;
+
+				float maskTop = featherTop > 0.0 ? 1.0 - smoothstep(-featherTop, featherTop, dTop) : (dTop < 0.0 ? 1.0 : 0.0);
+				float maskRight = featherRight > 0.0 ? 1.0 - smoothstep(-featherRight, featherRight, dRight) : (dRight < 0.0 ? 1.0 : 0.0);
+				float maskBottom = featherBottom > 0.0 ? 1.0 - smoothstep(-featherBottom, featherBottom, dBottom) : (dBottom < 0.0 ? 1.0 : 0.0);
+				float maskLeft = featherLeft > 0.0 ? 1.0 - smoothstep(-featherLeft, featherLeft, dLeft) : (dLeft < 0.0 ? 1.0 : 0.0);
+
+				// Use min() to keep edge feathering independent without corner rounding
+				// (multiplication would cause 0.5 * 0.5 = 0.25 at corners, creating rounded effect)
+				mask = min(min(maskTop, maskBottom), min(maskLeft, maskRight));
+			} else {
+				bool inside = uv.x >= x1 && uv.x <= x2 && uv.y >= y1 && uv.y <= y2;
+				mask = inside ? 1.0 : 0.0;
+			}
+		} else {
+			mask = texture2D(garbageMatteMask, uv).r;
+		}
+
+		return garbageMatteInvert ? 1.0 - mask : mask;
+	}
+
+	// HSV window-based chroma key (Gausst algorithm)
+	float hsvWindowMask(vec3 color, float minH, float maxH, float minS, float maxS, float minV, float maxV, float edgeSoftness) {
+		vec3 hsv = rgb2hsv360(color);
+
+		bool hueInRange;
+		if (minH <= maxH) {
+			hueInRange = hsv.x >= minH && hsv.x <= maxH;
+		} else {
+			hueInRange = hsv.x >= minH || hsv.x <= maxH;
+		}
+
+		bool satInRange = hsv.y >= minS && hsv.y <= maxS;
+		bool valInRange = hsv.z >= minV && hsv.z <= maxV;
+
+		if (hueInRange && satInRange && valInRange) {
+			float hueCenter = (minH + maxH) / 2.0;
+			float hueDist = abs(hsv.x - hueCenter) / ((maxH - minH) / 2.0 + 0.001);
+			float satCenter = (minS + maxS) / 2.0;
+			float satDist = abs(hsv.y - satCenter) / ((maxS - minS) / 2.0 + 0.001);
+			float valCenter = (minV + maxV) / 2.0;
+			float valDist = abs(hsv.z - valCenter) / ((maxV - minV) / 2.0 + 0.001);
+
+			float dist = max(max(hueDist, satDist), valDist);
+			return smoothstep(1.0 - edgeSoftness * 2.0, 1.0, dist);
+		} else {
+			return 1.0;
+		}
+	}
+
+	// Chroma key mask calculation
+	// HSV window acts as an additional refinement filter on top of the normal
+	// chroma key. With full range (0-360, 0-1, 0-1), result is identical to
+	// normal chroma key. Narrowing the HSV window restricts which pixels get keyed.
+	float chromaKeyMask(vec3 color, vec3 keyColor, float tolerance, float edgeSoftness) {
+		bool isGreenScreen = keyColor.g > 0.5 && keyColor.g > keyColor.r * 1.5 && keyColor.g > keyColor.b * 1.5;
+		bool isBlueScreen = keyColor.b > 0.5 && keyColor.b > keyColor.r * 1.5 && keyColor.b > keyColor.g * 1.5;
+
+		float normalMask;
+
+		if (isGreenScreen || isBlueScreen) {
+			float Y = 0.299 * color.r + 0.587 * color.g + 0.114 * color.b;
+			float Cb = 0.564 * (color.b - Y);
+			float Cr = 0.713 * (color.r - Y);
+
+			float keyY = 0.299 * keyColor.r + 0.587 * keyColor.g + 0.114 * keyColor.b;
+			float keyCb = 0.564 * (keyColor.b - keyY);
+			float keyCr = 0.713 * (keyColor.r - keyY);
+
+			float dist = distance(vec2(Cb, Cr), vec2(keyCb, keyCr));
+
+			float scaledTolerance = tolerance * 0.5;
+			float softRange = edgeSoftness * 0.3;
+			normalMask = smoothstep(scaledTolerance - softRange, scaledTolerance + softRange, dist);
+		} else {
+			vec3 colorHSV = rgb2hsv(color);
+			vec3 keyHSV = rgb2hsv(keyColor);
+
+			float hueDiff = abs(colorHSV.x - keyHSV.x);
+			if (hueDiff > 3.0) hueDiff = 6.0 - hueDiff;
+			hueDiff /= 3.0;
+
+			float satDiff = abs(colorHSV.y - keyHSV.y);
+			float valDiff = abs(colorHSV.z - keyHSV.z);
+
+			float dist = hueDiff * 0.7 + satDiff * 0.2 + valDiff * 0.1;
+
+			if (colorHSV.y < 0.15 && keyHSV.y < 0.15) {
+				dist = valDiff * 0.8 + satDiff * 0.2;
+			}
+
+			float scaledTolerance = tolerance * 0.4;
+			float softRange = edgeSoftness * 0.2;
+			normalMask = smoothstep(scaledTolerance - softRange, scaledTolerance + softRange, dist);
+		}
+
+		if (useHsvWindow) {
+			// HSV window restricts keying: pixels outside the window stay opaque
+			float hsvMask = hsvWindowMask(color, hsvMinHue, hsvMaxHue, hsvMinSat, hsvMaxSat, hsvMinVal, hsvMaxVal, edgeSoftness);
+			return max(normalMask, hsvMask);
+		}
+
+		return normalMask;
+	}
+
+	// Spill suppression - works with any key color
+	vec3 suppressSpill(vec3 color, vec3 keyColor, float spillAmount) {
+		if (spillAmount <= 0.0) return color;
+
+		float keyMax = max(keyColor.r, max(keyColor.g, keyColor.b));
+		if (keyMax < 0.01) return color;
+
+		vec3 keyDir = keyColor / keyMax;
+		float colorDot = dot(color, keyDir);
+		float keyDot = dot(keyDir, keyDir);
+		vec3 neutral = color - keyDir * max(0.0, (colorDot / keyDot - length(color) * 0.3));
+		float keyInfluence = dot(normalize(color + 0.001), normalize(keyColor + 0.001));
+		keyInfluence = max(0.0, keyInfluence - 0.5) * 2.0;
+
+		return mix(color, neutral, spillAmount * keyInfluence);
+	}
+
+	// Color correction
+	vec3 applyColorCorrection(vec3 color) {
+		if (ccBrightness == 0.0 && ccContrast == 0.0 && ccSaturation == 0.0 && ccTemperature == 0.0) {
+			return color;
+		}
+
+		vec3 result = color;
+
+		// Brightness
+		result += ccBrightness * 0.5;
+
+		// Contrast
+		float contrastFactor = 1.0 + ccContrast;
+		result = (result - 0.5) * contrastFactor + 0.5;
+
+		// Saturation
+		float luminance = dot(result, vec3(0.299, 0.587, 0.114));
+		vec3 grayscale = vec3(luminance);
+		float satFactor = 1.0 + ccSaturation;
+		result = mix(grayscale, result, satFactor);
+
+		// Temperature
+		if (ccTemperature != 0.0) {
+			float temp = ccTemperature * 0.2;
+			result.r += temp;
+			result.g += temp * 0.5;
+			result.b -= temp;
+		}
+
+		return clamp(result, 0.0, 1.0);
+	}
+
+	// Procedural silhouette check
+	bool inSilhouette(vec2 uv, float aspectRatioFactor) {
+		float fullPersonHeight = 0.85;
+		float personHeight = fullPersonHeight * silhouetteScale;
+		float bottomMargin = (1.0 - fullPersonHeight) / 2.0;
+
+		float feetY = bottomMargin;
+		float legHeight = personHeight * 0.45;
+		float hipY = feetY + legHeight;
+		float torsoHeight = personHeight * 0.35;
+		float shoulderY = hipY + torsoHeight;
+		float neckLength = personHeight * 0.03;
+		float neckY = shoulderY + neckLength;
+		float headRadius = personHeight * 0.09;
+		float headY = neckY + headRadius;
+
+		float torsoWidth = personHeight * 0.22 * aspectRatioFactor;
+		float legWidth = personHeight * 0.08 * aspectRatioFactor;
+		float legGap = personHeight * 0.02 * aspectRatioFactor;
+		float armWidth = personHeight * 0.05 * aspectRatioFactor;
+		float armLength = personHeight * 0.35;
+
+		float cx = 0.5;
+
+		float headRadiusX = headRadius * aspectRatioFactor;
+		float headRadiusY = headRadius;
+		if (inEllipse(uv, vec2(cx, headY), vec2(headRadiusX, headRadiusY))) return true;
+
+		float neckWidth = headRadiusX * 0.5;
+		if (inRect(uv, vec2(cx, neckY - neckLength/2.0), vec2(neckWidth, neckLength/2.0))) return true;
+
+		if (inRect(uv, vec2(cx, hipY + torsoHeight/2.0), vec2(torsoWidth/2.0, torsoHeight/2.0))) return true;
+
+		float armX = cx - torsoWidth/2.0 - armWidth/2.0;
+		if (inRect(uv, vec2(armX, shoulderY - armLength/2.0), vec2(armWidth/2.0, armLength/2.0))) return true;
+
+		armX = cx + torsoWidth/2.0 + armWidth/2.0;
+		if (inRect(uv, vec2(armX, shoulderY - armLength/2.0), vec2(armWidth/2.0, armLength/2.0))) return true;
+
+		float legX = cx - legGap - legWidth/2.0;
+		if (inRect(uv, vec2(legX, feetY + legHeight/2.0), vec2(legWidth/2.0, legHeight/2.0))) return true;
+
+		legX = cx + legGap + legWidth/2.0;
+		if (inRect(uv, vec2(legX, feetY + legHeight/2.0), vec2(legWidth/2.0, legHeight/2.0))) return true;
+
+		return false;
+	}
+
+	// Cover-crop UV: maps plane UV to texture UV when video AR differs from plane AR.
+	// Acts like CSS object-fit:cover — fills the plane, crops excess, no stretching.
+	// When video and plane have the same AR, returns uv unchanged.
+	vec2 getCoverUV(vec2 uv) {
+		float planeAR = aspectRatio;
+		float vidAR = videoAspectRatio;
+		if (vidAR <= 0.0 || planeAR <= 0.0 || abs(vidAR - planeAR) < 0.01) {
+			return uv;
+		}
+		if (vidAR < planeAR) {
+			// Video is narrower/taller than plane — crop top/bottom
+			float scale = vidAR / planeAR;
+			return vec2(uv.x, uv.y * scale + (1.0 - scale) * 0.5);
+		} else {
+			// Video is wider than plane — crop sides
+			float scale = planeAR / vidAR;
+			return vec2(uv.x * scale + (1.0 - scale) * 0.5, uv.y);
+		}
+	}
+
+	void main() {
+		// Positioning mode: setup modal open AND neither AI nor chroma key active
+		// In this mode, show full silhouette guide WITHOUT garbage matte
+		// setupMode is set by component when webcam setup modal is open
+		bool isPositioningMode = setupMode && !useAIMask && !useChromaKey && !fullViewMode;
+
+		// Get garbage matte mask - skip in positioning mode to show full silhouette
+		float garbageMask = isPositioningMode ? 1.0 : getGarbageMatteMask(vUv);
+
+		if (garbageMask < 0.001) {
+			discard;
+		}
+
+		float aspectRatioFactor = 1.0 / aspectRatio;
+
+		// Cover-crop UV for texture sampling when video AR differs from plane AR
+		// (e.g., portrait video on landscape plane). Silhouette/matte use vUv (plane space).
+		vec2 texUV = getCoverUV(vUv);
+		vec4 texColor = texture2D(webcamTexture, texUV);
+
+		// Debug: visualize AI mask as color overlay (red=person, blue=background)
+		if (debugShowMask && useAIMask) {
+			float maskVal = texture2D(segmentationMask, texUV).r;
+			gl_FragColor = vec4(maskVal, 0.0, 1.0 - maskVal, 1.0);
+			return;
+		}
+
+		// Full view mode - MUST be checked FIRST before any processing
+		// Used during eyedropper color picking to show raw webcam
+		if (fullViewMode) {
+			float fvGarbageMask = getGarbageMatteMask(vUv);
+			if (fvGarbageMask < 0.5) {
+				discard;
+			}
+			if (hasTexture) {
+				gl_FragColor = vec4(texColor.rgb, 1.0);
+			} else {
+				gl_FragColor = vec4(placeholderColor, placeholderOpacity);
+			}
+			return;
+		}
+
+		// Chroma key mode
+		if (useChromaKey && hasTexture) {
+			float mask = chromaKeyMask(texColor.rgb, chromaKeyColor, chromaKeyTolerance, chromaKeyEdge);
+
+			bool insideSilhouette = inSilhouette(vUv, aspectRatioFactor);
+
+			if (setupMode) {
+				// Setup mode: show silhouette overlay for positioning
+				vec3 cleanColor = suppressSpill(texColor.rgb, chromaKeyColor, chromaKeySpill);
+				cleanColor = applyColorCorrection(cleanColor);
+
+				if (mask < 0.01) {
+					if (insideSilhouette) {
+						vec3 cyan = vec3(0.0, 0.8, 0.8);
+						gl_FragColor = vec4(cyan * 0.3, 0.3);
+					} else {
+						gl_FragColor = vec4(0.0, 0.0, 0.0, 0.4);
+					}
+				} else {
+					if (insideSilhouette) {
+						gl_FragColor = vec4(cleanColor, 1.0);
+					} else {
+						vec3 warningTint = mix(cleanColor, vec3(1.0, 0.5, 0.0), 0.2);
+						gl_FragColor = vec4(warningTint * mask, mask);
+					}
+				}
+				return;
+			}
+
+			// Normal chroma key compositing
+			if (mask < 0.01) {
+				discard;
+			} else if (mask > 0.99) {
+				vec3 cleanColor = suppressSpill(texColor.rgb, chromaKeyColor, chromaKeySpill);
+				cleanColor = applyColorCorrection(cleanColor);
+				float finalAlpha = garbageMask;
+				gl_FragColor = vec4(cleanColor * finalAlpha, finalAlpha);
+			} else {
+				vec3 cleanColor = suppressSpill(texColor.rgb, chromaKeyColor, chromaKeySpill);
+				cleanColor = applyColorCorrection(cleanColor);
+				float finalAlpha = mask * garbageMask;
+				gl_FragColor = vec4(cleanColor * finalAlpha, finalAlpha);
+			}
+			return;
+		}
+
+		// Apply color correction for non-chroma-key modes
+		texColor.rgb = applyColorCorrection(texColor.rgb);
+
+		// AI mask or silhouette fallback
+		bool inside;
+
+		if (useAIMask && hasTexture) {
+			float maskValue = texture2D(segmentationMask, texUV).r;
+
+			if (useHsvWindow) {
+				// HSV refines AI mask: background-colored pixels get reduced confidence
+				// hsvMask: 0 = matches background color, 1 = doesn't match
+				float hsvMask = hsvWindowMask(texColor.rgb, hsvMinHue, hsvMaxHue,
+				                              hsvMinSat, hsvMaxSat, hsvMinVal, hsvMaxVal, 0.1);
+				// Background pixels need ~3.3x higher AI confidence to survive
+				float refinedMask = maskValue * (0.3 + 0.7 * hsvMask);
+				inside = refinedMask > maskThreshold;
+			} else {
+				inside = maskValue > maskThreshold;
+			}
+		} else {
+			inside = inSilhouette(vUv, aspectRatioFactor);
+		}
+
+		// isPositioningMode is defined at top of main() - shows full silhouette guide
+
+		if (hasTexture) {
+			if (inside) {
+				gl_FragColor = vec4(texColor.rgb * garbageMask, garbageMask);
+			} else {
+				if (useAIMask) {
+					discard;
+				} else if (isPositioningMode) {
+					// Positioning mode: much darker outside for clear guide visibility
+					// Use 75% opacity dark overlay so silhouette boundary is obvious
+					float positioningAlpha = 0.75 * garbageMask;
+					gl_FragColor = vec4(0.0, 0.0, 0.0, positioningAlpha);
+				} else {
+					float finalAlpha = darkOpacity * garbageMask;
+					gl_FragColor = vec4(0.0, 0.0, 0.0, finalAlpha);
+				}
+			}
+		} else {
+			if (inside) {
+				float alpha = (placeholderOpacity + 0.15) * garbageMask;
+				gl_FragColor = vec4(placeholderColor * alpha, alpha);
+			} else {
+				float alpha = placeholderOpacity * garbageMask;
+				gl_FragColor = vec4(placeholderColor * 0.5 * alpha, alpha);
+			}
+		}
+	}
+`;
+/**
+ * Get default uniform values for player mode (no editor-specific features)
+ */
+export function getDefaultPlayerUniforms() {
+    return {
+        hasTexture: { value: false },
+        useAIMask: { value: false },
+        maskThreshold: { value: 0.5 },
+        darkOpacity: { value: 0.0 }, // No dark overlay in player
+        placeholderOpacity: { value: 0.0 }, // No placeholder in player
+        aspectRatio: { value: 16 / 9 },
+        useChromaKey: { value: false },
+        chromaKeyTolerance: { value: 0.35 },
+        chromaKeySpill: { value: 0.25 },
+        chromaKeyEdge: { value: 0.08 },
+        setupMode: { value: false }, // Never in setup mode in player
+        useHsvWindow: { value: false },
+        hsvMinHue: { value: 60 },
+        hsvMaxHue: { value: 180 },
+        hsvMinSat: { value: 0.2 },
+        hsvMaxSat: { value: 1.0 },
+        hsvMinVal: { value: 0.2 },
+        hsvMaxVal: { value: 1.0 },
+        useGarbageMatte: { value: false },
+        garbageMatteIsRect: { value: true },
+        garbageMatteInvert: { value: false },
+        garbageMatteFeather: { value: 0 },
+        usePerEdgeFeather: { value: false },
+        ccBrightness: { value: 0 },
+        ccContrast: { value: 0 },
+        ccSaturation: { value: 0 },
+        ccTemperature: { value: 0 },
+        fullViewMode: { value: false },
+        debugShowMask: { value: false },
+        silhouetteScale: { value: 1.0 }
+    };
+}
+/**
+ * Get default uniform values for editor mode (includes editor-specific features)
+ */
+export function getDefaultEditorUniforms() {
+    return {
+        ...getDefaultPlayerUniforms(),
+        darkOpacity: { value: 0.5 }, // Show dark overlay outside silhouette
+        placeholderOpacity: { value: 0.25 } // Show placeholder when no webcam
+    };
+}