SceneView – 최신 UI 툴킷을 위한 선언적 3D & AR

소개 – Jetpack Compose, SwiftUI, 웹 JavaScript, Flutter, React Native 또는 Kotlin-Multiplatform으로 작성된 앱에 실시간 3D 렌더링 및 증강 현실(AR) 경험을 추가할 수 있는 오픈 소스 SDK입니다. 네이티브 그래픽 엔진(Android/데스크톱의 Filament, Apple의 RealityKit, 웹의 Filament.js)을 선언적이고 컴포저블한 API 뒤에 래핑하여, UI 레이아웃을 다루는 것과 유사한 방식으로 3D 장면을 처리할 수 있습니다.

'AI 우선'이 중요한 이유 – 이 프로젝트는 전체 공개 API를 설명하는 소형 Model-Context-Protocol (MCP) 서버와 일반 텍스트 llms.txt 파일을 제공합니다. AI 어시스턴트(Claude, Codex, Copilot, Gemini 등)는 서버에 쿼리하여 스니펫을 검증하거나, 노드 시그니처를 가져오거나, 샘플 코드를 나열할 수 있습니다. 이를 통해 LLM에게 “Add a 3‑D model viewer to my Compose screen” 라고 요청하면 첫 시도에 바로 작동하는 코드를 얻을 수 있는 워크플로우가 가능해집니다.

---

핵심 기능 (README 기반)

기능	작동 방식	플랫폼
선언적 3D 장면 그래프	SceneView { … }는 Filament/RealityKit 뷰포트를 호스팅하는 컴포저블입니다. 내부에 노드 컴포저블(ModelNode, CubeNode, LightNode 등)을 배치하면 상태 변경 시 자동으로 재계산됩니다.	Android (Compose), iOS/macOS/visionOS (SwiftUI), Web (JS/Kotlin-JS), Compose-Multiplatform, Flutter, React Native
AR 통합	ARSceneView는 동일한 컴포저블 모델을 기반으로 하지만 ARCore(Android) 또는 ARKit/RealityKit(Apple)에서 카메라를 구동합니다. 노드는 실제 표면에 앵커링할 수 있습니다(AnchorNode, PlaneNode, CloudAnchorNode, 지리 공간 앵커 등).	Android, iOS/macOS/visionOS
크로스 플랫폼 렌더러	• Android & 데스크톱 – Filament (고성능 Vulkan/OpenGL). • Apple – RealityKit (Metal). • 웹 – Filament.js (WebGL2/WASM).	나열된 모든 플랫폼
풍부한 노드 라이브러리	27개의 3D 노드 + 15개의 AR 전용 노드. 모델, 기본 도형, 지오메트리, 조명, 하늘, 물리, 카메라, 3D 내 UI, Gaussian splats 등을 포함합니다.	모든 플랫폼 (네이티브 노드; Flutter/React Native는 일부 노출)
물리 및 충돌	순수 Kotlin-Multiplatform 강체 시뮬레이션, 레이캐스팅 및 충돌 감지. 코어 라이브러리가 실행되는 모든 플랫폼에서 사용 가능합니다.	Android, Compose-Multiplatform, Desktop
제스처 및 애니메이션	노드를 isEditable로 표시하여 드래그, 핀치 줌, 회전 및 탭 처리를 수행할 수 있습니다. glTF/GLB 모델은 자동으로 애니메이션되며, 추가적인 스프링/속성 애니메이션도 제공됩니다.	모든 플랫폼
환경 및 후처리	HDR IBL 조명, 스카이박스, 블룸, 피사계 심도, SSAO, 톤 매핑, 커스텀 Filament 재질.	Android, Web, Desktop
3D 내 Compose	ViewNode는 모든 Compose UI를 텍스처 평면에 렌더링하며, 버튼이나 스크롤 등 완전한 상호작용을 유지합니다.	Android Compose, Compose-Multiplatform
AR 녹화 및 재생	rememberARRecorder()로 세션을 캡처하고, ARSceneView(playbackDataset = file)로 디버깅을 위해 1:1 재생합니다.	Android AR
Rerun.io 라이브 디버그 브리지	포즈, 평면, 포인트 클라우드를 Rerun 뷰어로 스트리밍하여 시각적 디버깅을 수행합니다.	Android AR

---

시작하기 (README의 퀵스타트 스니펫)

Android (Jetpack Compose)

implementation("io.github.sceneview:sceneview:4.51.0")

@Composable
fun ModelScreen() {
    SceneView(modifier = Modifier.fillMaxSize()) {
        rememberModelInstance(modelLoader, "models/helmet.glb")?.let {
            ModelNode(modelInstance = it, scaleToUnits = 1f, autoAnimate = true)
        }
    }
}

헬퍼 rememberModelInstance는 메인 스레드에서 GLB를 로드하고 준비가 되면 재구성을 트리거합니다.

Android AR

implementation("io.github.sceneview:arsceneview:4.51.0")

