@aether-stack-dev/client-sdk 1.2.5 → 1.3.1

package/dist/react.esm.js

@@ -5,6 +5,16 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import * as THREE from 'three';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { VRMLoaderPlugin, VRMHumanBoneName } from '@pixiv/three-vrm';
+import { VRMLookAtQuaternionProxy, VRMAnimationLoaderPlugin, createVRMAnimationClip } from '@pixiv/three-vrm-animation';
+import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
+import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
+import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';
+import { SSAOPass } from 'three/examples/jsm/postprocessing/SSAOPass.js';
+import { BokehPass } from 'three/examples/jsm/postprocessing/BokehPass.js';
+import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass.js';
+import { HDRLoader } from 'three/examples/jsm/loaders/HDRLoader.js';
+import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader.js';
+import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader.js';
 
 const ARKIT_BLENDSHAPES = [
     'jawOpen', 'jawForward', 'jawLeft', 'jawRight',
@@ -28,8 +38,18 @@ const CRITICAL_BLENDSHAPES = [
     'jawOpen', 'eyeBlinkLeft', 'eyeBlinkRight',
 ];
 const DEFAULT_BLENDSHAPE_MAP = Object.fromEntries(ARKIT_BLENDSHAPES.map(name => [name, name]));
-({
-    ...DEFAULT_BLENDSHAPE_MAP});
+const VROID_BLENDSHAPE_MAP = {
+    ...DEFAULT_BLENDSHAPE_MAP,
+    jawOpen: 'Fcl_MTH_A',
+    mouthFunnel: 'Fcl_MTH_U',
+    mouthSmileLeft: 'Fcl_MTH_Fun',
+    mouthSmileRight: 'Fcl_MTH_Fun',
+    eyeBlinkLeft: 'Fcl_EYE_Close_L',
+    eyeBlinkRight: 'Fcl_EYE_Close_R',
+    browDownLeft: 'Fcl_BRW_Angry_L',
+    browDownRight: 'Fcl_BRW_Angry_R',
+    browInnerUp: 'Fcl_BRW_Surprised',
+};
 
 const IDX_JAW_OPEN = ARKIT_BLENDSHAPES.indexOf('jawOpen');
 const IDX_MOUTH_FUNNEL = ARKIT_BLENDSHAPES.indexOf('mouthFunnel');
@@ -797,7 +817,6 @@ function useAStackCSR(options) {
     };
 }
 
