editor

Pascal Editor
React Three Fiber와 WebGPU로 구축된 오픈소스, 로컬 우선 3D 건물 편집기입니다. 브라우저나 CLI에서 실행하고, MCP를 통해 AI 에이전트를 연결하세요.

Pascal Next 첫 선보임
라이브 데모를 둘러보세요 — 방과 마감재부터 벽 뒤의 구조와 시스템까지 세밀하게 재현된 실제 주택입니다.
이 호스팅된 프리뷰는 차세대 Pascal 편집기의 방향성을 탐구합니다. 여기서 보여지는
경험은 아직 오픈소스 편집기 릴리스에 포함되지 않았습니다.

분해 뷰 — 주택이 어떻게 조립되는지 확인
단면 뷰 — 건물을 가로질러 절단
X-ray — 모델링된 시스템 드러내기
워크스루 — 눈높이에서 내부로 들어가기
인터랙션 — 문을 열고 탐험하기
환경 — 빛과 분위기 바꾸기

시설 관리, 홈 서비스, 건축, 주택 건설, 인프라에서 이것이 무엇을 가능하게 할지 탐구하고 있습니다.
X에서 토론에 참여하고 어디에 사용하실지 알려주세요.

이 영상들로 무언가 만들기
Pascal에 관한 영상, 튜토리얼, 기사, 소셜 게시물을 만드시나요? 이 영상은
CC BY 4.0에 따라 수익화 콘텐츠를 포함하여 사용 및 편집하실 수 있습니다. Pascal을 크레딧하고, 라이선스를 링크하고,
편집 내용을 명시하세요. 별도의 허가는 필요하지 않습니다.

여섯 개의 원본 영상 다운로드 및 크리에이터 가이드 확인.

편집기 로컬 실행
Node.js 22.23.4+ (22.x), 24.22.1+ (24.x), 또는 26.12.1+는 이 저장소를 클론하지 않고도
영구적인 로컬 Pascal 설치를 생성할 수 있습니다:

npx @pascal-app/cli editor
CLI는 편집기와 인증된 MCP 서비스를 백그라운드에서 시작하고,
충돌 없는 루프백 포트를 선택하며, 프로젝트를 ~/.pascal/data/pascal.db에 보관합니다. npm
패키지는 CLI와 해당 MCP 서비스를 포함합니다. 웹 편집기 런타임은 편집기를 시작하는 첫 명령에서
버전당 한 번 다운로드되며, 패키지 내부에 게시된 다이제스트로 검증됩니다. 에이전트가 pascal mcp connect를 실행하도록 구성하세요. 이는 편집기 프로세스나 해당 다운로드가 필요하지 않습니다. npm install --global @pascal-app/cli로 pascal 명령을 설치하세요. pnpm/Bun 명령, 프로젝트 관리, MCP 설정, 업데이트, 저장 경로, 문제 해결은 Run Pascal locally를 참조하세요.

로컬 CLI 서비스당 하나의 활성 에이전트 클라이언트를 사용하세요. 독립형 로컬 HTTP 런타임은 클라이언트 간에 활성 씬 상태를 공유합니다. 독립적인 동시 작업이 필요할 때는 별도의 PASCAL_HOME 디렉터리와 서비스 프로세스를 사용하세요.

셀프 호스팅
편집기는 단일 컨테이너 ghcr.io/pascalorg/pascal-editor로 제공되며, npm 패키지와
동일한 버전으로 태그됩니다(latest는 안정 릴리스를 따릅니다). 프로젝트는 /data 아래 SQLite에 저장됩니다. 하나의 관리자 비밀번호가 인스턴스를 보호하며, PASCAL_PUBLIC_URL은
런타임에 읽히므로 동일한 이미지가 모든 도메인을 서비스합니다.

docker run -d -p 3000:3000 -v pascal-data:/data \
-e PASCAL_ADMIN_PASSWORD=change-me \
-e PASCAL_PUBLIC_URL=https://pascal.example.com \
ghcr.io/pascalorg/pascal-editor:latest
compose 파일, 변수, 에이전트 접근, 공개 임베드는 SETUP.md의 "Self-hosting"을 참조하세요.

