3.7.1 AR重畳表示定義の作成

AR重畳表示アプリケーションにて重畳表示を行う場合、JavaScriptライブラリにてAR重畳表示定義をネイティブAR表示層に設定する必要があります。AR重畳表示定義の作成方法はJavaScriptライブラリを利用して1から作る方法と、AR実行サーバに登録したデータを変換する方法があります。

AR重畳表示定義はJavaScriptライブラリのAR.Renderer.SuperimposedGraphicクラスで表現されます。AR.Renderer.SuperimposedGraphic オブジェクトを作成して必要なプロパティをセットしてください。

例

テキストテクスチャ作成の場合

//AR重畳表示定義オブジェクトを作成します。
var superimposedGraphic = new AR.Renderer.SuperimposedGraphic();
//投影タイプを設定します。
superimposedGraphic.setProjectionType(AR.Renderer.SuperimposedGraphic.ProjectionType.ORTHO2D);

//移動座標オブジェクトを作成します。
var translation = new AR.Renderer.Point();
translation.setX(1);
translation.setY(1);
translation.setZ(1);
//AR重畳表示定義に移動座標を設定します。
superimposedGraphic.setTranslation(translation);

//回転座標オブジェクトを作成します。
var rotation = new AR.Renderer.Point();
rotation.setX(0); //X座標方向
rotation.setY(0); //Y座標方向
rotation.setZ(0); //Z座標方向
//AR重畳表示定義に回転座標を設定します。
superimposedGraphic.setRotation(rotation);

//タップアクション(URLアクション)オブジェクトを作成します。
var urlAction = new AR.Renderer.URLAction();
urlAction.setSrc(“http://…”); //タップアクションで動作させたいURLを指定します。
//AR重畳表示定義にタップアクションを設定します
superimposedGraphic.setClickAction(urlAction);

//グラフィックオブジェクトを作成します。
var squareModelGraphic = new AR.Renderer.SquareModelGraphic();
//スケールオブジェクトを作成します。
var scale = new AR.Renderer.Point();
scale.setX(1); //X座標方向
scale.setY(1); //Y座標方向
scale.setZ(1); //Z座標方向
//グラフィックにスケールを設定します。
squareModelGraphic.setScale(scale);

//テクスチャオブジェクト(テキストテクスチャ)を作成します。
var textTexture = new AR.Renderer.TextTexture();
textTexture.setBackgroundColor(4294951104);
textTexture.setColor(4289724416);
textTexture.setFontSize(20);
textTexture.setText(“テキスト”);
textTexture.setWordWrap(true);
//サイズオブジェクトを作成します。
var size = new AR.Renderer.Size();
size.setWidth(160); //テクスチャの幅
size.setHeight(80); //テクスチャの高さ
//テクスチャにサイズを設定します。
textTexture.setSize(size);

//グラフィックにテクスチャを設定します
squareModelGraphic.setTexture(textTexture);

//AR重畳表示定義にグラフィックを設定します。
superimposedGraphic.setGraphic(squareModelGraphic);

イメージテクスチャ作成の場合
イメージを使う場合はイメージテクスチャオブジェクトを作成し、グラフィックに設定してください。

//テクスチャオブジェクト(イメージテクスチャ)を作成します。
var imageTexture = new AR.Renderer.ImageTexture();
imageTexture.setSrc("http://…"); //重畳表示したい画像のURLを指定してください。

//グラフィックにテクスチャを設定します
squareModelGraphic.setTexture(imageTexture);

qvalueの取得/検索やquadの検索でarpoiarmk_defaultテーブルのarpoi_superimposedgraphic属性に登録してあるJSON文字列を取得してください。AR.Renderer.parseSuperimposedGraphic()を使用してAR.Renderer.SuperimposedGraphicオブジェクトに変換してください。

参照

ARデータ管理からデータを取得する方法は3.3 AR実行サーバのデータ操作を参照してください。

AR重畳表示定義を指定して重畳の内容を変更したいときや、指定したAR重畳表示定義のみを表示させたい場合は、目的のAR重畳表示定義を特定する必要があります。AR重畳表示定義IDは一意な値を持っており、データ管理コンソールでAR重畳表示定義を作成した場合は自動採番されます。任意の値を使用したい場合はAR重畳表示定義名にユニークな名前をつけてください。

ユーザー定義データを使用してAR重畳表示コンテンツの表示を変更したい場合、AR.Renderer.SuperimposedGraphicオブジェクトとして作成したAR重畳表示定義の変更したい要素を編集してください。

例

AR重畳表示コンテンツの表示文字を変更したい場合

//SupierimposedGraphic -> SquareModelGraphic -> TextTexture のTextを編集
SuperimposeGraphic.getGraphic().getTexture().setText(“表示したい文字列”);

AR重畳表示コンテンツの画像を変更したい場合

//SupierimposedGraphic -> SquareModelGraphic -> ImageTexture のSrcを編集
SuperimposeGraphic.getGraphic().getTexture().setSrc(“表示したい画像のURL”);

3.7.1 AR重畳表示定義の作成

3.7.1.1 JavaScriptライブラリのクラスを利用して作成

3.7.1.2 AR実行サーバから取得

3.7.1.3 AR重畳表示定義の特定

3.7.1.4 ユーザー定義データの組み込み