🌗
Babylon.js 透過を持つ動画をVideo Textureで表示したい。
やりたいこと
やりたいことはこういうことです。
できてますね、Babylon.js の Video Texture は mp4 と webm に対応しています。
mp4 はアルファチャンネルを持つことはできませんが webm はアルファチャンネルを持つことができるので emissiveTexture と opacityTexture に同じ VideoTexture を設定してあげれば透過部分が透過されて表示されます。
webm は動画編集ソフトの書き出しに対応されていないと思いますが、僕の場合 davinci resolveで AVI フォーマット、コーデックを Grass Velley で書き出したあと、ffmpeg で webm に変換して表示ができました。
問題点
しかしこのままだと Apple デバイスで問題があります。
上記の Playground を表示してみればわかりますが、 mac の safari では アルファチャンネルを認識しないのか、透過されずに黒い背景が表示されてしまいます。
また、ios の safari では webm に対応していないのでそもそも表示されません。
回避方法
クロマキー合成で抜く
このプレイグラウンドで使っている動画ファイルは webm ですがグリーンバックにした mp4 を使えば背景抜いて safari でも表示できます。
ピクセル輝度から alpha を取得して抜く
videoTexture.getAlphaFromRGB = true; にすることでピクセル輝度が低い部分が透過されます
このクマさんはちょっと暗いので透けちゃってますが明るく黒い部分がない素材ならこれで良いと思います。
黒い部分がある動画については背景以外を白抜きにした動画を用意して opacityTexture に設定すれば良いと思います。
Discussion