Try WiMAX試してみた / magicien　

ネットが使えない環境なのが耐えられなかったため、Try WiMAXを申し込みました。

電波は悪いですが、なんとかネットができる環境になって一安心。
これで15日間は無料でネットができます。
3月中にアプリを公開しようか...とも思いましたが、明日大事な用があるので、早めに寝ます。
今週末あたりにアプリを動作させている動画だけでもアップしようかと考え中。

　更新しばらくできないかも / magicien　

引っ越しのため、更新がしばらくできないかもしれません。

ネットワーク環境が整うのに一ヶ月ほど（！）かかりそうなので、
その間、サイトの更新ができないかもしれません。
WebGLのアプリを3月中に公開したかったのですが。むむむ...

とりあえず、WebGLについては、もう少し完成度を上げてから公開することにします。
遅くとも、4月中にはアップしようと思います。
その頃にはブラウザの実装も進んでいるといいなぁ。

　HTML5のAudio / magicien　

HTML5のAudioを使ってみた。

VideoやAudioは、まだまだ実装途中のようで、足りない機能やバグが多々あるようです。
とりあえず、手元にあるWebKitのr56669で動くものを作ってみました。

Time:
Volume: 100％
playボタンで再生開始、pauseで一時停止。
曲は、言わずと知れた、supercellの「ワールドイズマイン」です。

---

追記：Safariなら動くっぽい。スライダにちゃんとした画像を付けてきれいにしたいなぁ。

　WebGLを動作させるためのブラウザをインストールする方法（Win編） / マルパチ　

久しぶりの投稿になってしまいました。マルパチです。

さてmagicienからWebGLの動作環境の導入法について書いてくれと頼まれました。
ところが私のマシンではChromium(Chromeの開発版)でWebGLが起動できず、WebKit(Safariの開発版)に至ってはそもそもアプリケーションが起動しません(爆)

しかしMinefield(FireFoxの開発版)は問題なくWebGLの起動に成功したので、とりあえずMinefieldのインストール方法についてのみ書くことにします。
ChromiumとWebKitについては導入に成功し次第、追記することにします。


Minefield（Firefoxの開発版）のインストール方法


下記URLからWin用のパッケージ（firefox-3.7a4pre.en-US.win32.installer.exe）をダウンロードします。 http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

WebGLを動作させるためにMesa software OpenGLが必要になるので以下のURLからダウンロードします。
http://people.mozilla.com/~vladimir/webgl/webgl-mesa-751.zip
ダウンロードした「webgl-mesa-751.zip」を解凍すると中に「osmesa32.dll」が入っています。
Cドライブにtempフォルダを作成し、osmesa32.dllをフォルダの中にコピーしてください。

ここでようやくMinefieldを起動します。
Minefieldのアイコンをダブルクリックして起動してください
URL入力欄に「about:config」と入力します。
すると、警告画面が表示されるので、「I'll be careful, I promise!」というボタンをクリック。
設定一覧がダーッと表示されるので、Filterにwebglと入力して「webgl.enabled_for_all_sites」を探してください。
「webgl.enabled_for_all_sites」を選び、ダブルクリックします。
webgl.enabled_for_all_sitesのValueが「true」に変更されるはずです。
次に同じ設定一覧の中から「webgl.osmesalib」を選び、ダブルクリックします。
「enter string value」というウィンドウが出てくるので、「C:\temp\osmesa32.dll」と入力して先ほどのosmesa32.dllを指定してください。

設定は以上で完了です。
これで、MinefieldでWebGLが動作するようになります。


ていうかMacの方が簡単そうですね。普及率はWindowsの方が高いのに。
以下のサンプルURLへ行き、自転する地球が表示されれば導入成功です。
http://webos-goodies.googlecode.com/svn/trunk/blog/articles/getting_started_with_webgl/webgl_sample.html

　WebGLを動作させるためのブラウザをインストールする方法（Mac編） / magicien　

MacでWebGLを動作させる方法。

現在、WebGLが動作する環境は、WebKit、Minefield、Chromiumの3つ。
いずれも開発版なので、バグやらセキュリティホールやらがあるかもしれません。
インストール、実行する場合は、自己責任で行うようお願いします。
3つとも既存のブラウザの開発版であり、場合によっては正規版のブラウザに影響を及ぼす場合があります。
インストールの前に、ブラウザの設定やデータをバックアップしておくことをお勧めします。
あるいは、普段使っていないブラウザの開発版を利用すると良いかもしれません。

