mcpField
S
sceneview

sceneview

ローカル
github.com/sceneview開発ツール1.4k今日更新

sceneview について

SceneViewは、Android、Appleプラットフォーム、Web向けのオープンソース3D・AR SDKです。MCPサーバーは、アシスタントによるコード生成に使えるAPIリファレンス、サンプル、設定ガイド、コード検証を提供します。

主な機能

  1. 01宣言型の3D・ARシーン
  2. 02モバイルとWeb向けSDK
  3. 03モデル、ジオメトリ、照明ノード
  4. 04物理シミュレーションとARシーン
  5. 05コード検証とAPIリファレンス

活用シーン

  1. 01アプリに3Dモデルビューアを追加
  2. 02ARシーンにデジタルモデルを配置
  3. 03アシスタントでSceneViewコードを生成

MCP 対応

MCPサーバーは、ノードリファレンス、サンプル、設定手順、コード検証ツールをMCPクライアントに提供します。`sceneview-mcp`でローカル実行でき、ホスト型HTTPエンドポイントも利用できます。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
"mcpServers": {
"sceneview": {
"command": "npx",
"args": [
"-y",
"sceneview-mcp"
]
}
}
}
起動コマンドnpx -y sceneview-mcp

ローカルサーバーにはマシン上の実行環境(Node.js 18 以上など)が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npmsceneview-mcp3.4.7

ツール

13

掲載時のツール一覧 · 4 日前に更新

パラメーター型必須説明
scenarioenumはい取得するシナリオ: - "model-viewer":GLB モデル、HDR 環境、オービットカメラ、アニメーションコントロールを備えた全画面 3D シーン - "ar-model-viewer":平面検出機能を備えた AR シーン。画面をタップして表面に 3D モデルを配置し、ピンチで拡大縮小、ドラッグで回転できます。 - "ar-augmented-image":カメラ映像内の参照画像を検出し、その上に 3D モデルまたは動画を重ねて表示します。 - "ar-cloud-anchor":ARCore Cloud Anchors を使用して、デバイス間で永続するアンカーをホストおよび解決します。 - "ar-point-cloud":ARCore の特徴点を 3D 球体として可視化し、信頼度に基づいてフィルタリングします。 - "gltf-camera":glTF ファイルに埋め込まれたカメラ定義を抽出して使用し、映画のような視点を実現します。 - "camera-manipulator":カスタマイズ可能な感度と範囲で、カメラのオービット、パン、ズームを操作します。 - "autopilot-demo":アニメーションする車、信号機、道路、リアルタイムのテレメトリーオーバーレイを備えた、完全な自動運転 HUD。 - "physics-demo":球体のバウンス、重力、設定可能な反発係数、色の選択機能を備えたインタラクティブな物理シミュレーション。 - "dynamic-sky":DynamicSkyNode による時間帯に応じた太陽のサイクルと、FogNode による大気フォグ。 - "line-path":正弦波、リサージュ曲線、パラメータースライダーを備えた、アニメーション付き 3D ラインアート。 - "text-labels":カメラに正対する 3D テキストラベル(TextNode + BillboardNode)と、ラベルを切り替えるインタラクション。 - "reflection-probe":ゾーンベースの IBL オーバーライド。マテリアルピッカー(Chrome、Gold、Copper、Rough)とプローブ切り替え機能付き。 - "post-processing":リアルタイムのポストプロセス効果:ブルーム、ビネット、トーンマッピング、FXAA、SSAO のコントロール。 - "ios-model-viewer":USDZ モデル、IBL 環境、オービットカメラ、アニメーション再生機能を備えた SwiftUI 3D シーン。 - "ios-ar-model-viewer":平面検出機能を備えた AR シーン。ARKit + RealityKit を使用して、表面をタップすると 3D モデルを配置します。 - "ios-ar-augmented-image":ARKit を使用してカメラ映像内の参照画像を検出し、その上に 3D コンテンツを重ねて表示します。 - "ios-geometry-shapes":立方体、球体、円柱、円錐、平面のプロシージャルジオメトリ形状と PBR マテリアル。 - "ios-lighting":強度、色、影を設定できる平行光、ポイントライト、スポットライト。 - "ios-physics":球体のバウンス、重力、設定可能な反発係数を備えたインタラクティブな物理シミュレーション。 - "ios-text-labels":TextNode と BillboardNode を使用した、常にカメラを向く 3D テキストラベル。 - "ios-video-player":VideoNode を使用した 3D 平面上での動画再生と、再生/一時停止コントロール。 - "web-model-viewer":Filament.js (WebGL2/WASM) を使用するブラウザベースの 3D モデルビューアー。SceneView Android と同じエンジンを使用します。 - "web-environment":KTX ファイルによる IBL 環境照明とスカイボックスを備えたブラウザ 3D シーンmodel-viewer | ar-model-viewer | ar-augmented-image | ar-cloud-anchor | ar-point-cloud | gltf-camera | camera-manipulator | autopilot-demo | physics-demo | dynamic-sky | line-path | text-labels | reflection-probe | post-processing | ios-model-viewer | ios-ar-model-viewer | ios-ar-augmented-image | ios-geometry-shapes | ios-lighting | ios-physics | ios-text-labels | ios-video-player | web-model-viewer | web-environment

