blacktrigram 0.7.2

package/lib/components/shared/three/anatomy/BodySurface.js

@@ -0,0 +1,393 @@
+import { getArchetypeSkinTone } from "../../../../utils/colorUtils.js";
+import { BICEP_RADIUS, CALF_RADIUS, CORE_RADIUS, FOREARM_RADIUS, PECTORALS_RADIUS, QUAD_RADIUS } from "../../../../constants/bodyDimensions.js";
+import { useEffect, useMemo } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+import * as THREE from "three";
+//#region src/components/shared/three/anatomy/BodySurface.tsx
+/**
+* Body Surface component for realistic humanoid skin/flesh rendering
+*
+* **Purpose**: Provides continuous body surface layer between bones and clothing
+* to create organic, human-like appearance instead of robotic segmented look.
+*
+* **Features**:
+* - Continuous skin layer covering neck, torso, shoulders, arms, and legs
+* - Archetype-specific skin tones for visual variety
+* - Proper body thickness scaling based on muscle and fat mass
+* - Double-sided rendering (THREE.DoubleSide) for complete 360° coverage and gap prevention
+* - Smooth tapering for realistic proportions
+* - Enhanced material with subsurface scattering and clearcoat
+* - High-quality geometry with increased segment counts
+* - Shoulder joints for smooth transitions
+*
+* **Rendering Order**: Bones → Muscles (optional) → Body Surface → Clothing
+*
+* @module components/three/BodySurface
+* @category 3D Components
+* @korean 신체표면컴포넌트
+*/
+/**
+* Calculate body thickness multiplier with reasonable limits
+*
+* Uses linear scaling instead of square root to prevent excessive inflation
+* for heavy characters. Caps maximum thickness at 1.20x to maintain realism.
+*
+* @param muscleMass - Muscle mass in kg
+* @param fatMass - Fat mass in kg
+* @returns Body thickness multiplier (0.75 - 1.20)
+* @korean 신체두께계산
+*/
+var calculateBodyThickness = (muscleMass, fatMass) => {
+	const referenceMuscle = 35;
+	const referenceFat = 12;
+	const muscleRatio = muscleMass / referenceMuscle;
+	const fatRatio = fatMass / referenceFat;
+	const muscleContribution = (muscleRatio - 1) * .15;
+	const fatContribution = (fatRatio - 1) * .2;
+	return Math.max(.75, Math.min(1.2, .85 + muscleContribution + fatContribution));
+};
+/**
+* Determine segment count based on camera distance for LOD
+*
+* @param cameraDistance - Distance from camera
+* @returns Segment count for geometry
+* @korean LOD세그먼트수
+*/
+var getLODSegmentCount = (cameraDistance) => {
+	if (cameraDistance < 5) return 20;
+	else if (cameraDistance < 10) return 16;
+	else return 12;
+};
+/**
+* Get body surface segments for a specific bone
+*
+* Creates continuous skin geometry appropriate for each body part.
+* Implements LOD (Level of Detail) based on camera distance for performance.
+*
+* @param boneName - Name of the bone
+* @param physicalAttributes - Physical attributes for scaling
+* @param cameraDistance - Distance from camera for LOD
+* @returns Array of body surface segments
+* @korean 신체표면세그먼트가져오기
+*/
+var getBodySurfaceForBone = (boneName, physicalAttributes, cameraDistance = 10) => {
+	const segments = [];
+	const bodyThickness = calculateBodyThickness(physicalAttributes.muscleMass, physicalAttributes.fatMass);
+	const segmentCount = getLODSegmentCount(cameraDistance);
+	const torsoScale = physicalAttributes.torsoLength / 59;
+	const armScale = physicalAttributes.armLength / 77;
+	const legScale = physicalAttributes.legLength / 96;
+	switch (boneName) {
+		case "neck": {
+			const neckRadius = .06 * bodyThickness;
+			const neckLength = .11 * bodyThickness;
+			segments.push({
+				geometry: new THREE.CylinderGeometry(neckRadius * .9, neckRadius * 1.2, neckLength, segmentCount),
+				localOffset: new THREE.Vector3(0, -neckLength * .4, 0),
+				localRotation: new THREE.Euler(0, 0, 0)
+			});
+			segments.push({
+				geometry: new THREE.CylinderGeometry(neckRadius * 1.2, neckRadius * 1.6, neckLength * .3, segmentCount),
+				localOffset: new THREE.Vector3(0, -neckLength * .75, 0),
+				localRotation: new THREE.Euler(0, 0, 0)
+			});
+			break;
+		}
+		case "head": {
+			const headRadius = .095 * bodyThickness;
+			const headHeight = headRadius * 1.15;
+			segments.push({
+				geometry: new THREE.SphereGeometry(headRadius, segmentCount, segmentCount),
+				localOffset: new THREE.Vector3(0, headHeight * .15, 0),
+				localRotation: new THREE.Euler(0, 0, 0)
+			});
+			segments.push({
+				geometry: new THREE.SphereGeometry(headRadius * .7, Math.floor(segmentCount * .75), Math.floor(segmentCount * .75)),
+				localOffset: new THREE.Vector3(0, -headHeight * .25, headRadius * .15),
+				localRotation: new THREE.Euler(0, 0, 0)
+			});
+			break;
+		}
+		case "spine_upper": {
+			const width = physicalAttributes.shoulderWidth / 100 * bodyThickness * .9;
+			const height = physicalAttributes.torsoLength / 100 * torsoScale * .3;
+			const depth = PECTORALS_RADIUS * 2 * bodyThickness * .95;
+			segments.push({
+				geometry: new THREE.BoxGeometry(width, height, depth, Math.max(2, Math.round(segmentCount * .2)), Math.max(2, Math.round(segmentCount * .2)), Math.max(2, Math.round(segmentCount * .2))),
+				localOffset: new THREE.Vector3(0, 0, 0),
+				localRotation: new THREE.Euler(0, 0, 0)
+			});
+			break;
+		}
+		case "spine_middle": {
+			const width = physicalAttributes.shoulderWidth / 100 * bodyThickness;
+			const height = physicalAttributes.torsoLength / 100 * torsoScale * .35;
+			const depth = PECTORALS_RADIUS * 2 * bodyThickness;
+			const torsoSegmentsX = Math.max(2, Math.round(segmentCount * .2));
+			const torsoSegmentsY = Math.max(3, Math.round(segmentCount * .3));
+			const torsoSegmentsZ = Math.max(2, Math.round(segmentCount * .2));
+			segments.push({
+				geometry: new THREE.BoxGeometry(width, height, depth, torsoSegmentsX, torsoSegmentsY, torsoSegmentsZ),
+				localOffset: new THREE.Vector3(0, 0, 0),
+				localRotation: new THREE.Euler(0, 0, 0)
+			});
+			break;
+		}
+		case "spine_lower": {
+			const widthTop = physicalAttributes.shoulderWidth / 100 * bodyThickness * .95;
+			const widthBottom = physicalAttributes.shoulderWidth / 100 * bodyThickness * .85;
+			const height = physicalAttributes.torsoLength / 100 * torsoScale * .3;
+			segments.push({
+				geometry: new THREE.CylinderGeometry(widthTop * .5, widthBottom * .5, height, segmentCount),
+				localOffset: new THREE.Vector3(0, 0, 0),
+				localRotation: new THREE.Euler(0, 0, 0)
+			});
+			break;
+		}
+		case "pelvis": {
+			const width = physicalAttributes.shoulderWidth / 100 * .85 * bodyThickness;
+			const height = .15;
+			const depth = CORE_RADIUS * 2 * bodyThickness;
+			segments.push({
+				geometry: new THREE.BoxGeometry(width, height, depth, 3, 2, 3),
+				localOffset: new THREE.Vector3(0, 0, 0),
+				localRotation: new THREE.Euler(0, 0, 0)
+			});
+			break;
+		}
+		case "shoulder_L":
+		case "shoulder_R": {
+			const shoulderRadius = BICEP_RADIUS * bodyThickness * 1.4;
+			segments.push({
+				geometry: new THREE.SphereGeometry(shoulderRadius, segmentCount, segmentCount),
+				localOffset: new THREE.Vector3(0, 0, 0),
+				localRotation: new THREE.Euler(0, 0, 0)
+			});
+			break;
+		}
+		case "upper_arm_L":
+		case "upper_arm_R": {
+			const radiusTop = BICEP_RADIUS * bodyThickness * 1.1;
+			const radiusBottom = BICEP_RADIUS * bodyThickness * .9;
+			const length = physicalAttributes.armLength / 100 * armScale * .45;
+			segments.push({
+				geometry: new THREE.CylinderGeometry(radiusTop, radiusBottom, length, segmentCount),
+				localOffset: new THREE.Vector3(0, -length * .4, 0),
+				localRotation: new THREE.Euler(0, 0, 0)
+			});
+			break;
+		}
+		case "forearm_L":
+		case "forearm_R": {
+			const radiusTop = FOREARM_RADIUS * bodyThickness * 1;
+			const radiusBottom = FOREARM_RADIUS * bodyThickness * .8;
+			const length = physicalAttributes.armLength / 100 * armScale * .4;
+			segments.push({
+				geometry: new THREE.CylinderGeometry(radiusTop, radiusBottom, length, segmentCount),
+				localOffset: new THREE.Vector3(0, -length * .4, 0),
+				localRotation: new THREE.Euler(0, 0, 0)
+			});
+			break;
+		}
+		case "thigh_L":
+		case "thigh_R": {
+			const radiusTop = QUAD_RADIUS * bodyThickness * 1.3;
+			const radiusBottom = QUAD_RADIUS * bodyThickness * .95;
+			const length = physicalAttributes.legLength / 100 * legScale * .45;
+			segments.push({
+				geometry: new THREE.CylinderGeometry(radiusTop, radiusBottom, length, segmentCount),
+				localOffset: new THREE.Vector3(0, -length * .4, 0),
+				localRotation: new THREE.Euler(0, 0, 0)
+			});
+			break;
+		}
+		case "shin_L":
+		case "shin_R": {
+			const radiusTop = CALF_RADIUS * bodyThickness * 1;
+			const radiusBottom = CALF_RADIUS * bodyThickness * .8;
+			const length = physicalAttributes.legLength / 100 * legScale * .42;
+			segments.push({
+				geometry: new THREE.CylinderGeometry(radiusTop, radiusBottom, length, segmentCount),
+				localOffset: new THREE.Vector3(0, -length * .4, 0),
+				localRotation: new THREE.Euler(0, 0, 0)
+			});
+			break;
+		}
+		case "elbow_L":
+		case "elbow_R": {
+			const elbowRadius = BICEP_RADIUS * bodyThickness * .95;
+			segments.push({
+				geometry: new THREE.SphereGeometry(elbowRadius, segmentCount, Math.floor(segmentCount * .75)),
+				localOffset: new THREE.Vector3(0, 0, 0),
+				localRotation: new THREE.Euler(0, 0, 0)
+			});
+			break;
+		}
+		case "wrist_L":
+		case "wrist_R": {
+			const wristRadiusTop = FOREARM_RADIUS * bodyThickness * .75;
+			const wristRadiusBottom = FOREARM_RADIUS * bodyThickness * .6;
+			const wristLength = .035 * bodyThickness;
+			segments.push({
+				geometry: new THREE.CylinderGeometry(wristRadiusTop, wristRadiusBottom, wristLength, segmentCount),
+				localOffset: new THREE.Vector3(0, -wristLength * .3, 0),
+				localRotation: new THREE.Euler(0, 0, 0)
+			});
+			break;
+		}
+		case "hand_L":
+		case "hand_R": {
+			const handBridgeRadius = FOREARM_RADIUS * bodyThickness * .55;
+			segments.push({
+				geometry: new THREE.SphereGeometry(handBridgeRadius, segmentCount, Math.floor(segmentCount * .75)),
+				localOffset: new THREE.Vector3(0, 0, 0),
+				localRotation: new THREE.Euler(0, 0, 0)
+			});
+			break;
+		}
+		case "knee_L":
+		case "knee_R": {
+			const kneeRadius = QUAD_RADIUS * bodyThickness * .9;
+			segments.push({
+				geometry: new THREE.SphereGeometry(kneeRadius, segmentCount, Math.floor(segmentCount * .75)),
+				localOffset: new THREE.Vector3(0, 0, 0),
+				localRotation: new THREE.Euler(0, 0, 0)
+			});
+			const kneecapRadius = kneeRadius * .5;
+			segments.push({
+				geometry: new THREE.SphereGeometry(kneecapRadius, Math.floor(segmentCount * .5), Math.floor(segmentCount * .5)),
+				localOffset: new THREE.Vector3(0, 0, kneeRadius * .6),
+				localRotation: new THREE.Euler(0, 0, 0)
+			});
+			break;
+		}
+		case "hip_L":
+		case "hip_R": {
+			const hipRadius = QUAD_RADIUS * bodyThickness * 1.1;
+			segments.push({
+				geometry: new THREE.SphereGeometry(hipRadius, segmentCount, Math.floor(segmentCount * .75)),
+				localOffset: new THREE.Vector3(0, -hipRadius * .3, 0),
+				localRotation: new THREE.Euler(0, 0, 0)
+			});
+			break;
+		}
+		case "foot_L":
+		case "foot_R": {
+			const ankleRadius = CALF_RADIUS * bodyThickness * .75;
+			segments.push({
+				geometry: new THREE.SphereGeometry(ankleRadius, segmentCount, Math.floor(segmentCount * .75)),
+				localOffset: new THREE.Vector3(0, 0, 0),
+				localRotation: new THREE.Euler(0, 0, 0)
+			});
+			break;
+		}
+	}
+	return segments;
+};
+/**
+* BodySurface Component
+*
+* Renders realistic body surface (skin/flesh) attached to a specific bone.
+* Creates organic, human-like appearance by providing continuous body coverage.
+*
+* @example
+* ```tsx
+* <BodySurface
+*   boneName="spine_middle"
+*   archetype={PlayerArchetype.MUSA}
+*   physicalAttributes={musaPhysicalAttrs}
+* />
+* ```
+*
+* @korean 신체표면컴포넌트
+*/
+var BodySurface = ({ boneName, archetype, physicalAttributes, cameraDistance = 10 }) => {
+	const attrs = useMemo(() => physicalAttributes ?? {
+		muscleMass: 35,
+		fatMass: 12,
+		shoulderWidth: 45,
+		torsoLength: 59,
+		armLength: 77,
+		legLength: 96
+	}, [physicalAttributes]);
+	const segments = useMemo(() => getBodySurfaceForBone(boneName, attrs, cameraDistance), [
+		boneName,
+		attrs,
+		cameraDistance
+	]);
+	const skinTone = useMemo(() => getArchetypeSkinTone(archetype), [archetype]);
+	/**
+	* Create skin material with realistic properties
+	*
+	* Uses MeshPhysicalMaterial for enhanced realism:
+	* - Skin tone color from archetype
+	* - Subsurface scattering with subtle transmission for realistic skin translucency
+	* - Roughness: 0.65 (slightly rough skin texture)
+	* - Metalness: 0.0 (skin is not metallic)
+	* - Clearcoat for natural skin sheen
+	* - Sheen for skin surface properties
+	* - Subtle emissive for alive appearance
+	* - Double-sided: true (render both inside and outside)
+	*
+	* Material properties are intentionally different from Face3D/Hand3D/Foot3D to capture
+	* body-specific skin characteristics:
+	* - transmission: 0.08 (extremities use 0) – BodySurface is the only skin material with
+	*   non-zero transmission, to model subsurface scattering on larger, less directly lit
+	*   body areas.
+	* - thickness: 0.5 (extremities use 0.1) – torso/limb skin is treated as thicker than
+	*   hands, feet, and face, which appear optically thinner.
+	* - clearcoat: 0.15 (extremities use 0.3) – extremities are rendered slightly glossier
+	*   due to being more exposed to direct light, while the main body surface is softer.
+	*
+	* @korean 피부재료생성
+	*/
+	const material = useMemo(() => {
+		return new THREE.MeshPhysicalMaterial({
+			color: skinTone,
+			roughness: .65,
+			metalness: 0,
+			transmission: .08,
+			thickness: .5,
+			ior: 1.4,
+			clearcoat: .15,
+			clearcoatRoughness: .8,
+			sheen: .1,
+			sheenRoughness: .8,
+			emissive: new THREE.Color(skinTone),
+			emissiveIntensity: .02,
+			reflectivity: .1,
+			side: THREE.DoubleSide,
+			flatShading: false
+		});
+	}, [skinTone]);
+	useEffect(() => {
+		return () => {
+			material.dispose();
+		};
+	}, [material]);
+	useEffect(() => {
+		return () => {
+			segments.forEach((segment) => {
+				segment.geometry.dispose();
+			});
+		};
+	}, [segments]);
+	if (segments.length === 0) return null;
+	return /* @__PURE__ */ jsx(Fragment, { children: segments.map((segment, index) => /* @__PURE__ */ jsx("mesh", {
+		geometry: segment.geometry,
+		material,
+		position: segment.localOffset.toArray(),
+		rotation: [
+			segment.localRotation.x,
+			segment.localRotation.y,
+			segment.localRotation.z
+		],
+		castShadow: true,
+		receiveShadow: true,
+		name: `body-surface-${boneName}`
+	}, `body-surface-${boneName}-${index}`)) });
+};
+//#endregion
+export { BodySurface as default };
+
+//# sourceMappingURL=BodySurface.js.map

