Fluorite触りたかったけど無理だったので FlutterでObjファイルを表示してみる

技術情報 ソリューション事業本部 アプリエンジニア アプリ開発 Flutter

こんにちは。株式会社アドグローブ ソリューション事業本部の濵です。

先日、トヨタ自動車がFlutterを基盤とした3Dゲームエンジン Fluorite を発表しました。
fluorite.game

「あのトヨタがFlutterで書けるゲームエンジンを作った!?」と、とても興味をそそられたため早速触ってみようと思ったのですが、残念ながら本記事を執筆時点(2月26日時点)ではゲームエンジンの概要のみで、実際に触ってみることは叶いませんでした。

しかしながら、考えてみるとそもそも私はアプリ内で3Dモデルの表示を行った記憶がありません。
なので今回は簡単に3Dモデルの中でもObjファイルの表示を行ってみようと思います。
※Objファイルとは、3Dモデルの形状情報を保持する代表的なファイル形式のひとつです

実際にObjファイルを表示してみる

今回は以下2つのパッケージでObjファイルを表示してみようと思います。

使用するObjファイルについて

今回使用するObjファイルは flutter_3d_controller のサンプルに含まれるものを使用します。
以下のようにassetsに加えておきます。

flutter:
  assets:
    - assets/flutter_dash.obj
    - assets/flutter_dash.mtl

flutter_3d_controller

flutter_3d_controller はObj以外の形式の3Dモデルにも対応しているパッケージです。
今回はObjファイルのため、以下のようにソースを書いてみます。

import 'package:flutter_3d_controller/flutter_3d_controller.dart';
... ...

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: const Color(0xff0d2039),
          title: Text('flutter_3d_controller', style: const TextStyle(color: Colors.white)),
        ),
        body: Center(
          child: Flutter3DViewer.obj(
            src: 'assets/flutter_dash.obj',
            scale: 5,
            cameraX: 0,
            cameraY: 0,
            cameraZ: 10,
            onProgress: (double progressValue) {
              debugPrint('model loading progress : $progressValue');
            },
            onLoad: (String modelAddress) {
              debugPrint('model loaded : $modelAddress');
            },
            onError: (String error) {
              debugPrint('model failed to load : $error');
            },
          ),
        ),
      ),
    );
  }

今回はAndroidで実行するので、AndroidManifest.xmlに以下の変更も加えます。

+    <uses-permission android:name="android.permission.INTERNET"/>

     <application
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher"
        android:label="example"
+       android:usesCleartextTraffic="true">
        <activity
            android:name=".MainActivity"

実行結果

  • 良い点
    • Obj形式以外にも表示を行うことができる
  • イマイチな点
    • Obj形式を表示する場合は Flutter3DViewer のwidgetでは、controllerやタッチの無効フラグを渡せない

flutter_cube

こちらはうって変わって、Obj形式のみに対応しているパッケージです。
少し角度を付けて同じモデルを表示してみます。

import 'package:flutter_cube/flutter_cube.dart';
... ...

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: const Color(0xff0d2039),
          title: Text('flutter_cube', style: const TextStyle(color: Colors.white)),
        ),
        body: Center(
          child: Cube(
            onSceneCreated: (Scene scene) {
              var object = Object(
                fileName: 'assets/flutter_dash.obj',
                position: Vector3(0.0, 2.5, 0.0),
                rotation: Vector3(30.0, 180.0, 0.0),
                scale: Vector3.all(5),
                isAsset: true,
              );
              scene.world.add(object);
            },
          ),
          interactive: true,
        ),
      ),
    );
  }


実行結果

  • 良い点
    • 複数のオブジェクトを表示したりと柔軟に使用できそう
  • 気になった点
    • Obj形式以外は表示できない
    • 現在はメンテナンス更新があまり行われていないようです⋯


さいごに

最後までお読みいただきありがとうございます。

今回は、FlutterでObjファイルを表示する方法について簡単に検証を行いました。 Flutterはモバイルアプリ開発のイメージが強いですが、今回のように3D表現にも活用できる可能性があり、用途の広がりを感じることができました。

新しい技術やフレームワークは日々登場しており、今後も実際に手を動かしながら検証を行い、その知見を発信していければと思います。

本記事がFlutterでの3D表示を検討されている方の参考になれば幸いです。


参照サイト