詳細

SceneView

Jetpack Compose、SwiftUI、Web 向けの、AI ファーストな 3D・AR SDK です。

ゲームエンジンを使わずに、画面上または部屋の中にモデルを表示したいアプリ開発者向けの、宣言型 3D・AR です。Android では Filament + ARCore、Apple では RealityKit + ARKit、ブラウザーでは Filament.js + WebXR を使用し、Flutter、React Native、Compose Multiplatform 向けのブリッジも提供します。オープンソースで、Apache 2.0 ライセンスです。

ここでいう AI ファースト とは、アシスタントが llms.txt または MCP サーバー を読み、最初から動作する SceneView コードを書く、ということです。動作しない場合は、API またはドキュメントを修正します。

Android 3D Android AR iOS / macOS / visionOS sceneview-web Flutter React Native MCP サーバー

CI ライセンス GitHub スター Discord Open Collective


試してみる

Google Play から入手  App Store からダウンロード  Web Playground を開く

デモアプリは samples/ からビルドされています。リンクを開くだけで、どのデモもすぐに起動できます: https://sceneview.github.io/open?demo=<id>。まずは、カタログを開くと表示される銀河 Cosmos、または ARCore でスキャンし、3D で再構築した空間 3D Scan をお試しください。

デモのテストにご協力ください

Android のデモをインストールし、デモを使っているときの画面を録画して、問題点や分かりにくい点をお知らせください。録画を添付してissue を作成するか、アプリから送信してください(任意のデモを開き、Settings を選んでから Send feedback をタップします)。 最初の報告を送ると、実験的なデモをいち早く利用できる SceneView Labs にすぐアクセスできるようになります。


クイックスタート

各プラットフォームの最小限の動作するサンプルです。それぞれの完全なリファレンスは llms.txt にあります。

Android
// build.gradle.kts
implementation("io.github.sceneview:sceneview:4.62.0")

アプリモジュールには、compileSdk = 37、minSdk 24 以上、AGP 9.4.0 以上、Kotlin 2.4、そして Java と Kotlin の両方で JVM ターゲット 21 が必要です。SceneView は Java 21 のバイトコードと、公開された inline 関数を含むためです。クイックスタートの要件には、Gradle のコードスニペットとその理由が記載されています。

@Composable
fun ModelScreen() {
    SceneView(modifier = Modifier.fillMaxSize()) {          // orbit camera + default lighting
        rememberModelInstance(modelLoader, "models/helmet.glb")?.let { instance ->
            ModelNode(modelInstance = instance, scaleToUnits = 1.0f, autoAnimate = true)
        }
    }
}

models/helmet.glb は src/main/assets/ にあります。rememberModelInstance はモデルの読み込みが完了するまでは null を返し、完了後に再コンポーズします。バックグラウンドのコルーチンから modelLoader.createModel* を呼び出さないでください。Filament の呼び出しはメインスレッドで実行する必要があり、rememberModelInstance がその処理を担います。