@Composable
fun ARScreen() {
    var anchor by remember { mutableStateOf<Anchor?>(null) }
    ARSceneView(modifier = Modifier.fillMaxSize(), planeRenderer = true) { _, frame ->
        if (anchor == null) {
            anchor = frame.getUpdatedPlanes()
                .firstOrNull { it.type == Plane.Type.HORIZONTAL_UPWARD_FACING }
                ?.let { frame.createAnchorOrNull(it.centerPose) }
        }
    } {
        val helmet = rememberModelInstance(modelLoader, "models/helmet.glb")
        anchor?.let { AnchorNode(anchor = it) { helmet?.let { ModelNode(modelInstance = it, scaleToUnits = 0.5f) } } }
    }
}

상태(anchor)는 일반적인 Kotlin 상태이며, 변경 시 UI가 재구성되고 모델이 나타납니다.

iOS / macOS / visionOS (SwiftUI)

import SceneViewSwift

struct ModelScreen: View {
    @State private var model: ModelNode?
    var body: some View {
        SceneView { root in
            if let model { root.addChild(model.entity) }
        }
        .contentID(model != nil)
        .cameraControls(.orbit)
        .task { model = try? await ModelNode.load("helmet.usdz") }
    }
}

.contentID는 비동기 로드가 완료된 후 빌더를 강제로 다시 실행합니다.

웹 (일반 HTML/JS)

<canvas id="viewer" style="width:100%;height:480px"></canvas>
<script src="https://cdn.jsdelivr.net/gh/sceneview/sceneview@v4.51.0/website-static/js/filament/filament.js"></script>
<script src="https://cdn.jsdelivr.net/gh/sceneview/sceneview@v4.51.0/website-static/js/sceneview.js"></script>
<script>SceneView.modelViewer("viewer", "model.glb")</script>

Filament 뷰어를 생성하고 GLB 모델을 로드하는 한 줄 코드입니다.

Flutter

final controller = SceneViewController();
SceneView(
  controller: controller,
  onViewCreated: () => controller.loadModel(
    const ModelNode(modelPath: 'models/helmet.glb'),
  ),
);

React Native (TypeScript)

<SceneView
  style={{flex:1}}
  modelNodes={[{src:'models/helmet.glb', position:[0,0,-2]}]}
  cameraControlMode="orbit"
/>

---

AI 우선 워크플로우

1. API 참조 – llms.txt는 모든 컴포저블, 노드 및 스레딩 규칙을 검색 가능한 단일 파일에 포함합니다. CI가 스니펫을 컴파일하여 동기화를 보장합니다.
2. MCP 서버 – LLM 플러그인이 호출할 수 있는 소형 로컬 서버 (sceneview-mcp)：
   • validate_code – 실제 공개 API에 대해 스니펫을 검사합니다.
   • list_samples / get_sample – 38개의 준비된 데모 중 하나를 가져옵니다.
   • get_setup – 플랫폼에 필요한 Gradle/Swift/JS 보일러플레이트를 반환합니다.
3. 플러그인 지원 – OpenAI 플러그인, Claude Code 플러그인 및 Copilot CLI 통합이 리포지토리에 사전 구성되어 있어, 어시스턴트가 3가지 기술(sceneview, sceneview-ios, sceneview-web)을 자동으로 발견할 수 있습니다.
4. 프롬프트 예시 – MCP 서버(npx -y sceneview-mcp) 설치 후 LLM에게 요청:

   “Add a 3‑D model viewer to my Compose screen.” 어시스턴트는:

   • MCP에 올바른 컴포저블 이름을 쿼리하고,
   • 퀵스타트에 표시된 최소 코드를 생성하며,
   • 선택적으로 붙여넣기 전에 validate_code를 실행합니다.

---

프로젝트 상태 및 커뮤니티

지표	값
라이선스	Apache 2.0 (허용적, 상업적 이용 가능)
최신 안정 버전	Android 3D 4.51.0, AR 4.51.0, Swift 4.39.0, Web 4.51.0
패키지 배포	Maven Central, Swift Package Registry, npm, pub.dev, Android AR용 Maven Central 등
CI	GitHub Actions가 푸시마다 실행되며, llms.txt 스니펫도 컴파일합니다.
커뮤니티	Discord 서버, Open Collective, GitHub 스타, 활발한 플러그인 생태계.
문서	플랫폼별 퀵스타트가 포함된 README, 38개의 데모가 있는 samples/ 폴더, 라이브 웹 플레이그라운드.

---

대상 사용자

• 앱 개발자 – 전체 게임 엔진을 배우지 않고도 3D나 AR을 도입하려는 분.
• 제품 팀 – 몰입형 기능의 프로토타입을 빠르게 만들고 동일한 UI 언어(Compose, SwiftUI 등)로 코드베이스를 유지하려는 팀.
• AI 강화 개발 워크플로우 – LLM 어시스턴트를 활용하고 MCP 서버를 통해 자동 검증된 최신 스니펫을 얻으려는 팀.

---

요약

SceneView는 선언적 3D 렌더링과 AR을 주요 UI 툴킷으로 가져오는 프로덕션 준비 완료 SDK입니다. 네이티브 그래픽 엔진을 컴포저블 API 뒤에 추상화하고, 전체 텍스트 API 사양(llms.txt)과 LLM 통합용 MCP 서버를 제공하며, 모든 주요 패키지 레지스트리에 배포됩니다. 모델 뷰어를 배치하거나, 가상 객체를 현실 세계에 배치하거나, AI가 코드를 작성하게 하려면 SceneView가 최적의 선택입니다.