3Dモデルのワークフロー

前提条件

  • FBX（.fbx）ファイル形式の3Dモデル
  • Wikitude 3D Encoder for WindowsまたはMacOS X

Wikitude SDKでは、Wikitude 3Dファイル形式（.wt3）に変換された3Dモデルのみロードできます。これは3Dモデルを拡張するために圧縮されたバイナリ形式であり、デバイスで3Dモデルを高速にロードおよび処理できるように最適化されています。3Dモデルの作成には任意の3Dモデリングツール（AutodeskR MayaRやBlenderなど）を使用できますが、作成したモデルをwt3ファイル形式に変換する必要があります。WikitudeにはWikitude 3D Encoderというデスクトップアプリケーションが付属しており、3Dモデルの変換にはこのアプリケーションを使用します。Wikitude 3D Encoderでは、AutodeskR FBXRファイル（.fbx）をロードして.wt3に変換できます。

このセクションでは、Wikitude SDKを使用して3Dモデルを拡張するのに適切な3Dモデルとは何かについて説明します。Wikitude SDKは変換されたファイル形式（.wt3）に基づいて3Dをサポートするので、以下の内容に従うのが得策です。

入力形式

wt3ファイルにエンコード可能な3Dモデルファイルは以下のとおりです。

  • FBX（.fbx）- 最大バージョン: 7.5(FBX SDK 2017)

3Dモデルのソースファイルでは以下の機能を使用できます。

  • メッシュの種類
    • 三角形ベースのメッシュ：3Dモデルは、3Dメッシュのパーツを含むリーフノードがあるシーンノードの階層で構成されています。
    • スキンベースのメッシュ：メッシュ頂点はジョイントノードのリストに関連して配置されます。
  • アニメーション
    • キーフレームベースのトランスフォーム/回転/スケーリングアニメーションはシーングラフのノード、またはメッシュ頂点に適用されます。
    • スキンベース3Dモデルのスケルタル/ボーンアニメーションがあります。
  • テクスチャ
    • インポートするとき、すべてのテクスチャがPNGファイル形式に変換されます。コンバータでは、JPEG、GIF、TIFFのような普通の画像ファイルフォーマットのテクスチャを変換できます。
  • 光源
    • 指向性光源を指定して拡散光（Lambertシェーディング）を実現します。
    • 反射光源（方向と反射光指数）を指定することによって反射光（Phongシェーディング）。 シーン内には複数の光源が使用できますが、各メッシュパーツ（シーンノード）のために光源（拡散と反射光を含む）が一つのみ使用できます。したがって、ツリーを上方にトラバースしたシーン階層内のシーンノードに最も近い光源が使用されます。つまり、ルートノードとして指定された光源は、シーン内のすべてのメッシュパーツに適用され、他の光源は、シーン階層の下位にあるすべてのメッシュパーツに適用されます。
  • NURBS （インポート時にテッセレーションされます）
  • 透明性
    • 車の窓のような半透明の表面に視覚化できますが、視覚化できる半透明レイヤは一つだけです。いくつかの半透明のレイヤを重ねてレンダリングすることで、よりよい結果が取得できます。
  • モデルサイズ：3Dモデルのサイズに対してメッシュ頂点やテクスチャの数に制限はありません。しかし、モバイルデバイス上で3Dモデルをうまくレンダリングするには、ファイルの合計サイズを5～10 MB、メッシュの頂点数を100K以内に制限します。

現時点でサポートされていない機能

  • バンプマップ/法線マップ（メッシュ頂点の法線のみが評価される）
  • 各ノードに対する複数の光源
  • マルチテクスチャサーフェス（同じメッシュに複数のテクスチャを適用）
  • 複数の透明レイヤ（透明レイヤはデプスキューされない）
  • 3Dモデル上のアニメーション化したテクスチャ
  • 高さマップ

3Dモデル動作時のグッドプラクティス

PNGテクスチャの使用

テクスチャはwt3ファイル内にPNG形式で保存されます。テクスチャはWikitude 3D Encoderによって自動的にPNGに変換されますが、変換元の3DモデルでPNGテクスチャを使用することはグッドプラクティスです。

2の累乗テクスチャ