AR(Android)
// build.gradle.kts
implementation("io.github.sceneview:arsceneview:4.62.0")   // includes the 3D module
@Composable
fun ARScreen() {
    var anchor by remember { mutableStateOf<Anchor?>(null) }

    ARSceneView(
        modifier = Modifier.fillMaxSize(),
        planeRenderer = true,
        onSessionUpdated = { _, frame ->
            if (anchor == null) {
                anchor = frame.getUpdatedPlanes()
                    .firstOrNull { it.type == Plane.Type.HORIZONTAL_UPWARD_FACING }
                    ?.let { it.createAnchorOrNull(it.centerPose) }
            }
        }
    ) {
        val helmet = rememberModelInstance(modelLoader, "models/helmet.glb")
        anchor?.let { a ->
            AnchorNode(anchor = a) {
                helmet?.let { ModelNode(modelInstance = it, scaleToUnits = 0.5f) }
            }
        }
    }
}

平面が検出される → anchor が設定される → Compose が再コンポーズする → モデルが表示されます。AR の状態は Kotlin の状態にすぎません。 タップせずに配置し、接地済みでジェスチャーに対応した状態から始めるには、AutoPlacementScene を使用してください(llms.txt を参照)。

arsceneview はすでに CAMERA パーミッションを宣言し、ARCore をオプションとして指定しています。AR Optional アプリでは、android.hardware.camera.ar と android.hardware.camera を <uses-feature … android:required="false" /> として宣言します。AR Required アプリでは、tools:replace="android:value" を使って ARCore の値を上書きします。どちらのコードスニペットも AR マニフェストのセクションにあります。

iOS / macOS / visionOS(SwiftUI)

Swift Package Manager:https://github.com/sceneview/sceneview.git、バージョン 4.60.0 から。

import 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)      // re-run the builder once the model has loaded
        .environment(.studio)
        .cameraControls(.orbit)
        .task { model = try? await ModelNode.load("helmet.usdz") }
    }
}

コンテンツクロージャは、.contentID(_:) が変更されない限り一度だけ実行されます。この行がないと、シーンの表示後に読み込みが完了したモデルは追加されません。

Web
<canvas id="viewer" style="width: 100%; height: 480px"></canvas>
<script src="https://cdn.jsdelivr.net/gh/sceneview/[email protected]/website-static/js/filament/filament.js"></script>
<script src="https://cdn.jsdelivr.net/gh/sceneview/[email protected]/website-static/js/sceneview.js"></script>
<script> SceneView.modelViewer("viewer", "model.glb") </script>
Compose Multiplatform(Android · iOS · デスクトップ)
// commonMain dependencies
implementation("io.github.sceneview:sceneview-compose:4.62.0")
SceneViewer(model = ModelSource.Asset("models/helmet.glb"), modifier = Modifier.fillMaxSize())

ビューアーとして設計されています。読み込み、軌道回転、ライティング、タップに対応し、AR には対応していません。対象範囲と iOS の初回セットアップについては、 sceneview-compose/ を参照してください。

Flutter
// pubspec.yaml → flutter_sceneview: ^4.62.0
final controller = SceneViewController();

SceneView(
  controller: controller,
  onViewCreated: () => controller.loadModel(
    const ModelNode(modelPath: 'models/helmet.glb'),
  ),
)
React Native
// npm install @sceneview-sdk/react-native
import { SceneView } from '@sceneview-sdk/react-native';

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

Flutter と React Native では、ネイティブ API の一部をブリッジしています。対応範囲については、 flutter/ と react-native/ を参照してください。

AI アシスタント
claude mcp add sceneview -- npx -y sceneview-mcp   # Claude Code
codex  mcp add sceneview -- npx -y sceneview-mcp   # Codex

続けて、次のように尋ねてください:「Compose の画面に 3D モデルビューアーを追加してください。」 その他のクライアントはすべて AI での利用に記載されています。


対応環境

各行には、公開済みのパッケージと、今すぐ開けるアプリまたはページが記載されています。実際にキャプチャしたものに基づいています。

プラットフォームステータスインストール開くキャプチャ
Androidリリース済み · 安定版Maven CentralGoogle PlaySceneView Android デモ:Filament でヘルメットをレンダリングする Model Viewer
iOSリリース済み · アルファ版Swift PackageApp StoreSceneView iOS デモ:RealityKit でヘルメットをレンダリングする Model Viewer
Webリリース済み · アルファ版npm sceneview-webライブ Web デモSceneView Web デモ:ブラウザーで Filament.js によりレンダリングされたおもちゃの車

