３D Rendering（３Dモデルの描写）

この事例では、どのようにしてターゲット画像を3DモデルでAR拡張するのかを示します。

まず、ターゲットの上に３Dモデルを表すことから始めます。そして、表示するアニメーションを追加し、自在に回転させ、スクリーン・スナップショット機能のデモに移ります。最後の事例は3Dモデルをある決められた場所に表示できることを示します。

（イメージ認識とトラッキングをもとにした風景（Scene)ARになれていない方は、image recognitionImage Recognition.の章を参照してください）

Wikitude SDKでは、独自の形式である、Wikitude 3Dフォーマットファイル（.wt3）にエンコードされた3Dモデルのみ拡張オブジェクトとして使用できます。これは3Dモデルを拡張するために圧縮されたバイナリ形式のファイルで、モバイルデバイスで3Dモデルを高速に読み込み、処理できるように最適化されています。3Dモデルの作成には好みの3Dモデリングツール（AutodeskR MayaRやBlenderなど）を使用できますが、作成した3Dモデルをwt3ファイル形式にエンコードする必要があります。3DモデルのエンコードにはWikitude 3D Encoderデスクトップアプリケーション（WindowsおよびMac）を使用します。Wikitude 3D Encoderでは、AutodeskR FBXRファイル（.fbx）形式を.wt3にエンコードできます。

Wikitude 3D Encorderの中に置いた３Dモデルを認識する

 

次のポスターに印刷された広告はターゲットイメージとして使用し、写真の車の上にAR化された3Dモデルがでます。

３D Model on Image Target

まず最初に、AR.Modelを作成して、3Dモデルをエンコードした.wt3ファイルにURLを渡します。追加オプションとして、風景の中のモデルのスケール、回転、配置を指定できます。 

this.modelCar = new AR.Model("assets/car.wt3", {
    onLoaded: this.loadingStep,
    scale: {
        x: 0.045,
        y: 0.045,
        z: 0.045
    },
    translate: {
        x: 0.0,
        y: 0.05,
        z: 0.0
    },
    rotate: {
        z: -25
    }
});
view source code on GitHub

この事例の中には、3Dモデルがすべてロードされた通知を受けるための on Loaded trigger機能が付けてあります。モデルのサイズとどこに格納されているか（ローカルかリモートか）に依存するため、ロードに時間がかかることがあり、時間をユーザーに告げる機能を推奨します。

2Dモデルと同様に、3DモデルもAR.ImageTrackable  AR.ImageTrackable.のdrawables.camプロパティに登録します。 

var trackable = new AR.ImageTrackable(this.tracker, "*", {
    drawables: {
        cam: [this.modelCar]
    }
});
view source code on GitHub

3Dモデルをイメージターゲットの上に表すのはこれですべてです。今後、大きさ、モデルの位置を調整するためにthe scaleとtranslationプロパティをオプションとしてAR.Modelに移します。

Target Imageに格納された、イメージ認識のサンプルをここで見ることができます。on this page

 

Appearing Animation（アニメーションの表示）

次の章としてアニメーションの表示は大きさが大きくなり、ターゲットが、一旦、置く位置にセットされると３Dモデルの大きさを変えて表示する機能が追加されました。単一プロパティ上のオブジェクトのアニメ―ションを作成するにはAR.PropertyAnimationAR.PropertyAnimationを使用します。X、Y、Zのすべての方向に自動車モデルを拡大するためには、3つのアニメーションが必要です。AR.AnimationGroupを使用してこれらのアニメーションをグループ化し、すべてのアニメーションが並行して再生されるようにします。 

var sx = new AR.PropertyAnimation(model, "scale.x", 0, scale, 1500, {
    type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_QUAD
});
var sy = new AR.PropertyAnimation(model, "scale.y", 0, scale, 1500, {
    type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_QUAD
});
var sz = new AR.PropertyAnimation(model, "scale.z", 0, scale, 1500, {
    type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_QUAD
});

return new AR.AnimationGroup(AR.CONST.ANIMATION_GROUP_TYPE.PARALLEL, [sx, sy, sz]);
view source code on GitHub

それぞれのAR.PropertyAnimationはX、Y、Z方向のいずれかを対象とし、0からscale変数で渡された値までモデルを拡大します。よりダイナミックなアニメーション効果を生み出すため、EASE_OUT_QUADイージングカーブを使用しています。

ターゲットが認識されたときに通知を受けるため、AR.ImageTrackableのonEnterFieldOfVisionトリガーを使用します。このサンプルでは、appear()関数をアタッチしています。 

appear: function appearFn() {
    World.trackableVisible = true;
    if (World.loaded) {
        World.appearingAnimation.start();
    }
},
view source code on GitHub

表示機能（the appear function)の中で、前に生成したAR.AnimationGroup AR.AnimationGroupは、一度そのアニメーションを動かすために、そのstart( ) 関数を呼び出すことで開始されます。

 