モバイルデバイスに搭載されている現在のレンダリングハードウェアは、多くの場合、テクスチャのサイズが2の累乗（64x64、128x128など）であることを期待します。テクスチャのサイズが2の累乗テクスチャでない場合、ある特定のテクスチャ属性を必要とし、予期しないテクスチャのモデルになる場合があります。また、2の累乗テクスチャを使用すると、デバイスで実行するときのパフォーマンスが向上します。2の累乗テクスチャとは幅と高さが2x（64x64、128x128など）であるテクスチャのことです。

テクスチャパスの確認

テクスチャはFBXファイル内に保存するか、ファイルパスによって参照できます。後者の場合は、絶対パスではなく相対パスを使用してください。絶対パスは多くの場合、端末が異なると無効になります。テクスチャファイルはFBXファイルを含むディレクトリ内で検索もされます。したがって、外部テクスチャファイルはFBXファイル形式の3Dモデル自体と同じディレクトリに置くことを推奨します。

テクスチャサイズを可能なかぎり小さく抑える

テクスチャサイズを必要な細部が維持される範囲で可能なかぎり小さく抑えることにはいくつかの利点があります。エクスポートされた.wt3ファイルが小さくなり、その結果ネットワーク経由でのロードまたはローカルリソースからのロードが高速になります。さらに、アプリケーションに必要なメモリ量も少なくなります。

光源は1つだけにする

良好なレンダリング性能を維持するには、モデルの各パーツ（ノード）に対する光源を1つだけにします。変換元の3Dモデルで複数の光源を使用することもできますが、レンダリング時にはメッシュパーツをライティングするために単一のノードのみが選択されます。Wikitude 3D Encoderは最良の推測を行うため、シーングラフを利用して光源をノードに割り当てます。ライティングが不要な場合は、単に3Dモデルから光源を除去するか、対応する材質プロパティを設定します。これによりレンダリング速度が向上します。

よくある問題とトラブルシューティング

3Dモデリングツールが異なると、FBXにエクスポートするときの3Dモデルのエンコード方法も異なり、その結果3Dモデルを他のアプリケーションで表示したときに異なるレンダリング結果になる可能性があります。したがって、無償のAutodesk "FBX Reviewer"を使用して3Dモデルを検証することを推奨します。

ジョイント（ボーン）を使用している3Dモデルが歪む

ルートジョイントノードを作成し、他のすべてのジョイントノードが同じルートノードを共有するようにします。

3DモデルがWikitude 3D Encoderでは正しく表示されるが、デバイスでは表示されない

wt3ファイルのファイルサイズをチェックします。テクスチャサイズは必要な細部が維持される範囲で可能なかぎり小さく抑えます。メッシュ頂点の数は、ターゲットのモバイルデバイスが処理できる妥当な数にしてください。

テクスチャがない

モデルのインポート処理中に表示されたエラー/警告ダイアログで、テクスチャの問題に関する詳しい情報を確認します。テクスチャパスが有効でアクセス可能であることを確認します。

3Dアニメーションの操作

クイックスタート

1つ以上のアニメーションを含むモデルをFBXファイルにエクスポートします。その3DモデルをWikitude 3D Encoderにロードすると、アプリケーションウィンドウの右側にあるリストにアニメーションが表示されます。

Wikitude 3D Encoderのアニメーションリスト

リストの各行には、アニメーションのID、コントロールボタン、およびアニメーションを開始した後の経過時間が示されます。再生ボタンをクリックすると、アプリケーションの3Dビューでアニメーションが最初から再生されます。停止ボタンをクリックするとアニメーションが停止し、最後に描画されたフレームが表示されます。

モデルの見た目とアニメーションが期待どおりか確認し、wt3ファイルにエクスポートします。アプリケーションで使用するときはアニメーションのIDが必要です。このIDは、コントロールボタンの横に表示されています（上記のスクリーンショットではbutterfly_animation）。コードでアニメーションを開始するには、以下のように記述します。

// instantiate the model object
var model = new AR.Model("butterfly.wt3");
// instantiate the model animation with the animation id
var animation = new AR.ModelAnimation(model, "butterfly_animation");
// start the animation
animation.start();

アニメーションのエクスポート

Wikitude 3D Encoderは3Dモデルの異なるアニメーションをサポートします。これにはシーン内のパーツ（モーションパスを含む）に沿ったトランスフォームアニメーションやメッシュスキンに適用されたメッシュデフォーマアニメーションが含まれます。

3Dモデリングツールからモデルをエクスポートするときにアニメーションを焼き付ける必要があります。たとえば、Mayaはサポートされていないすべての制約（Mayaでサポートされている制約やFBX制約を含む）をアニメーションカーブに焼き付けます。