リリース済みは、公開され、誰でもアクセスできることを意味します。続く語句は API の成熟度を表します。 下の表にあるその他のプラットフォームは、キャプチャが用意され次第、このセクションに追加されます。


プラットフォーム

プラットフォームレンダラーフレームワークステータス
AndroidFilamentJetpack Compose安定版
Android TVFilamentCompose TVアルファ版
iOS / macOS / visionOSRealityKitSwiftUIアルファ版
WebFilament.js (WebGL2 / WASM)JavaScript + Kotlin/JSアルファ版
Compose MultiplatformFilament (Android、デスクトップ) · RealityKit (iOS)sceneview-composeアルファ版 — ビューアー機能のみ
デスクトップ (JVM)filament-kmp 経由の FilamentCompose Desktop (sceneview-compose)アルファ版
Flutterプラットフォームごとのネイティブ実装PlatformViewアルファ版
React Nativeプラットフォームごとのネイティブ実装Fabricアルファ版
AI アシスタント—llms.txt、MCP サーバー、スキル安定版

インストール

プラットフォーム座標
Android 3Dio.github.sceneview:sceneview:4.62.0
Android ARio.github.sceneview:arsceneview:4.62.0
Compose Multiplatformio.github.sceneview:sceneview-compose:4.62.0
KMP コアのみ(数学、衝突判定、物理演算)io.github.sceneview:sceneview-core:4.62.0
Apple (SPM)https://github.com/sceneview/sceneview.git、4.60.0 以降
Web、script タグWeb 内の 2 つの <script> タグ
Web、バンドラー (Kotlin/JS)npm install sceneview-web — SceneView Web を参照
Flutterpub.dev の flutter_sceneview
React Nativenpm の @sceneview-sdk/react-native
AI アシスタントnpx -y sceneview-mcp — AI での利用を参照

AI での利用

アシスタントが SceneView のコードを書くために必要なものは、すべて SDK に含まれています。

  • llms.txt — API リファレンス全体を 1 つのファイルにまとめています。コンポーザブル、すべてのノードタイプ、スレッド処理のルール、レシピを掲載しています。Kotlin のコードスニペットは CI でコンパイルされます。MCP に対応していないツール向けに、https://sceneview.github.io/llms.txt で公開されています。
  • ルールファイル — AGENTS.md (Codex、Cursor、GitHub Copilot、Android Studio の Gemini など)、CLAUDE.md (Claude Code)、.github/copilot-instructions.md、および古いバージョンの Cursor 向けの .cursorrules。
  • MCP サーバー — 無料で、API キーは不要です。アシスタントがよく利用するツールは、validate_code (実行前にコードスニペットの既知の落とし穴や不明なシンボルを確認します。引数名は確認しません)、get_node_reference (創作された署名ではなく、正確なノードシグネチャを取得します)、list_samples / get_sample (出発点となる 38 個のサンプル)、get_setup / get_ar_setup (プロジェクトの設定) です。
MCP の設定
claude mcp add sceneview -- npx -y sceneview-mcp   # Claude Code
codex  mcp add sceneview -- npx -y sceneview-mcp   # Codex
copilot mcp add sceneview -- npx -y sceneview-mcp  # GitHub Copilot CLI
// Cursor (.cursor/mcp.json), Cline, JetBrains AI Assistant
{ "mcpServers": { "sceneview": { "command": "npx", "args": ["-y", "sceneview-mcp"] } } }
// VS Code (.vscode/mcp.json) uses the "servers" key instead
{ "servers": { "sceneview": { "type": "stdio", "command": "npx", "args": ["-y", "sceneview-mcp"] } } }

HTTP のみを使用するクライアント (Android Studio の Gemini、ChatGPT) は、ホストされたエンドポイント https://mcp.sceneview.dev/mcp を使用するか、npx sceneview-mcp --http で独自のサーバーを実行します。クライアントごとのスニペット:sceneview.github.io/#ai-setup。MCP Registry に登録されています。

ChatGPT / Codex プラグイン