Interactivity(自在な回転）

追加する更なる機能は、３Dモデルのアニメーションの回転です。開始または停止は３Dモデル、または表示されるボタンをクリックして下さい。

３Dモデルの追加機能として、ボタンとして機能するイメージがイメージ・ターゲットに追加されました。

これはAR.ImageResourceAR.ImageResource をロードし、それから引きだして生成されます。 

var imgRotate = new AR.ImageResource("assets/rotateButton.png");
var buttonRotate = new AR.ImageDrawable(imgRotate, 0.2, {
    translate: {
        x: 0.35,
        y: 0.45
    },
    onClick: this.toggleAnimateModel
});
view source code on GitHub

AR.ImageDrawableAR.ImageDrawableを３Dモデルとともにimage targetに一緒に追加するために、両方の取りだし機能はAR.Image TrackableAR.ImageTrackableに渡されます。 

var trackable = new AR.ImageTrackable(this.tracker, "*", {
    drawables: {
        cam: [this.modelCar, buttonRotate]
    },
    onEnterFieldOfVision: this.appear
});
view source code on GitHub

the rotate.z property のために、AR.PropertyAnimationを定義して、３Dモデルの回転アニメーションは生成されます。 

// Rotation Animation
this.rotationAnimation = new AR.PropertyAnimation(this.modelCar, "rotate.z", -25, 335, 10000);
view source code on GitHub

この取りだし可能にする機能は、onClickトリガーを設定することでクリック可能になります。onClickトリガーは、取りだし可能機能の作成時にオプションで設定できます。そのため、3DモデルのonClick: this.toggleAnimateModelをオプションで設定してAR.Modelコンストラクターに渡します。ボタンのonClick: this.toggleAnimateModelトリガーも同様に、AR.ImageDrawableコンストラクターでオプションとして設定します。これにより、3DモデルまたはボタンをクリックしたときにtoggleAnimateModel()が呼び出されます。 

toggleAnimateModel: function toggleAnimateModelFn() {
    if (!World.rotationAnimation.isRunning()) {
        if (!World.rotating) {
            World.rotationAnimation.start(-1);
            World.rotating = true;
        } else {
            World.rotationAnimation.resume();
        }
    } else {
        World.rotationAnimation.pause();
    }

    return false;
}
view source code on GitHub

アニメーションを.start(-1)で開始すると、アニメーションが無限に繰り返されます。

 

画面のスナップ・ショット

次に、3Dモデルをよりじっくりと確認できるように、3Dスクリーンの固定表示機能を追加します。固定表示機能は、AR.ImageTrackableにアタッチされた拡張オブジェクトをARchitect Worldから切り離してカメラビューに固定表示します。一度固定表示した拡張オブジェクトは、ARchitect Worldに戻るよう指示されるまでカメラビューにとどまります。したがって、ユーザーはターゲットをカメラビュー内に入れていなくてもコンテンツを確認することができます。

カメラビュー上の固定表示位置はdiv要素によって定義します。AR.ImageTrackableの作成時に、divを追加オプションとして渡します。このサンプルでは、idがsnapContainerであるdivを使用しています。 

this.trackable = new AR.ImageTrackable(this.tracker, "*", {
    drawables: {
        ...
    },
    snapToScreen: {
        snapContainer: document.getElementById('snapContainer')
    },
    ...
});
view source code on GitHub

次に、ボタンを追加することによって固定表示を有効にします。このボタンは、回転ボタンと同じように作成します。唯一の違いはonClickトリガーであり、新しく作成したボタンでは異なる関数を指定します。 

toggleSnapping: function toggleSnappingFn() {
    if (World.appearingAnimation.isRunning()) {
        World.appearingAnimation.stop();
    }
    World.snapped = !World.snapped;
    World.trackable.snapToScreen.enabled = World.snapped;

    if (World.snapped) {
        World.applyLayout(World.layout.snapped);
    } else {
        World.applyLayout(World.layout.normal);
    }
}
view source code on GitHub

固定表示の有効/無効を切り替えるには、AR.ImageTrackableのsnapToScreen.enabledプロパティをtrueまたはfalseに設定します。現在のスナップ状態に基づいて、拡張オブジェクトの配置とスケーリングが異なります。

このサンプルでは、一度スクリーンにスナップされると、ジェスチャーイベントによって3Dモデルを回転させたり、拡大/縮小といったスケーリングをすることができます。新しい回転、位置およびスケール値を適用するには、onScale、onDragおよびonRotationのジェスチャコールバックが使用されます。

 

アニメーションされたモデルのパーツの編集

3Dモデルは三角形メッシュの集合であり、これはさらにメッシュパーツに分割できます。各メッシュまたはメッシュパーツは、その外観や空間位置を決定するマテリアルプロパティと変形値を保持しています。このサンプルで使用している赤いランボルギーニモデルの場合は、ホイール、ドア、屋根、ボンネットなどがメッシュを表します。たとえば自動車のドアは、ドアのフレーム、サイドミラー、ドアハンドルを表すメッシュパーツに細分化されます。メッシュパーツをグループ化することで、3Dモデルのパーツを個別にアニメーション表示できます。ランボルギーニのサンプルでは、ドアとそのすべてのパーツを開くことができます（下の図を参照）。

メッシュおよびメッシュパーツに異なる識別子を設定し、それをAR.ModelのonClickトリガーにmodelPartパラメーターとして渡すことで、ユーザーが3Dモデルの特定のパーツをクリック/タッチしたときに異なるアクションを適用できます。以下のコードでは、switch構文でmodelPartパラメーターを使用しています。渡されたmodelPartが自動車の左ドアを表すパーツの場合、3Dモデルのアニメーションが作成されて開始されます。それ以外の場合は、メッシュまたはメッシュパーツの識別子（modelPartパラメーター）がalert関数によってポップアップウィンドウに表示されます。 

this.model = new AR.Model("assets/car_animated.wt3", {
    ...
});

this.animationDoorL = new AR.ModelAnimation(this.model, "DoorOpenL_animation");

this.model.onClick = function( drawable, model_part ) {
switch(model_part)
{
    case 'WindFL': 
    case 'DoorL[0]':
    case 'DoorL[1]':
    case 'DoorL[2]':
    case 'DoorL[3]':                
        World.animationDoorL.start();
        break;
    ...
}
view source code on GitHub

メッシュパーツの識別子は3Dモデルによって提供されます。この識別子は、3Dモデルを作成したモデリングツール（3d Studio Max、Maya、Blenderなど）で指定します。3Dモデルのメッシュおよびメッシュパーツの一覧はWikitude 3D Encoderから取得できます（下の図を参照）。メッシュが単一のパーツで構成されている場合、その識別子はメッシュの名前になります（例: 'WindFL'）。メッシュが複数のパーツで構成されている場合、その識別子はメッシュの名前にパーツのインデックスを含む角カッコが付加されたものになります（例: DoorL[0]）。

3D Encoderでのモデルパーツの識別子のコピー

特定の場所で３Dモデルを表示

Wikitude SDKでは、3Dモデルを画像認識型ARだけでなく、ロケーションベース型ARでも拡張することができます。下のサンプルでは、3Dモデルを特定の相対位置に配置する方法を示します。3Dモデルは、ユーザーの現在の位置から北に5m離れた地点の上方2mに配置されます。ここでは簡単に試せるように相対位置を使用していますが、実際のロケーションを使用することもできます。（詳細については、AR.GeoLocationおよびAR.RelativeLocationを参照）。 

var location = new AR.RelativeLocation(null, 5, 0, 2);

var modelEarth = new AR.Model("assets/earth.wt3", {
    onLoaded: this.worldLoaded,
    scale: {
        x: 1,
        y: 1,
        z: 1
    }
});

var obj = new AR.GeoObject(location, {
    drawables: {
       cam: [modelEarth]
    }
});
view source code on GitHub

サンプルを実行すると、カメラをやや東側のやや上方に向ける必要がありますが、そうすると実風景の上に3Dモデルが浮かんでいるのが見えます。

Size and Distances (大きさと距離）

 

計測距離単位（Scaled Distance Units(SDUs)

ARアプリケーションでは、「Objectのサイズ」の条件はピクセル（解像度）や、似たようなサイズ定規では測ることができません。地図のような2次元アプリケーションと違って、Objectのサイズは本質的に見る人からObjectまでの距離に依存しています。

 

あるお店の表面右側にある仮想の２D ロゴを想像して下さい。地図ベースのアプリケーションでは大きさは、ピクセル（解像度）でロゴの幅、高さを決めることにより容易に定義できます。ARアプリケーションでは、ロゴは建物それ自体よりも大きく現れます。それは、自然の道の距離に依存しています。さらに、位置ベースの使用例では、もし、それが遠くであっても、Objectは読めなければなりません。私達はこれを完全にするために距離ベースの縮尺（下記参照）を使います。

 

ピクセル、または、物理的な単位の規制は、ARアプリケーションでは使用できません。それらが静的な方法で定義され、アプリケーションにObjectを望む方式で計測することを許さないからです。それ故に、Wikitude ARchitect はScaled Distance Units(SDUs) （計測距離単位）を推奨します。SDUsはObjectの大きさそのものとの関係だけではなく、見る人からObjectまでの距離によって定義されます。

 

 AR.GeoObject,につけるドローアブル（引き出し可能なObject)のために、1つのSDUはスクリーンサイズのObjectとして定義されます。それは、正確に1mの高さ、そして、見る人から10mの距離に位置します。もし、このドローアブル（引き出し可能なObject)の幅が５SDUと定義されると、それは、5mの幅、10mの距離にあるObjectに完全にかぶさります。

 AR.ImageTrackableに装着したドローアブル（引き出し可能なObject)のために、SDUは基本となるTrackableのサイズによって決定されます。ドローアブル（引き出し可能なObject)の定着位置(アンカーポイント）はAR.ImageTrackableのセンターにおかれます。そして、１SDUは、画像の高さになるように定義されます。それは下記の図をご覧ください。

それゆえに、半径0.25にセットされた円は、下記の画像に示されるように描かれます。

Distance Based Scaling (DBS) (距離ベースの縮尺）

ARアプリケーションにおける他の重要な点は、「Distance Based Scaling:距離ベースの縮尺」です。もう一度ロゴを考えてみましょう。それはあるブランドのお店のロケーションを表しています。もし、見る人が10m離れていて、お店を見つめているとすると、私達がドローアブル（引き出し可能なObject)の幅と高さを正しいSDUによってセットしたのを与えたがために、ロゴは完全に建物を覆ってしまいます。そこで、お店のロケーションからさらに離れた景色にしてみましょう。DBSのコンセプトがなければ、ロゴは、あたかも見るには小さすぎるとして、たちどころにスクリーンから消えてしまいます。特にSDUsが価値が高い(High Value)としてセットされていなければそうなります。私達がロケーションに向かって動くと、同じような状況が現れます。ロゴはすぐに大変大きく、そして、スクリーン全体を覆ってしまいます。

 

どこが、ドローアブル（引き出し可能なObject)が、唯一はっきりと見えるある距離なのか、または、一方で、大きすぎるか小さすぎるかをそれぞれに認識する位置なのか、の状況を打開するために、Wikitude ARchitect は、Distance Based Scailing (DBS) (距離ベースの縮尺）と呼ばれるコンセプトを紹介します。それは、ドローアブル（引き出し可能なObject)が、その元の外形の決まった限界を超えないようにすることを確実にします。

 

