この記事はFirefoxOS Advent Calendar2013 20日目の記事になります。

関東FirefoxOS勉強会には1stの頃より参加しており、できるだけHTML5で増えたメディア系の発表をするように心がけています。

前回のLTの時に「inuchinさんの発表はいつも『動かなかった』で終わりますね」という言葉が突き刺さりましたので、釈明したいと思います。

なぜFirefoxOS 勉強会で発表するスライドが「〜できなかった」になるのかを釈明します

FirefoxOS=JavaScript関連の開発に関する発表がメインになってしまいがちです。

たしかに、アプリは作れないとイカンのですが、まず「そもそもモバイル端末(以下スマートフォン)として十分なの?」という所が気になっており、まず普及帯の最低限の端末が持つ機能はついていないとダメだよね、と考えています。

私が考えるスマートフォンに必要な機能は、

  • カメラ
  • コミュニケーション
  • 音楽
  • ビデオ
  • ゲーム

以上の5点になります。「写真を撮ってそれをTwitterやLineに投稿(通話は?)、暇な時は音楽やビデオが視聴できる。そしてLineゲームやパズドラ出来ないとね!」を満たすものがスマートフォンだと考えています。ほとんどの人はこれだけ動けば十分じゃないですか?

HTML5+CSS3の状況

HTML5ではメディア系のタグも増え、通信周りもajaxのみだけではなく、WebRTCでP2Pが可能になりました(STUNやRTUNなどの障害は残っています)。

  • カメラ → getUserMedia系(よく調べてません)
  • コミュニケーション → WebRTC
  • 音楽 → Audioタグ
  • ビデオ → Videoタグ
  • ゲーム → CSS3 or WebGL

という感じで、技術的にはスマートフォンできるよね。じゃぁ、実際にHTML5+CSS3+JavaScriptをデバイス上で動かしてどこまでイケるのか、限界を攻めてみないと駄目でしょう!ということで、メディア系のタグを使った紹介を行っています。

関東FirefoxOS勉強会 2nd 「3次元のJSをおさわりする」

まずは3Dを触るということで、Web系の人は3D座標系のお作法からスタートするのがいいかな?ということで、WebGL本体の説明はせず、three.jsを使い、右手座標系や、右ねじの法則、角度→ラジアンへの変換公式などを説明。

また、カメラには上下や回転の概念があること(YRP=Yaw Roll Pitch 横須賀のアレじゃない)、画角や描画の範囲などを説明しました。

そして、すでにこの1回目から、実機(KEON)でやたら遅いという不具合が出ます。これは2回目にOpenGLを直接叩いた時に判明したのですが、three.jsがOpenGLをnativeで使えない場合は、CSS3のtranslateプロパティで描画をしてくれる為、Zソートが発生してやたら遅くなっていたようです。

関東FirefoxOS勉強会 3rd 「MikuMikuDance for FxOS」

前回の発表が初心者向きすぎたということで、いきなり高難易度に進み、WebGLとOpenGLの違いについて説明。

WebGL1.0のベースになっている、OpenGL ES2.0との差異について説明。結構大きいのは、NPOT(256×256とか1024×1024でしかテクスチャが生成できない)問題で、デスクトップ向けブラウザならば、VRAMにもある程度の容量があるのでこの制限はそんなに大変ではないのですが、VRAMがGPUダイに載っているようなスマートフォンでは大問題です。

これに対処するためには、256×256や1024×1024の2のべき乗(2pow)サイズテクスチャを作成し、その中にパズルのようにグラフィックを配置していきます。CSSのスプライトシートを作成した事がある人ば、まったく同じ作業であることがわかります。

この時、3Dレンダリングの補間方法の都合で、スプライト同士を1ピクセルの隙間を空けて配置する必要があります。これはバイリニア・ニアレストネイバーといった単語で検索してください。

さて、デモではMMD.jsをベースに行いました。MMD.jsはdrawElements(…)をコールするPureなプログラムです。「ドローコール」という単語が出てくるときには、このようなメソッドが呼び出されてGPUに対して描画を命令しています。MMD.jsはthree.jsのようにWebGLのサポート状態の自動判定を行ってくれません。