このリポジトリは OpenAI プラグインでもあります。.codex-plugin/plugin.json は、agents/ 以下の 3 つのスキル (sceneview、sceneview-ios、sceneview-web) を参照します。チェックアウトしたリポジトリから実行するには:

codex plugin marketplace add "$PWD"    # absolute path — a relative one does not resolve
codex plugin add sceneview@sceneview-local

Codex は .agents/skills/ からも自動的にスキルを検出します。HTTP 経由では、MCP サーバーにインラインの view_3d_model ウィジェットが含まれており、会話内で公開 GLB/glTF URL をレンダリングします。掲載用の紹介文とテスト用プロンプト:agents/OPENAI-PLUGIN.md。

Claude Code プラグイン

/plugin marketplace add sceneview/claude-marketplace に続けて /plugin install sceneview@sceneview を実行すると、Codex プラグインと同じ 3 つのスキルと MCP サーバーがインストールされます。このリポジトリで作業するためのコマンドは別のプラグイン sceneview-contrib@sceneview にあります。詳しくは sceneview/claude-marketplace を参照してください。

Rerun AR デバッグなどの垂直型 MCP サーバーは、MCP README に掲載されています。


Android の詳細

3D シーン

SceneView は、Filament のビューポートをレンダリングするコンポーザブルです。内部にはノードを配置できます。

val engine = rememberEngine()
val modelLoader = rememberModelLoader(engine)
val environmentLoader = rememberEnvironmentLoader(engine)

SceneView(
    modifier = Modifier.fillMaxSize(),
    engine = engine,
    modelLoader = modelLoader,
    environment = rememberEnvironment(environmentLoader) {
        environmentLoader.createHDREnvironment("envs/studio.hdr")
            ?: createEnvironment(environmentLoader)
    },
    cameraManipulator = rememberCameraManipulator()
) {
    // Model — async loaded, appears when ready
    rememberModelInstance(modelLoader, "models/helmet.glb")?.let {
        ModelNode(modelInstance = it, scaleToUnits = 1.0f, autoAnimate = true)
    }

    // Geometry — procedural shapes
    CubeNode(size = Size(0.2f))
    SphereNode(radius = 0.1f, position = Position(x = 0.5f))

    // Nesting — same as Column { Row { } }
    Node(position = Position(y = 1.0f)) {
        LightNode(type = LightManager.Type.POINT, apply = { intensity(50_000f) })
        CubeNode(size = Size(0.05f))
    }
}
ノードのコンポーザブル — 3D では 27 種類、AR ではさらに 15 種類
カテゴリノード機能
モデルModelNodeスケルトンアニメーション/モーフアニメーションに対応した glTF/GLB です。ジェスチャー操作を有効にするには isEditable = true にします。
プリミティブCubeNode · SphereNode · CylinderNode · ConeNode · TorusNode · CapsuleNode · TubeNode · PlaneNodeパラメトリックなサイズ/セグメントに対応したプロシージャルジオメトリです。
曲線と形状LineNode · PathNode · ShapeNode単一セグメント、ポリライン、押し出し処理された 2D ポリゴンです。
カスタムジオメトリMeshNode独自の Filament VertexBuffer / IndexBuffer を使用します。
サーフェスImageNode · VideoNode · BillboardNodePNG/JPG の平面、動画の平面(MediaPlayer)、カメラの方向を向くスプライトです。
3D テキストTextNode常にカメラの方向を向く、ワールド空間のテキストラベルです。
Compose を 3D に配置ViewNode任意の Compose UI を、タッチ操作に完全対応した 3D サーフェスとしてレンダリングします。
ガウシアンスプラットSplatNodeガウシアンスプラットのキャプチャをレンダリングします。
ライティングと空LightNode · ReflectionProbeNode · DynamicSkyNode · FogNode太陽光/方向光/点光源/スポットライト、ローカル IBL、時刻に応じた空、大気フォグです。
物理演算PhysicsNodeシンプルな剛体シミュレーション(重力、衝突)です。
カメラCameraNode · SecondaryCameraメインカメラとピクチャーインピクチャーカメラです。
グループNodeネストとトランスフォームの継承に使う空のピボットです。
AR シーン

ARSceneView は、ARCore を使用する SceneView です。カメラは現実世界のトラッキングに追従します。 上記の AR クイックスタートを参照してください。

