日々精進時々堕落

| CALENDAR | RECOMMEND | ENTRY | COMMENT | TRACKBACK | CATEGORY | ARCHIVE | LINK | PROFILE | OTHERS |
スポンサーサイト 2010.10.02 Saturday

一定期間更新がないため広告を表示しています

| - | - | - | スポンサードリンク |
HTML5 & WebGL 2010.04.06 Tuesday
 今週頭くらいから個人的にちょくちょくWebGLを触ろうと情報を集めてます。
なんとなく状況が分かってきたのでまとめ。
 
【WebGLってなに?】
ブラウザで3Dグラフィクス表示を可能にする標準仕様。言語的には JavaScript で挙動を記述する。
未だ開発中の段階。最初ブラウザの機能なのかJSライブラリなのかがあやふやで気になって
たが、基本的にはプラグインなしでブラウザ単体で実行可能なものとなる。開発中なので
テストには特別なファイルが必要になることもあるかもしれない。

Appleが支援するWebKitというレンダリングエンジンで試験実験が行われていたが、
現在ではFireFox, Google Chrome, Operaなどの開発版ビルドに次々と組み込まれて
いるため、Windowsで試してみるにはこちらの開発版ブラウザを使うのがよさそうだ。

ちなみに HTML5 には canvas というベクター描画が可能な領域をタグで作成することが
出来るが、WebGL もこのcanvasの領域に描画することになる。

後はテクスチャの読み込みとか基本Ajaxな感じなので、Ajaxちゃんと勉強するかと思ってる。

【試してみる方法】
FireFoxの nightly build(開発テスト目的ビルド) を落としてきて以下の事をするのが簡単でオススメ。

1. ブラウザを開いてアドレスバーに「about:config」と入力。なんか聞かれたらYESマン
2. 出てきた項目の下のほうに「webgl.enabled_for_all_sites」という項目があるのでダブルクリックして true にする

これで完了。サンプルページなんかを見れば動くはず。


【WebGLを利用したライブラリ】
WebGLはブラウザの標準仕様なので、それをさらに扱いやすくために JSライブラリが既に開発されている模様。

両方ともサンプルも豊富にあるっぽいんだけど、どちらかというと整備されてそうな
C3DLをとりあえず使ってみようかなと思う。

Canvas 3d JS LibraryでColladaファイルを表示してみた 
こんなことが出来るよという一例。
ちょこちょこ見てみた感想だと、今はまだ画像の読み込みが遅かったりはする気がする。


【HTML5とか】
WebGLに限らず HTML5 で面白そうな機能はいくつかある。canvas、videoタグは
当然その一つだけど、個人的には File API が興味深い。こいつによって、ブラウザ上
のアプリケーションがファイルダイアログやドラッグ&ドロップでファイルを受け取れ
るようになる。つまりツール的な事がしやすくなる。手軽な画像処理なんかはサーバ
負荷をかけずにブラウザのローカル処理だけで出来る。ゲームやSNSのサービスも、
もっとリアルタイムにユーザの持つ画像データの反映なんかが行えて面白い事がで
きるかもしれない。

W3C File APIを使ってJavaScriptでファイル加工
File APIでビットマップファイルの情報の取得をしてみた
Normal Mapping with Javascript and Canvas Tag

最後のなんかは2D画像なんだけどcanvasの機能と法線マップを使って奥行きのある
感じの2D絵にしてしまっている。最初スゲー馬鹿馬鹿しいけど面白い事やってるなと
思ったけど、2.5次元という感じでバリバリ3Dをやらなくても何かしらの効果には
低コストで使えるなぁと思ったり。


【参考サイト】
■WebGLについて標準仕様など


■WebGLを組み込んだ JavaScript ライブラリ

■日本語の情報豊富なサイトとか

| プログラム | comments(2) | trackbacks(0) | Dr.Garugari |
スポンサーサイト 2010.10.02 Saturday
| - | - | - | スポンサードリンク |
Comment








参考になります。
もうちょっと資料が充実したらいじってみたい。
ActionScript好きだけど必要なくなるかもね。


posted by らいちよ | 2010/04/10 3:21 PM |
ActionScriptは一昔前ののJavaScriptの進化版としての仕様をFlashが引き継いだものなのでその根本は同じ。Flashに特化してるだけで、JavaScriptもオブジェクト指向プログラミングや第一級関数も使えるしね。Flashもデザイナーが使えるという強みがある以上そんなに直にはなくならないだろうしねー。
posted by ガルガリ | 2010/04/10 4:18 PM |
Trackback
この記事のトラックバックURL: http://garugari.jugem.jp/trackback/546
<< NEW | TOP | OLD>>