透過動画の作成方法

Webアニメ―ション

blenderで作ったアニメを透過で書き出したいときのメモです。

透過動画ファイル形式

blenderで動画書き出しをしていると、透過動画を作りたいときがあるんですが、基本的にmp4は透過動画に対応してないようで、作ることができません。コンテナをQuickTimeとかAVIにするとイケるという記事も見たのですが、それは他の動画編集ソフトで編集する前提というか、windowsでは動きません。ブラウザで透過動画を動かしたい場合は以下の手段が大体のメジャーな手段なのではないかと思います。

webM動画(macではQuickTime動画)・・・容量が軽い。対応していないブラウザがあるため2種類用意する必要がある

GIF動画・・・容量が重い、色数が少なく画質が劣化する。古くからある形式なのですべてのブラウザに対応。

APNG動画・・・GIFの上位互換?画質は綺麗だけど容量が少し重い。メインブラウザはほぼ対応している

今回調べてみるまでAPNG動画というものを知らなかったのですが、テストしてみると透過動画にありがちなまわりの白いギザギザみたいなジャギもなく、とても綺麗でした。

ちなみに今回は動画・音声ファイル記録・変換・再生フリーソフトウェアのFFmpegを使いました。

FFmpegで書き出し

FFmpegのフリーソフトを使って、コマンドプロンプトで書き出しをしていきます

最初に自分はblenderで透過png連番画像を作成してフォルダにまとめておきました。

レンダープロパティでFilm > Transparentにチェック。

その下のTransparent Glassにチェック入れてみるとどうなるかもやってみました。多分ガラスの半透明とか透明部分も透過してくれる設定だと思います。

webM動画書き出し

まずcdコマンドで連番画像があるフォルダに移動します。以下設定をしてコマンド入力します。

ffmpeg -framerate 24 -i %04d.png -c:v libvpx-vp9 -b:v 0 -crf 30 -pix_fmt yuva420p output.webm

-framerate 24・・・フレームレート設定。24にしてます。

-i %04d.png・・・ファイルの名前パターン。0001.pngなど4桁表記の場合

-c:v libvpx-vp9・・・vp9コーデック使用してエンコード

-b:v 0・・・ビットレートを設定しない(CRFモードを使用)

-crf 30・・・CRFモード。30に設定。0が最高品質(高:18~23 中:24~30 低:31以上)

-pix_fmt yuva420p・・・αチャンネルを含むフォーマット指定

output.webm・・・出力ファイル名です。

※出力ファイルは現在地のフォルダにできます

APNG動画書き出し

apng動画書き出しのコマンド

ffmpeg -framerate 24 -i %04d.png -c:v apng -plays 0 -pix_fmt rgba output.apng

-framerate 24・・・フレームレート設定。24にしてます。

-i %04d.png・・・ファイルの名前パターン。0001.pngなど4桁表記の場合

-c:v apng・・・APNG形式でエンコード

-plays 0・・・ループカウンタを無効にする(無限ループさせたいので)

-pix_fmt rgba・・・ピクセルフォーマットをRGBAに設定

output.apng・・・出力ファイル名です。

※出力ファイルは現在地のフォルダにできます

※webM動画はvideoタグを使ってループを制御できるのですが、apngは動画書き出し時にループ設定をしておかないといけないみたいで、デフォルトだと一回再生になっているようです。このデフォルト設定を無効にすることでループ再生が可能になります。-loop -1という、ループ回数を決める設定値もあって、そこにー1を設定するというやり方はうまくいきませんでした。

gif動画書き出し

一応gif動画書き出しコマンドです。

ffmpeg -framerate 24 -i %04d.png output.gif

上記のものと設定は同じものがあり、gif動画はデフォルトでループするようになっているらしいのでその他設定はなしです。

比較・検証

下がwebM動画です。

1.48Mbです。そのまま書き出してもこのくらいなのでキレイに書き出せると思います。Transparent Glassにチェックしたもので、ちゃんとガラスが透過して、下の背景も見えます。

ちなみにTransparent GlassにチェックなしのwebM動画が下です。

グレーというか、おそらくblenderでの背景色がそのまま入ってるんじゃないでしょうか。ガラス透過なしだと626Kbという軽さなので、ガラス透過なしの場合はチェックは外すべきですね。とても重くなります。

そして下のものがgif動画です。

apng動画を貼りたかったんですが、wordpressはこのファイル形式に対応していませんでした…。なので仕方なくgif動画です。apng動画は書き出した時点で25Mbになってしまい、そもそも投稿できるファイル容量を超えていて、なんとか画像を圧縮しても7Mbくらいになってしまいました。LINEなどのスタンプで使われているファイル形式らしく、あのくらい小さなサイズ+短いアニメでないと使用するのは厳しそうです。gif動画もですね、圧縮してこれで6Mbになってしまっています。さらに、圧縮してしまったからか、ガラス透過もなくなってしまいました。

基本的にワンポイントなどでないアニメーションや動画などは、GIFは容量が大きくなりすぎる傾向があるため、mp4やその他動画形式の方が推奨されているようです。用途に応じて最適な動画形式を選ぶ必要がありそうです。