結果としては、Core i5のWindows上のFirefoxOSシミュレーターで20fpsほど。実機ではKEONは起動すらせず端末を完全フリーズさせ、NexusSでは3fps程度といった結果になりました。

MMD.jsではマテリアル別にソートされた頂点を描画していきます。描画時にはすでにソート済みのデーターになります。半透明を含むマテリアルのZソート処理は入っていません。Zバッファを使った単純な描画になります。またセルフシャドウを実現するためにShadowMapを使用しています。CSMやLSPSMといった高度なシャドウマップではありません。

  1. シャドウマップ作成
  2. マテリアルレンダリング(トゥーンシェーダー+シャドウマップ)
  3. エッジ描画(ポリゴンを法線方向に膨らませて裏面を黒描画)

と、レンダリング的にはあっさりとしています。性能が出ていないところの分析ができていないため、非常に中途半端になってしまいました。

関東FirefoxOS勉強会 5th 「FirefoxOSでCoverFlowをつくってみた(かったんや)」

前回がWebGLを使ってうまく行きませんでしたので、今回はCSSのTransformを使って3D表現に挑戦+Videoタグの実際の性能をテーマにしてみました。

まず、Transformでy軸回転を行い、Perspectiveで透視変換をつけます。ここで問題が発生しまして、css3のtransformやperspectiveにはカメラと視垂台の設定が殆どできず、視垂台のZ方向の大きさ(だと思います)を指定することしかできません。

ですので、「カメラをパン」といった動作は、「カメラをパンさせる行列」の逆行列(ビュー変換行列)をすべてのオブジェクトにかけてあげればOKです。多分。

この「CoverFlowを作る」も途中で挫折したのですが、単純に設計が悪かったのと、時間不足が原因です。

cssのtransformに関してはFirefoxOSの基礎技術になっていますので、安定した動作をしました。

思った以上にダメだったのがVideoタグの特性です。Videoをプレビュー再生しながら一覧に出す、ということをやってみたら、PC上では問題無く動くのですが、実機で動かした途端に、あまりにも重くて操作不能になってしまいました。

これは、Videoタグはストリーミング再生を行っているのですが、ビットレートが高いためSDにアクセスする帯域を使いきってしまったようです。PCではファイルキャッシュなどが有効に効いているためになかなかきがつかないのですが、スマートフォンではこの問題が顕著に現れます。

これはゲームプレイ中のBGMに高bpsのものをメディアから再生しようとすると同じことが発生することになります。

背景にムービーを流す、みたいな使い方をするときは「繰り返し・オンメモリ」を心がけないとダメでしょう。ここらへんはOS側にサポートを入れてほしいところです。

まとめ(いいわけ)

3回に渡って「どうせまともに動きっこない」ぐらい負荷をかけてみる、難しいことをしてみる、という挑戦だったのですが、やはりハードウェアに直結している部分はまだまだ完成度が低い印象です。ここはW3Cの標準化が対処できる部分ではなく、ハードウェアメーカーがどれだけ提供してくれるか(いまはバイナリを提供してもらうのでせいいっぱいの模様)がキーになってきそうです。

H.264については、CISCOが権利料を負担してユーザーにデコーダーを提供してくれる、ということが起こったりもしていますので、時間をかければ解決したりする部分もあるのかもしれません。

3D関係については…なかなか難しく、同じARMアーキテクチャでも、GPUが違う、ということもよくあります。代表的なものでも、PowerVR SGX・Mali・Tegraなどというように、サポートしている機能が微妙に違ったり、出力や使い方が他のチップと違う、といったこともよくあります(これはデスクトップでも同じです)。

残るタグはAudioタグ

残るタグはAudioタグとなりました。残念ながら私が調べたところでは、まだoutputのみで、inputはgetUserMediaから取得しFFTなどで周波数を取得して、BGM再生時のエフェクトなどに適用…という方向性のようです。JavaScriptでFFTが現実的な速度で動くか…はまだわかりません。

このFirefoxOS Advent Calendar2013中にもAudioタグについての記事があるみたいですので、そちらに期待…!

 

21日目の記事は Masayoshi Wada さんです。