‘HTML5’ カテゴリーのアーカイブ

WebGLでBone Animation

2013.03.13 07:43 PM

daijima.jp Lab | WebGL Bone Animation Sketch

ここのところWebGLを試していたんですが、その時作ったスケッチを晒してみようと思います。

※Safariで閲覧する場合はWebGLを有効にしてください。SafariのWebGLの有効化方法
※WebGLがサポートされていないブラウザでは閲覧できません。(IEやスマホブラウザ等)
※画面ドラッグでカメラ移動
※マウスホイールでカメラズーム
※Qボタンでアニメパターン1再生
※Wボタンでアニメパターン2再生
※Eボタンでアニメパターン3再生
※3Dライブラリはthree.jsを使用しました。
※気持ち悪いスケッチで申し訳ありません。

以下、ざっくりですが技術的なこと。
キャラクターのモデリング、ボーン設定、ボーンアニメーション作成はBlenderを使用。
BlenderでUV画像をエクスポートしてそれを元にPhotoshopでテクスチャ作成。
ボーンアニメーション付きモデリングデータをCollada形式でエクスポート。
※Blenderにthree.js用のアドオンをインストールするとモデリングデータをjson形式でエクスポートすることもできるんですが、いざthree.jsで読み込んだところ、表示が崩れてしまってうまくいかなかったので今回はCollada形式でエクスポートしてthree.jsで読み込みました。

three.jsを使えばいわゆるFlash用の3Dライブラリ(Away3D/Alternativa3Dなど)ライクに、わりと簡単に3D表現はできるようです。ボーンアニメーションもそれなりにすんなり実装できました。

現時点で大半のスマホブラウザでWebGLをサポートしていないというのが、いまひとつWebGLが流行らない原因なのだとは思いますが、近い将来多くのスマホブラウザでWebGLがサポートされるようになれば、大いに活用できるAPIになり得ると思います。

いずれにせよ、FlashのStage3D、WebGL、Unity、openFrameworks、etc..、様々な技術的なアプローチがあるとは思いますが、案件の特性に応じてアプローチ方法を選択して自在に開発できる準備をしておくのが肝要なんだと思います。

björkのサイトで自分のライブラリが使われてたw

2011.05.30 02:00 PM

http://bjork.com/js/Matrix3D.js
先日人伝えで知ったんだけど、僕のJSライブラリがbjörkのサイトで使われていて地味にビツクリ。
さらに、bjork.comのサイトを作った人のHTML5 3Dエンジンに関しての記事の文中にも僕の名前がしれっと載っててこれまたビツクリ。
http://www.netmagazine.com/tutorials/build-your-own-html5-3d-engine
(リンク切れしてたのでこちら↓で閲覧できます)
http://www.creativebloq.com/3d/build-your-own-html5-3d-engine-7116885

daijima.jpのホームページ

2011.03.10 04:27 PM

daijima.jpのホームページ

daijima.jpのホームページを作ってみました。

TwitterだのFacebookだののSNSに押されて、個人のホームページからエネルギーが失われつつある昨今のネット社会を憂い、嘆き、少しでも「個人ホームページ熱いぜ!」という流れを取り戻すために、SNSのやつらに唾を吐くべく、自分のホームページを作るに至りました (嘘)。

個人ホームページの覇権を取り戻すぞー!!(おおげさ)

おふざけはこのくらいにして、技術よりの補足をいくつか。

iPhoneでも閲覧可能にしたかったのでHTML5で作りました。
また、iPhone SafariではJavaScriptでタッチイベントを取得できるので、マルチタッチにも対応させました。iPhone上でのインタラクションも可能です。(ぶっちゃけiPhoneで見ると、もっさもさの動きですけど。。。)iPadや他のスマホでは表示、動作確認をしていないので、おかしなことになっているかもしれません。

Canvasに対応していないIEに関しては、excanvas.jsなどのCanvasをエミュレートするJavaScriptライブラリを利用することで、Canvas用のJavaScriptコードを再現できますが、表示がうまくいかない箇所があったり、動きが激遅だったりしたので、今回は代替Flashを表示させることで対応しました。ですが、同じ見た目、同じ挙動のものを「HTML5+JavaScript版」と「Flash版」の2パターンを作るというのは、当然工数もかかってくるので、実案件の際には、この問題をどう対応していくべきか、今後検討していかなければと思っています。

HTML5 Canvasをいじってみた。

2010.09.30 01:01 PM

昨今のHTML5の流れに乗っかって、Canvasをいじってみることに。
即席3Dライブラリを作って、Canvasがどんなものか、処理速度、描画速度はどんなものか等々、もろもろの挙動を体感してみた。
せっかくなので、jsdo.itに投稿した。今更ですが、wonderflとともに本当に素晴らしいサービスですね。ありがとうございます。

変体 – jsdo.it – share JavaScript, HTML5 and CSS

Canvasの描画精度が低いのか自分の作り方が悪いのかわからないが、stroke()で線を引くと微妙にずれたりして、線が重なってる部分が汚く描画されてしまう。そもそもstroke()で線を引かないと、Triangle間に隙間ができてしまう。。。
とりあえず動けばいいレベルの実装なので、ちょっとずつブラッシュアップして汎用化しつつ機能を追加していけたらと思います。

以下今後のタスクなど。
・HTML+css+Javascriptの開発環境を整える。
・prototypeをひさびさに使ったが、若干しっくりきてないので慣れておく。
・asでいうところのpublicだのprivateだのstaticだのは、今回は何も考えずに実装してるので、実案件でそれなりの規模のものを作れる準備として、今後詰めていきたい。