note.x

mozOrientation + PV3D(要:FireFox3.6 + Flash Player9以降 + 加速度センサ付きPC)
※加速度センサ積んでれば、PCを前後左右に傾けることで玉が転がる

FireFox3.6が加速度センサの傾き検出できるってんで、ありがちな物を作って体験してみた。
自分のMacBookProでしか試してないんで確証はないけど、mozOrientationがディスパッチされる環境なら動くはず。

参考サイト:
加速度センサーの値を表示するサンプル(MozOrientation)

今回のネタを作ろうとFireFox3.6にしたらFlashの再生時、妙に負荷かかるようになった。
起動して数時間使った後で、上のデモを再生すると頻繁にGCが発生してるみたいな挙動になって、衝突判定すり抜けたりする。FireFoxを再起動すると直るんだけどオレの環境の問題かなぁ。


suumo(要:Flash Player9)

スーモ萌え。
を目指して作ったものの「スーモではない何か」が出来た。
無意味にファー表現したので、見た目のわりにポリゴン数食ってたり、負荷が増大してて非常にコストパフォーマンスが悪い。低コストな屋外の景観生成が個人的な課題。一つの方法論がドライブシミュもどきの時の構造だけど、これよりさらにコストを抑えられないもんかな。


Imitate Morphovision(要:Flash Player9)

※ステージドラッグで視点位置が変わります。

岩井俊雄さんと、NHK放送技術研究所が共同開発したモルフォビジョン
プリズムミラーで反射させたプロジェクタからの光を使ってスリットスキャンする方法で、立体物の見えを変化させるシステム。Another time, Another space の立体版って感じだけど、デジタル的な画像処理じゃない方法で摩訶不思議な現象を作り出してるのがカッコイイ。悔しいかな一度も本物を見た事がない。

んで、実機と同じような状況を作ったら、以前作ったゾートロープのようにソレっぽく見えたりしねぇかなぁーとか思ったのが2年くらい前。エライ時間がかかったけど、プロジェクションマップがそれなりに動いたので、技術的に課題だったライトマップ的なものが実装できて、ようやく動かせた。見やすくするためにブレンド使った以外は、スリット光の移動と物体の回転しかしてないんだけど、歪んで見えないことも…ない感じにはなった。スリット光のピッチが荒いのと、回転と同期がうまく取れてないあたりが課題か。でもまぁ、明らかに普通に回しただけじゃこうは見えないので、ちょっと嬉しい。

実機みたいに滑らかで有機的な振る舞いをさせるには、もっと高fps叩き出せるプラットホームじゃないと無理があるかなぁ…。それとも根気よく調整すればもう少し改善するのか? とりあえず一歩前進。なんとなく可能性が垣間見えたので、またしばらく寝かせとこう。


HTML5の周辺技術の一つ、WebGLがどんなもんか様子を伺ってみたのでメモっとく。

WebGL概要

  • Mozillaが作ってたCanvas3Dがベース
  • OpenGL 2.0 or OpenGL ES 2.0をサポートする環境でハードウェアアクセラレートされた2D、3Dグラフィックスを表示する
  • HTML5のCanvasを通じた、JavaScriptとOpenGL ES 2.0のバインディング

リソース

WebGL対応ブラウザ(いずれも開発中)

仕事が早いというか、気が早いというかすでにいくつかのライブラリが公開されてる。

WebGLライブラリ

  • WebGLU ※MIT License
  • SceneJS ※MIT License または GPL Version 2
  • SpiderGL ※GNU Library または LGPL
  • GLGE ※LGPL

※SpiderGLが、PV3Dとかと感覚的に近いのかな?GLGEなんかはシーングラフをxmlで記述したものをベースに作ってく感じで勝手が違う。

上記ライブラリは使わずに、NeHeからの移植チュートリアルを大いに参考にしつつコードも拝借しながら、いくつかデモを作ってみた。いずれも MacBookPro (Mobility Radeon X1600) OSX10.5.8 にて Webkit、Minefield、Chromium で動作確認。
※Mac版Webkit r54648以降だと動作しなくなった。

webgltest01

3D Cube(要:WebGL対応ブラウザ)

webgltest02

3D Cube Matrix(要:WebGL対応ブラウザ)

webgltest03

Billboard Particle(要:WebGL対応ブラウザ)

思ってたよりパフォーマンス出ない。WebkitとMinefieldに関してはGPUアクセラレーションが効いてるっぽいけど、Chromiumでは機能してない感じ。開発中のものにケチつけてもしょうがないけども、回転数が足りなくて一番おいしいとこが使えてないエンジン載せ替えたばっかりのハチロクみたいなもどかしさがある。「JavaScriptでこんなに!?」みたいなインパクトが欲しいな。オレのコードと環境の問題かもしれんけど。
OpenGL + GLSLそのものを勉強する環境としてはカジュアルに取り組めていいと思う。個人的にはかなり勉強になったし。

なんていうか、派手なビジュアル作りに使うってのはむしろ亜流で、もっと地味なとこでじわじわ効いてくる技術なんだろうなーと漠然と思った。
Flashプラットフォームと比較して云々ってのは、なんかズレてる気がする。マーケティング戦略としてはアリなのかもしれんけど。

2010/02/11追記:
ほとんどシェーダーにやらせる感じの4KB intro的アプローチだとどうなるか?と素朴に興味が涌いたので、日本屈指のscener、kiokuさんの4K Procedural Gfx Monitorに付属するサンプルのシェーダーを拝借させていただいてレイトレ動かしてみた。

webgltest04

Raytrace(要:WebGL対応ブラウザ)
※Minefieldだと動かない。要調査。※Minefieldでも動いたそうです。

ブラウザのウインドウサイズに追従するので、あんまりデカくするとキビしいけどなんとか動いてる。この手法ならGPUパワーでゴリ押しできそう。やっぱりJavascriptとのバインディングって釣り合いが取れてないんじゃなかろうか。

随分楽しめたんで、もう満足。
OpenGL + GLSLをちゃんと勉強しとこ。


projectionmap

Projection map Test(要:FlashPlayer9)
※各Cubeはドラッグで動かせます。

プロジェクションマップの習作。
パフォーマンス悪いなぁ。根本的に考え直さないとダメか。


MORE