에이전트 스킬

skills.sh로 이 저장소에서 Pascal의 공개 에이전트 워크플로를 설치하세요:

npx skills add pascalorg/editor \
--skill pascal-3d \
--skill furniture-fit
Claude Code 사용자는 동일한 정식 스킬 소스를 플러그인으로 설치할 수 있습니다:

/plugin marketplace add pascalorg/editor
/plugin install pascal-agent-skills@pascal

Claude 플러그인은 로컬 pascal mcp connect 서버도 제공합니다. 먼저 Pascal CLI를 설치하고 시작하고, Claude Code를 실행하는 데 사용되는 PATH에 pascal을 유지하세요. 이 로컬 커넥터는 Pascal 계정이나 API 키가 필요하지 않으며 프로젝트를 자동으로 업로드하지 않습니다. 플러그인 루트는 이 저장소의 skills/ 디렉터리이므로, 설치 시 저장소가 아닌 스킬 번들과 해당 플러그인 메타데이터만 복사됩니다.

플러그인은 두 개의 서버를 번들합니다: 위의 로컬 pascal 커넥터와 https://editor.pascal.app/api/mcp용 호스팅 pascal-hosted 서버입니다. 후자는 활성화 시 선택적 Pascal API 키를 요청하고 OS 키체인에 저장합니다. 로컬 전용으로 실행하려면 키를 비워 두세요.

Claude Code 2.1.258은 pascal mcp setup claude로 생성된 사용자 범위 pascal 서버와 플러그인이 제공하는 서버를 모두 로드합니다. 플러그인만 연결 수명 주기를 소유하도록 Claude Code를 다시 로드하거나 재시작하기 전에 수동 항목을 제거하세요:

claude mcp remove --scope user pascal
/mcp를 사용하여 프로젝트 또는 로컬 범위의 Pascal 연결도 제거하거나 비활성화하세요. 두 연결을 모두 활성 상태로 두면 로컬 서비스당 하나의 활성 에이전트 클라이언트 요구 사항을 위반합니다. 의도한 프로젝트가 Pascal 계정이나 조직에서 호스팅되는 경우, /mcp에서 플러그인이 제공하는 로컬 서버를 비활성화하고 대신 스킬 설정 가이드에서 호스팅 엔드포인트를 구성하세요.

Codex 사용자는 저장소 마켓플레이스에서 동일한 플러그인을 설치할 수 있습니다:

codex plugin marketplace add pascalorg/editor
codex plugin add pascal-agent-skills@pascal
OpenClaw 설치는 스킬이 Pascal의 ClawHub 퍼블리셔 아래에 게시된 후 사용 가능해집니다. 소유자 한정 설치 및 검증 명령은 skills/README.md를 참조하세요.

pascal-3d는 안전한 로컬 또는 호스팅 MCP 설정과 검증된 씬 작업을 다룹니다. furniture-fit은 지원되지 않는 높이, 스윙, 배송 확인을 주장하지 않고 근거 기반의 제한된 풋프린트 평가를 생성합니다. 패키지 세부 정보와 검증은 skills/README.md를 참조하세요.

스킬은 선택적 필드를 사용하기 전에 연결된 MCP 도구 스키마를 검사합니다. 이 저장소에 존재하는 기능이 이전에 설치되었거나 호스팅된 릴리스에는 없을 수 있습니다. 에이전트는 소스 전용 입력이 사용 가능하다고 가정하는 대신 더 좁은 지원 결과를 보고해야 합니다.

이 워크플로는 도구 기반 작업을 위해 연결된 Pascal MCP 서버가 필요합니다. 따라서 OpenAI 디렉터리 제출은 With MCP를 사용하고 프로덕션 호스팅 MCP 엔드포인트를 스킬과 함께 제출해야 합니다. 저장소 패키지는 엔드포인트, OAuth 흐름, 리뷰어 자격 증명, 도메인 검증, 또는 포털 스캔이 검토 준비되었음을 증명하지 않습니다.