ノード機能
AnchorNodeノードを現実世界の ARCore Anchor に固定します。
HitResultNode · DepthHitResultNode各フレームのヒットテスト(平面または深度)から、サーフェス上にカーソルを表示します。
PoseNodeノードを任意の ARCore Pose の位置に配置します。
PlaneNode · ReticleNode検出した平面または配置用レティクルをレンダリングします。
PointCloudNode · DepthMeshNode · SceneMeshNode特徴点、深度メッシュ、分類済みの地理空間シーンメッシュです。
AugmentedImageNode画像トラッキング — 検出した画像のポーズと 2D 範囲を取得します。
AugmentedFaceNode顔メッシュのオーバーレイです(フロントカメラ)。
CloudAnchorNodeデバイス間で永続化されるアンカーです(ホスト+解決)。
StreetscapeGeometryNode地理空間 — セマンティックな都市メッシュ(建物、地形)です。
TerrainAnchorNode地理空間 — 緯度/経度の地点で地面に固定されるアンカーです。
RooftopAnchorNode地理空間 — 建物の屋上に固定されるアンカーです。
機能API の概要
自動配置AutoPlacementScene + AutoPlacementModel — タップ不要で接地し、ジェスチャー操作に対応します。
平面/深度/即時配置ARSceneView(planeRenderer = …, depthMode = …, instantPlacementMode = …)
地理空間(VPS)Earth セッション経由の Streetscape + Terrain + Rooftop アンカー
Cloud AnchorsCloudAnchorNode.host(ttlDays = N) + .resolve(id)
Augmented Faces と ImagesAugmentedFaceNode、AugmentedImageDatabase、実行時の画像追加
手ぶれ補正(EIS)ARSceneView(imageStabilizationMode = ImageStabilizationMode.EIS)
カメラの露出とフォーカスARSceneView(sessionCameraConfig = …, focusMode = …, cameraExposure = …)
記録と再生キャプチャには rememberARRecorder()、1:1 再生には ARSceneView(playbackDataset = file) を使用します — AR デバッグを参照してください。
Rerun.io によるライブデバッグrememberRerunBridge() でポーズ、平面、ポイントクラウドを Rerun ビューアーにストリーミングします。
権限フローARPermissionHandler — ComponentActivity から自動検出されます。
機能
機能提供する内容定義場所
ジェスチャードラッグ、ピンチによる拡大縮小、2 本指での回転、持ち上げ、タップ。isEditable によるノードごとの有効化。NodeGestureDelegate、OnGestureListener
アニメーションglTF のスケルタル/モーフアニメーションに加え、ノードごとのスプリング/プロパティ/スムーズトランスフォーム。ModelNode.playAnimation()、NodeAnimationDelegate
物理演算剛体力学 — 重力、衝突、インパルス。JNI を使用しない純粋な Kotlin Multiplatform 実装です。PhysicsNode、sceneview-core
衝突判定とレイキャスティングレイとボックス/球の交差判定、ヒットテスト、視錐台カリング。CollisionSystem、Ray、Box、Sphere
プロシージャルジオメトリ立方体/球/円柱/円錐/トーラス/カプセルの生成器、2D シェイプからの押し出し(Earcut + Delaunator)。sceneview-core のジオメトリ + 三角形分割
HDR 環境.hdr / .ktx による IBL ライティング + スカイボックス。非同期読み込み + リアクティブな切り替え。EnvironmentLoader、rememberEnvironment
カスタムマテリアルパラメーターを指定できる Filament .filamat マテリアルに加え、組み込みのアンリット/リット/オーバーレイの各バリエーション。MaterialLoader
ポストプロセスブルーム、被写界深度、SSAO、ビネット、カラーグレーディング、トーンマッピング。View.bloomOptions、dynamicResolutionOptions、…
3D 内の Compose UI任意の @Composable をワールド空間のテクスチャ付き平面として表示できます。タッチイベントが転送されるため、Button.onClick、リップル、内部のスクロールが動作します。ViewNode + ViewNode.WindowManager
複数カメラピクチャーインピクチャー、ミニマップ、防犯カメラのビュー。SecondaryCamera
リアクティブなシーングラフ状態を変更するとツリーが更新されます。命令型の parent.addChild() は不要です。SceneScope / ARSceneScope DSL

