Edited at
SpeeeDay 9

AWS SumerianでARアプリを作る


AWS Sumerianとは

1行で


  • ブラウザ上でUnityみたいなものが動くサービス。

https://aws.amazon.com/jp/sumerian/


賞金総額$10,000のコンテストで作品を募集中とのこと

https://amazonsumerian.devpost.com/

賞金目指してARアプリを作るための技術検証をしてみた記事です


参考リンク


概念

だいたいこんな責任分割


  • Sumerianの仕事


    • 3Dのコンテンツ/物理エンジン/ゲームなどのスクリプト



  • iosの仕事


    • カメラから現実空間から平面など検出してARAnchor生成し、現実と対応する座標を作る

    • ARAnchorの子要素としてSumerianの3Dオブジェクトを張り合わせる




特徴


コンテンツの更新性


  • Web側で更新することで表示するコンテンツやゲームのロジックを更新できる


os固有の検知機能を利用可能


  • 現実空間から特徴検知してARAnchorを作るまでは引き続きOS側で行えるのでios固有の検知機能を組み込んだARアプリの開発が可能


画像検知を実装する


ImageTrackingの組み込み[ios]

サンプルコードはARWorldTrackingConfigurationになっているがiOS12で追加された高速な画像検知を使いたい場合はARImageTrackingConfigurationに差し替えことも可能。こちらは複数の画像の同時検出も可能。


ViewController.swift

    let configuration = ARWorldTrackingConfiguration()

configuration.detectionImages = referenceImages
configuration.planeDetection = .horizontal
configuration.isLightEstimationEnabled = true
return configuration


  • ARImageTrackingConfiguration


ViewController.swift

    let configuration = ARImageTrackingConfiguration()

configuration.trackingImages = referenceImages
configuration.isLightEstimationEnabled = true
return configuration


検知用の画像を設定する[XCodeで作業]


Assetsに画像をつっこむ

スクリーンショット 2018-12-04 11.14.03.png


  • 初期値でSizeが0になっているので現実の大きさに合わせて設定する。1が1メートルなので注意。


Assets名からreferenceImagesを生成


ViewController.swift

        guard let referenceImages = ARReferenceImage.referenceImages(inGroupNamed: "AR Resources", bundle: nil) else {

fatalError("Missing expected asset catalog resources.")
}


テスト

以上でARとして動くようになるはずなのでテストします


検知できた

IMG_1845.PNG

IMG_1846.PNG


仕上げ


画面でタップしたポイントからAnchorを作る

チュートリアルのサンプルコードが間違っていて以下の修正が必要

画面でタップしたところと検査する座標が上下左右逆になっている



 // Touch handler. Performs a hit test at the currrent screen location.

ctx.performHitTest = function(evt) {
var pixelRatio = ctx.world.sumerianRunner.renderer.devicePixelRatio;
var normalizedX = 1 - (evt.pageX * pixelRatio / ctx.viewportWidth);
var normalizedY = 1 - (evt.pageY * pixelRatio / ctx.viewportHeight);

arSystem.hitTest(normalizedX, normalizedY, ctx.hitTestCallback);
};



 // Touch handler. Performs a hit test at the currrent screen location.

ctx.performHitTest = function(evt) {
var pixelRatio = ctx.world.sumerianRunner.renderer.devicePixelRatio;
var normalizedX = evt.pageX * pixelRatio / ctx.viewportWidth;
var normalizedY = evt.pageY * pixelRatio / ctx.viewportHeight;

arSystem.hitTest(normalizedX, normalizedY, ctx.hitTestCallback);
};


デバッグモードだとAnchorのところにCubeが表示されるので消す

フラグをfalseに変えるだけ。


ViewController.swift

createDebugNodes = false


結果ARのコンテンツが全て表示されなくなるバグを見つけたので

修正するPR作成 (マージされたようです)

https://github.com/aws-samples/amazon-sumerian-arkit-starter-app/pull/8


まとめ

以上で最低限ARのコンテンツを触るための技術が検証できました。

後はコンテストに向けてコンテンツを拡充していくだけです。

コンテストの締切は2019/01/08ですのでそこまで頑張って行きたいと思います。