Amazon Sumerianで簡単な全天球画像ビューワーを作ってみる

Amazon Sumerianで簡単な全天球画像ビューワーを作ってみたので手順をメモしておく。
ビューワーは画像ファイルを選択すると周りを取り囲む球面に表示してマウスでグリグリと視点変更できるだけのもの。

作成手順

• シーンを作成する
• Spot Light Entityを追加する
• Default CameraのCamera ComponentのFollow Editor Cameraのチェックを外す
• Default CameraのScript ComponentでOrbitNPanControllScriptを削除してMouseLookScriptを追加する
• Default CameraのTransform Componentを以下のように設定する

	x	y	z
Translation	0	0	0
Rotation	0	0	0
Scale	1	1	1

• 以下からSphere100.fbxを入手しドラドラする
• No hack, no work • UnityとOculusで360度パノラマ全天周動画を見る方法【無料編】
• Assetsに追加されたSphere100.fbxのEntityをEntitiesにドラドラして追加する
• Sphere100.fbxのTransform Componentを以下のように設定する
• Rotationを設定しているのは全天球画像の中心をカメラの中心にするため
• RotationのYが-90でないのはSphere100の中心が微妙にずれているから(ただし正確な数字かはちゃんと検証していない)

	x	y	z
Translation	0	0	0
Rotation	0	-93.60165	0
Scale	100	100	100

• HTML Entityを追加する。
• HTML EntityのHTML ComponentのMove with Transformのチェックを外す
• HTML EntityのHTMLを以下のように編集する

<input type="file" id="inputfile">

• HTML EntityにScript Componentを追加して以下のようなCustom Scriptを設定する

'use strict';

function setup(args, ctx) {
    let input = document.getElementById("inputfile");
    input.addEventListener('change', (e) => {
        let file = e.target.files[0];
        let image = new Image();
        image.onload = () => {
             let material = args.target.meshRendererComponent.materials[0];
             material.setTexture('DIFFUSE_MAP' , new sumerian.Texture(image, {repeat: [-1, 1]}));
        } 

        image.src = URL.createObjectURL(file);
    });
}

var parameters = [
    {
        name: "Target",
        key: "target",
        type: "entity"
    }
];

• HTML Entityで追加したCustom Scriptのtarget parameterにSphere100.fbx配下のpSphere1_phong1を設定する(Sphere100.fbxではないことに注意)

ハマったところ

imageのロードタイミング

image.srcを設定した後すぐにsetTextureするとテクスチャが表示されずにグレイアウトしていた。
image.onload中でsetTextureするといけた。

あまりにハマったのでSumerianのSlackで質問したら解析してもらえた（自力解決したけど)。

テクスチャの左右の反転

そのままテクスチャを作成すると全天球画像の左右が反転するのでテクスチャ生成時にrepeatオプションをつけるとうまくいった。
これで本当に良いのかはわからないけどとりあえずこれでいってみる。

new sumerian.Texture(image, {repeat: [-1, 1]})