MCP Registry
Smithery에도 등록되어 있습니다.

server.json은 공식 MCP Registry용 Pascal의 매니페스트이며, 이름은
app.pascal/editor입니다. @pascal-app/mcp npm 패키지와 OAuth로 로그인하는 호스팅 Streamable HTTP
엔드포인트를 나열합니다. 버전은 @pascal-app/mcp 패키지 버전입니다:
bun scripts/sync-agent-versions.ts가 패키지 버전에서 이를, 그리고 Cursor 플러그인의 CLI 핀을 다시 작성하며, 불일치 시 CI가 실패합니다. 각 안정 릴리스는 npm에 패키지가 게시된 후 이를 레지스트리에 게시합니다. 서명 키는 CI 자체의 pascal.app DNS 키로, mcp-registry 환경(main으로 제한)의 시크릿으로만 저장되며 저장소 시크릿으로는 절대 저장되지 않습니다. wiki/npm-release.md를 참조하세요.

게시된 패키지 사용
뷰어 런타임과 내장 노드 정의는 별도 패키지입니다. 전체 내장
뷰어 세트를 설치한 다음, <Viewer>를 마운트하기 전에 내장 플러그인을 한 번 로드하세요. 캡처 세션은 해당 패키지 내에 @pascal-app/core/capture 및
@pascal-app/viewer/capture 하위 경로로 제공되는 선택적 확장입니다:

npm install @pascal-app/core @pascal-app/viewer @pascal-app/editor @pascal-app/nodes
import { loadPlugin } from '@pascal-app/core'
import { builtinPlugin } from '@pascal-app/nodes'

await loadPlugin ( builtinPlugin )
React 예제는 @pascal-app/viewer 빠른 시작을 참조하고,
전체 편집기를 임베드하려면 @pascal-app/editor를 참조하세요: 로딩
표면, 도구 메뉴 배치, 라이트 또는 다크 크롬, 뷰 및 선택 헬퍼.

저장소 아키텍처
재사용 가능한 편집기 패키지, 독립형 앱,
그리고 이를 배포하는 CLI로 구성된 Turborepo 모노레포입니다:

editor/
├── apps/
│ └── editor/ # Next.js 애플리케이션
├── packages/
│ ├── core/ # 스키마, 씬 상태, 레지스트리 계약, 캡처 계약
│ ├── viewer/ # 3D 렌더링 런타임, 공유 시스템, 캡처 런타임
│ ├── editor/ # 편집 도구 및 UI 컴포넌트
│ ├── nodes/ # 내장 노드 정의, 렌더러, 시스템
│ ├── cli/ # 영구 로컬 편집기 설치 프로그램 및 프로세스 관리자
│ ├── mcp/ # Model Context Protocol 서버 및 씬 저장소
│ └── ui/ # 공유 UI 컴포넌트

관심사 분리

패키지
책임

@pascal-app/core
노드 스키마, 씬 상태(Zustand), 레지스트리 계약, 공간 쿼리, 이벤트 버스. core/capture는 버전 관리되는 캡처 매니페스트, 정규화된 스트림, 전송 중립적 정적/라이브 소스를 추가

@pascal-app/viewer
React Three Fiber를 통한 3D 렌더링, 공유 렌더 시스템, 기본 카메라/컨트롤, 포스트 프로세싱. viewer/capture는 캡처 런타임과 참조 모델, 디바이스 모션, 포인트 클라우드, 표면 메시 레이어를 추가

@pascal-app/editor
편집 도구, 패널, 선택, 직접 조작 UI

@pascal-app/nodes
노드 정의, 렌더러, 지오메트리, 시스템을 포함한 내장 레지스트리 플러그인

@pascal-app/cli
버전 관리되는 독립형 편집기 런타임과 영구 로컬 데이터를 설치 및 관리

