Flutterで本格的な3D表現を実現できるflutter_scene

Flutterでアプリを開発していると、

  • 3Dモデルを表示したい
  • 3Dゲームを作りたい
  • 商品を360度回転させたい
  • 3Dキャラクターを動かしたい
  • PBRによるリアルなライティングを実現したい

といったケースがあります。

これまでFlutterで本格的な3Dグラフィックスを扱う場合、専用のゲームエンジンや別の3Dライブラリを検討する必要がありました。

そんな中、Flutter GPUを活用してFlutterアプリ内でリアルタイム3Dレンダリングを実現するパッケージとして登場したのが flutter_scene です。

flutter_scene は、glTFモデルの読み込み、PBRマテリアル、環境マップ、スケルトンアニメーション、物理演算などに対応した、Flutter向けのリアルタイム3Dエンジンです。

この記事では、flutter_scene の特徴や基本的な使い方、対応している3D機能について解説します。

flutter_sceneとは？

flutter_scene は、Flutterでリアルタイム3Dグラフィックスを扱うための3Dエンジンです。

Flutter GPUをレンダリング基盤として利用し、3Dシーンを構築・描画できます。

主な特徴は以下の通りです。

  • glTF / GLBモデルの読み込み
  • PBRマテリアル
  • 環境マップ
  • Image-Based Lighting
  • スケルトンアニメーション
  • アニメーションブレンディング
  • 物理演算のためのAPI
  • レイキャストやShape Cast
  • 衝突・トリガーイベント
  • カスタムシェーダー
  • WebGL2によるWeb対応
  • オフスクリーンレンダリング

3Dゲームだけではなく、商品ビューアや3Dコンフィギュレーターなど、一般的なFlutterアプリにも応用できる可能性があります。

現在はEarly Preview

最初に注意しておきたいのが、flutter_scene は現時点では Early Preview という位置付けであることです。

パッケージ自体がFlutter GPUを利用しており、Flutter GPUもまだプレビュー段階の機能です。

さらに、ネイティブ環境ではImpellerが必要で、実験的なDart Native Assets機能も利用しています。

そのため、通常のFlutterパッケージと同じ感覚で導入できるとは限りません。

公式READMEでは、現在のバージョンではFlutter master channelの利用が推奨されており、0.19.0 では2026年6月9日以降のmasterビルドが実際の要件となっています。pub.dev上のFlutter SDK下限は解析・スコアリングの都合で緩く設定されているため、実際に試す場合は公式ドキュメントを確認する必要があります。

本番アプリへの導入を検討する場合は、この点を十分に考慮しましょう。

インストール

pubspec.yaml に追加します。

dependencies:
  flutter_scene: ^0.19.0

その後、

flutter pub get

を実行します。

ただし、現在の flutter_scene は通常のstable Flutter環境だけでは動作しない可能性があります。

実際に利用する際は、Flutterのmaster channelやFlutter GPU関連の設定が必要になる場合があります。

Sceneを作成する

まずは3Dシーンを作成します。

import 'package:flutter_scene/scene.dart';

final scene = Scene();

Scene は3D空間全体を管理するためのオブジェクトです。

この中に、

  • 3Dモデル
  • カメラ
  • ライト
  • マテリアル
  • アニメーション

などを配置していきます。

SceneViewで3Dシーンを表示する

現在のバージョンでは、SceneView を利用してシーンをFlutterのWidgetツリーへ組み込めます。

例えば、

import 'package:flutter/material.dart';
import 'package:flutter_scene/scene.dart';

class ModelView extends StatefulWidget {
  const ModelView({super.key});

  @override
  State<ModelView> createState() => _ModelViewState();
}

class _ModelViewState extends State<ModelView> {
  final Scene scene = Scene();

  @override
  Widget build(BuildContext context) {
    return SceneView(
      scene: scene,
    );
  }
}

というように、FlutterのWidgetとして3Dシーンを表示できます。

SceneView はシーンの描画とフレームループを担当するため、以前のように独自の CustomPainter を用意して毎フレーム描画する必要がありません。

3Dモデルを読み込む

flutter_scene では、3Dモデルの標準的なフォーマットである glTF / GLB を利用できます。

glTFはWebやリアルタイム3D向けに広く利用されている3Dフォーマットです。

例えば、

assets/
  models/
    car.glb

のようなGLBモデルを用意します。

flutter_scene では、GLBファイルをシーンへ読み込んで3Dモデルとして表示できます。

