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

Amazon Sumerianで簡単な全天球画像ビューワーを作ってみたので手順をメモしておく。
基本的にAmazon Sumerianで簡単な全天球画像ビューワーを作ってみる - Qiitaの動画版。
SumerianのSlackで動画のテクスチャを動的作成するコードがのっていたのでやってみた。
これでWebRTCの再生もできるんじゃないだろうか。

作成手順

Amazon Sumerianで簡単な全天球画像ビューワーを作ってみる - Qiitaの手順と同じでスクリプトだけを以下のように変更する。

'use strict';

function makeVideo(url) {
    let video = document.createElement('video');
    video.crossOrigin = 'anonymous';
    video.src = url;
    video.muted = true;
    video.autoplay = false;
    video.loop = true;
    video.oncanplay = function(ctx) {
        video.width = video.videoWidth;
        video.height = video.videoHeight;
    };
    return video;
}

// The sumerian object can be used to access Sumerian engine
// types.
//
/* global sumerian */

// Called when play mode starts.
//
function setup(args, ctx) {
    let input = document.getElementById("inputfile");
    input.addEventListener('change', (e) => {
        let file = e.target.files[0];

        ctx.video = makeVideo(URL.createObjectURL(file));

        var videoMat = args.target.meshRendererComponent.materials[0];
        var texture = ctx.texture = new sumerian.Texture(null, {
            generateMipmaps: false,
            minFilter: 'BilinearNoMipMaps',
            repeat: [-1, 1],
        });
        texture.updateCallback = function () {
            return texture.image && !texture.image.paused;
        };
        texture.readyCallback = function() {
            return texture.image && texture.image.readyState === 4;
        };
        texture.setImage(ctx.video);
        videoMat.setTexture('DIFFUSE_MAP', texture);
        args.target.meshRendererComponent.materials[0] = videoMat;
        ctx.material = videoMat;
        ctx.video.play();
    });
}

// Called when play mode stops.
//
function cleanup(args, ctx) {
    ctx.video = null;
}

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