package/lib/components/shared/three/anatomy/BodySurface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BodySurface.js","names":[],"sources":["../../../../../src/components/shared/three/anatomy/BodySurface.tsx"],"sourcesContent":["/**\n * Body Surface component for realistic humanoid skin/flesh rendering\n *\n * **Purpose**: Provides continuous body surface layer between bones and clothing\n * to create organic, human-like appearance instead of robotic segmented look.\n *\n * **Features**:\n * - Continuous skin layer covering neck, torso, shoulders, arms, and legs\n * - Archetype-specific skin tones for visual variety\n * - Proper body thickness scaling based on muscle and fat mass\n * - Double-sided rendering (THREE.DoubleSide) for complete 360° coverage and gap prevention\n * - Smooth tapering for realistic proportions\n * - Enhanced material with subsurface scattering and clearcoat\n * - High-quality geometry with increased segment counts\n * - Shoulder joints for smooth transitions\n *\n * **Rendering Order**: Bones → Muscles (optional) → Body Surface → Clothing\n *\n * @module components/three/BodySurface\n * @category 3D Components\n * @korean 신체표면컴포넌트\n */\n\nimport React, { useEffect, useMemo } from \"react\";\nimport * as THREE from \"three\";\nimport {\n  PECTORALS_RADIUS,\n  CORE_RADIUS,\n  BICEP_RADIUS,\n  FOREARM_RADIUS,\n  QUAD_RADIUS,\n  CALF_RADIUS,\n} from \"../../../../constants/bodyDimensions\";\nimport type { PlayerArchetype } from \"../../../../types/common\";\nimport { getArchetypeSkinTone } from \"../../../../utils/colorUtils\";\n\n/**\n * Props for BodySurface component\n *\n * @korean 신체표면속성\n */\nexport interface BodySurfaceProps {\n  /**\n   * Name of the bone this body surface attaches to\n   * @korean 뼈이름\n   */\n  readonly boneName: string;\n\n  /**\n   * Player archetype for skin tone\n   * @korean 플레이어원형\n   */\n  readonly archetype: PlayerArchetype;\n\n  /**\n   * Physical attributes for body sizing\n   * @korean 신체속성\n   */\n  readonly physicalAttributes?: {\n    readonly muscleMass: number;\n    readonly fatMass: number;\n    readonly shoulderWidth: number;\n    readonly torsoLength: number;\n    readonly armLength: number;\n    readonly legLength: number;\n  };\n\n  /**\n   * Distance from camera for LOD optimization\n   * @korean 카메라거리\n   */\n  readonly cameraDistance?: number;\n}\n\n/**\n * Body surface segment configuration\n *\n * @korean 신체표면세그먼트\n */\ninterface BodySurfaceSegment {\n  readonly geometry: THREE.BufferGeometry;\n  readonly localOffset: THREE.Vector3;\n  readonly localRotation: THREE.Euler;\n}\n\n/**\n * Calculate body thickness multiplier with reasonable limits\n *\n * Uses linear scaling instead of square root to prevent excessive inflation\n * for heavy characters. Caps maximum thickness at 1.20x to maintain realism.\n *\n * @param muscleMass - Muscle mass in kg\n * @param fatMass - Fat mass in kg\n * @returns Body thickness multiplier (0.75 - 1.20)\n * @korean 신체두께계산\n */\nconst calculateBodyThickness = (\n  muscleMass: number,\n  fatMass: number,\n): number => {\n  const referenceMuscle = 35; // Reference: athletic build\n  const referenceFat = 12; // Reference: low body fat\n\n  // Linear scaling with limits (not square root which causes excessive inflation)\n  const muscleRatio = muscleMass / referenceMuscle;\n  const fatRatio = fatMass / referenceFat;\n\n  // Base 0.85, muscle adds up to +0.15, fat adds up to +0.20\n  // Thin character (28kg muscle, 10kg fat): 0.85 + (-0.030) + (-0.033) ≈ 0.787\n  // Average (35kg muscle, 12kg fat): 0.85 + 0 + 0 = 0.85\n  // Heavy (48kg muscle, 20kg fat): 0.85 + 0.056 + 0.133 ≈ 1.039\n  const muscleContribution = (muscleRatio - 1.0) * 0.15;\n  const fatContribution = (fatRatio - 1.0) * 0.2;\n\n  // Cap at 1.20x maximum to prevent \"michelin man\" effect\n  return Math.max(\n    0.75,\n    Math.min(1.2, 0.85 + muscleContribution + fatContribution),\n  );\n};\n\n/**\n * Determine segment count based on camera distance for LOD\n *\n * @param cameraDistance - Distance from camera\n * @returns Segment count for geometry\n * @korean LOD세그먼트수\n */\nconst getLODSegmentCount = (cameraDistance: number): number => {\n  if (cameraDistance < 5) {\n    return 20; // High detail for close-ups\n  } else if (cameraDistance < 10) {\n    return 16; // Medium detail for normal distance\n  } else {\n    return 12; // Low detail for far distance\n  }\n};\n\n/**\n * Get body surface segments for a specific bone\n *\n * Creates continuous skin geometry appropriate for each body part.\n * Implements LOD (Level of Detail) based on camera distance for performance.\n *\n * @param boneName - Name of the bone\n * @param physicalAttributes - Physical attributes for scaling\n * @param cameraDistance - Distance from camera for LOD\n * @returns Array of body surface segments\n * @korean 신체표면세그먼트가져오기\n */\nconst getBodySurfaceForBone = (\n  boneName: string,\n  physicalAttributes: {\n    muscleMass: number;\n    fatMass: number;\n    shoulderWidth: number;\n    torsoLength: number;\n    armLength: number;\n    legLength: number;\n  },\n  cameraDistance: number = 10,\n): BodySurfaceSegment[] => {\n  const segments: BodySurfaceSegment[] = [];\n\n  const bodyThickness = calculateBodyThickness(\n    physicalAttributes.muscleMass,\n    physicalAttributes.fatMass,\n  );\n\n  // Get appropriate segment count based on distance\n  const segmentCount = getLODSegmentCount(cameraDistance);\n\n  // Scaling factors for different body parts\n  const torsoScale = physicalAttributes.torsoLength / 59; // Reference: 59cm torso\n  const armScale = physicalAttributes.armLength / 77; // Reference: 77cm arms\n  const legScale = physicalAttributes.legLength / 96; // Reference: 96cm legs\n\n  switch (boneName) {\n    case \"neck\": {\n      // Neck cylinder - smooth connection between head and torso with LOD\n      const neckRadius = 0.06 * bodyThickness;\n      const neckLength = 0.11 * bodyThickness;\n      // Main neck cylinder\n      segments.push({\n        geometry: new THREE.CylinderGeometry(\n          neckRadius * 0.9, // Slightly narrower at top (under jaw)\n          neckRadius * 1.2, // Wider at base (base of neck)\n          neckLength,\n          segmentCount, // LOD-based segment count\n        ),\n        localOffset: new THREE.Vector3(0, -neckLength * 0.4, 0),\n        localRotation: new THREE.Euler(0, 0, 0),\n      });\n      // Neck base flare - smooth transition to shoulders/torso\n      segments.push({\n        geometry: new THREE.CylinderGeometry(\n          neckRadius * 1.2, // Match neck bottom\n          neckRadius * 1.6, // Flare out to trapezius area\n          neckLength * 0.3,\n          segmentCount,\n        ),\n        localOffset: new THREE.Vector3(0, -neckLength * 0.75, 0),\n        localRotation: new THREE.Euler(0, 0, 0),\n      });\n      break;\n    }\n\n    case \"head\": {\n      // Head / skull sphere - Face3D renders features on top of this base\n      // Slightly elongated sphere for realistic cranium shape\n      const headRadius = 0.095 * bodyThickness; // ~19cm head width\n      const headHeight = headRadius * 1.15; // Slightly taller than wide\n\n      // Main cranium sphere\n      segments.push({\n        geometry: new THREE.SphereGeometry(\n          headRadius,\n          segmentCount,\n          segmentCount,\n        ),\n        localOffset: new THREE.Vector3(0, headHeight * 0.15, 0), // Slightly above bone origin\n        localRotation: new THREE.Euler(0, 0, 0),\n      });\n      // Jaw/chin area - smaller sphere below to fill out the jaw line\n      segments.push({\n        geometry: new THREE.SphereGeometry(\n          headRadius * 0.7,\n          Math.floor(segmentCount * 0.75),\n          Math.floor(segmentCount * 0.75),\n        ),\n        localOffset: new THREE.Vector3(\n          0,\n          -headHeight * 0.25,\n          headRadius * 0.15,\n        ),\n        localRotation: new THREE.Euler(0, 0, 0),\n      });\n      break;\n    }\n\n    case \"spine_upper\": {\n      // Upper torso / chest area - wider for shoulders\n      const width =\n        (physicalAttributes.shoulderWidth / 100) * bodyThickness * 0.9;\n      const height = (physicalAttributes.torsoLength / 100) * torsoScale * 0.3;\n      const depth = PECTORALS_RADIUS * 2 * bodyThickness * 0.95;\n\n      segments.push({\n        geometry: new THREE.BoxGeometry(\n          width,\n          height,\n          depth,\n          Math.max(2, Math.round(segmentCount * 0.2)),\n          Math.max(2, Math.round(segmentCount * 0.2)),\n          Math.max(2, Math.round(segmentCount * 0.2)),\n        ),\n        localOffset: new THREE.Vector3(0, 0, 0),\n        localRotation: new THREE.Euler(0, 0, 0),\n      });\n      break;\n    }\n\n    case \"spine_middle\": {\n      // Main torso - box covering chest and abs\n      const width = (physicalAttributes.shoulderWidth / 100) * bodyThickness;\n      const height = (physicalAttributes.torsoLength / 100) * torsoScale * 0.35;\n      const depth = PECTORALS_RADIUS * 2 * bodyThickness; // Front to back depth\n\n      // Use LOD-aware segment counts (slightly higher than other regions) to keep torso shading smooth:\n      // - Torso is frequently closest to the camera and used for breathing / impact motion.\n      // - Vital point overlays and skin highlights rely on smoother curvature in this region.\n      // - We still respect the global LOD segmentCount so distant torsos reduce complexity consistently.\n      const torsoSegmentsX = Math.max(2, Math.round(segmentCount * 0.2));\n      const torsoSegmentsY = Math.max(3, Math.round(segmentCount * 0.3));\n      const torsoSegmentsZ = Math.max(2, Math.round(segmentCount * 0.2));\n\n      segments.push({\n        geometry: new THREE.BoxGeometry(\n          width,\n          height,\n          depth,\n          torsoSegmentsX,\n          torsoSegmentsY,\n          torsoSegmentsZ,\n        ),\n        localOffset: new THREE.Vector3(0, 0, 0),\n        localRotation: new THREE.Euler(0, 0, 0),\n      });\n      break;\n    }\n\n    case \"spine_lower\": {\n      // Lower torso / lumbar area - tapers from chest to pelvis\n      const widthTop =\n        (physicalAttributes.shoulderWidth / 100) * bodyThickness * 0.95;\n      const widthBottom =\n        (physicalAttributes.shoulderWidth / 100) * bodyThickness * 0.85;\n      const height = (physicalAttributes.torsoLength / 100) * torsoScale * 0.3;\n\n      // Use tapered cylinder for natural waist shape\n      segments.push({\n        geometry: new THREE.CylinderGeometry(\n          widthTop * 0.5,\n          widthBottom * 0.5,\n          height,\n          segmentCount,\n        ),\n        localOffset: new THREE.Vector3(0, 0, 0),\n        localRotation: new THREE.Euler(0, 0, 0),\n      });\n      break;\n    }\n\n    case \"pelvis\": {\n      // Pelvis/hip area - wider for hip bones, connecting to legs\n      const width =\n        (physicalAttributes.shoulderWidth / 100) * 0.85 * bodyThickness;\n      const height = 0.15;\n      const depth = CORE_RADIUS * 2 * bodyThickness;\n\n      segments.push({\n        geometry: new THREE.BoxGeometry(width, height, depth, 3, 2, 3),\n        localOffset: new THREE.Vector3(0, 0, 0),\n        localRotation: new THREE.Euler(0, 0, 0),\n      });\n      break;\n    }\n\n    case \"shoulder_L\":\n    case \"shoulder_R\": {\n      // Shoulder joint - full sphere for smooth, rounded shoulder with LOD\n      const shoulderRadius = BICEP_RADIUS * bodyThickness * 1.4;\n\n      segments.push({\n        geometry: new THREE.SphereGeometry(\n          shoulderRadius,\n          segmentCount,\n          segmentCount,\n        ),\n        localOffset: new THREE.Vector3(0, 0, 0),\n        localRotation: new THREE.Euler(0, 0, 0),\n      });\n      break;\n    }\n\n    case \"upper_arm_L\":\n    case \"upper_arm_R\": {\n      // Upper arm - tapered cylinder (bicep area) with LOD\n      const radiusTop = BICEP_RADIUS * bodyThickness * 1.1; // Wider at shoulder\n      const radiusBottom = BICEP_RADIUS * bodyThickness * 0.9; // Narrower at elbow\n      const length = (physicalAttributes.armLength / 100) * armScale * 0.45;\n\n      segments.push({\n        geometry: new THREE.CylinderGeometry(\n          radiusTop,\n          radiusBottom,\n          length,\n          segmentCount, // LOD-based segment count\n        ),\n        localOffset: new THREE.Vector3(0, -length * 0.4, 0),\n        localRotation: new THREE.Euler(0, 0, 0),\n      });\n      break;\n    }\n\n    case \"forearm_L\":\n    case \"forearm_R\": {\n      // Forearm - tapered cylinder with LOD\n      const radiusTop = FOREARM_RADIUS * bodyThickness * 1.0; // Wider at elbow\n      const radiusBottom = FOREARM_RADIUS * bodyThickness * 0.8; // Less narrow - connects to wrist smoothly\n      const length = (physicalAttributes.armLength / 100) * armScale * 0.4;\n\n      segments.push({\n        geometry: new THREE.CylinderGeometry(\n          radiusTop,\n          radiusBottom,\n          length,\n          segmentCount, // LOD-based segment count\n        ),\n        localOffset: new THREE.Vector3(0, -length * 0.4, 0),\n        localRotation: new THREE.Euler(0, 0, 0),\n      });\n      break;\n    }\n\n    case \"thigh_L\":\n    case \"thigh_R\": {\n      // Thigh - tapered cylinder (quad area) with LOD\n      const radiusTop = QUAD_RADIUS * bodyThickness * 1.3; // Wider at hip for smooth connection\n      const radiusBottom = QUAD_RADIUS * bodyThickness * 0.95; // Narrower at knee\n      const length = (physicalAttributes.legLength / 100) * legScale * 0.45;\n\n      segments.push({\n        geometry: new THREE.CylinderGeometry(\n          radiusTop,\n          radiusBottom,\n          length,\n          segmentCount, // LOD-based segment count\n        ),\n        localOffset: new THREE.Vector3(0, -length * 0.4, 0),\n        localRotation: new THREE.Euler(0, 0, 0),\n      });\n      break;\n    }\n\n    case \"shin_L\":\n    case \"shin_R\": {\n      // Shin/calf - tapered cylinder with LOD\n      const radiusTop = CALF_RADIUS * bodyThickness * 1.0; // Wider at knee\n      const radiusBottom = CALF_RADIUS * bodyThickness * 0.8; // Less taper - connects to ankle\n      const length = (physicalAttributes.legLength / 100) * legScale * 0.42;\n\n      segments.push({\n        geometry: new THREE.CylinderGeometry(\n          radiusTop,\n          radiusBottom,\n          length,\n          segmentCount, // LOD-based segment count\n        ),\n        localOffset: new THREE.Vector3(0, -length * 0.4, 0),\n        localRotation: new THREE.Euler(0, 0, 0),\n      });\n      break;\n    }\n\n    case \"elbow_L\":\n    case \"elbow_R\": {\n      // Elbow joint sphere - bridges upper arm and forearm\n      const elbowRadius = BICEP_RADIUS * bodyThickness * 0.95;\n      segments.push({\n        geometry: new THREE.SphereGeometry(\n          elbowRadius,\n          segmentCount,\n          Math.floor(segmentCount * 0.75),\n        ),\n        localOffset: new THREE.Vector3(0, 0, 0),\n        localRotation: new THREE.Euler(0, 0, 0),\n      });\n      break;\n    }\n\n    case \"wrist_L\":\n    case \"wrist_R\": {\n      // Wrist joint - tapered cylinder connecting forearm to hand\n      // No rotation needed - cylinder Y axis already aligns with forearm direction\n      const wristRadiusTop = FOREARM_RADIUS * bodyThickness * 0.75;\n      const wristRadiusBottom = FOREARM_RADIUS * bodyThickness * 0.6;\n      const wristLength = 0.035 * bodyThickness;\n      segments.push({\n        geometry: new THREE.CylinderGeometry(\n          wristRadiusTop,\n          wristRadiusBottom,\n          wristLength,\n          segmentCount,\n        ),\n        localOffset: new THREE.Vector3(0, -wristLength * 0.3, 0),\n        localRotation: new THREE.Euler(0, 0, 0),\n      });\n      break;\n    }\n\n    case \"hand_L\":\n    case \"hand_R\": {\n      // Wrist-to-hand bridge sphere - fills gap between wrist skin and Hand3D component\n      const handBridgeRadius = FOREARM_RADIUS * bodyThickness * 0.55;\n      segments.push({\n        geometry: new THREE.SphereGeometry(\n          handBridgeRadius,\n          segmentCount,\n          Math.floor(segmentCount * 0.75),\n        ),\n        localOffset: new THREE.Vector3(0, 0, 0),\n        localRotation: new THREE.Euler(0, 0, 0),\n      });\n      break;\n    }\n\n    case \"knee_L\":\n    case \"knee_R\": {\n      // Knee joint sphere - bridges thigh and shin\n      const kneeRadius = QUAD_RADIUS * bodyThickness * 0.9;\n      segments.push({\n        geometry: new THREE.SphereGeometry(\n          kneeRadius,\n          segmentCount,\n          Math.floor(segmentCount * 0.75),\n        ),\n        localOffset: new THREE.Vector3(0, 0, 0),\n        localRotation: new THREE.Euler(0, 0, 0),\n      });\n      // Front kneecap bump\n      const kneecapRadius = kneeRadius * 0.5;\n      segments.push({\n        geometry: new THREE.SphereGeometry(\n          kneecapRadius,\n          Math.floor(segmentCount * 0.5),\n          Math.floor(segmentCount * 0.5),\n        ),\n        localOffset: new THREE.Vector3(0, 0, kneeRadius * 0.6),\n        localRotation: new THREE.Euler(0, 0, 0),\n      });\n      break;\n    }\n\n    case \"hip_L\":\n    case \"hip_R\": {\n      // Hip joint sphere - connects pelvis to thigh smoothly\n      const hipRadius = QUAD_RADIUS * bodyThickness * 1.1;\n      segments.push({\n        geometry: new THREE.SphereGeometry(\n          hipRadius,\n          segmentCount,\n          Math.floor(segmentCount * 0.75),\n        ),\n        localOffset: new THREE.Vector3(0, -hipRadius * 0.3, 0),\n        localRotation: new THREE.Euler(0, 0, 0),\n      });\n      break;\n    }\n\n    case \"foot_L\":\n    case \"foot_R\": {\n      // Ankle bridge sphere - connects shin body surface to Foot3D component\n      const ankleRadius = CALF_RADIUS * bodyThickness * 0.75;\n      segments.push({\n        geometry: new THREE.SphereGeometry(\n          ankleRadius,\n          segmentCount,\n          Math.floor(segmentCount * 0.75),\n        ),\n        localOffset: new THREE.Vector3(0, 0, 0),\n        localRotation: new THREE.Euler(0, 0, 0),\n      });\n      break;\n    }\n\n    // Shoulders already handled by shoulder_L/R cases\n    // Hand detail (fingers) uses specialized Hand3D component\n    // Foot detail (toes) uses specialized Foot3D component\n    // Head uses Face3D component\n  }\n\n  return segments;\n};\n\n/**\n * BodySurface Component\n *\n * Renders realistic body surface (skin/flesh) attached to a specific bone.\n * Creates organic, human-like appearance by providing continuous body coverage.\n *\n * @example\n * ```tsx\n * <BodySurface\n *   boneName=\"spine_middle\"\n *   archetype={PlayerArchetype.MUSA}\n *   physicalAttributes={musaPhysicalAttrs}\n * />\n * ```\n *\n * @korean 신체표면컴포넌트\n */\nexport const BodySurface: React.FC<BodySurfaceProps> = ({\n  boneName,\n  archetype,\n  physicalAttributes,\n  cameraDistance = 10,\n}) => {\n  // Default physical attributes if not provided\n  const attrs = useMemo(\n    () =>\n      physicalAttributes ?? {\n        muscleMass: 35,\n        fatMass: 12,\n        shoulderWidth: 45,\n        torsoLength: 59,\n        armLength: 77,\n        legLength: 96,\n      },\n    [physicalAttributes],\n  );\n\n  // Get body surface segments for this bone with LOD\n  const segments = useMemo(\n    () => getBodySurfaceForBone(boneName, attrs, cameraDistance),\n    [boneName, attrs, cameraDistance],\n  );\n\n  // Get archetype-specific skin tone\n  const skinTone = useMemo(() => getArchetypeSkinTone(archetype), [archetype]);\n\n  /**\n   * Create skin material with realistic properties\n   *\n   * Uses MeshPhysicalMaterial for enhanced realism:\n   * - Skin tone color from archetype\n   * - Subsurface scattering with subtle transmission for realistic skin translucency\n   * - Roughness: 0.65 (slightly rough skin texture)\n   * - Metalness: 0.0 (skin is not metallic)\n   * - Clearcoat for natural skin sheen\n   * - Sheen for skin surface properties\n   * - Subtle emissive for alive appearance\n   * - Double-sided: true (render both inside and outside)\n   *\n   * Material properties are intentionally different from Face3D/Hand3D/Foot3D to capture\n   * body-specific skin characteristics:\n   * - transmission: 0.08 (extremities use 0) – BodySurface is the only skin material with\n   *   non-zero transmission, to model subsurface scattering on larger, less directly lit\n   *   body areas.\n   * - thickness: 0.5 (extremities use 0.1) – torso/limb skin is treated as thicker than\n   *   hands, feet, and face, which appear optically thinner.\n   * - clearcoat: 0.15 (extremities use 0.3) – extremities are rendered slightly glossier\n   *   due to being more exposed to direct light, while the main body surface is softer.\n   *\n   * @korean 피부재료생성\n   */\n  const material = useMemo(() => {\n    return new THREE.MeshPhysicalMaterial({\n      color: skinTone,\n      roughness: 0.65, // Slightly rough for realistic skin\n      metalness: 0.0, // Skin is not metallic\n\n      // Subsurface scattering for realistic skin translucency\n      transmission: 0.08, // Small non-zero transmission for subtle skin translucency\n      thickness: 0.5, // Moderate thickness for subsurface scattering\n      ior: 1.4, // Index of refraction for human skin\n\n      // Clearcoat for natural skin sheen (subtle)\n      clearcoat: 0.15,\n      clearcoatRoughness: 0.8,\n\n      // Sheen for skin surface properties (consistent with Hand3D, Foot3D)\n      sheen: 0.1,\n      sheenRoughness: 0.8,\n\n      // Subtle emissive for alive appearance (consistent with other skin components)\n      emissive: new THREE.Color(skinTone),\n      emissiveIntensity: 0.02,\n\n      // Reflectivity for realistic appearance\n      reflectivity: 0.1,\n\n      side: THREE.DoubleSide, // Render both sides for complete body coverage and gap prevention\n      flatShading: false, // Smooth shading for organic look\n    });\n  }, [skinTone]);\n\n  // Cleanup material on unmount\n  useEffect(() => {\n    return () => {\n      material.dispose();\n    };\n  }, [material]);\n\n  // Cleanup geometries when segments change or on unmount\n  useEffect(() => {\n    return () => {\n      segments.forEach((segment) => {\n        segment.geometry.dispose();\n      });\n    };\n  }, [segments]);\n\n  if (segments.length === 0) {\n    return null;\n  }\n\n  return (\n    <>\n      {segments.map((segment, index) => (\n        <mesh\n          key={`body-surface-${boneName}-${index}`}\n          geometry={segment.geometry}\n          material={material}\n          position={segment.localOffset.toArray()}\n          rotation={[\n            segment.localRotation.x,\n            segment.localRotation.y,\n            segment.localRotation.z,\n          ]}\n          castShadow\n          receiveShadow\n          name={`body-surface-${boneName}`}\n        />\n      ))}\n    </>\n  );\n};\n\nexport default BodySurface;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgGA,IAAM,0BACJ,YACA,YACW;CACX,MAAM,kBAAkB;CACxB,MAAM,eAAe;CAGrB,MAAM,cAAc,aAAa;CACjC,MAAM,WAAW,UAAU;CAM3B,MAAM,sBAAsB,cAAc,KAAO;CACjD,MAAM,mBAAmB,WAAW,KAAO;AAG3C,QAAO,KAAK,IACV,KACA,KAAK,IAAI,KAAK,MAAO,qBAAqB,gBAAgB,CAC3D;;;;;;;;;AAUH,IAAM,sBAAsB,mBAAmC;AAC7D,KAAI,iBAAiB,EACnB,QAAO;UACE,iBAAiB,GAC1B,QAAO;KAEP,QAAO;;;;;;;;;;;;;;AAgBX,IAAM,yBACJ,UACA,oBAQA,iBAAyB,OACA;CACzB,MAAM,WAAiC,EAAE;CAEzC,MAAM,gBAAgB,uBACpB,mBAAmB,YACnB,mBAAmB,QACpB;CAGD,MAAM,eAAe,mBAAmB,eAAe;CAGvD,MAAM,aAAa,mBAAmB,cAAc;CACpD,MAAM,WAAW,mBAAmB,YAAY;CAChD,MAAM,WAAW,mBAAmB,YAAY;AAEhD,SAAQ,UAAR;EACE,KAAK,QAAQ;GAEX,MAAM,aAAa,MAAO;GAC1B,MAAM,aAAa,MAAO;AAE1B,YAAS,KAAK;IACZ,UAAU,IAAI,MAAM,iBAClB,aAAa,IACb,aAAa,KACb,YACA,aACD;IACD,aAAa,IAAI,MAAM,QAAQ,GAAG,CAAC,aAAa,IAAK,EAAE;IACvD,eAAe,IAAI,MAAM,MAAM,GAAG,GAAG,EAAE;IACxC,CAAC;AAEF,YAAS,KAAK;IACZ,UAAU,IAAI,MAAM,iBAClB,aAAa,KACb,aAAa,KACb,aAAa,IACb,aACD;IACD,aAAa,IAAI,MAAM,QAAQ,GAAG,CAAC,aAAa,KAAM,EAAE;IACxD,eAAe,IAAI,MAAM,MAAM,GAAG,GAAG,EAAE;IACxC,CAAC;AACF;;EAGF,KAAK,QAAQ;GAGX,MAAM,aAAa,OAAQ;GAC3B,MAAM,aAAa,aAAa;AAGhC,YAAS,KAAK;IACZ,UAAU,IAAI,MAAM,eAClB,YACA,cACA,aACD;IACD,aAAa,IAAI,MAAM,QAAQ,GAAG,aAAa,KAAM,EAAE;IACvD,eAAe,IAAI,MAAM,MAAM,GAAG,GAAG,EAAE;IACxC,CAAC;AAEF,YAAS,KAAK;IACZ,UAAU,IAAI,MAAM,eAClB,aAAa,IACb,KAAK,MAAM,eAAe,IAAK,EAC/B,KAAK,MAAM,eAAe,IAAK,CAChC;IACD,aAAa,IAAI,MAAM,QACrB,GACA,CAAC,aAAa,KACd,aAAa,IACd;IACD,eAAe,IAAI,MAAM,MAAM,GAAG,GAAG,EAAE;IACxC,CAAC;AACF;;EAGF,KAAK,eAAe;GAElB,MAAM,QACH,mBAAmB,gBAAgB,MAAO,gBAAgB;GAC7D,MAAM,SAAU,mBAAmB,cAAc,MAAO,aAAa;GACrE,MAAM,QAAQ,mBAAmB,IAAI,gBAAgB;AAErD,YAAS,KAAK;IACZ,UAAU,IAAI,MAAM,YAClB,OACA,QACA,OACA,KAAK,IAAI,GAAG,KAAK,MAAM,eAAe,GAAI,CAAC,EAC3C,KAAK,IAAI,GAAG,KAAK,MAAM,eAAe,GAAI,CAAC,EAC3C,KAAK,IAAI,GAAG,KAAK,MAAM,eAAe,GAAI,CAAC,CAC5C;IACD,aAAa,IAAI,MAAM,QAAQ,GAAG,GAAG,EAAE;IACvC,eAAe,IAAI,MAAM,MAAM,GAAG,GAAG,EAAE;IACxC,CAAC;AACF;;EAGF,KAAK,gBAAgB;GAEnB,MAAM,QAAS,mBAAmB,gBAAgB,MAAO;GACzD,MAAM,SAAU,mBAAmB,cAAc,MAAO,aAAa;GACrE,MAAM,QAAQ,mBAAmB,IAAI;GAMrC,MAAM,iBAAiB,KAAK,IAAI,GAAG,KAAK,MAAM,eAAe,GAAI,CAAC;GAClE,MAAM,iBAAiB,KAAK,IAAI,GAAG,KAAK,MAAM,eAAe,GAAI,CAAC;GAClE,MAAM,iBAAiB,KAAK,IAAI,GAAG,KAAK,MAAM,eAAe,GAAI,CAAC;AAElE,YAAS,KAAK;IACZ,UAAU,IAAI,MAAM,YAClB,OACA,QACA,OACA,gBACA,gBACA,eACD;IACD,aAAa,IAAI,MAAM,QAAQ,GAAG,GAAG,EAAE;IACvC,eAAe,IAAI,MAAM,MAAM,GAAG,GAAG,EAAE;IACxC,CAAC;AACF;;EAGF,KAAK,eAAe;GAElB,MAAM,WACH,mBAAmB,gBAAgB,MAAO,gBAAgB;GAC7D,MAAM,cACH,mBAAmB,gBAAgB,MAAO,gBAAgB;GAC7D,MAAM,SAAU,mBAAmB,cAAc,MAAO,aAAa;AAGrE,YAAS,KAAK;IACZ,UAAU,IAAI,MAAM,iBAClB,WAAW,IACX,cAAc,IACd,QACA,aACD;IACD,aAAa,IAAI,MAAM,QAAQ,GAAG,GAAG,EAAE;IACvC,eAAe,IAAI,MAAM,MAAM,GAAG,GAAG,EAAE;IACxC,CAAC;AACF;;EAGF,KAAK,UAAU;GAEb,MAAM,QACH,mBAAmB,gBAAgB,MAAO,MAAO;GACpD,MAAM,SAAS;GACf,MAAM,QAAQ,cAAc,IAAI;AAEhC,YAAS,KAAK;IACZ,UAAU,IAAI,MAAM,YAAY,OAAO,QAAQ,OAAO,GAAG,GAAG,EAAE;IAC9D,aAAa,IAAI,MAAM,QAAQ,GAAG,GAAG,EAAE;IACvC,eAAe,IAAI,MAAM,MAAM,GAAG,GAAG,EAAE;IACxC,CAAC;AACF;;EAGF,KAAK;EACL,KAAK,cAAc;GAEjB,MAAM,iBAAiB,eAAe,gBAAgB;AAEtD,YAAS,KAAK;IACZ,UAAU,IAAI,MAAM,eAClB,gBACA,cACA,aACD;IACD,aAAa,IAAI,MAAM,QAAQ,GAAG,GAAG,EAAE;IACvC,eAAe,IAAI,MAAM,MAAM,GAAG,GAAG,EAAE;IACxC,CAAC;AACF;;EAGF,KAAK;EACL,KAAK,eAAe;GAElB,MAAM,YAAY,eAAe,gBAAgB;GACjD,MAAM,eAAe,eAAe,gBAAgB;GACpD,MAAM,SAAU,mBAAmB,YAAY,MAAO,WAAW;AAEjE,YAAS,KAAK;IACZ,UAAU,IAAI,MAAM,iBAClB,WACA,cACA,QACA,aACD;IACD,aAAa,IAAI,MAAM,QAAQ,GAAG,CAAC,SAAS,IAAK,EAAE;IACnD,eAAe,IAAI,MAAM,MAAM,GAAG,GAAG,EAAE;IACxC,CAAC;AACF;;EAGF,KAAK;EACL,KAAK,aAAa;GAEhB,MAAM,YAAY,iBAAiB,gBAAgB;GACnD,MAAM,eAAe,iBAAiB,gBAAgB;GACtD,MAAM,SAAU,mBAAmB,YAAY,MAAO,WAAW;AAEjE,YAAS,KAAK;IACZ,UAAU,IAAI,MAAM,iBAClB,WACA,cACA,QACA,aACD;IACD,aAAa,IAAI,MAAM,QAAQ,GAAG,CAAC,SAAS,IAAK,EAAE;IACnD,eAAe,IAAI,MAAM,MAAM,GAAG,GAAG,EAAE;IACxC,CAAC;AACF;;EAGF,KAAK;EACL,KAAK,WAAW;GAEd,MAAM,YAAY,cAAc,gBAAgB;GAChD,MAAM,eAAe,cAAc,gBAAgB;GACnD,MAAM,SAAU,mBAAmB,YAAY,MAAO,WAAW;AAEjE,YAAS,KAAK;IACZ,UAAU,IAAI,MAAM,iBAClB,WACA,cACA,QACA,aACD;IACD,aAAa,IAAI,MAAM,QAAQ,GAAG,CAAC,SAAS,IAAK,EAAE;IACnD,eAAe,IAAI,MAAM,MAAM,GAAG,GAAG,EAAE;IACxC,CAAC;AACF;;EAGF,KAAK;EACL,KAAK,UAAU;GAEb,MAAM,YAAY,cAAc,gBAAgB;GAChD,MAAM,eAAe,cAAc,gBAAgB;GACnD,MAAM,SAAU,mBAAmB,YAAY,MAAO,WAAW;AAEjE,YAAS,KAAK;IACZ,UAAU,IAAI,MAAM,iBAClB,WACA,cACA,QACA,aACD;IACD,aAAa,IAAI,MAAM,QAAQ,GAAG,CAAC,SAAS,IAAK,EAAE;IACnD,eAAe,IAAI,MAAM,MAAM,GAAG,GAAG,EAAE;IACxC,CAAC;AACF;;EAGF,KAAK;EACL,KAAK,WAAW;GAEd,MAAM,cAAc,eAAe,gBAAgB;AACnD,YAAS,KAAK;IACZ,UAAU,IAAI,MAAM,eAClB,aACA,cACA,KAAK,MAAM,eAAe,IAAK,CAChC;IACD,aAAa,IAAI,MAAM,QAAQ,GAAG,GAAG,EAAE;IACvC,eAAe,IAAI,MAAM,MAAM,GAAG,GAAG,EAAE;IACxC,CAAC;AACF;;EAGF,KAAK;EACL,KAAK,WAAW;GAGd,MAAM,iBAAiB,iBAAiB,gBAAgB;GACxD,MAAM,oBAAoB,iBAAiB,gBAAgB;GAC3D,MAAM,cAAc,OAAQ;AAC5B,YAAS,KAAK;IACZ,UAAU,IAAI,MAAM,iBAClB,gBACA,mBACA,aACA,aACD;IACD,aAAa,IAAI,MAAM,QAAQ,GAAG,CAAC,cAAc,IAAK,EAAE;IACxD,eAAe,IAAI,MAAM,MAAM,GAAG,GAAG,EAAE;IACxC,CAAC;AACF;;EAGF,KAAK;EACL,KAAK,UAAU;GAEb,MAAM,mBAAmB,iBAAiB,gBAAgB;AAC1D,YAAS,KAAK;IACZ,UAAU,IAAI,MAAM,eAClB,kBACA,cACA,KAAK,MAAM,eAAe,IAAK,CAChC;IACD,aAAa,IAAI,MAAM,QAAQ,GAAG,GAAG,EAAE;IACvC,eAAe,IAAI,MAAM,MAAM,GAAG,GAAG,EAAE;IACxC,CAAC;AACF;;EAGF,KAAK;EACL,KAAK,UAAU;GAEb,MAAM,aAAa,cAAc,gBAAgB;AACjD,YAAS,KAAK;IACZ,UAAU,IAAI,MAAM,eAClB,YACA,cACA,KAAK,MAAM,eAAe,IAAK,CAChC;IACD,aAAa,IAAI,MAAM,QAAQ,GAAG,GAAG,EAAE;IACvC,eAAe,IAAI,MAAM,MAAM,GAAG,GAAG,EAAE;IACxC,CAAC;GAEF,MAAM,gBAAgB,aAAa;AACnC,YAAS,KAAK;IACZ,UAAU,IAAI,MAAM,eAClB,eACA,KAAK,MAAM,eAAe,GAAI,EAC9B,KAAK,MAAM,eAAe,GAAI,CAC/B;IACD,aAAa,IAAI,MAAM,QAAQ,GAAG,GAAG,aAAa,GAAI;IACtD,eAAe,IAAI,MAAM,MAAM,GAAG,GAAG,EAAE;IACxC,CAAC;AACF;;EAGF,KAAK;EACL,KAAK,SAAS;GAEZ,MAAM,YAAY,cAAc,gBAAgB;AAChD,YAAS,KAAK;IACZ,UAAU,IAAI,MAAM,eAClB,WACA,cACA,KAAK,MAAM,eAAe,IAAK,CAChC;IACD,aAAa,IAAI,MAAM,QAAQ,GAAG,CAAC,YAAY,IAAK,EAAE;IACtD,eAAe,IAAI,MAAM,MAAM,GAAG,GAAG,EAAE;IACxC,CAAC;AACF;;EAGF,KAAK;EACL,KAAK,UAAU;GAEb,MAAM,cAAc,cAAc,gBAAgB;AAClD,YAAS,KAAK;IACZ,UAAU,IAAI,MAAM,eAClB,aACA,cACA,KAAK,MAAM,eAAe,IAAK,CAChC;IACD,aAAa,IAAI,MAAM,QAAQ,GAAG,GAAG,EAAE;IACvC,eAAe,IAAI,MAAM,MAAM,GAAG,GAAG,EAAE;IACxC,CAAC;AACF;;;AASJ,QAAO;;;;;;;;;;;;;;;;;;;AAoBT,IAAa,eAA2C,EACtD,UACA,WACA,oBACA,iBAAiB,SACb;CAEJ,MAAM,QAAQ,cAEV,sBAAsB;EACpB,YAAY;EACZ,SAAS;EACT,eAAe;EACf,aAAa;EACb,WAAW;EACX,WAAW;EACZ,EACH,CAAC,mBAAmB,CACrB;CAGD,MAAM,WAAW,cACT,sBAAsB,UAAU,OAAO,eAAe,EAC5D;EAAC;EAAU;EAAO;EAAe,CAClC;CAGD,MAAM,WAAW,cAAc,qBAAqB,UAAU,EAAE,CAAC,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;CA2B5E,MAAM,WAAW,cAAc;AAC7B,SAAO,IAAI,MAAM,qBAAqB;GACpC,OAAO;GACP,WAAW;GACX,WAAW;GAGX,cAAc;GACd,WAAW;GACX,KAAK;GAGL,WAAW;GACX,oBAAoB;GAGpB,OAAO;GACP,gBAAgB;GAGhB,UAAU,IAAI,MAAM,MAAM,SAAS;GACnC,mBAAmB;GAGnB,cAAc;GAEd,MAAM,MAAM;GACZ,aAAa;GACd,CAAC;IACD,CAAC,SAAS,CAAC;AAGd,iBAAgB;AACd,eAAa;AACX,YAAS,SAAS;;IAEnB,CAAC,SAAS,CAAC;AAGd,iBAAgB;AACd,eAAa;AACX,YAAS,SAAS,YAAY;AAC5B,YAAQ,SAAS,SAAS;KAC1B;;IAEH,CAAC,SAAS,CAAC;AAEd,KAAI,SAAS,WAAW,EACtB,QAAO;AAGT,QACE,oBAAA,UAAA,EAAA,UACG,SAAS,KAAK,SAAS,UACtB,oBAAC,QAAD;EAEE,UAAU,QAAQ;EACR;EACV,UAAU,QAAQ,YAAY,SAAS;EACvC,UAAU;GACR,QAAQ,cAAc;GACtB,QAAQ,cAAc;GACtB,QAAQ,cAAc;GACvB;EACD,YAAA;EACA,eAAA;EACA,MAAM,gBAAgB;EACtB,EAZK,gBAAgB,SAAS,GAAG,QAYjC,CACF,EACD,CAAA"}