私達はscene.minScalingDistanceとscene.maxScalingDistance.の2つの価値を定義します。

 

scene.minScalingDistanceは10mをセットし、ドローアブル（引き出し可能なObject)が、それ以上縮小できない、見える距離を定義します。元のロケーションに、見える距離が10m、またはそれよりも近いに関わらず、ドローアブル（引き出し可能なObject)はスクリーン上に、それでも同じサイズで現れます。これは、ドローアブル（引き出し可能なObject)がスクリーン全部を覆い隠すのを避けます。

 

scene.maxScalingDistance は20Kmをセットし、そして、ドローアブル（引き出し可能なObject)は、それ以上先が測れない見える距離を定義します。ドローアブル（引き出し可能なObject)は、Objectへの距離が20㎞かそれ以上にも関係なく、それでもスクリーン上に同じサイズで現れます。これは、ドローアブル（引き出し可能なObject)がスクリーン上で小さくなりすぎるのを避けます。

 

ドローアブル（引き出し可能なObject)の scene.maxScalingDistanceのサイズは、scene.minScalingDistance(定義されたSDU価値）でのそのサイズの10%にセットされます。もしObjectがただ10m先だとしても、結果として、どのドローアブル（引き出し可能なObject)でもそのサイズの10%以下に現れないようにするためです。

 

