CreateJSデモコンテンツ「日本全国花粉飛散マップ」
- 2013年03月19日 (火)
- HTML5
こちらのブログの更新が久しぶりになりました。「日本全国花粉飛散マップ」というコンテンツをa24さんと作ってみました。
HTML5 CanvasをFlashのように扱えるフレームワーク「CreateJS」と、型指定などを使って効率良くJavaScript開発ができる「TypeScript」を使って開発しています。
CreateJS関連の技術について会社のブログにいくつか記事を投稿していますので、よければご覧くださいませ。
Flash Stage3D対応のAway3D作例 – 燃えさかる炎の表現
- 2013年02月07日 (木)
- Flash 3D
Flash Player 11のStage3D (GPUを活用できる機能)に対応した3Dライブラリ「Away3D 4.1 alpha」の作例紹介。Away3Dの最新版4.1 alphaのパーティクル機能と、物理演算ライブラリAwayPhysicsを使ってデモを作ってみました。燃えさかる炎の表現です。
このデモは500行ぐらいのコードで表現を作っています。HTML5 & WebGL に比べて Flash & ActionScript は 3D ライブラリが充実しているので、パーティクル機能や3次元の物理演算を比較的容易に実装できるのがいいなと思いました(最近WebGL系のライブラリを触ってみた感想として)。
Edge Animateで作成するHTML5サイトのサンプル
- 2013年02月04日 (月)
- HTML5
随分前に作成したものですが、Edge Animateを使ったウェブサイトサンプルを作ったので紹介します。Edge Animateとは2012年9月にリリースされたアドビのHTML5向けのアニメーション制作ツールです(参考記事)。アニメーションを作るためのタイムラインを持っており、JavaScriptなどを併用してインタラクティブコンテンツを作ることのできます。ユーザーコミュニティーが盛り上がればいいなぁということでソースファイルも配布しておきます。
Flash Stage3D(Starling)とWorkerを利用した流体パーティクルの表現
- 2013年01月24日 (木)
- ActionScript
Flash Player 11.4で追加されたWorkerと、Stage3D(Starling)を利用して、たくさんの矢印が飛び交う流体パーティクルデモをリメイクしてみました。デモは次のURLから試せます。
以前、本ブログで次の記事で同様のでデモを作ったことがありましたが、その時はFlashのBitmapDataを活用する設計で作成していました。今回のデモでWorkerを使ったメリットと、Stage3Dを使ったメリットを紹介したいと思います。
WebGL対応のライブラリThree.jsを爆速にする方法
- 2013年01月18日 (金)
- HTML5
前回のWebGL(Three.js)とStage3D(Away3D)の比較ですが、Mr.doobさんを始め国内外の多くの方からご指摘頂きWebGL(Three.js)版を最適化したところ、最終的にはFlash(Away3D)版と同じぐらいのパフォーマンスになりました。当初、最適化・検証不足で間違った情報を掲載してしまい申し訳ありませんでした。
さて、そのWebGL(Three.js)版を最適化した手法が有意義だったのでシェアしたいと思います。
HTML5関連技術のWebGL(three.js)とFlash(Away3D)のパフォーマンス比較
- 2013年01月16日 (水)
- HTML5
HTML5関連技術であるWebGL (three.js ライブラリを使用)でどれだけのオブジェクトを表示できるのか気になったので、Flash(Away3Dライブラリを使用)とパフォーマンスを比較してみました。WebGL対応ブラウザであるGoogle ChromeやFirefox等でご覧ください。
- Flash Demo (Primitive Version)
- Flash Demo (Optimum Version)
Stage3D対応のAway3D 4.1 – パーティクル機能によるパフォーマンス最適化
- 2013年01月15日 (火)
- Flash 3D
前回のブログ記事で紹介したFlashの3DフレームワークAway3D 4.1 alphaの新機能パーティクルですが、面白い最適化手法を見つけたので紹介します。
Stage3D対応のAway3D 4.1 – パフォーマンスが劇的に向上したパーティクル機能
- 2013年01月10日 (木)
- Flash 3D
Flash Player 11のStage3Dに対応した3Dライブラリ「Away3D ver 4.1 alpha」の作例紹介。Away3Dの最新版4.1 alphaに搭載されたパーティクル機能を使ってデモを作ってみました。
Stage3D対応のAway3D – 物理演算とStarling連携
- 2013年01月07日 (月)
- Flash 3D
年末・年始の休みに、Stage3D対応のフレームワークAway3D 4.1 alphaと物理演算エンジンAwayPhysicsと2DフレームワークStarling 1.2を使ったデモを作ってみました。回転する箱のなかで数個の球体がハネたりする感じのものです。
AwayPhysicsについて
AwayPhysicsは以前ブログの記事で紹介しましたが、3Dの物理演算ができるFlasCC製のライブラリです。C++で作られたBulletエンジンをFlasCCを使ってコンパイルしているので、ActionScriptで3Dライブラリを作るよりも高速に動作すると考えられます。
StarlingとAway3Dの連携について
またAway3D 4.0 GOLDからは2DフレームワークのStarlingと連携できるようになっているので、Starlingとの組み合わせを試してみました。3D空間内の球体のプロジェクション座標を2DのStarling側に送信してパーティクルを表示させています。パーティクルは3D空間上に表示されているように見えるかもしれませんが、実際は3Dの描画プレーンの上に重ねられた2Dの描画プレーンにパーティクルを表現しています。
FlashでStarlingとBox2Dの連携デモ
- 2013年01月04日 (金)
- ActionScript
新年あけましておめでとうございます。年末・年始にFlashのデモを数点ほど作成しましたので紹介したいと思います。
まずは物理演算エンジンBox2DFlashAS3 2.1 alphaとStage3D対応の2D描画フレームワークStarling 1.2を組み合わせたデモです。箱の中で8つの火の玉が回転する感じのものです。パーティクルと物理演算というのは負荷の高い処理になるわけですが、StarlingがGPUを使って高速にパーティクルを描画してくれるため、Box2Dと組み合わせても滑らかに再生することに成功しています。
こちらは上述のデモのプロトタイプです。パーティクルを使わずStarlingとBox2Dを組み合わせたものです。シンプルなのでソースコードが読みやすいと思います。
なお、StarlingとBox2Dの連携は野中さんの記事がとてもわかりやすいのでそちらを参考ください。
こういうパーティクル表現はHTML5(canvasタグやCSS3)だと苦手なので、まだまだFlashが便利だなぁと思ったりします。次回は3Dの物理演算表現を紹介したいと思います。