WebKit（Safariの開発版）のインストール方法

下記URLから、Mac用のものをダウンロード。
http://nightly.webkit.org/
ダウンロード後、WebKitのアイコンを「アプリケーション」フォルダにドラッグ＆ドロップ。

次に、ターミナルを起動し、

defaults write com.apple.Safari WebKitWebGLEnabled -bool YES

というコマンドを実行。
これで、WebKitでWebGLが動作するようになる。

Minefield（Firefoxの開発版）のインストール方法

下記URLからMac用のパッケージ（例：firefox-3.7a4pre.en-US.mac.dmg）をダウンロード。
http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/
ダウンロード後、Minefieldのアイコンを「アプリケーション」フォルダにドラッグ＆ドロップ。

次に、Minefieldを起動、URL入力欄に「about:config」と入力。
すると、警告画面が表示されるので、「I'll be careful, I promise!」というボタンをクリック。
設定一覧が表示されるので、その中から、「webgl.enabled_for_all_sites」を選び、ダブルクリックする。
（Filterにwebglと入力すると、項目が絞り込まれるので探しやすい。）
webgl.enabled_for_all_sitesのValueが「true」になっていればOK。
これで、MinefieldでWebGLが動作するようになる。

Chromium（Chromeの開発版）のインストール方法

下記URLからMac用のパッケージ（chrome-mac.zip）をダウンロード。
http://build.chromium.org/buildbot/continuous/mac/LATEST/
ダウンロード後、Chromiumのアイコンを「アプリケーション」フォルダにドラッグ＆ドロップ。

次に、以下のコマンドでChromiumを起動（コマンドによる起動は毎回必要）。

/Applications/Chromium.app/Contents/MacOS/Chromium --enable-webgl

すると、ChromiumでWebGLが動作する。
もしローカルファイルにアクセスする場合は、--allow-file-access-from-filesのオプションも付けて起動する。

実際に使ってみたところ、動作スピードは、
Safari ＞ Chromium ＞ Firefox
といったところ。Firefoxはちょっとカクカクだったり、動作が変だったりしましたが、
SafariとChromiumは割とサクサク動作しました。

---

2010/08/10 追記：
Chromiumの起動オプションを修正。
なんだかChromiumでのWebGLの表示が変だ...

　スキンメッシュアニメーション3 / magicien　

だんだん完成に近づいてきた...

結局、ボーン毎にグループ化して、グループ毎に描画、ということにしました。
GPUで頂点ブレンディングするとなると、頂点の座標やら法線やらはJS側で変更する必要がないので、
初期化のときに一度バッファにデータを入力すれば良いわけです。
計算量も減るし、メモリにデータが載れば、データ転送量も減って、高速化に大きな効果が。

実際に実装してみて、どれくらい速くなったかというと、約1.5倍。
前々回、Safariでfpsが20くらいと書きましたが、これは関数呼び出しの周期を50msにしていたせいでした。
周期を10msにしたところ、実際には25fpsくらい出ました。
で、頂点ブレンディングをGPU側で実装したところ、40fpsくらいに！
とはいえ、モデルを1つしか表示していないのと、
ボーンの影響とは別の頂点のモーフィングを実装する必要があるので、
描画速度としては、まだまだといったところです。
無駄な処理や冗長な処理が何か所かあるので、そこらへんを削ればもっと速くなるかと。
う〜ん、3月中に完成、公開したい...

　スキンメッシュアニメーション2 / magicien　

さっきまで調べものしながら長々と記事を書いてたら、セッションが切れて、記事が消えてしまった...

頂点ブレンディングをvertex shaderで実装するとき、全ボーンの行列データをuniformで一気に渡すのは無理そう。
では、どうやって実装するかというと、
(1) 影響を与えるボーンが共通している頂点をグループ化し、グループ毎に描画
(2) 影響を与えるボーンの行列データをattributeで渡す

(1) で問題となるのは、グループ化の処理が面倒なこと。
(2) で問題となるのは、転送するデータの量が膨大になること。

速度のことを考えると、やはり(1)で実装すべきなんだろうけど、面倒だなぁ。