また、現在のバージョンでは buildScenes によって assets/**/*.glb を自動検出し、シーンデータを生成する仕組みも用意されています。

同じシーンを複数回ロードする場合には、GPUリソースを共有しながら新しいNodeグラフを生成できる仕組みも導入されています。

PerspectiveCameraを利用する

3Dシーンを表示するにはカメラが必要です。

flutter_scene では、例えば PerspectiveCamera を利用できます。

final camera = PerspectiveCamera();

カメラを設定して、

3Dモデル
   ↓
カメラ
   ↓
SceneView
   ↓
Flutter Widget

という形で3Dシーンを画面へ描画します。

公式の最小サンプルでも、glTFモデルを読み込み、PerspectiveCamera を使って SceneView に表示する構成が採用されています。

PBRマテリアルに対応

flutter_scene の大きな特徴の一つが、Physically Based Rendering（PBR） に対応していることです。

PBRは、物理ベースのレンダリング技術です。

例えば、

  • 金属
  • プラスチック
  • ガラス
  • 木材
  • セラミック

などの材質を、より現実に近い見た目で表現できます。

一般的な3Dゲームエンジンでも利用されている技術で、3Dモデルをリアルに見せるために重要な機能です。

Environment MapとImage-Based Lighting

3Dモデルの見た目をリアルにするためには、ライティングも重要です。

flutter_scene では、

  • Environment Map
  • Image-Based Lighting

を利用できます。

環境マップから周囲の光を計算することで、PBRマテリアルを利用した3Dモデルをより自然に表示できます。

現在のAPIでは Scene.environment に EnvironmentMap を設定する構成になっており、Scene.environmentIntensity で環境光の強度も調整できます。

3Dキャラクターをアニメーションさせる

flutter_scene はスキニングにも対応しています。

そのため、ボーンを持った3Dキャラクターを読み込み、アニメーションさせることができます。

例えば、

待機
↓
歩く
↓
走る
↓
ジャンプ

といったキャラクターアニメーションを実装できます。

また、アニメーションブレンディングにも対応しているため、複数のアニメーションを滑らかにつなげることも可能です。

AnimationPlayer

アニメーションの再生には AnimationPlayer を利用できます。

例えば、

final animationPlayer = AnimationPlayer();

を使ってアニメーションを管理できます。

さらに、AnimationClip や AnimationPlayer.rebind などの仕組みも用意されています。

特にHot Reload時にアニメーションの再生状態を維持しながら再バインドできる仕組みが追加されており、3Dコンテンツを開発する際の開発体験にも配慮されています。

物理演算にも対応

ゲームを作る場合、3Dモデルを表示するだけではなく、

  • 重力
  • 衝突
  • 物体の移動
  • トリガー
  • レイキャスト

などが必要になります。

flutter_scene では、物理エンジンと接続するための抽象的なPhysics APIが用意されています。

例えば、

Rigid Body
Collider
Shape
Joint
Physics Material
Raycast
Shape Cast
Overlap
Collision Event
Trigger Event

などを扱えます。

さらに、flutter_scene_rapier という別パッケージを利用することで、Rapierベースの物理エンジンを接続する構成も提供されています。

これにより、

Flutter Scene
    +
Rapier Physics

という構成で本格的な3Dゲームを作ることも可能になります。

Webにも対応

flutter_scene はFlutter Webにも対応しています。

ネイティブ環境ではFlutter GPUとImpellerを利用しますが、Webでは組み込みのWebGL2バックエンドを利用します。

そのため、

  • iOS
  • Android
  • Web

を中心に、同じFlutterコードベースで3Dコンテンツを展開できる可能性があります。

ただし、Web対応自体も新しい機能であり、現時点ではプレビュー段階です。

デスクトップ対応

対応プラットフォームとして、

  • macOS
  • Windows
  • Linux

も含まれています。

ただし、現時点ではデスクトップ向けはPreviewという位置付けです。

また、macOS・Windows・LinuxではImpellerがデフォルトで有効になっていないため、実行時にImpellerを有効化する必要があります。

例えば、

flutter run --enable-impeller

のように実行します。

オフスクリーンレンダリング

最近のバージョンでは、オフスクリーンレンダリングにも対応しています。

RenderTexture を使うことで、3Dシーンを画面へ直接描画するのではなく、テクスチャへレンダリングできます。

例えば、

3D Scene
   ↓
RenderTexture
   ↓
Material
   ↓
別の3Dオブジェクト

という構成が可能になります。