アニメーションのグループ化

アニメーションはさまざまな方法でグループ化できます。これは、「Model」の「Animation Grouping」から選択できます。グループ化する方法は、アニメーションのリストや、Wikitude SDKにアニメーションをトリガーする用のIDにも影響を与えます。グループ化する方法は以下のとおりです。

  • No grouping：3Dモデルの各アニメーションがリストされ、個別にトリガできます。（メモ：スキンメッシュのジョイントノードのアニメーションは、スキンごとに単一のアニメーションとしてグループ化できます。）
  • Grouping on root nodes：アニメーションはシーンの最上位レベルのノードにグループ化されます（下記のスクリーンショットを参照）。このグループモードは、次のセクションで詳細に説明されています。
    • ルートノードにグループ化されたアニメーション

    これにより、特定のメッシュパーツにアニメーションがトリガーされます。

    ルートノードにグループ化されたアニメーション
  • Grouping on takes：「Takes」はFBXファイル形式で、選択可能な3Dシーンの異なるパーツに影響を与えるアニメーションとして複数のテイクのリストを提供します。したがって、「Takes」をグループ化すると、シーンのすべてのアニメーションが1つのテイクとして単一のアニメーションにグループ化されます。このグループ化された単一のアニメーションはテイクの名前を持ち、任意の3Dモデリングツール（Maya、3ds Max、Blenderなど）で変更できます。ほとんどの3Dモデルは１つのテイクを含み、下記のスクリーンショットのようにデフォルトは"Take 001"という名前でグループ化されます。
テイクにグループ化されたアニメーション

アニメーションを単一のテイクにグループ化すると、すべてのグループ化されたアニメーションが一度にトリガーされます。

テイクにグループ化されたアニメーション

メモ：グループモードの変更は、変更後にインポートまたは開かれた3Dモデルのみに反映されます。

アニメーショングループの作成

次のサンプルでは、6つのシーンノード上の6つのさまざまなアニメーションをジオメトリごとに2つのグループアニメーションにグループ化する例を示します。この場合、シーングラフは以下のようになります。:

• sphere1
• sphere2
• sphere3
• cylinder1
• cylinder2
• cylinder3

次に、すべての球を1つのアニメーションにグループ化し、すべての円筒を別のアニメーションにグループ化するには、2つの新しいシーンノードを作成します。それぞれのシーンノードは、3つの子ノードで構成されます。この場合のシーングラフは以下のとおりです。

• spheres
  • sphere1
  • sphere2
  • sphere3
• cylinders
  • cylinder1
  • cylinder2
  • cylinder3

「Group on root nodes」モードを選択する場合は、以下のような2つのアニメーションが表示されます。

• spheres_animation
• cylinder_animation

メモ：シーンノードをグループ化するには、任意の3Dモデリングツール（Maya、3ds Max、Blenderなど）を使用できます。3DモデルはFBXファイルにエクスポートしてからWikitude 3D Encoderにインポートします。

既知の問題

  • Blenderでは、ボーンをメッシュにスキニングしてFBXファイルにエクスポートする前に、ボーンで変換を設定することは避けてください。
  • アニメーションを含む3DモデルをBlenderからFBXにエクスポートすると、カメラ、ライティング、またはモーションパス用に追加のアニメーションが作成されます。これは無視しても問題ありません。

ライティング

Ambient Light（BLENDERのみ）

シーンのAmbient Light（周辺光）は、BlenderのプロパティビューのWorldタブで変更することができます。ただし、この値はFBXに適切にエクスポートされないので、以下のようにPoint（ポイント）ランプによりAmbient Lightをセットします。

  1. シーンにポイントランプを追加します。
  2. ViewでEyeアイコンを切り替えてAmbient Lightを非表示にします。
  3. ポイントランプの色をお好みの周辺光に応じて設定します。
  4. Falloff（減衰）をconstantに設定します。

必要に応じて、ノード名を「Ambient」として設定できます。

周辺光を照射するためにBlenderでPointランプの設定

Directional light（BLENDERのみ）

Blenderでは、Directional Light（指向性のライト）がSunランプによって配置されます。光源の位置は照明に影響を与えませんが、光の方向によってシーンの外観が変更されます。Sunランプの光源の方向を変更するには、プロパティビューの「オブジェクト」タブで回転の値を指定します。