v0.2.57
v0.2.57 — 엣지 따라 이동을 WebGL 2D + 3D 엔진까지 확장
변경 사항
- *사용자 요청**: "엣지를 따라서만 이동하도록 하는 기능은 3D 모드 2D 모드 둘 다 적용되어야 하고 WebGL 엔진에도 적용되어야 함".
추가 구현 (v0.2.56 에서 React Flow 2D 만 적용했던 것을 모든 엔진으로 확장)
- *3D —
AgentAvatars3D.tsx SingleAvatar** - 기존
animStateref 에bezierStart: THREE.Vector3+bezierT0: number필드 추가. - target 변경 시
avatarFollowEdges활성이면 bezier 모드 진입 (bezierStart = current snapshot, t0 = now). useFrame안에서 bezierT0 > 0 이면 cubic bezier 위치 계산. control points 의 Y 축 위로 lift (Math.min(4, len * 0.25)world units) → 캐릭터가 노드 사이를 "점프 호" 처럼 이동.- rawT >= 1 면 bezier 종료, lerp 모드 복귀.
- motion (sin/cos 흔들림) 은 bezier/lerp 와 무관하게 매 프레임 계속.
- *WebGL 2D —
WebGLGraph2D.tsx AvatarMarkers** - 신규
AnimatedAvatarGroupsub-component 신규 (~85 lines): <group ref={groupRef} position={[currentX, currentY, targetZ]}>으로 Html 을 감쌈.- 자체
animStateref +useFrame으로 group 의 position 을 직접 set → React re-render 없이 60Hz 보간. - avatarFollowEdges=false: 단순 lerp (
dt * 4). - avatarFollowEdges=true: cubic bezier with perpendicular lift (
min(60, len*0.18)) — React Flow 와 동일 패턴. - target 변경 inline 감지 (useEffect 대비 1 frame 빠름).
AvatarMarkers의 avatar 루프:<Html position={[ax, ay, 50]}>→<AnimatedAvatarGroup targetX={ax} targetY={ay} targetZ={50}><Html ...>. Html 의 position prop 제거 (부모 group 의 world transform 사용).
Bezier 곡선 차이 (3 엔진별)
| 엔진 | Lift 방향 | Lift 크기 | 비고 |
|---|---|---|---|
| React Flow 2D | 직선 수직 (2D plane) | min(60, len*0.18) | DOM CSS transform — RAF 직접 |
| WebGL 2D | 직선 수직 (XY plane) | min(60, len*0.18) | <group> position useFrame |
| 3D | Y 축 위로 (점프 호) | min(4, len*0.25) world units | groupRef.position useFrame |
UI 갱신 (ViewOptionsPanel.tsx)
- Toggle 설명: "React Flow 2D 엔진에서 적용" → "React Flow 2D · WebGL 2D · 3D 모두 적용 (3D 는 Y 축 위로 점프 호)".
변경 파일
src/components/Avatars/AgentAvatars3D.tsx— animState bezier 필드 + useFrame 분기.src/components/Visualizer2D/WebGLGraph2D.tsx— AnimatedAvatarGroup 신규 + Html wrap.src/components/Layout/ViewOptionsPanel.tsx— Toggle desc 갱신.package.json0.2.56 → 0.2.57.
검증
npx tsc --noEmitexit=0npm run build성공 — renderer 7.88s, 번들 3,473.01 kB (+4.6 kB, AnimatedAvatarGroup 추가).
사용자 확인
- React Flow 2D / WebGL 2D / 3D 모두에서 "엣지를 따라 이동" 켜면:
- 2D: 노드 간 이동 시 입자 흐름과 같은 대칭 bezier 곡선.
- 3D: 캐릭터가 노드 사이를 점프하듯 호를 그리며 이동 (Y 축 위로 lift).
- 끄면 기존 직선 lerp.
- --
📦 GitHub 릴리스 노트: v0.2.57