SceneView – モダンなUIツールキットのための宣言的3D & AR

概要 – Jetpack Compose、SwiftUI、Web JavaScript、Flutter、React Native、Kotlin-Multiplatformで記述されたアプリに、リアルタイム3Dレンダリングと拡張現実 (AR) 体験を追加できるオープンソースSDKです。ネイティブグラフィックスエンジン（Android/デスクトップのFilament、AppleのRealityKit、WebのFilament.js）を宣言的でコンポーザブルなAPIの背後にラップしているため、UIレイアウトを扱う感覚で3Dシーンを構築できます。

「AIファースト」の重要性 – 本プロジェクトは、公開API全体を記述した小型の Model-Context-Protocol (MCP) サーバーとプレーンテキストの llms.txt ファイルを提供します。AIアシスタント（Claude、Codex、Copilot、Geminiなど）はサーバーにクエリを投げてスニペットの検証、ノードシグネチャの取得、サンプルコードのリスト化を行えるため、“Add a 3‑D model viewer to my Compose screen” とLLMに尋ねるだけで、一発で動作するコードを得られるワークフローを実現します。

---

コア機能 (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)。 • Web – 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 は非同期ロード完了後にビルダーを強制的に再実行させます。

Web (プレーン 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/ フォルダ、ライブWebプレイグラウンド。

---

誰向けか？

• アプリ開発者：本格的なゲームエンジンを学ばずに3DやARを導入したい方。
• プロダクトチーム：没入型機能のプロトタイプを迅速に作成し、同じUI言語（Compose, SwiftUIなど）でコードベースを維持したいチーム。
• AI強化開発ワークフロー：LLMアシスタントを活用し、MCPサーバーを導入して自動検証された最新のスニペットを得たいチーム。

---

TL;DR

SceneViewは、宣言的3DレンダリングとARを主要なUIツールキットにもたらす、本番環境対応のSDKです。ネイティブグラフィックスエンジンをコンポーザブルAPIの背後に抽象化し、フルテキストAPI仕様 (llms.txt) とLLM統合用MCPサーバーを提供し、主要なパッケージレジストリで公開されています。モデルビューアの配置、仮想オブジェクトの現実世界への配置、あるいはAIによるコード生成が必要な場合、SceneViewはまさにそのために設計されています。