A full-stack, real-time cloth physics simulation suite. This project has evolved from a single-file WebGL simulation into a modern monorepo featuring a robust React frontend, a scalable Express backend, and shared type-safe libraries.
The project is structured as a pnpm workspace monorepo:
- Cloth Sim: The core interactive WebGL cloth simulation, now integrated into a React application with Wouter routing and TanStack Query.
- API Server: A Node.js/Express backend providing API services, using Drizzle ORM for database interactions and Pino for high-performance logging.
- Mockup Sandbox: A development environment for testing and previewing UI components in isolation.
api-spec: The "source of truth" OpenAPI specification.api-zod: TypeScript types and Zod schemas automatically generated from the API spec for server-side validation.api-client-react: Type-safe React Query hooks generated from the API spec for seamless frontend-backend communication.db: Centralized database client and schema definitions using Drizzle ORM.
-
Clone and Install:
pnpm install
-
Run Everything:
pnpm dev
This starts the frontend simulation, the API server, and any supporting services in development mode.
-
Typecheck & Build:
pnpm run build
The cloth is a grid of points connected by distance constraints and simulated with Verlet integration. You can drag it, tear it, blow wind, or overlay textures.
| Input | Action |
|---|---|
| Click + Drag | Grab and pull the fabric |
| T | Toggle Tear Mode (cut through the cloth) |
| R | Reset simulation |
| W | Toggle Wind (sinusoidal horizontal force) |
| S | Save Screenshot |
| G | Toggle Film-Grain overlay |
| M | Toggle Microphone (amplitude drives wind) |
| Layer | Technology |
|---|---|
| Frontend | React, WebGL 1.0, Wouter, Radix UI, Framer Motion |
| Backend | Node.js, Express 5, Drizzle ORM, Pino |
| Monorepo | pnpm Workspaces, TypeScript Project References |
| API | OpenAPI, Orval (Code Gen), Zod |
| Styles | Tailwind CSS, Lucide Icons |
풀스택 실시간 천 물리 시뮬레이션 제품군입니다. 이 프로젝트는 단일 파일 WebGL 시뮬레이션에서 시작하여, 현재는 React 프론트엔드, 확장 가능한 Express 백엔드, 그리고 공유 타입 세이프 라이브러리를 포함하는 현대적인 모노레포 구조로 발전했습니다.
이 프로젝트는 pnpm workspace 기반의 모노레포로 구성되어 있습니다:
- Cloth Sim: WebGL 기반의 핵심 천 시뮬레이션으로, 현재는 React와 Wouter, TanStack Query가 통합된 형태입니다.
- API Server: Drizzle ORM과 Pino 로깅을 사용하는 Node.js/Express 백엔드 서버입니다.
- Mockup Sandbox: UI 컴포넌트를 독립적으로 테스트하고 미리 볼 수 있는 개발 환경입니다.
api-spec: OpenAPI 사양서(Source of Truth).api-zod: API 사양에서 자동 생성된 TypeScript 타입 및 서버 측 검증을 위한 Zod 스키마.api-client-react: API 사양에서 생성된 타입 세이프 React Query 훅.db: Drizzle ORM을 사용하는 중앙 집중식 데이터베이스 클라이언트 및 스키마 정의.
-
설치:
pnpm install
-
개발 모드 실행:
pnpm dev
프론트엔드, API 서버 및 모든 지원 서비스를 개발 모드로 실행합니다.
-
빌드 및 타입 체크:
pnpm run build