@pascal-app/mcp
씬 도구, 리소스, 프롬프트, 로컬 저장소를 MCP 호환 AI 호스트에 노출

apps/editor
편집기 패키지용 독립형 Next.js 호스트

뷰어는 합리적인 기본값으로 씬을 렌더링합니다. 편집기는 대화형 도구, 선택 관리, 편집 기능으로 이를 확장합니다.

스토어
각 패키지는 상태 관리를 위한 자체 Zustand 스토어를 가집니다:

스토어
패키지
책임

useScene
@pascal-app/core
씬 데이터: 노드, 루트 ID, 더티 노드, CRUD 작업. Zundo를 통한 실행 취소/다시 실행과 함께 IndexedDB에 영속화.

useViewer
@pascal-app/viewer
뷰어 상태: 현재 선택(건물/레벨/존 ID), 레벨 표시 모드(스택/분해/솔로), 카메라 모드.

useEditor
apps/editor
편집기 상태: 활성 도구, 구조 레이어 가시성, 패널 상태, 편집기별 환경 설정.

접근 패턴:

// 상태 변경 구독 (React 컴포넌트)
const nodes = useScene ( ( state ) => state . nodes )
const levelId = useViewer ( ( state ) => state . selection . levelId )
const activeTool = useEditor ( ( state ) => state . tool )

// React 외부에서 상태 접근 (콜백, 시스템)
const node = useScene . getState ( ) . nodes [ id ]
useViewer . getState ( ) . setSelection ( { levelId : 'level_123' } )

핵심 개념
노드
노드는 3D 씬을 설명하는 데이터 기본 요소입니다. 모든 노드는 BaseNode를 확장합니다:

BaseNode {
id: string // 타입 접두사로 자동 생성 (예: "wall_abc123")
type: string // 타입 안전 처리를 위한 판별자
parentId: string | null // 부모 노드 참조
visible: boolean
camera?: Camera // 선택적 저장 카메라 위치
metadata?: JSON // 임의 메타데이터 (예: { isTransient: true })
}
노드 계층:

Site
└── Building
└── Level
├── Wall → Item (문, 창문)
├── Slab
├── Ceiling → Item (조명)
├── Roof
├── Zone
├── Scan (3D 참조)
└── Guide (2D 참조)

노드는 중첩 트리가 아닌 평면 딕셔너리(Record<id, Node>)에 저장됩니다. 부모-자식 관계는 parentId와 children 배열을 통해 정의됩니다.

씬 상태 (Zustand 스토어)
씬은 @pascal-app/core의 Zustand 스토어로 관리됩니다:

useScene . getState ( ) = {
nodes : Record < id , AnyNode > , // 모든 노드
rootNodeIds : string [ ] , // 최상위 노드 (사이트)
dirtyNodes : Set < string > , // 시스템 업데이트 대기 중인 노드

createNode ( node , parentId ) ,
updateNode ( id , updates ) ,
deleteNode ( id ) ,
}
미들웨어:

Persist - IndexedDB에 저장 (임시 노드 제외)
Temporal (Zundo) - 50단계 기록으로 실행 취소/다시 실행

씬 레지스트리
레지스트리는 빠른 조회를 위해 노드 ID를 해당 Three.js 객체에 매핑합니다:

sceneRegistry = {
nodes : Map < id , Object3D > , // ID → 3D 객체
byType : {
wall : Set < id > ,
item : Set < id > ,
zone : Set < id > ,
// ...
}
}
렌더러는 useRegistry 훅을 사용하여 ref를 등록합니다:

const ref = useRef < Mesh > ( null ! )
useRegistry ( node . id , 'wall' , ref )
이를 통해 시스템은 씬 그래프를 순회하지 않고 3D 객체에 직접 접근할 수 있습니다.

노드 렌더러
렌더러는 각 노드 타입에 대해 Three.js 객체를 생성하는 React 컴포넌트입니다:

SceneRenderer
└── NodeRenderer (타입별 디스패치)
├── BuildingRenderer
├── LevelRe…