H2MD(ムービーテクスチャ―)

株式会社アクセル様がサードパーティ"H2MD"をPlayCanvasに対応して頂き、使用可能となったムービーテクスチャ―です。.mp4もしくは.aviをコンバーターで.h2mdへ変換したデータをPlayCanvasのマテリアルとして使用します。

今回のタンクの場合は、ラインやマーク部分が光るようにしました。展開したemissive用のテクスチャをベースにして、Aftereffectでラインアニメーションを作成し、背景を透過した.mp4をコンバーターで.h2mdへ変換しました。

PlayCanvasへ適用

h2md.min.js : minify化されたPlayCanvasでH2MDを再生するためのライブラリです。

H2MDTexture.js : ENTITY内でマテリアル/.h2mdを指定するためのスクリプトです。

[H2MDTexture.js]

var H2MDTexture = pc.createScript('H2MDTexture');

H2MDTexture.attributes.add('materials', {
    type: 'asset',
    assetType: 'material',
    array: true
});

H2MDTexture.attributes.add('videoUrl', {
    type: 'string'
});

H2MDTexture.attributes.add('loop', {
    type: 'boolean',
    default: false
});

// initialize code called once per entity
H2MDTexture.prototype.initialize = function() {
    var video_file = this.app.assets.find(this.videoUrl);
    var video_path = video_file.getFileUrl();
    console.log(video_path);

    var app = this.app;

    // Create a texture to hold the video frame data
    var H2MDTexture = new pc.Texture(app.graphicsDevice, {
        format: pc.PIXELFORMAT_R8_G8_B8_A8,
        autoMipmap: false
    });
    H2MDTexture.minFilter = pc.FILTER_LINEAR;
    H2MDTexture.magFilter = pc.FILTER_LINEAR;
    H2MDTexture.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
    H2MDTexture.addressV = pc.ADDRESS_CLAMP_TO_EDGE;    
    
    this.upload=false;
    
	var video=new H2MD();
	video.error(function(error){ console.log(error); });

    var self=this;
	video.open_packed(video_path,function(){
        var videoCanvas = document.createElement("canvas");
        videoCanvas.width=video.info().width;
        videoCanvas.height=video.info().height;
        video.canvas(videoCanvas); //require h2md 1.3.1
                
        console.log(videoCanvas);
        H2MDTexture.setSource(videoCanvas);
        H2MDTexture.upload();
        
        for (var i = 0; i < self.materials.length; i++) {
            var material = self.materials[i].resource;
            material.emissiveMap = H2MDTexture;
            material.opacityMap = H2MDTexture;
            material.update();
        }

        if(self.loop){
            video.loop(0);
        }
        video.play();

        self.H2MDTexture = H2MDTexture;

        self.upload = true;
	});
};

// update code called every frame
H2MDTexture.prototype.update = function(dt) {
    if(!this.upload){
        return;
    }
    this.H2MDTexture.upload();
};

今回使用しているh2mdは、Emissive(発光)とOpacity(透過)を対象にしています。
54行目55行目で指定しています。

今回は既にスクリプトとマテリアル/.h2mdが適用された状態です。
スクリプト名の右側にある"ON"をクリックし、マークを"緑"にしてください。
launchしてみましょう。

こちらは2019InterBee用に作成したH2MDを使用したのコンテンツです。

チュートリアル - PlayCanvasで作った3Dブラウザゲームにリッチな演出を追加する

このセクションの記事

チュートリアル - PlayCanvasで作った3Dブラウザゲームにリッチな演出を追加する 9/10

H2MD(ムービーテクスチャ―)

コメント

このセクションの記事

H2MD(ムービーテクスチャ―)

関連記事