2010年11月11日木曜日

WebGLと動画とテクスチャと

WebGL絡みの話です.



WebGLではテクスチャに以下の4種類が使用可能です(参考1).
  1. ImageData
  2. HTMLImageElement
  3. HTMLVideoElement
  4. HTMLCanvasElement
このうちImageData以外は既にChromiumで動作を確認しています.
何のライブラリも使わずに動画をテクスチャとして使用できるのは素晴らしいことであります.
(ただし,どのソースを使う場合も2の累乗のテクスチャサイズである必要があるようです.)

ですが,ご存知のようにHTML5のVideoは動画コーデックでもめています.
具体的には以下の3つ.
  1. H.264
  2. Theora
  3. VP8
それぞれの特徴についてはよく分かりませんがTheoraの画質が他の2つに比べて低いというかんじはします.
となると結構前から高画質と評判なH.264を使用するのがよいと思われますが例によって動画コーデックでもめているためブラウザの実装にも違いが出ています(参考2).
というのもH.264は利用に特許料が必要らしく『自由なブラウザ開発の妨げになるかも?』という理由からまだ『実装必須』にはいたっていないようです.
そのH.264ですがMicrosoft及びAppleが支持していて,AppleはH.264以外を実装する様子もなさそうです.
一方でMozillaはH.264を実装する様子がありません.
Googleはとりあえず『全部実装してます』.パネェです.
(余談だがDOMもIEの独自拡張なんかも実装してたりするので本当にパネェです.)

そんな中,誕生したのがGoogleによるWebM(VP8, Vorbis)です.画質もなかなかいいらしいです(よくわからない).
特許料もいらないらしいです(じつは特許料が要るって噂も聞いたことが).
最初はChromeだけの実装でしたが,Firefoxもあとを追うように実装しています.

で,ここからがエンコードの話.ご存知ffmpegを使用します.初挑戦.
エンコードする動画ソースを持っていなかったため実験する機会がなかったのです,ハイ.
本日,ちょうどいい動画ソースを手にいれたのでとりあえずエンコードしてみました.
(権利者が許可を出さないので公開できないのが残念ですが><)

動画に使用したコマンドは以下の通り,ぶっちゃけいってオプションの意味よくわかってません.
参考にしたのはニコニコ動画のまとめWikiMobileHackerz Knowledgebase Wiki
ffmpeg -y -i "PV3.wmv" -pass 1 -f webm -vcodec libvpx -b 400k -r 29.97 -g 150 -qcomp 0.5 -qmin 1 -qmax 51 -qdiff 4 -subq 6 -me_range 16 -i_qfactor 0.8 -s 512x384 -deinterlace -passlogfile "PV3.webm.log" -an "PV3.webm"
ffmpeg -y -i "PV3.wmv" -pass 2 -f webm -vcodec libvpx -b 400k -r 29.97 -g 150 -qcomp 0.5 -qmin 1 -qmax 51 -qdiff 4 -subq 6 -me_range 16 -i_qfactor 0.8 -s 512x384 -deinterlace -passlogfile "PV3.webm.log" -acodec libvorbis -ab 128k -ar 44100 "PV3.webm"

ffmpeg -y -i "PV3.wmv" -pass 1 -f ogg -vcodec libtheora -b 400k -r 29.97 -g 150 -qcomp 0.5 -qmin 1 -qmax 51 -qdiff 4 -subq 6 -me_range 16 -i_qfactor 0.8 -s 512x384 -deinterlace -passlogfile "PV3.ogg.log" -an "PV3.ogg"
ffmpeg -y -i "PV3.wmv" -pass 2 -f ogg -vcodec libtheora -b 400k -r 29.97 -g 150 -qcomp 0.5 -qmin 1 -qmax 51 -qdiff 4 -subq 6 -me_range 16 -i_qfactor 0.8 -s 512x384 -deinterlace -passlogfile "PV3.ogg.log" -acodec libvorbis -ab 128k -ar 44100 "PV3.ogg"

ffmpeg -y -i "PV3.wmv" -pass 1 -f mp4 -vcodec libx264 -b 400k -r 29.97 -g 150 -qcomp 0.5 -qmin 1 -qmax 51 -qdiff 4 -subq 6 -me_range 16 -i_qfactor 0.8 -s 512x384 -deinterlace -passlogfile "PV3.mp4.log" -an "PV3.mp4"
ffmpeg -y -i "PV3.wmv" -pass 2 -f mp4 -vcodec libx264 -b 400k -r 29.97 -g 150 -qcomp 0.5 -qmin 1 -qmax 51 -qdiff 4 -subq 6 -me_range 16 -i_qfactor 0.8 -s 512x384 -deinterlace -passlogfile "PV3.mp4.log" -acodec libfaac -ab 128k -ar 44100 "PV3.mp4"

で,実際にFirefoxとChromeとIEで再生してみましたが参考2の通りの結果になりました.
ただ,Firefox4 beta6で再生を試してみたのですがストリーミング再生は未実装なのか,ローカルファイルのみ再生に成功という結果に.
エンコードやりなおしてみたら普通に再生できた,あれー?

開発中のWebGLライブラリも動画をテクスチャにする機能を備えてはいるのですが,WebGLの対応がないIEは無視するとしても動画をテクスチャとして使用する場合どのコーデックを選べばいいのか,本当に頭が痛いです.

近いうちに動画テクスチャのデモを見せられるといいなぁ.

11月12日 修正
oggのqmaxオプションを15→51に.

1月7日 追記
動画テクスチャのデモへのリンクを追加

0 件のコメント:

コメントを投稿