これを利用すれば、

  • ミラー
  • モニター
  • セキュリティカメラ
  • ポータル
  • 3Dテクスチャ

など、より高度な表現を実現できる可能性があります。

また、レンダリング頻度も、

  • everyFrame
  • interval
  • manual

から選択できるため、用途に応じて描画負荷を調整できます。

カスタムシェーダー

より高度なグラフィックスを実現したい場合は、カスタムシェーダーも利用できます。

例えば、

  • 特殊なマテリアル
  • 水面表現
  • 炎
  • ポストエフェクト
  • 独自のライティング

などを実装できます。

flutter_scene ではGPU関連APIの一部を package:flutter_scene/gpu.dart から利用できるようになっています。

これにより、独自の ShaderMaterial を作成するような高度なカスタマイズも可能です。

どんなアプリに向いている？

flutter_scene は3Dゲームだけでなく、さまざまなアプリケーションに利用できます。

3Dゲーム

最も分かりやすい用途です。

3Dモデル、アニメーション、物理演算を組み合わせることで、本格的な3Dゲームを構築できます。

商品ビューア

例えば家具や自動車、家電などの商品を3Dモデルで表示できます。

商品を表示
↓
指で回転
↓
ズーム
↓
360度確認

といったUIを実現できます。

3Dコンフィギュレーター

自動車や家具などのカラーやパーツを変更し、リアルタイムで3Dモデルへ反映するアプリにも向いています。

AR・VR関連

3Dモデルの表示エンジンとして利用することも考えられます。

ただし、AR/VRのカメラやトラッキング機能そのものを提供するライブラリではないため、別途プラットフォームAPIや専用ライブラリとの連携が必要です。

メリット

Flutterで3Dエンジンを利用できる

Flutterアプリの中でリアルタイム3Dレンダリングを扱える点が大きな魅力です。

glTF / GLBに対応

3Dコンテンツの標準的なフォーマットを利用できます。

PBRに対応

リアルなマテリアル表現を実現できます。

アニメーションに対応

スキニングやアニメーションブレンディングを利用できます。

物理エンジンと連携できる

物理演算APIが用意されており、Rapierなどの物理エンジンと組み合わせられます。

Web対応

Flutter WebでもWebGL2バックエンドを利用して3Dシーンを描画できます。

注意点

まだPreview段階

最大の注意点です。

flutter_scene はEarly Previewであり、Flutter GPU自体もPreview段階です。

APIが変更される可能性もあるため、現時点ではプロダクション環境への採用には慎重な判断が必要です。

Flutter master channelが必要

現在のバージョンでは、実際に利用するためにFlutter master channelが必要になる場合があります。

一般的なFlutterアプリ開発よりも環境構築のハードルは高めです。

Impellerが必要

ネイティブ環境ではImpellerを利用します。

iOS・AndroidではImpellerがデフォルトのため比較的導入しやすいですが、デスクトップでは追加設定が必要です。

3Dエンジンとしての成熟度

UnityやUnreal Engineのような成熟したゲームエンジンと比較すると、まだ提供されている機能やエコシステムは限定的です。

大規模な3Dゲームを開発する場合は、用途によってUnityやUnreal Engineなども検討した方がよいでしょう。

まとめ

flutter_scene は、Flutter GPUを活用してFlutterアプリに本格的なリアルタイム3Dグラフィックスを導入できる注目のパッケージです。

glTF / GLBモデルの読み込みから、

  • PBRマテリアル
  • Environment Map
  • Image-Based Lighting
  • スケルトンアニメーション
  • アニメーションブレンディング
  • 物理演算
  • カスタムシェーダー
  • WebGL2
  • オフスクリーンレンダリング

まで、3Dアプリケーションに必要となる機能が幅広く用意されています。

特に、Flutterで3Dゲームを作りたい開発者だけでなく、3D商品ビューアや3Dコンフィギュレーターなど、通常のFlutterアプリに3D表現を取り入れたいケースでも注目したいパッケージです。

一方で、現時点ではEarly Previewであり、Flutter GPUやDart Native Assetsなどの実験的な機能に依存しています。

そのため、今すぐ本番環境で採用するというよりは、Flutterでどこまで本格的な3D表現ができるようになるのかを試してみるための技術として触ってみるのがおすすめです。

Flutterの3Dグラフィックス環境は今後さらに進化していく可能性があり、その中心的な存在の一つとして flutter_scene は今後も注目しておきたいパッケージです。

タイトルとURLをコピーしました