モデル形式

形式AndroidAppleWeb
glTF / GLB✅— USDZ に変換(tools/convert-usdz.sh)✅
USDZ / Reality / USD—✅ RealityKit—
STL(バイナリ + ASCII)✅ メモリ内で GLB に変換✅ ModelIO、デフォルトはミリメートル—
OBJ + MTL✅ GLB に変換、マテリアルカラー対応✅ ModelIO—
PLY(バイナリ + ASCII)✅ GLB に変換、頂点カラー対応✅ ModelIO、頂点カラー対応—
3MF✅ GLB に変換、宣言された単位を適用✅ SceneViewSwift パーサー、宣言された単位を適用—

Android には形式ごとの API はありません。rememberModelInstance(modelLoader, path) ですべての形式を受け付けます。Apple では RealityKit が glTF を読み込まないため、.gltf / .glb は意図的に ModelFormat に含めていません。USD/Reality は RealityKit で、メッシュ形式は MeshAsset で読み込まれます。形式は拡張子ではなくファイルのバイト列から判定されるため、名前のない application/octet-stream としてアプリに共有されたファイルも開けます。コンバーターは sceneview-core に含まれる、依存関係のない Kotlin 実装です。現在追跡中の項目: ModelFormat の単一エントリーポイント と Web でのすべての形式への対応。詳細: モデル形式。


Apple(iOS / macOS / visionOS)

RealityKit を基盤とするネイティブ Swift Package で、Android API に対応するノードセットを備えています。同期的に構築できるコンテンツでは、@NodeBuilder 形式を使用します。

SceneView {
    GeometryNode.cube(size: 0.1, color: .blue)
        .position(.init(x: 0.5, y: 0, z: 0))
    LightNode.directional(intensity: 1000)
}
.environment(.studio)
.cameraControls(.orbit)

iOS の AR — 検出された平面をタップしてコンテンツを配置します。

ARSceneView(
    planeDetection: .horizontal,
    onTapOnPlane: { position, arView in
        let anchor = AnchorNode.world(position: position)
        anchor.add(GeometryNode.cube(size: 0.1, color: .blue).entity)
        arView.scene.addAnchor(anchor.entity)
    }
)

ノード — ModelNode · GeometryNode(立方体/球/円柱/円錐/トーラス/カプセル/平面) · LightNode · ImageNode · VideoNode · TextNode · ViewNode · BillboardNode · MeshNode · LineNode · PathNode · ShapeNode · PhysicsNode · ReflectionProbeNode · DynamicSkyNode · FogNode · CameraNode · AnchorNode · AugmentedImageNode · SceneReconstructionNode (visionOS のシーンメッシュ)。Android と同じワイヤー形式を使用する iOS の RerunBridge もあります。

詳細ガイド:SceneViewSwift/README.md。


SceneView Web

<script>タグを2つ追加し、呼び出しを1回行います(上記のWebを参照)。ラッパーはgzip圧縮後で約24 KBです。これを動作させるエンジンはFilamentで、Android SceneViewと同じレンダラーをWebAssemblyにコンパイルしています(gzip圧縮後で約2.3 MB)。

JavaScript API(scriptタグ):

  • SceneView.modelViewer(canvasOrId, url, options?) — 軌道制御と自動回転を備えたオールインワンのビューアー
  • SceneView.create(canvasOrId, options?) — 空のビューアーを作成し、後からモデルを読み込みます
  • viewer.loadModel(url) — glTF/GLBモデルを読み込むか、置き換えます
  • viewer.setAutoRotate(enabled) — 回転のオン/オフを切り替えます
  • viewer.dispose() — リソースを解放します

Kotlin/JS(sceneview-web、npmのみ) — 上級者向けAPIです。OrbitCameraController、ジオメトリDSL、リアクティブなノード更新に加え、ARSceneView(immersive-ar、ヒットテスト、アンカー、照明推定)、VRSceneView(immersive-vr、コントローラー)、低レベルのWebXRSessionを通じてWebXRを利用できます。このモジュールはwebpackバンドルをビルドするため、Maven座標はありません。

npm install sceneview-web