-const DEFAULT_MAX_MODEL_SIZE = 30 * 1024 * 1024; // 30MB
 const HIGH_VERTEX_THRESHOLD = 100000;
 function buildCompatibilityReport(vrm) {
     const foundNames = new Set();
@@ -834,7 +853,9 @@ function buildCompatibilityReport(vrm) {
     const supported = [];
     const missing = [];
     for (const name of ARKIT_BLENDSHAPES) {
-        if (foundNames.has(name) || foundNames.has(name.toLowerCase())) {
+        const vroidMapped = VROID_BLENDSHAPE_MAP[name];
+        if (foundNames.has(name) || foundNames.has(name.toLowerCase())
+            || (vroidMapped && (foundNames.has(vroidMapped) || foundNames.has(vroidMapped.toLowerCase())))) {
             supported.push(name);
         }
         else {
@@ -857,45 +878,205 @@ function buildCompatibilityReport(vrm) {
         modelStats: { vertexCount, textureCount, morphTargetCount },
     };
 }
-function VRMAvatar({ blendshapes, width = 400, height = 400, modelUrl = '/models/avatar.vrm', backgroundColor = 0x1a1a2e, blendshapeMap, onModelLoad, maxModelSize = DEFAULT_MAX_MODEL_SIZE, }) {
+
+function createPostProcessing(renderer, scene, camera, config, width, height) {
+    const composer = new EffectComposer(renderer);
+    composer.addPass(new RenderPass(scene, camera));
+    if (config.bloom !== undefined && config.bloom > 0) {
+        composer.addPass(new UnrealBloomPass(new THREE.Vector2(width, height), config.bloom * 0.8, 0.4, 0.85));
+    }
+    if (config.ao !== undefined && config.ao > 0) {
+        const ssao = new SSAOPass(scene, camera, width, height);
+        ssao.kernelRadius = 8 * config.ao;
+        ssao.minDistance = 0.005;
+        ssao.maxDistance = 0.1;
+        composer.addPass(ssao);
+    }
+    if (config.dof) {
+        composer.addPass(new BokehPass(scene, camera, { focus: 1.4, aperture: 0.002, maxblur: 0.005 }));
+    }
+    composer.addPass(new OutputPass());
+    return {
+        composer,
+        dispose: () => { composer.renderTarget1.dispose(); composer.renderTarget2.dispose(); },
+        setSize: (w, h) => composer.setSize(w, h),
+    };
+}
+const FPS_SAMPLE_SIZE = 60;
+const FPS_THRESHOLD = 30;
+class FpsMonitor {
+    constructor() {
+        this.samples = [];
+        this.lastTime = 0;
+        this.disabled = false;
+    }
+    tick(time) {
+        if (this.lastTime > 0) {
+            const delta = time - this.lastTime;
+            if (delta > 0)
+                this.samples.push(1000 / delta);
+            if (this.samples.length > FPS_SAMPLE_SIZE)
+                this.samples.shift();
+        }
+        this.lastTime = time;
+        if (this.samples.length >= FPS_SAMPLE_SIZE) {
+            const avg = this.samples.reduce((a, b) => a + b, 0) / this.samples.length;
+            if (avg < FPS_THRESHOLD) {
+                this.disabled = true;
+                console.warn(`[VRM] Post-processing auto-disabled (avg FPS: ${avg.toFixed(0)})`);
+            }
+        }
+    }
+    reset() {
+        this.samples = [];
+        this.lastTime = 0;
+        this.disabled = false;
+    }
+}
+
+let ktx2Loader = null;
+function getKTX2Loader(renderer) {
+    if (!ktx2Loader) {
+        ktx2Loader = new KTX2Loader();
+        ktx2Loader.setTranscoderPath('/basis/');
+        ktx2Loader.detectSupport(renderer);
+    }
+    return ktx2Loader;
+}
+function loadEnvironment(renderer, url) {
+    const cleanUrl = url.split('?')[0].split('#')[0].toLowerCase();
+    // For blob URLs, the filename is passed as a hash fragment (e.g. blob:...#file.ktx2)
+    const hash = (url.split('#')[1] || '').toLowerCase();
+    const hashExt = hash.includes('.') ? '.' + hash.split('.').pop() : '';
+    const pmrem = new THREE.PMREMGenerator(renderer);
+    pmrem.compileEquirectangularShader();
+    const finalize = (texture) => {
+        const envMap = pmrem.fromEquirectangular(texture).texture;
+        texture.dispose();
+        pmrem.dispose();
+        return { envMap, dispose: () => envMap.dispose() };
+    };
+    if (cleanUrl.endsWith('.ktx2') || hashExt === '.ktx2') {
+        return new Promise((resolve, reject) => {
+            getKTX2Loader(renderer).load(url, (compressedTex) => {
+                // Compressed textures can't be flipped by WebGL on upload, so the
+                // top-down KTX2 data is inverted vs what PMREM expects. Render to
+                // an intermediate target with flipped v to decompress + correct.
+                const w = compressedTex.image.width, h = compressedTex.image.height;
+                const rt = new THREE.WebGLRenderTarget(w, h, { type: THREE.HalfFloatType });
+                const cam = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+                const mat = new THREE.ShaderMaterial({
+                    uniforms: { tMap: { value: compressedTex } },
+                    vertexShader: 'varying vec2 vUv; void main(){ vUv=uv; gl_Position=vec4(position,1.); }',
+                    fragmentShader: 'uniform sampler2D tMap; varying vec2 vUv; void main(){ gl_FragColor=texture2D(tMap,vec2(vUv.x,1.-vUv.y)); }',
+                });
+                const quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), mat);
+                const sc = new THREE.Scene();
+                sc.add(quad);
+                const prevRT = renderer.getRenderTarget();
+                renderer.setRenderTarget(rt);
+                renderer.render(sc, cam);
+                renderer.setRenderTarget(prevRT);
+                mat.dispose();
+                quad.geometry.dispose();
+                compressedTex.dispose();
+                rt.texture.mapping = THREE.EquirectangularReflectionMapping;
+                const envMap = pmrem.fromEquirectangular(rt.texture).texture;
+                rt.dispose();
+                pmrem.dispose();
+                resolve({ envMap, dispose: () => envMap.dispose() });
+            }, undefined, reject);
+        });
+    }
+    return new Promise((resolve, reject) => {
+        const onLoad = (texture) => resolve(finalize(texture));
+        if (cleanUrl.endsWith('.exr') || hashExt === '.exr') {
+            new EXRLoader().load(url, onLoad, undefined, reject);
+        }
+        else {
+            new HDRLoader().load(url, onLoad, undefined, reject);
+        }
+    });
+}
+
+const DEFAULT_MAX_MODEL_SIZE = 30 * 1024 * 1024; // 30MB
+function VRMAvatar({ blendshapes, width = 400, height = 400, modelUrl = 'https://xwqtyabmavpacejuypyp.supabase.co/storage/v1/object/public/vrm-templates/5705015963733407866.vrm', backgroundColor = 0xffffff, blendshapeMap, expressionOverrides, onModelLoad, maxModelSize = DEFAULT_MAX_MODEL_SIZE, cameraPosition, cameraTarget, cameraFov, lightIntensity, idleAnimationUrl, animationSpeed = 1, animationWeight = 1, animationCrossfade = 0.5, postProcessing, environmentUrl, environmentIntensity, environmentBlur, environmentZoom, onEnvironmentLoad, features, orbitAngle, orbitElevation, avatarRotation, onOrbitChange, cursorFollow = true, preserveDrawingBuffer = false, }) {
     const containerRef = useRef(null);
     const rendererRef = useRef(null);
     const sceneRef = useRef(null);
     const cameraRef = useRef(null);
     const vrmRef = useRef(null);
+    const lightsRef = useRef(null);
+    const onModelLoadRef = useRef(onModelLoad);
+    onModelLoadRef.current = onModelLoad;
+    const animSpeedRef = useRef(animationSpeed);
+    animSpeedRef.current = animationSpeed;
+    const animWeightRef = useRef(animationWeight);
+    animWeightRef.current = animationWeight;
+    const animCrossfadeRef = useRef(animationCrossfade);
+    animCrossfadeRef.current = animationCrossfade;
+    const exprOverridesRef = useRef(expressionOverrides);
+    exprOverridesRef.current = expressionOverrides;
+    const featuresRef = useRef(features);
+    featuresRef.current = features;
+    const envZoomRef = useRef(environmentZoom);
+    envZoomRef.current = environmentZoom;
+    const onEnvLoadRef = useRef(onEnvironmentLoad);
+    onEnvLoadRef.current = onEnvironmentLoad;
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     const animationFrameRef = useRef(0);
     const animationTimeRef = useRef(0);
+    const mixerRef = useRef(null);
+    const clipActionRef = useRef(null);
+    const composerRef = useRef(null);
+    const envMapRef = useRef(null);
+    const bgSceneRef = useRef(new THREE.Scene());
+    useRef(null);
+    const fpsMonitorRef = useRef(new FpsMonitor());
+    const orbitRef = useRef({ angle: 0, targetAngle: 0, elevation: 0, targetElevation: 0, zoomOffset: 0, dragging: false, lastX: 0, lastY: 0 });
+    const orbitAnglePropRef = useRef(orbitAngle);
+    orbitAnglePropRef.current = orbitAngle;
+    const onOrbitChangeRef = useRef(onOrbitChange);
+    onOrbitChangeRef.current = onOrbitChange;
+    const baseCamRef = useRef({ distance: 1.2, height: 1.4, targetY: 1.3 });
+    const idleRef = useRef({ blinkNext: 2 + Math.random() * 4, blinkPhase: 0, blinkStart: 0,
+        happy: 0, happyTarget: 0, browInner: 0, browTarget: 0, cheek: 0, cheekTarget: 0, microNext: 3,
+        eyeX: 0, eyeY: 0, eyeTargetX: 0, eyeTargetY: 0, eyeNext: 1 });
+    const isA2FActiveRef = useRef(false);
+    const idleMorphsRef = useRef([]);
+    const springSettleFramesRef = useRef(0);
+    const cursorFollowRef = useRef(cursorFollow);
+    cursorFollowRef.current = cursorFollow;
+    const cursorRef = useRef({ x: 0, y: 0, active: false });
     const applyBlendshapes = useCallback((vrm, shapes) => {
         const arkitMap = {};
         ARKIT_BLENDSHAPES.forEach((name, i) => {
             arkitMap[name] = shapes[i] || 0;
         });
-        const mouthOpen = arkitMap.jawOpen || 0;
+        const mouthOpen = arkitMap.jawOpen || 0, funnel = arkitMap.mouthFunnel || 0;
         const smile = ((arkitMap.mouthSmileLeft || 0) + (arkitMap.mouthSmileRight || 0)) / 2;
-        const funnel = arkitMap.mouthFunnel || 0;
-        const blinkLeft = arkitMap.eyeBlinkLeft || 0;
-        const blinkRight = arkitMap.eyeBlinkRight || 0;
+        const blinkLeft = arkitMap.eyeBlinkLeft || 0, blinkRight = arkitMap.eyeBlinkRight || 0;
         if (vrm.expressionManager) {
             vrm.expressionManager.expressions.forEach(exp => {
                 vrm.expressionManager?.setValue(exp.expressionName, 0);
             });
-            const trySetExpression = (name, value) => {
+            const trySet = (name, value) => {
                 try {
                     vrm.expressionManager?.setValue(name, Math.min(Math.max(value, 0), 1));
                 }
-                catch {
-                    // Expression doesn't exist
-                }
+                catch { }
             };
-            trySetExpression('aa', mouthOpen * 1.5);
-            trySetExpression('happy', smile * 2);
-            trySetExpression('blink', (blinkLeft + blinkRight) / 2);
-            trySetExpression('blinkLeft', blinkLeft);
-            trySetExpression('blinkRight', blinkRight);
-            trySetExpression('ou', funnel);
-            vrm.expressionManager.update();
+            trySet('aa', mouthOpen * 1.5);
+            trySet('happy', smile * 2);
+            trySet('blink', (blinkLeft + blinkRight) / 2);
+            trySet('blinkLeft', blinkLeft);
+            trySet('blinkRight', blinkRight);
+            trySet('ou', funnel);
+            try {
+                vrm.expressionManager.update();
+            }
+            catch { }
         }
         vrm.scene.traverse((obj) => {
             if (obj.isMesh) {
@@ -923,7 +1104,8 @@ function VRMAvatar({ blendshapes, width = 400, height = 400, modelUrl = '/models
             renderer = new THREE.WebGLRenderer({
                 antialias: true,
                 alpha: true,
-                powerPreference: 'high-performance'
+                powerPreference: 'high-performance',
+                preserveDrawingBuffer,
             });
         }
         catch {
@@ -937,20 +1119,21 @@ function VRMAvatar({ blendshapes, width = 400, height = 400, modelUrl = '/models
         container.appendChild(renderer.domElement);
         rendererRef.current = renderer;
         const scene = new THREE.Scene();
-        scene.background = new THREE.Color(backgroundColor);
+        scene.background = backgroundColor === null ? null : new THREE.Color(backgroundColor ?? 0xffffff);
         sceneRef.current = scene;
         const camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 20);
         camera.position.set(0, 1.4, 1.2);
         camera.lookAt(0, 1.3, 0);
         cameraRef.current = camera;
-        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+        const ambientLight = new THREE.AmbientLight(0xffffff, 1.0);
         scene.add(ambientLight);
-        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
         directionalLight.position.set(1, 1, 1);
         scene.add(directionalLight);
-        const backLight = new THREE.DirectionalLight(0x4a9eff, 0.3);
+        const backLight = new THREE.DirectionalLight(0x4a9eff, 0.4);
         backLight.position.set(-1, 1, -1);
         scene.add(backLight);
+        lightsRef.current = { ambient: ambientLight, directional: directionalLight, back: backLight };
         let cancelled = false;
         // Size guard: fire HEAD check in parallel — if model is too large, cancel before render
         if (maxModelSize > 0) {
@@ -965,7 +1148,7 @@ function VRMAvatar({ blendshapes, width = 400, height = 400, modelUrl = '/models
                     const errMsg = `Model too large (${sizeMB}MB, limit ${limitMB}MB)`;
                     setError(errMsg);
                     setLoading(false);
-                    onModelLoad?.({
+                    onModelLoadRef.current?.({
                         supported: 0, missing: [...ARKIT_BLENDSHAPES], warnings: [errMsg],
                         modelStats: { vertexCount: 0, textureCount: 0, morphTargetCount: 0 },
                     });
@@ -981,12 +1164,49 @@ function VRMAvatar({ blendshapes, width = 400, height = 400, modelUrl = '/models
             if (vrm) {
                 scene.add(vrm.scene);
                 vrmRef.current = vrm;
+                const mc = [];
+                vrm.scene.traverse((o) => {
+                    const mesh = o;
+                    if (!mesh.isMesh)
+                        return;
+                    const d = mesh.morphTargetDictionary, inf = mesh.morphTargetInfluences;
+                    if (!d || !inf)
+                        return;
+                    const e = { inf };
+                    if (d['browInnerUp'] !== undefined)
+                        e.brow = d['browInnerUp'];
+                    if (d['cheekSquintLeft'] !== undefined)
+                        e.cheekL = d['cheekSquintLeft'];
+                    if (d['cheekSquintRight'] !== undefined)
+                        e.cheekR = d['cheekSquintRight'];
+                    if (e.brow !== undefined || e.cheekL !== undefined)
+                        mc.push(e);
+                });
+                idleMorphsRef.current = mc;
+                // Apply idle pose immediately so the model never renders in T-pose
+                const humanoid = vrm.humanoid;
+                if (humanoid) {
+                    const b = (n) => humanoid.getNormalizedBoneNode(n);
+                    const lArm = b(VRMHumanBoneName.LeftUpperArm), rArm = b(VRMHumanBoneName.RightUpperArm);
+                    if (lArm)
+                        lArm.rotation.z = -1;
+                    if (rArm)
+                        rArm.rotation.z = 1.0;
+                }
+                if (vrm.lookAt) {
+                    const proxy = new VRMLookAtQuaternionProxy(vrm.lookAt);
+                    proxy.name = 'VRMLookAtQuaternionProxy';
+                    vrm.scene.add(proxy);
+                }
+                vrm.update(0);
+                vrm.springBoneManager?.reset();
+                springSettleFramesRef.current = 30;
                 setLoading(false);
                 const report = buildCompatibilityReport(vrm);
                 if (report.warnings.length > 0) {
                     console.warn('[VRM] Compatibility warnings:', report.warnings);
                 }
-                onModelLoad?.(report);
+                onModelLoadRef.current?.(report);
             }
         }, () => { }, (err) => {
             if (cancelled)
@@ -1000,78 +1220,499 @@ function VRMAvatar({ blendshapes, width = 400, height = 400, modelUrl = '/models
             setError(detail);
             setLoading(false);
         });
-        const clock = new THREE.Clock();
+        const timer = new THREE.Timer();
         const animate = () => {
             animationFrameRef.current = requestAnimationFrame(animate);
-            const delta = clock.getDelta();
+            timer.update();
+            const delta = timer.getDelta();
             animationTimeRef.current += delta;
             if (vrmRef.current) {
-                vrmRef.current.update(delta);
+                try {
+                    vrmRef.current.update(delta);
+                }
+                catch { }
+                if (featuresRef.current?.springBones === false || springSettleFramesRef.current > 0) {
+                    vrmRef.current.springBoneManager?.reset();
+                    if (springSettleFramesRef.current > 0)
+                        springSettleFramesRef.current--;
+                }
+                if (mixerRef.current)
+                    mixerRef.current.update(delta);
                 const humanoid = vrmRef.current.humanoid;
-                if (humanoid) {
-                    const time = animationTimeRef.current;
-                    const breathCycle = time * 1.2;
-                    const breathIntensity = 0.03;
-                    const idleSway = time * 0.5;
-                    const swayIntensity = 0.02;
-                    const headBob = time * 0.7;
-                    const headBobIntensity = 0.015;
-                    const spineBone = humanoid.getNormalizedBoneNode(VRMHumanBoneName.Spine);
-                    if (spineBone) {
-                        spineBone.rotation.x = Math.sin(breathCycle) * breathIntensity;
-                        spineBone.rotation.z = Math.sin(idleSway) * swayIntensity * 0.3;
+                if (featuresRef.current?.idleAnimation !== false && humanoid && !clipActionRef.current) {
+                    const t = animationTimeRef.current, br = t * 1.2, sw = t * 0.5, hb = t * 0.7;
+                    const b = (n) => humanoid.getNormalizedBoneNode(n);
+                    const spine = b(VRMHumanBoneName.Spine);
+                    if (spine) {
+                        spine.rotation.x = Math.sin(br) * 0.03;
+                        spine.rotation.z = Math.sin(sw) * 0.006;
+                    }
+                    const chest = b(VRMHumanBoneName.Chest);
+                    if (chest) {
+                        chest.rotation.x = Math.sin(br + 0.3) * 0.015;
+                        chest.rotation.z = Math.sin(sw + 0.5) * 0.004;
                     }
-                    const chestBone = humanoid.getNormalizedBoneNode(VRMHumanBoneName.Chest);
-                    if (chestBone) {
-                        chestBone.rotation.x = Math.sin(breathCycle + 0.3) * breathIntensity * 0.5;
-                        chestBone.rotation.z = Math.sin(idleSway + 0.5) * swayIntensity * 0.2;
+                    const neck = b(VRMHumanBoneName.Neck);
+                    if (neck) {
+                        neck.rotation.x = Math.sin(hb) * 0.015;
+                        neck.rotation.y = Math.sin(sw * 0.7) * 0.01;
                     }
-                    const neckBone = humanoid.getNormalizedBoneNode(VRMHumanBoneName.Neck);
-                    if (neckBone) {
-                        neckBone.rotation.x = Math.sin(headBob) * headBobIntensity;
-                        neckBone.rotation.y = Math.sin(idleSway * 0.7) * swayIntensity * 0.5;
+                    const head = b(VRMHumanBoneName.Head);
+                    if (head) {
+                        head.rotation.x = Math.sin(hb + 0.5) * 0.006;
+                        head.rotation.y = Math.sin(sw * 0.6 + 0.8) * 0.006;
                     }
-                    const headBone = humanoid.getNormalizedBoneNode(VRMHumanBoneName.Head);
-                    if (headBone) {
-                        headBone.rotation.x = Math.sin(headBob + 0.5) * headBobIntensity * 0.4;
-                        headBone.rotation.y = Math.sin(idleSway * 0.6 + 0.8) * swayIntensity * 0.3;
+                    const lSh = b(VRMHumanBoneName.LeftShoulder), rSh = b(VRMHumanBoneName.RightShoulder);
+                    if (lSh)
+                        lSh.rotation.z = Math.sin(br) * 0.006;
+                    if (rSh)
+                        rSh.rotation.z = -Math.sin(br) * 0.006;
+                    const lArm = b(VRMHumanBoneName.LeftUpperArm), rArm = b(VRMHumanBoneName.RightUpperArm);
+                    if (lArm)
+                        lArm.rotation.z = -1 + Math.sin(sw * 0.4) * 0.02;
+                    if (rArm)
+                        rArm.rotation.z = 1.0 + Math.sin(sw * 0.4 + 0.5) * 0.02;
+                }
+                if (featuresRef.current?.microExpressions !== false && vrmRef.current.expressionManager && !isA2FActiveRef.current &&
+                    !Object.keys(exprOverridesRef.current ?? {}).length) {
+                    const idle = idleRef.current, t = animationTimeRef.current;
+                    let bv = 0;
+                    if (idle.blinkPhase === 0 && t >= idle.blinkNext) {
+                        idle.blinkPhase = 1;
+                        idle.blinkStart = t;
                     }
-                    const leftShoulder = humanoid.getNormalizedBoneNode(VRMHumanBoneName.LeftShoulder);
-                    const rightShoulder = humanoid.getNormalizedBoneNode(VRMHumanBoneName.RightShoulder);
-                    if (leftShoulder) {
-                        leftShoulder.rotation.z = Math.sin(breathCycle) * breathIntensity * 0.2;
+                    if (idle.blinkPhase === 1) {
+                        bv = Math.min((t - idle.blinkStart) / 0.15, 1);
+                        if (bv >= 1) {
+                            idle.blinkPhase = 2;
+                            idle.blinkStart = t;
+                        }
                     }
-                    if (rightShoulder) {
-                        rightShoulder.rotation.z = -Math.sin(breathCycle) * breathIntensity * 0.2;
+                    else if (idle.blinkPhase === 2) {
+                        bv = 1 - Math.min((t - idle.blinkStart) / 0.15, 1);
+                        if (bv <= 0) {
+                            idle.blinkPhase = 0;
+                            idle.blinkNext = t + 2 + Math.random() * 4;
+                        }
                     }
-                    const leftUpperArm = humanoid.getNormalizedBoneNode(VRMHumanBoneName.LeftUpperArm);
-                    const rightUpperArm = humanoid.getNormalizedBoneNode(VRMHumanBoneName.RightUpperArm);
-                    if (leftUpperArm) {
-                        leftUpperArm.rotation.z = -1 + Math.sin(idleSway * 0.4) * 0.02;
+                    if (t >= idle.microNext) {
+                        idle.happyTarget = Math.random() * 0.1;
+                        idle.browTarget = Math.random() * 0.08;
+                        idle.cheekTarget = Math.random() * 0.05;
+                        idle.microNext = t + 3 + Math.random() * 5;
                     }
-                    if (rightUpperArm) {
-                        rightUpperArm.rotation.z = 1.0 + Math.sin(idleSway * 0.4 + 0.5) * 0.02;
+                    idle.happy += (idle.happyTarget - idle.happy) * 0.02;
+                    idle.browInner += (idle.browTarget - idle.browInner) * 0.02;
+                    idle.cheek += (idle.cheekTarget - idle.cheek) * 0.02;
+                    const cursor = cursorRef.current;
+                    if (cursorFollowRef.current && cursor.active) {
+                        idle.eyeTargetX = cursor.x * 0.26; // ±15° horizontal (0.26 rad ≈ 15°)
+                        idle.eyeTargetY = cursor.y * 0.17; // ±10° vertical (0.17 rad ≈ 10°)
+                    }
+                    else if (t >= idle.eyeNext) {
+                        idle.eyeTargetX = (Math.random() - 0.5) * 0.06;
+                        idle.eyeTargetY = (Math.random() - 0.5) * 0.04;
+                        idle.eyeNext = t + 1.5 + Math.random() * 3;
+                    }
+                    idle.eyeX += (idle.eyeTargetX - idle.eyeX) * 0.06;
+                    idle.eyeY += (idle.eyeTargetY - idle.eyeY) * 0.06;
+                    const em = vrmRef.current.expressionManager;
+                    try {
+                        em.setValue('blink', Math.max(bv, 0));
+                    }
+                    catch { }
+                    try {
+                        em.setValue('happy', Math.max(idle.happy, 0));
+                    }
+                    catch { }
+                    try {
+                        em.update();
+                    }
+                    catch { }
+                    for (const m of idleMorphsRef.current) {
+                        if (m.brow !== undefined)
+                            m.inf[m.brow] = idle.browInner;
+                        if (m.cheekL !== undefined)
+                            m.inf[m.cheekL] = idle.cheek;
+                        if (m.cheekR !== undefined)
+                            m.inf[m.cheekR] = idle.cheek;
+                    }
+                    if (humanoid) {
+                        for (const bn of [VRMHumanBoneName.LeftEye, VRMHumanBoneName.RightEye]) {
+                            const eye = humanoid.getNormalizedBoneNode(bn);
+                            if (eye) {
+                                eye.rotation.x = idle.eyeY;
+                                eye.rotation.y = idle.eyeX;
+                            }
+                        }
                     }
                 }
             }
-            renderer.render(scene, camera);
+            // Smooth lerp for spherical orbit (azimuth + elevation)
+            const orbit = orbitRef.current;
+            const elevDiff = orbit.targetElevation - orbit.elevation;
+            const angleDiff = orbit.targetAngle - orbit.angle;
+            if (Math.abs(elevDiff) > 0.0005 || Math.abs(angleDiff) > 0.0005) {
+                orbit.elevation += elevDiff * 0.1;
+                orbit.angle += angleDiff * 0.1;
+                const base = baseCamRef.current;
+                const d = Math.max(0.3, base.distance + orbit.zoomOffset);
+                const cosEl = Math.cos(orbit.elevation);
+                const sinEl = Math.sin(orbit.elevation);
+                camera.position.set(Math.sin(orbit.angle) * cosEl * d, base.height + sinEl * d, Math.cos(orbit.angle) * cosEl * d);
+                camera.lookAt(0, base.targetY, 0);
+            }
+            const pipeline = composerRef.current;
+            const ez = envZoomRef.current;
+            const hasBgZoom = ez && ez !== 1 && scene.background && envMapRef.current;
+            if (hasBgZoom && !pipeline) {
+                const baseFov = camera.fov;
+                const bgScene = bgSceneRef.current;
+                bgScene.backgroundBlurriness = scene.backgroundBlurriness;
+                bgScene.backgroundIntensity = scene.backgroundIntensity ?? 1;
+                camera.fov = baseFov / ez;
+                camera.updateProjectionMatrix();
+                renderer.render(bgScene, camera);
+                camera.fov = baseFov;
+                camera.updateProjectionMatrix();
+                const savedBg = scene.background;
+                scene.background = null;
+                renderer.autoClear = false;
+                renderer.clearDepth();
+                renderer.render(scene, camera);
+                renderer.autoClear = true;
+                scene.background = savedBg;
+            }
+            else if (pipeline && !fpsMonitorRef.current.disabled) {
+                pipeline.composer.render();
+                fpsMonitorRef.current.tick(performance.now());
+            }
+            else {
+                renderer.render(scene, camera);
+            }
         };
         animate();
         return () => {
             cancelled = true;
             cancelAnimationFrame(animationFrameRef.current);
+            clipActionRef.current = null;
+            mixerRef.current = null;
+            composerRef.current?.dispose();
+            composerRef.current = null;
+            envMapRef.current?.dispose();
+            envMapRef.current = null;
             renderer.dispose();
             if (container && renderer.domElement) {
                 container.removeChild(renderer.domElement);
             }
         };
-    }, [width, height, modelUrl, backgroundColor, maxModelSize, onModelLoad]);
+    }, [width, height, modelUrl, maxModelSize, preserveDrawingBuffer]);
+    useEffect(() => {
+        composerRef.current?.dispose();
+        composerRef.current = null;
+        fpsMonitorRef.current.reset();
+        const renderer = rendererRef.current, scene = sceneRef.current, camera = cameraRef.current;
+        const pp = features?.postProcessing ?? postProcessing;
+        if (!renderer || !scene || !camera || !pp)
+            return;
+        const hasAnyEffect = (pp.bloom && pp.bloom > 0) || (pp.ao && pp.ao > 0) || pp.dof;
+        if (!hasAnyEffect)
+            return;
+        composerRef.current = createPostProcessing(renderer, scene, camera, pp, width, height);
+        return () => { composerRef.current?.dispose(); composerRef.current = null; };
+    }, [postProcessing, features, width, height]);
+    // Load/unload .vrma animation clip — crossfade between clips
+    useEffect(() => {
+        const vrm = vrmRef.current;
+        const fade = animCrossfadeRef.current;
+        if (!idleAnimationUrl) {
+            const old = clipActionRef.current;
+            if (old) {
+                old.fadeOut(fade);
+                setTimeout(() => {
+                    old.stop();
+                    if (clipActionRef.current === old)
+                        clipActionRef.current = null;
+                    if (mixerRef.current && !clipActionRef.current) {
+                        mixerRef.current.stopAllAction();
+                        mixerRef.current = null;
+                    }
+                }, fade * 1000);
+            }
+            return;
+        }
+        if (!vrm)
+            return;
+        let cancelled = false;
+        const loader = new GLTFLoader();
+        loader.register((parser) => new VRMAnimationLoaderPlugin(parser));
+        const origWarn = console.warn;
+        console.warn = (...args) => {
+            if (typeof args[0] === 'string' && args[0].includes('specVersion'))
+                return;
+            origWarn.apply(console, args);
+        };
+        loader.load(idleAnimationUrl, (gltf) => {
+            console.warn = origWarn;
+            if (cancelled || !vrmRef.current)
+                return;
+            const animations = gltf.userData.vrmAnimations;
+            if (!animations || animations.length === 0)
+                return;
+            const mixer = mixerRef.current ?? new THREE.AnimationMixer(vrmRef.current.scene);
+            mixerRef.current = mixer;
+            const clip = createVRMAnimationClip(animations[0], vrmRef.current);
+            const newAction = mixer.clipAction(clip);
+            newAction.setLoop(THREE.LoopPingPong, Infinity);
+            newAction.timeScale = animSpeedRef.current;
+            newAction.setEffectiveWeight(animWeightRef.current);
+            const oldAction = clipActionRef.current;
+            const cf = animCrossfadeRef.current;
+            if (oldAction) {
+                newAction.reset().play();
+                oldAction.crossFadeTo(newAction, cf, true);
+                setTimeout(() => { oldAction.stop(); mixer.uncacheAction(oldAction.getClip()); }, cf * 1000);
+            }
+            else {
+                newAction.reset().fadeIn(cf).play();
+            }
+            clipActionRef.current = newAction;
+        }, () => { }, (err) => {
+            console.warn = origWarn;
+            if (cancelled)
+                return;
+            console.warn('[VRM] Failed to load animation clip:', err);
+        });
+        return () => { cancelled = true; };
+    }, [idleAnimationUrl, loading]);
+    // Update animation speed/weight in real time
+    useEffect(() => {
+        if (clipActionRef.current)
+            clipActionRef.current.timeScale = animationSpeed;
+    }, [animationSpeed]);
+    useEffect(() => {
+        if (clipActionRef.current)
+            clipActionRef.current.setEffectiveWeight(animationWeight);
+    }, [animationWeight]);
+    // Update background in-place (skip when HDRI active)
+    useEffect(() => {
+        if (sceneRef.current && !environmentUrl) {
+            sceneRef.current.background = backgroundColor === null ? null : new THREE.Color(backgroundColor ?? 0xffffff);
+        }
+    }, [backgroundColor, environmentUrl]);
+    // HDRI environment map loading — keep old envMap visible until new one is ready
+    useEffect(() => {
+        const scene = sceneRef.current, renderer = rendererRef.current;
+        if (!scene || !renderer || !environmentUrl) {
+            envMapRef.current?.dispose();
+            envMapRef.current = null;
+            if (scene) {
+                scene.environment = null;
+                scene.background = null;
+                scene.backgroundBlurriness = 0;
+                scene.environmentIntensity = 1;
+            }
+            return;
+        }
+        let cancelled = false;
+        const prev = envMapRef.current;
+        loadEnvironment(renderer, environmentUrl).then(r => {
+            if (cancelled) {
+                r.dispose();
+                return;
+            }
+            prev?.dispose();
+            scene.environment = r.envMap;
+            scene.background = r.envMap;
+            scene.backgroundBlurriness = environmentBlur ?? 0;
+            scene.environmentIntensity = environmentIntensity ?? 1;
+            scene.backgroundIntensity = environmentIntensity ?? 1;
+            bgSceneRef.current.background = r.envMap;
+            envMapRef.current = { dispose: r.dispose, envMap: r.envMap };
+            onEnvLoadRef.current?.();
+        }).catch(e => console.warn('[VRM] HDRI load failed:', e));
+        return () => { cancelled = true; };
+    }, [environmentUrl]);
+    // Update HDRI intensity/blur without reloading
+    useEffect(() => {
+        if (!sceneRef.current || !envMapRef.current)
+            return;
+        sceneRef.current.backgroundBlurriness = environmentBlur ?? 0;
+        sceneRef.current.environmentIntensity = environmentIntensity ?? 1;
+        sceneRef.current.backgroundIntensity = environmentIntensity ?? 1;
+    }, [environmentIntensity, environmentBlur]);
+    // Update camera base values and apply orbit
+    useEffect(() => {
+        const pos = cameraPosition ?? [0, 1.4, 1.2];
+        const target = cameraTarget ?? [0, 1.3, 0];
+        baseCamRef.current = { distance: pos[2], height: pos[1], targetY: target[1] };
+        if (orbitAnglePropRef.current === undefined) {
+            orbitRef.current.angle = 0;
+            orbitRef.current.targetAngle = 0;
+        }
+        orbitRef.current.zoomOffset = 0;
+        if (orbitElevation === undefined) {
+            orbitRef.current.elevation = 0;
+            orbitRef.current.targetElevation = 0;
+        }
+        const camera = cameraRef.current;
+        if (!camera)
+            return;
+        const d = baseCamRef.current.distance;
+        camera.position.set(0, baseCamRef.current.height, d);
+        camera.lookAt(0, baseCamRef.current.targetY, 0);
+        if (cameraFov !== undefined && camera.fov !== cameraFov) {
+            camera.fov = cameraFov;
+            camera.updateProjectionMatrix();
+        }
+    }, [cameraPosition, cameraTarget, cameraFov]);
+    // Prop-driven orbit angle
+    useEffect(() => {
+        if (orbitAngle !== undefined) {
+            orbitRef.current.targetAngle = orbitAngle;
+        }
+    }, [orbitAngle]);
+    // Prop-driven orbit elevation
+    useEffect(() => {
+        if (orbitElevation !== undefined) {
+            orbitRef.current.targetElevation = orbitElevation;
+        }
+    }, [orbitElevation]);
+    // Prop-driven avatar rotation
+    useEffect(() => {
+        if (avatarRotation !== undefined && vrmRef.current) {
+            vrmRef.current.scene.rotation.y = avatarRotation;
+        }
+    }, [avatarRotation, loading]);
+    // Mouse orbit (horizontal only) + scroll zoom
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const applyCameraOrbit = () => {
+            const camera = cameraRef.current;
+            if (!camera)
+                return;
+            const base = baseCamRef.current;
+            const orbit = orbitRef.current;
+            const d = Math.max(0.3, base.distance + orbit.zoomOffset);
+            const cosEl = Math.cos(orbit.elevation);
+            const sinEl = Math.sin(orbit.elevation);
+            camera.position.set(Math.sin(orbit.angle) * cosEl * d, base.height + sinEl * d, Math.cos(orbit.angle) * cosEl * d);
+            camera.lookAt(0, base.targetY, 0);
+        };
+        const onWheel = (e) => {
+            e.preventDefault();
+            orbitRef.current.zoomOffset += e.deltaY * 0.002;
+            applyCameraOrbit();
+        };
+        const onMouseDown = (e) => {
+            orbitRef.current.dragging = true;
+            orbitRef.current.lastX = e.clientX;
+            orbitRef.current.lastY = e.clientY;
+        };
+        const onMouseMove = (e) => {
+            if (!orbitRef.current.dragging)
+                return;
+            const dx = e.clientX - orbitRef.current.lastX;
+            const dy = e.clientY - orbitRef.current.lastY;
+            orbitRef.current.lastX = e.clientX;
+            orbitRef.current.lastY = e.clientY;
+            orbitRef.current.angle -= dx * 0.005;
+            orbitRef.current.targetAngle = orbitRef.current.angle;
+            orbitRef.current.elevation = Math.max(-Math.PI / 3, Math.min(Math.PI / 3, orbitRef.current.elevation + dy * 0.005));
+            orbitRef.current.targetElevation = orbitRef.current.elevation;
+            applyCameraOrbit();
+            onOrbitChangeRef.current?.(orbitRef.current.angle, orbitRef.current.elevation);
+        };
+        const onMouseUp = () => {
+            orbitRef.current.dragging = false;
+        };
+        const onKeyDown = (e) => {
+            const o = orbitRef.current;
+            if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                o.targetElevation = Math.min(o.targetElevation + 0.1, Math.PI / 3);
+            }
+            else if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                o.targetElevation = Math.max(o.targetElevation - 0.1, -Math.PI / 3);
+            }
+            else if (e.key === 'ArrowLeft') {
+                e.preventDefault();
+                o.targetAngle += 0.15;
+            }
+            else if (e.key === 'ArrowRight') {
+                e.preventDefault();
+                o.targetAngle -= 0.15;
+            }
+            onOrbitChangeRef.current?.(o.targetAngle, o.targetElevation);
+        };
+        const onCursorMove = (e) => {
+            const rect = container.getBoundingClientRect();
+            cursorRef.current.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
+            cursorRef.current.y = ((e.clientY - rect.top) / rect.height) * 2 - 1;
+            cursorRef.current.active = true;
+        };
+        const onCursorLeave = () => { cursorRef.current.active = false; };
+        container.addEventListener('wheel', onWheel, { passive: false });
+        container.addEventListener('mousedown', onMouseDown);
+        container.addEventListener('mousemove', onCursorMove);
+        container.addEventListener('mouseleave', onCursorLeave);
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+        window.addEventListener('keydown', onKeyDown);
+        return () => {
+            container.removeEventListener('wheel', onWheel);
+            container.removeEventListener('mousedown', onMouseDown);
+            container.removeEventListener('mousemove', onCursorMove);
+            container.removeEventListener('mouseleave', onCursorLeave);
+            window.removeEventListener('mousemove', onMouseMove);
+            window.removeEventListener('mouseup', onMouseUp);
+            window.removeEventListener('keydown', onKeyDown);
+        };
+    }, []);
+    // Update lighting in-place
+    useEffect(() => {
+        if (!lightsRef.current)
+            return;
+        const intensity = lightIntensity ?? 1;
+        lightsRef.current.ambient.intensity = 1.0 * intensity;
+        lightsRef.current.directional.intensity = 1.2 * intensity;
+        lightsRef.current.back.intensity = 0.4 * intensity;
+    }, [lightIntensity]);
     useEffect(() => {
+        isA2FActiveRef.current = blendshapes.some(v => v !== 0);
         if (vrmRef.current && blendshapes.length > 0) {
             applyBlendshapes(vrmRef.current, blendshapes);
         }
     }, [blendshapes, applyBlendshapes]);
+    useEffect(() => {
+        const vrm = vrmRef.current;
+        if (!vrm?.expressionManager)
+            return;
+        const hasLiveData = blendshapes.some(v => v !== 0);
+        if (hasLiveData)
+            return;
+        if (features?.expressionPresets === false)
+            return;
+        vrm.expressionManager.expressions.forEach(exp => {
+            vrm.expressionManager.setValue(exp.expressionName, 0);
+        });
+        if (expressionOverrides) {
+            for (const [name, value] of Object.entries(expressionOverrides)) {
+                try {
+                    vrm.expressionManager.setValue(name, Math.min(Math.max(value, 0), 1));
+                }
+                catch { /* expression doesn't exist on this model */ }
+            }
+        }
+        try {
+            vrm.expressionManager.update();
+        }
+        catch { }
+    }, [expressionOverrides, blendshapes]);
     return (jsxs("div", { className: "relative", style: { width, height }, children: [jsx("div", { ref: containerRef, className: "rounded-lg overflow-hidden" }), loading && (jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-gray-800 rounded-lg", children: jsx("div", { className: "text-white text-sm", children: "Loading VRM avatar..." }) })), error && (jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-red-900/50 rounded-lg", children: jsx("div", { className: "text-white text-sm", children: error }) }))] }));
 }
 
-export { VRMAvatar, useAStackCSR };
+export { VRMAvatar, VROID_BLENDSHAPE_MAP, useAStackCSR };