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ブラウザゲームにリッチな演出を追加する 1/10
チュートリアル - PlayCanvasで作った3Dブラウザゲームにリッチな演出を追加する 2/10
チュートリアル - PlayCanvasで作った3Dブラウザゲームにリッチな演出を追加する 3/10
チュートリアル - PlayCanvasで作った3Dブラウザゲームにリッチな演出を追加する 4/10
チュートリアル - PlayCanvasで作った3Dブラウザゲームにリッチな演出を追加する 5/10
チュートリアル - PlayCanvasで作った3Dブラウザゲームにリッチな演出を追加する 6/10
チュートリアル - PlayCanvasで作った3Dブラウザゲームにリッチな演出を追加する 7/10
チュートリアル - PlayCanvasで作った3Dブラウザゲームにリッチな演出を追加する 8/10
チュートリアル - PlayCanvasで作った3Dブラウザゲームにリッチな演出を追加する 9/10
チュートリアル - PlayCanvasで作った3Dブラウザゲームにリッチな演出を追加する 10/10
コメント
0件のコメント
サインインしてコメントを残してください。