このパッケージはFilamentグローバルを必要とし、SceneView.modelViewerのスクリプトヘルパーは含まれていません。共有コア(コリジョン、数学、ジオメトリ、アニメーション、物理演算のみ。レンダラーなし)のみを必要とするKotlin Multiplatformプロジェクトでは、implementation("io.github.sceneview:sceneview-core-js:4.62.0")を使用します。

ランディングページ · プレイグラウンド · npm


SceneformのComposeネイティブな後継

Googleは2021年にSceneformをアーカイブし、ファーストパーティの宣言型ARレンダラーは提供していません。SceneViewは、メンテナンスされているSceneformコミュニティフォークを受け継いでいます。認識にはARCore、レンダリングにはFilament、APIにはJetpack Composeを使用し、非推奨の.sfb形式ではなくglTF(.glb/.gltf)を使用します。

Sceneformから移行する場合は、移行ガイドで概念ごとの対応関係(ArFragment → ARSceneView { }、ModelRenderable → rememberModelInstanceなど)を確認できます。


ARのデバッグ

  • 記録と再生 — rememberARRecorder()でARCoreセッションを一度記録し、デスクでARSceneView(playbackDataset = file)を使って1対1で再生できます。docs/docs/ar-recording.mdと記録・再生デモを参照してください。
  • ホスト型Rerunビューアー — 3D ScanデモからスキャンのRerun記録データを書き出し、.rrdで終わるhttpsアドレスにある.rrdファイルをホストしてから、https://sceneview.github.io/rerun/?url=<encoded-url>を開くと、ローカルに何もインストールせずに、ブラウザー上でセッションをフレームごとに確認できます。ホストではクロスオリジンリクエスト(CORS)を許可する必要があります。公開GitHubリポジトリのraw.githubusercontent.comリンクとGitHub Pagesでは許可されていますが、GitHubリリースのアセットでは許可されていません(2026-10-13確認済み)。R2またはS3バケットでは、https://sceneview.github.ioを許可するCORSルールがあれば利用できます。アーキテクチャとKotlin API(RerunBridge.requestSaveAndShare)については、llms.txtのAR Debug — Rerun.ioセクションを参照してください。

アーキテクチャ

各プラットフォームでネイティブレンダラーを使用します。共有ロジックはKotlin Multiplatformにあります。

sceneview-core (Kotlin Multiplatform)
├── math, collision, geometry, physics, animation, model-format converters
│
├── sceneview (Android)          → Filament + Jetpack Compose
├── arsceneview (Android)        → ARCore
├── sceneview-compose (KMP)      → one SceneViewer for Android, iOS and desktop
├── SceneViewSwift (Apple)       → RealityKit + SwiftUI
├── sceneview-web (Web)          → Filament.js + WebXR
└── flutter/ · react-native/     → bridges to the native views

サンプル

サンプルプラットフォーム実行方法
samples/android-demoAndroid — 3DとAR./gradlew :samples:android-demo:assembleDebug
samples/android-tv-demoAndroid TV./gradlew :samples:android-tv-demo:assembleDebug
samples/ios-demoiOS — 3DとARXcodeで開きます
samples/web-demoWebcd samples/web-demo && cp ../../website-static/js/sceneview.js site/js/sceneview.js && npx http-server site -p 8080
samples/desktop-demoデスクトップ(JDK 21+)./gradlew :samples:desktop-demo:run
samples/flutter-demoFluttercd samples/flutter-demo && flutter run
samples/react-native-demoReact NativeREADMEを参照してください

SceneView を使用して構築

  • 3D AR Model Viewer — 任意のアプリやリンクから 3D ファイル(GLB、glTF、STL、OBJ、PLY、3MF)を開き、実物大で部屋に表示できます。
  • Will It Fit — 家具の寸法を入力すると、購入前に設置できるかどうかを確認できます。

リンク

スポンサー

SceneView は無料のオープンソースで、ユーザーからの支援によって運営されています。

Open Collective でスポンサーになる · または GitHub Sponsors を通じてご支援ください

Open Collective で SceneView を支援する企業のロゴ

Open Collective で SceneView を支援する人々のアバター

スポンサーシップの仕組み

コメント

MCP は初めてですか?

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。