scene.minScalingDistance と scene.maxScalingDistanceの間で、Objectは x^(0.2).の計測機能で計測されます。この特別な計測機能の効果で、ユーザーがObjectから動きながら遠ざかると、Objectの近くを表示するドローアブル（引き出し可能なObject)が、きわめて早く、小さい縮率になって行きます。さらにユーザーがObjectから遠ざかると、ユーザーからはサイズの減少がより小さく見えるようになり、ユーザーの実感をスムースにします。

３D Assets Workflow

必要条件

・FBX(.fbx)ファイルフォーマットの中の３D モデル

・Windows または MacOS X 用のWikitude 3Dエンコーダー

 

Wikitude SDKの中の３Dコンテンツは、Wikitude 3D Format files (.wt3)と呼ばれるフォーマットファイルからのみ読みこまれます。これは３Dコンテンツを記述するために圧縮されたバイナリ―フォーマットです。それはモバイル機器上で３Dコンテンツの高速呼び出しと操作を最適化するようにされています。あなたは、それでも、あなたの好きな3Dモデリングツール（Autodesk® Maya® またはBlender）を3Dモデルに使うことができます。しかし、それらを、Wikitude 3Dエンコーダー（encoder for short）を使って、wt3ファイルフォーマットにコンバートする必要があります。エンコーダーはAutodesk® FBX® files (.fbx) を読み込み、そして、それを.wt3 filesに吐き出します。

 

