[Open Source] #253 - Gesture Lab: Hệ thống tương tác 3D qua cử chỉ tay với kiến trúc Three.js, MediaPipe AI và cơ chế điều phối vật lý Rapier3D trên trình duyệt

Trong lĩnh vực tương tác người-máy (HCI), việc xóa nhòa ranh giới giữa thế giới vật lý và không gian kỹ thuật số luôn là một mục tiêu tối thượng. Gesture Lab ra đời như một nền tảng thực nghiệm đột phá, cho phép người dùng điều khiển các môi trường 3D phức tạp, xây dựng cấu trúc Voxel và tương tác với các giả lập vật lý chỉ bằng bàn tay không qua camera. Điểm vượt trội của Gesture Lab là khả năng thực thi toàn bộ chuỗi xử lý — từ nhận diện cử chỉ bằng AI đến render đồ họa chất lượng cao — hoàn toàn tại máy khách (Client-side), mang lại trải nghiệm không độ trễ và bảo mật tuyệt đối.

Dưới góc độ kỹ thuật, Gesture Lab là một minh chứng xuất sắc về việc ứng dụng kiến trúc Orchestrator-Controller, kỹ thuật làm mượt tín hiệu EMA và hệ thống Instanced Rendering hiệu năng cao trên Web.

Github: https://github.com/v8u7/gesture-lab

🛠️ 1. Nền tảng công nghệ: Hiệu năng thực thi tại biên (Edge Computing)

Dự án tận dụng tối đa sức mạnh của trình duyệt hiện đại để thực hiện các tác vụ tính toán nặng nề:

• AI Vision Engine (MediaPipe & YOLOv8): Sử dụng MediaPipe để theo dõi 21 điểm mốc (landmarks) của bàn tay trong không gian 3D. Tích hợp YOLOv8 Nano qua inferencejs để nhận diện vật thể thời gian thực bằng kỹ thuật tăng tốc phần cứng WebGL.
• Graphics Kernel (Three.js & GSAP): Đảm nhiệm vai trò render scene 3D phức tạp. Sử dụng GSAP để thực hiện các phép nội suy (interpolation) và chuyển cảnh mượt mà giữa các trạng thái cử chỉ.
• Physics Engine (Rapier3D): Một bộ máy vật lý được biên dịch sang WebAssembly (WASM) từ Rust, cho phép xử lý hàng nghìn va chạm và lực tác động trong môi trường "Magnetic Clutter" với tốc độ của ứng dụng Native.
• Modern Pipeline (Bun & Vite): Toàn bộ quy trình build và quản lý tài nguyên được điều phối bởi Bun và Vite, đảm bảo thời gian tải trang tối ưu và cấu trúc mã nguồn sạch sẽ.

🏗️ 2. Trụ cột kiến trúc: Orchestrator-Controller-Renderer Model

Kiến trúc của Gesture Lab được thiết kế để quản lý sự phức tạp của việc đồng bộ hóa dữ liệu cảm biến và hiển thị:

• Main Brain Orchestrator (App.ts): Đóng vai trò là trung tâm điều phối cấp cao. Nó khởi tạo một phiên HandTracker duy nhất dùng chung cho toàn bộ hệ thống, quản lý vòng đời của các module thí nghiệm độc lập và điều hướng trạng thái ứng dụng.
• Decoupled Controller Architecture: Mỗi thí nghiệm (Cosmic Slash, Voxel Builder, Light Bulb) là một module tách biệt. Controller chịu trách nhiệm nhận dữ liệu cử chỉ đã được chuẩn hóa và thực thi logic nghiệp vụ, trong khi Renderer chỉ tập trung vào việc vẽ ra màn hình.
• Worker-based Inference: Để bảo vệ luồng hiển thị (Main UI Thread) khỏi tình trạng giật lag, các tác vụ suy luận AI nặng nề được đẩy xuống Web Workers, đảm bảo khung hình luôn duy trì ở mức 60 FPS ổn định.

🔄 3. Workflow: Từ Chuyển động thực đến Không gian ảo (Sequence Diagram)

Sơ đồ mô tả quy trình hệ thống chuyển đổi tọa độ camera thành các lực tác động trong thế giới 3D:

⚡ 4. Các kỹ thuật "Pro-level" trong mã nguồn

1. Exponential Moving Average (EMA) Smoothing: Để loại bỏ hiện tượng rung (jitter) tự nhiên của camera và cảm biến, Gesture Lab áp dụng bộ lọc EMA. Kỹ thuật này giúp các vật thể 3D "dính" theo tay một cách tự nhiên và có độ trễ quán tính, tạo cảm giác xúc giác (Haptic feeling) dù không có phản hồi rung.
2. Quaternion Local-space Mapping: Trong các module như Voxel Builder, hệ thống sử dụng toán học Quaternion nghịch đảo để ánh xạ tọa độ tay người dùng vào không gian xoay của khối hình. Điều này cho phép lập trình viên xử lý logic "vẽ" đơn giản như trên một mặt phẳng đứng yên, bất kể người dùng đang xoay khối 3D ở góc độ nào.
3. Instanced Mesh Optimization: Thay vì render hàng nghìn khối voxel bằng hàng nghìn lệnh vẽ riêng lẻ, dự án sử dụng InstancedMesh. Kỹ thuật này cho phép GPU vẽ toàn bộ các khối chỉ trong một nhịp (draw call), tăng hiệu suất lên gấp 10-20 lần cho các bối cảnh phức tạp.
4. Hysteresis Gesture Detection: Sử dụng cơ chế ngưỡng kép để nhận diện cử chỉ. Một cử chỉ "nắm tay" chỉ được kích hoạt khi ngón tay khép lại dưới 2cm và chỉ tắt khi mở rộng trên 4cm. Kỹ thuật này triệt tiêu hoàn toàn hiện tượng nhiễu tín hiệu (flickering) khi tay người dùng ở trạng thái ranh giới.

⚖️ 5. So sánh chiến lược

✅ Kết luận: Tại sao Gesture Lab là hình mẫu cho tương lai của Web Interface?

Gesture Lab chứng minh rằng trình duyệt Web đã trở thành một hệ điều hành tính toán thực thụ. Bằng cách kết hợp giữa AI suy luận tại biên và đồ họa 3D tăng tốc phần cứng, dự án đã định nghĩa lại cách chúng ta giao tiếp với máy tính: không còn bị giới hạn bởi các thiết bị ngoại vi truyền thống mà bằng chính ngôn ngữ cơ thể tự nhiên.

Đối với các kỹ sư Frontend và Creative Technologists, nghiên cứu dự án này mang lại giá trị về:

• Kỹ thuật xử lý Dữ liệu cảm biến thời gian thực (Real-time Sensor Fusion).
• Cách triển khai Engine vật lý hiệu năng cao qua WASM.
• Tư duy thiết kế Giao diện không tiếp xúc (Touchless UI).