　スキンメッシュアニメーション / magicien　

案の定詰まった。

影響を与えるボーンとマテリアルが共通している頂点をグループにして、
グループ毎に描画すればいいやと思ったけど、
ポリゴンって頂点3つだから、組み合わせによっては面倒なことになりそう。
都合の良いデータしかないと信じて実装してみるか...

ただ、今までマテリアルだけでグループ分けしていたものを、
もっと細かく分割するとなると、データ転送と描画の回数が増えてしまう。
JavaScriptでの演算回数は減るけど、速度向上するかどうかは不明。

せめて30fpsは出したいところ。

　WebGL一段落 / magicien　

IKもなんとか動いた...かなりぎこちないけど。

IKがうまく動作しなかった原因は、単純なtypoと、僕が人体の構造を理解していなかったことです。
膝って回転軸固定なんだなってことを今更ながら知った。

そろそろ公開に向けて動き出そうか、もう少しチューニングしようか...
Safariで確認すると、目算だけど、20fpsぐらい。Firefoxだと4fps...
計算量が多すぎるのか、クラスを作りすぎたのか、とにかく遅い。
スキニング（が出来てない気がする、関節を見ると。でも実装は一応した。）をJavaScriptで計算してるんですが、
これをシェーダに移行すれば、もう少しマシになるかも。
明日あたり実装してみて、簡単にできそうなら、それが終わってから公開ということにしようと思います。

　IK難しい... / magicien　

今度はアニメーションの際のIKにつまずいてます。

IKさえ実装できれば、とりあえず見られるものができると思うのですが...

　今のところは大きな問題なし / ノリオ　

昨日magicienがブログパーツのひな型を作ってくれたので、早速いじってみた。
何分ドシロートなもので、思わぬところでつまづくことが多々あり。
まず、特定のキーワードを検索するところから作ってみたけど、日本語だと文字コードの問題があるんですな・・・編集してるファイルの文字コードをUTF8にしたら解消された。
デザインの問題を抜きにすると、次はキーワードの検索範囲からユーザー名を除外するところとか加えてみるかな。

　ベジェ再び / magicien　

ベジェ曲線難しい...

WebGLで3Dモーションデータを読み込んで、表示させるっていうのをやっているんですが、
キーフレームの間を3次のBezier曲線で補間する仕様になっていて、
4つの制御点からx座標に対応するBezier曲線のy座標を求めなくちゃいけない...

最初は方程式を解けば簡単だろうと思って、3次方程式の解の公式を調べてみたところ、
...やめよう、と思いました。
となると、2分法やらBezier Clippingとやらで近似値を求めることになるんだろうけど、
計算量が多くなりそうなのと、単純にプログラムを書くのが面倒。
行列計算に比べれば、ずっと計算量は少ない気もするけど...どうするかなぁ。
両端の制御点が固定であることと、xが単純増加っていう縛りがあるから、簡単な計算式があるのかも。
そこら辺のことは疎いのでよくわかりません。
誰か教えてください！

いっそのこと、tとxはだいたい同じ、と考えてパラメータtをx座標の代わりに使ってしまおうか...

　WebKit Nightly Builds / magicien　

WebGLアプリの開発には、Webkit Nightly Buildsを使ってます。

Nightly Buildsというわけで、毎晩最新版がリリースされるわけですが、
厄介なことに、更新する度にWebGLの仕様が変わったり、動かなくなったりするわけです。

今、動作確認しているのは、2/20のr55043というバージョン。
3/5時点での最新バージョンであるr55516だと動かない...
各バージョンのダウンロードは下記↓URLから。
http://nightly.webkit.org/builds/trunk/mac/1

というわけで、自分用メモでした。

　JavaScript始めました / ノリオ　

JavaScriptの勉強を最近始めました。
まだサンプルプログラムを作りつつ覚えている段階なので、そのうち簡単なことができるプログラムを作れるといいなぁ。

　更新再開 / magicien　

2ヶ月ぶりの更新。
論文やら旅行やらで、しばらく放置してましたが、今日から更新再開します。

現状は、WebGLで3Dのウェブアプリを実装中。
去年はObjective-CとOpenGLで3Dアプリを実装してましたが、気が変わってWebGLへ。
WebGLの方が一段落したら、またObjective-Cに戻りたいと思ってます。