package/lib/components/shared/three/anatomy/BoneAttachedMuscles.d.ts

@@ -0,0 +1,147 @@
+/**
+ * Bone-attached muscle system for realistic muscle movement with skeleton
+ *
+ * Muscles are rendered as children of their parent bones, inheriting bone
+ * transformations automatically for proper movement during animation.
+ *
+ * @module components/three/BoneAttachedMuscles
+ * @category 3D Components
+ * @korean 뼈부착근육시스템
+ */
+import React from "react";
+import * as THREE from "three";
+import type { MuscleGroupName } from "../../../../types/muscle";
+/**
+ * Muscle attachment configuration
+ *
+ * Defines how a muscle is positioned relative to its parent bone.
+ * Position is in local bone space, so muscles move with the bone.
+ *
+ * @korean 근육부착설정
+ */
+export interface MuscleAttachment {
+    /** Muscle group name */
+    readonly name: MuscleGroupName;
+    /** Korean name for UI */
+    readonly korean: string;
+    /** English name for UI */
+    readonly english: string;
+    /** Local position offset from bone origin */
+    readonly localOffset: THREE.Vector3;
+    /** Local rotation relative to bone */
+    readonly localRotation: THREE.Euler;
+    /** Base scale when relaxed */
+    readonly baseScale: THREE.Vector3;
+    /** Max scale when fully flexed */
+    readonly maxFlexScale: THREE.Vector3;
+    /** Capsule geometry radius */
+    readonly radius: number;
+    /** Capsule geometry length */
+    readonly length: number;
+}
+/**
+ * Mapping of bone names to their attached muscles
+ *
+ * Each bone can have multiple muscles attached to it.
+ * Positions are relative to the bone's local coordinate system.
+ *
+ * @korean 뼈근육매핑
+ */
+export declare const BONE_MUSCLE_MAP: Record<string, MuscleAttachment[]>;
+/**
+ * Calculate muscle scale factor based on muscle mass with proportional scaling.
+ *
+ * Linear scaling for realistic visual differences:
+ * - 28kg (Hacker) → 0.84 scale (lean, defined)
+ * - 30kg (Amsalja) → 0.89 scale (lean athlete)
+ * - 32kg (Jeongbo) → 0.93 scale (fit operative)
+ * - 35kg (Musa) → 1.0 scale (reference baseline)
+ * - 48kg (Jojik) → 1.30 scale (massive, powerful)
+ *
+ * @param muscleMass - Muscle mass in kilograms (archetype range: 28-48kg)
+ * @returns Scale factor for muscle geometry
+ *
+ * @korean 근육크기계산
+ */
+export declare const calculateMuscleScaleFactor: (muscleMass: number) => number;
+/**
+ * Calculate fat layer opacity with expanded range for better distinction.
+ *
+ * Previous: 0.1-0.7 opacity (insufficient contrast)
+ * New: 0.05-0.85 opacity (dramatic difference)
+ *
+ * @param fatMass - Fat mass in kilograms (archetype range: 10-22kg)
+ * @returns Opacity value for fat layer (0.05-0.85)
+ *
+ * @korean 지방층투명도계산
+ */
+export declare const calculateFatLayerOpacity: (fatMass: number) => number;
+/**
+ * Calculate fat layer thickness with non-linear scaling.
+ *
+ * Previous: 0.05-0.45 linear
+ * New: 0.02-0.60 exponential (skinny = very thin, heavy = very thick)
+ *
+ * @param fatMass - Fat mass in kilograms (archetype range: 10-22kg)
+ * @returns Scale increase for fat layer (0.02-0.60)
+ *
+ * @korean 지방층두께계산
+ */
+export declare const calculateFatLayerThickness: (fatMass: number) => number;
+/**
+ * Props for BoneAttachedMuscle component
+ *
+ * @korean 뼈부착근육속성
+ */
+export interface BoneAttachedMuscleProps {
+    /** Muscle attachment configuration */
+    readonly attachment: MuscleAttachment;
+    /** Tension level (0-1) for muscle flex */
+    readonly tension: number;
+    /** Whether muscle is shaking (exhausted state) */
+    readonly isShaking: boolean;
+    /** Muscle scale factor based on archetype */
+    readonly muscleScaleFactor: number;
+    /** Fat layer opacity */
+    readonly fatLayerOpacity: number;
+    /** Fat layer thickness multiplier */
+    readonly fatLayerThickness: number;
+}
+/**
+ * Single bone-attached muscle component
+ *
+ * Renders a muscle mesh that follows its parent bone's transformations.
+ * Includes dynamic scaling based on tension and archetype.
+ *
+ * @korean 뼈부착근육컴포넌트
+ */
+export declare const BoneAttachedMuscle: React.FC<BoneAttachedMuscleProps>;
+/**
+ * Props for BoneMuscles component (renders all muscles for a bone)
+ *
+ * @korean 뼈근육들속성
+ */
+export interface BoneMusclesProps {
+    /** Bone name to look up muscles for */
+    readonly boneName: string;
+    /** Map of muscle name to tension level */
+    readonly muscleStates: Map<string, number>;
+    /** Whether character is exhausted (triggers shaking) */
+    readonly isExhausted: boolean;
+    /** Physical attributes for scaling */
+    readonly physicalAttributes?: {
+        readonly muscleMass: number;
+        readonly fatMass: number;
+    };
+}
+/**
+ * Renders all muscles attached to a specific bone
+ *
+ * Looks up muscle attachments by bone name and renders each one.
+ * Muscles inherit the bone's transformations automatically.
+ *
+ * @korean 뼈근육들컴포넌트
+ */
+export declare const BoneMuscles: React.FC<BoneMusclesProps>;
+export default BoneMuscles;
+//# sourceMappingURL=BoneAttachedMuscles.d.ts.map