この章では、Wikitude のAR SDKで表示するための、正しい3Dモデルをどのように選択するか、の概論を提供します。Wikitudeが、コンバートされたファイルフォーマット(.wt3上で3Dサポートをベースとしているのは、以下のもっとも良い実習をするために良いことです。

Imput format

wt3ファイルをエンコードするためにサポートされた3Dモデルファイルとは、

・FBX (.fbx) - max version: 7.5 (FBX SDK 2017)

あなたの3Dモデルのソースファイルで使える機能：

・メッシュタイプ

　・トライアングルベースメッシュ：３Dモデルは通常、ツリー構造のノード（シーンノード）のヒエラルキーを構成します。

　　そこでは枝葉のノードは3Dメッシュの部分を成り立たせています。

　・スキンベースのメッシュ：連結されたノードのリストに関連を位置付けられたメッシュ・バーティシス（頂点）、

　　そのため、骨ボーン）と呼ばれます。

・アニメーションAnimations

　・メッシュ・バーティシス、またはツリー構造ノードに適応した、フレームべースの変換、ローテーション、計測。

　・スキンベースのモデルのためのボーンアニメーション

・質感（テクスチャー）

　・全ての質感はインポートされている間にPNGファイルに変換されます。

　　コンバーターは通常の写真ファイルのフォーマット、JPEG。GIF、TIFFなどの質感を受け入れます。

・明るさ

　・照明原の方向を特定して拡散照明(ランバート反射輝度）。

　・間接照明原を特定して反射照明（フォン照明技術）（方向と反射指数）多くの照明原は風景の中で

　　使うことができます。しかしながら、ただ一つの照明原（拡散照明、反射照明を問わず）のみが

　　それぞれのツリー構造ノードのメッシュの部分で使用できます。それゆえに、照明原は

　　（ツリーを上がっていくことで）ツリー構造のヒエラルキーの中でツリー構造のノードに最も近いものが使われます。

　　これは、ルートノードとして定義された照明原で、ツリー構造の中ですべてのメッシュ部分に適合されます。

　　外の照明原は、ツリー構造のヒエラルキーの中で下位の全てのメッシュ部分に適合します。

・NURBS (それはインポートでちりばめられる)

・透過性(トランスペアレンシー）

　・車の窓などのように、半透明な表面が思い浮かびます。しかし、その結果、ただ一つの半透明な層が思い浮かびます。

　　いくつかの半透明な層をそれぞれ他の上に描く結果は

・モデルの大きさ：3Dモデルには、メッシュ・バーティシス(頂点）またはテクスチャー(質感）の数の条件による

　大きさの制限はありません。

　しかしながら、モバイル機器の上で3Dモデルを流ちょうに描写するには、トータルのファイルサイズを

　5-10MB以下に、そしてメッシュ・バーティシスの数を100Ｋ以下にするようにお勧めします。

 

サポートされていない機能

・立体的な地図、普通の地図（「普通」はメッシュ・バーティシスの上でのみ評価されます）。

・ノード当たりの複数の照明原

・複数の質感の表面（同じメッシュ上に一つ以上の質感）

・複数の透明層（透明層はデプスキューイングされない）

・3Ｄモデル上のアニメーション化された質感

・高さのある地図

 

3Ｄモデルを作業する時の良い方法

PNG質感を使う

質感はwt3ファイルでPNGフォーマットで格納されます。Wikitude 3D エンコーダーは自動的に質感をPNGに変換しますが、3DモデルファイルのソースでPNG質感を使うことが良い方法です。

 

2つの質感パワーを使う

モバイル機器の上でハードウエアを描写する場合、しばしば、寸法を得るために質感の期待値を要求します。それは、2つの質感パワー(例えば、64x64, 128x128, ...）などです。別の質感の寸法は予期しない結果を招きます。さらに、2つの質感の数値を使うことでよい描写効率が得られます。

 

質感のファイルパスを有効にする

質感はFBXファイルでストアーされる、またはファイルパスで参照されます。後者の場合、他のマシーンではしばしば有効でないパスを絶対に使ってはいけません。関連したパスを使う代わりに、質感ファイルは同じくFBXファイルを包含しているディレクトリーで検索できます。それ故に、外部の質感ファイルを3Dモデルとして同じディレクトリーに、例えばFBX file そのものに、保管することをお勧めします。

 

質感のサイズをできるだけ低く維持する

質感のサイズをできるだけ低く維持すると、必要な詳細を管理するのにいくつかの利点があります。エキスポートされたwt3.ファイルが小さければより早くロードされます。そして、あなたのアプリケーションはメモリーを食いません。

 

 照明は一つだけ使う

よいパフォーマンスを維持するために、あなたのモデル(ノード)のそれぞれの部分は、単一の照明原にのみ反応します。ソースファイルの中で複数の照明を使うことができますが、描写時間中、唯一、単一のノードだけがメッシュ部分に反応するように選択されます。もし、照明することが、単純に照明をあなたのソース3Dモデルファイルと、それともまたは、マテリアルプロパティを一致させるためにセットすることから、再移動することを要求されていなければ、照明をノードに割り振るために、ツリー構造のグラフを使うことが最良と予想します。

問題の解決

異なった３D モデリングツールはFBXエクスポートの間に3Dモデルを別にエンコードします。それは、3Dモデルが別のアプリケーションで見られる時に、異なる描写結果を作成します。それ故にあなたの3D モデルを free Autodesk "FBX Reviewer".で確かめるようにお勧めします。

 

ジョイント(ボーン:骨）を使っている3D モデルが破壊される

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

 

3DモデルがWikitude ３Dエンコーダーには正確に現れるが、機器には現れない

あなたのwt3ファイルのファイルサイズをチェックしてください。要求された細部を保持するもっとも低いサイズに質感のリミットをします。あなたがターゲットにするモバイル機器がうまく対応できる妥当なメッシュ・バーティシスの数を維持します。

 

質感が失われる

モデルプロセスをインポートしている間のエラーや警告の文章をチェックします。どの質感が問題なのか、それが詳細情報を提供します。質感のパスが有効でアクセスできるのかをはっきりさせます。

 

3D アニメーションで作業をする

クイックスタート

一つまたはそれ以上のアニメーションをFBXファイルの中に含むモデルをエクスポートします。3DモデルをWikitude 3D エンコーダーにロードした後に、アニメーションはアプリケーションウインドウの右手側のリストの中に表示されます。

Wikitude 3Dエンコーダーの中にリストされたアニメーション

それぞれのリストの下に、アニメーションID、コントロールボタン、そしてアニメーションを始めた後経過した時間が格納されています。プレイボタンをクリックするとアニメーションが最初からスタートします。そして、アプリケーションの３Dビューでアニメーションが巻き戻ります。ストップボタンでアニメーションがストップし、最後に引き出されたフレームが表示されます。

 

あなたのモデルが期待通りアニメーションされたら、それをwt３ ファイルにエクスポートして下さい。あなたのアプリケーションで使おうとする場合、アニメーションのIDを必要とします。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();

Export Animations

Wikitude 3D エンコーダーは異なったアニメーション3Dモデルをサポートしています。これらは、ある風景の中のある部分でのアニメーションの移動を含みます。モーションパス、またはメッシュスキン上でのメッシュ・デフォーマー・アニメーションを含みます。

 

3Dモデリングツールからモデルをエクスポートしている時に、あなたは、あなたのアニメーションを（BAKE)焼きつけなければなりません。例えば、Maya（Mayaはコンピュータの設定を読み取り、操作する言語を検出します）は、Mayaがサポートし、FBXが強制することを含み、すべてのサポートされていない強制機能を、アニメーションカーブの中に焼きつけます。

 

Grouping Animetions

アニメーションは異なったやり方でグループ化することができます。それは、Modelメニューの中のsub-menuの「Animation Grouping」の中で選択することができます。グルーピングのタイプはアニメーションのリストとアニメーションの名前（例えば、Wikitude SDKの中でトリガーとなるアニメーションに使われるIDなど）に作用します。

・グルーピングしない：3Dモデルの各アニメーションをリストし、別々にトリガーにする。（注意：スキンベースメッシュのジョイントノード上のアニメーションは、一つのスキンの中の単独のアニメーションの中に、依然グループ化されています。）

・ルートノード上でのグルーピング：アニメーションはツリー構造の最上層のノードでグループ化されています。（下のスクリーンショットを参照）。次のスクリーンはこのグルーピングモードの詳細を表しています。

ルートノード上のグループ化されたアニメーション

これは、別れた、あるメッシュ部分上のアニメーションをトリガーになるようにします。

・Takesでのグルーピング：それぞれのtakesが単独の、選択可能なアニメーション（最終的には3D風景の異なった部分に影響する）とみなされている場所で、takesのリストを準備するFBXファイルフォーマットの視点から「takes」を参照します。

takesの上でのグルーピングは、それゆえに、風景のすべてのアニメーションを、あなたの選択で3Dモデリングツール（Maya、3ds　Max、Blenderなど)の中で変更可能だったtakeごとに一つのtake名が付けられた、単一のアニメーションにグループ化します。ほとんどの３Dモデルは、デフォルトのtakeは「Take001」という、ただ一つのtakeを含んでいます。(下のスクリーンを参照）

takes上のグループされたアニメ―ション

takes上のグループされたアニメ―ション

注：animationグループのモードの変更は、変更後にオープンされた、またはインポートされた３Dモデルにのみ影響します。

アニメーショングループの生成（Creationg Animation Groups）

以下の例は、どのようにして、6つのツリー構造ノード上に分離された6つのアニメ―ションを、２つの、それぞれが配置されたアニメーショングループにグループ化するのかを示しています。私達は6つのツリー構造ノードを、それぞれがそれ独自のアニメーションを持っていると仮定します。風景のグラフは次のように見え、そして6つの分離したアニメーションを与えています。 

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

すべての球体のアニメーションを一つのアニメーションにグループ化するために、そしてすべてのシリンダーアニメーションを2番目のアニメーションにグループ化するために、私達は2つの新しいツリー構造のノードを生成します。それは、それぞれ3つの子供ノードの親ノードとして表示されます。 

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

「アニメーショングルーピングノード」として「グループルートノード」を選ぶことで、2つのアニメーションが生じます。 

• spheres_animation
• cylinder_animation

注：風景（ツリー構造）ノードのグループ化は、あなたが選択した3Dモデリングツール（Maya、３ds Max、Blenderなどで）でなされます。改変された3Dモデルは、それからFBXにエクスポートされなければならず、そして、効果を得るためにWikitude 3D エンコーダーの中にインポートとロードされなければなりません。

 

Known Issues(知られた課題）

・それらを剥いでメッシュにし、それをFBXファイルにエクスポートする前に、ブレンダ―の中で、ボーン(骨）の上に移動することを回避します。

・アニメーションの３Dモデルをブレンダ―からFBXにエクスポートすることは、追加のアニメーションをカメラ、照明、またはモーションパスのために生成します。これらは安全に無視されます。

照明（Lighting)

環境光：ブレンダ―のみ（Ambient Light：Blender only!)

風景における環境光はWorld tab of the Properties viewの中のブレンダ―の中で変化させることができます。しかしながら、この価値はFBXへのエキスポートされたプロパティではありません。その周りでの作業が、以下のような追加の地点の照明原に向けて、環境光を定義します。

 

１．風景に照明地点を追加

２．それをOutliner view内でアイコンを不可能にすることで可視化できないようにセット

３．あなたの望む環境光の価値にこの照明地点のカラーをセット

４．Falloffを「コンスタント」にセット

 

オプションで、これが通常の照明原ではないことを思い出させるために「環境Ambient」へのノードの再命名ができます。

環境光をエミュレートするための照明地点のセッティングをするブレンダー

直接照明：ブレンダ―のみ（Dirextional Light：Blender only!)

ブレンダーの中の直接証明はtype SUN(太陽型）の照明原によって提供されます。注：照明原の位置は照明に全く影響を与えません。唯一、照明の方向は風景の表情を変化させます。太陽光が元の光の方向はrotation valuesを変化させることで Properties view の中のObject tab で変更することができます。

Wikitude 3D Encoder

 

Wikitudeの中のエンコーダーはWikitude 3D Format files (.wt3)と呼ばれるファイルから呼び込まれます。これはDコンテンツを描くための圧縮されたバイナリ―フォーマットです。それは、モバイル機器上での早いローディングと3Dコンテンツの取り扱いを最大限高めています。あなたは自分の好みの3Dモデリングツール（Autodesk® Maya® oまたは Blenderなど）から３Dモデルを使うことができます。しかし、それらをwt3フォーマットに変更する必要があります。WikitudeはWikitude 3D エンコーダーと呼ばれるデスクトップアプリケーションを提供します。それは、あなたの3Dソースファイルをエンコードするタスクを操作します。今日では、Wikitude エンコーダーはwt3ファイルをエンコードするためにAutodesk® FBX® files (.fbx)をサポートしています。

 

Wikitude ３Dエンコーダーは3Dモデルを、wt3ファイルと呼ばれる内部の表示に変換します。それは、それからWikitude SDKによって描写することができます。コンバーターは照明原によってアニメーションを描き、質感を出し、そして照らされたメッシュベースの３Dモデルをサポートします。

 

wt3ファイルをあなたの3Dコンテンツから取りだすためのそれぞれのステップは下記のより詳細な記述で説明されます。

 

１．Wikitude 3Dエンコーダーをどのようにインストールするか

２．サポートされている３Dモデル

３．Wikitude 3Dエンコーダーのユーザーインターフェース

４．Wikitude 3Dエンコーダーを使う最初のステップ

５．3Dモデルの操作

 

Windous XP/Windows 7/Windows 8上でどのようにWikitude 3Dエンコーダーをインストールするのか

・ www.wikitude.com/downloadからエンコーダーをダウンロードする

・the setup.exe installation fileを走らせ、 installation wizardをフォローする

 

Mac OS X上でどのようにWikitude 3Dエンコーダーをインストールするのか

・ www.wikitude.com/downloadからエンコーダーをダウンロードする

・the .dmg installation imageを開き、Wikitude 3Dエンコーダーアプリケーションを

　あなたのアプリケーションフォルダ―にドラッグする

 

サポートされている３Dモデル（Input Files)

Wikitude 3DエンコーダーはAutodesk® FBX®バージョン2015までをインポートできます。FBXフォーマットを通すのは、Autodesk Maya or 3D Studio Max,のような3Dモデリングツールによってサポートされ、それゆえに普通の３Dファイルフォーマットを表示するような良く定義されている標準ではありません。異なったモデリングツールは3Dモデルの異なった表示を使うので、私達はAutodeskによる「FBX Reviewer」のようなフリーツールでモデルを評価することをお勧めします。(Download).

 

あなたの3Dモデルのソースファイルで使える機能

 

  • Static model (made-up of triangles)
  • Animations
    • Transformation Animations
    • Skinning
  • Materials
    • Phong, Lambert, Blinn
    • Transparency
  • NURBS (will be tessellated on import)

まだサポートされていない機能

 

  • Normal Mapping
  • Multi Textures

もし、手元の3Dモデルが要望に答えているかどうかはっきりしない場合、それをエンコードしてみてください。あなたは、3DコンテンツがWikitudeで動くかどうか、または、サポートされていない機能を使っているのか、警告リストとエラーコードを受け取り教えてもらえます。

Wikitude 3D エンコーダーユーザーインターフェイス

スタートアップで、次のインターフェイスが提供されます。

 

１．よく使う機能へのツールーバー

２．あなたのコンテンツをみる3D作業エリア

３．ツリービューの中で、すべての3Dコンテンツをリストするシーングラフ（ツリー構造のグラフ）

４．ツリー構造のグラフから選択したノードの詳細を示すプロパティエリア

５．ステータスバー

Wikitude 3D エンコーダーインターフェイス

Wikitude 3D エンコーダーを使う最初のステップ

サポートされた3Dモデルファイル（.fbx）を開くことでスタートします。ツールバーからOpenを選択し、サポートされたファイルを３D作業エリアに落とします。ファイルのサイズによってこれは時間を食います。一旦終わったら、３Dコンテンツは3D 作業エリアに現れます。

 

Wikitude 3Dエンコーダーがあなたのファイルの中でサポートされていない機能に直面した場合、それはエラーや警告のリスト

をダイアログボックスの中に表示します。ポップアップウインドーはインポートプロセスの中で発見された課題を要約します。あなたはこの情報を後にWindow->Show Logging Window.から引きだすことができます。あなたの３Dファイルの中でやり直しをする必要があるエリアを判別するために、メッセージと詳細を注意深くチェックして、それが正確にエンコードされるかどうか確認します。

 

3D作業エリアは、Wikitudeの中に現れるように、正確なやり方であなたのエンコードされた３D モデルファイルを示します。

あなたのモデルが見た目OKかどうか、ドラッグ(掴む）、パン(上下に動かす）、ズーム(拡大する）を確かめます。もし、具体的なプロパティ(例えば、マテリアルや照明）をチェックする必要があれば、ツリー構造のグラフの中の一致するノードを選択します。選択したノードの詳細がプロパティビューに表示されます。

.wt3へのエクスポートファイル（Export files to .wt3)

一旦、エンコードされたファイルに満足したら、ツールバーからExportを選びます。そうして、エクスポートされたファイルがセーブされるべきロケーションを選んでください。Wikitudeを使ったARの体験で、エキスポートされた.wt3ファイルは直接使われます。もし、あなたがデスクトップで.wt3ファイルを見たければ、Wikitude 3D エンコーダーの中で、単純にOpenを選択する、またはドラッグ、ドロップをします。

 

3Dコンテントのワークフロー上のさらなる情報は、専用の章 3D Asset Workflowで見つかります。

ツリー構造のグラフはヒエラルキーの中にグループ化された3Dモデルのすべてのメッシュパーツを包含しています。ツリー構造のグラフの枝葉は異なった3Dモデルのパーツを表します。ツリー構造のグラフの中で選んだノードは、3Dモデルの中でどこにパーツが位置するのか示す、跳ね上がる箱を表示します。（下の図の中の白いフレームの箱をご覧ください）。

 

すべてのモデルパーツのリストは、アプリケーションメニューを通すか、ノードを選択してその名前をコピーすることで、または、コンテクストメニューか、キーとなる組合せCommand+c/Control+cによって得られます。（下記の図を参照）

 

もし、３Dモデルがアニメーションを含むならば、これらはウインドウの右手の端にリストされます。それぞれのアニメーションはラウンドプレイボタンによってスタートします。(下記の図参照）

 

Wikitude SDKの中で、どのようにモデルパーツを使うのか、アニメーションするのかを討論するためには 3D Modelsを参照してください。

Wikitude 3D エンコーダー ：モデルパーツとアニメーションのリスト