package/lib/components/shared/three/anatomy/BoneAttachedMuscles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoneAttachedMuscles.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/anatomy/BoneAttachedMuscles.tsx"],"names":[],"mappings":"AACA;;;;;;;;;GASG;AAGH,OAAO,KAA0B,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAoC/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAGhE;;;;;;;GAOG;AACH,MAAM,WAAW,gBAAgB;IAC/B,wBAAwB;IACxB,QAAQ,CAAC,IAAI,EAAE,eAAe,CAAC;IAC/B,yBAAyB;IACzB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,0BAA0B;IAC1B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,6CAA6C;IAC7C,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC;IACpC,sCAAsC;IACtC,QAAQ,CAAC,aAAa,EAAE,KAAK,CAAC,KAAK,CAAC;IACpC,8BAA8B;IAC9B,QAAQ,CAAC,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC;IAClC,kCAAkC;IAClC,QAAQ,CAAC,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC;IACrC,8BAA8B;IAC9B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,8BAA8B;IAC9B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,EAAE,CAmX9D,CAAC;AAWF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,0BAA0B,GAAI,YAAY,MAAM,KAAG,MAa/D,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,wBAAwB,GAAI,SAAS,MAAM,KAAG,MAO1D,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,0BAA0B,GAAI,SAAS,MAAM,KAAG,MAS5D,CAAC;AAEF;;;;GAIG;AACH,MAAM,WAAW,uBAAuB;IACtC,sCAAsC;IACtC,QAAQ,CAAC,UAAU,EAAE,gBAAgB,CAAC;IACtC,0CAA0C;IAC1C,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,kDAAkD;IAClD,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,6CAA6C;IAC7C,QAAQ,CAAC,iBAAiB,EAAE,MAAM,CAAC;IACnC,wBAAwB;IACxB,QAAQ,CAAC,eAAe,EAAE,MAAM,CAAC;IACjC,qCAAqC;IACrC,QAAQ,CAAC,iBAAiB,EAAE,MAAM,CAAC;CACpC;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA2IhE,CAAC;AAEF;;;;GAIG;AACH,MAAM,WAAW,gBAAgB;IAC/B,uCAAuC;IACvC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,0CAA0C;IAC1C,QAAQ,CAAC,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3C,wDAAwD;IACxD,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,sCAAsC;IACtC,QAAQ,CAAC,kBAAkB,CAAC,EAAE;QAC5B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;QAC5B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;KAC1B,CAAC;CACH;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAoDlD,CAAC;AAEF,eAAe,WAAW,CAAC"}