「Stage3Dプログラミング」という解説書を執筆しました

来月上旬発売の「Stage3Dプログラミング〜GPUを使ったFlash 3Dコンテンツ制作〜」というStage3D の書籍を私と酒井さんと高輪さんの3人で執筆しました。Stage3DとはGPUを活用することで高いグラフィックのパフォーマンスが得られるFlashの最新機能です。

  • ページ数:416ページ
  • 出版社: ワークスコーポレーション
  • 発売日: 2012/6/4 (amazon)
  • 執筆: 池田泰延 (ClockMaker), 酒井直一 (丸林商店), 高輪知明 (nutsu)

この書籍は、Staeg3Dの入門からAS3ライブラリの実用的機能までを網羅し、最新情報をがっつりとまとめた一冊となっています。AS3ライブラリは将来性・生産性の点で有望なAway3DAlternativa3Dの両方を取り上げ、またネイティブなところから理解できるようにもStage3D APIやAGALの解説の章も用意しています。

続きを読む »

リッチなHTML5コンテンツのためのフレームワーク「CreateJS」が公式サイトを公開

Flashのエンジニアとして著名なGrant Skinner氏が開発している、「CreateJS」の公式サイトがオープンしました。

CreateJSはHTML5を介してリッチなインタラクティブコンテンツの制作をサポートする、JavaScriptライブラリとツールのスイートです。CreateJS SuiteにはEaselJS、TweenJS、SoundJS、PreloadJS、とZoeのツールがあります。

私のブログでもEaselJS、TweenJSを使ったインタラクティブコンテンツのデモを幾つか制作して紹介してきましたが、Flashで培われた技術がそのまま利用できる点で非常に使い勝手のいいツール群だと思っています。

今回は公式サイトで明らかになったCreateJSの各ツールの紹介を日本語訳してお伝えします。

続きを読む »

Flash Stage3D対応のAlternativa3D 8がオープンソースに!

相変わらず忙しい日々が続いており、久しぶりのブログの更新になってしまいました。

さて、Flash Player 11 (Stage3D)向けの3Dフレームワーク「Alternativa3D」が本日(2012年3月29日)ついにオープンソースになりました!

記事をざっくり意訳すると次のような内容です。

続きを読む »

Stage3D対応のAway3D 4.0 – ライン描画

ここのところHTML5ネタばかり投稿していましたが、私がメインにしているのはFlashなので久しぶりにFlash 3Dネタを投稿してみます。Stage3D対応のAway3D 4.0ですが、ラインの描画のパフォーマンスが良かったのでどのくらい表示できるのかデモを作成してみました。

  • demo (require Flash Player 11.1)
  • source (needs Away3D 4.0 beta)

シンプルな描画しか使っていないのですが、余裕で10万△ぐらい処理できています。従来のFlash Playerではパフォーマンス的には到達できない表現だと思いますが、とりあえずライン描画だとAway3Dはやたら強いことがわかりました。


続きを読む »

「まにまにフェスティバル」出演のお知らせ

まにまにフェスティバルという大阪でのWebのイベントで登壇することになりましたのでお知らせします。私はHTML5とFlashに関して制作の現場からみた現状について紹介する予定です。セッションは有料となりますが、他にも各ブラウザベンダーのセッションなど面白そうな企画がありますので、都合があえばぜひお越しくださいませ。申し込みはこちらから。

HTML5はFlashの3倍重かった! 描画パフォーマンスの比較

最近のHTML5の盛り上がりには勢いがありますが、実際の所HTML5はどうなのか気になったので描画パフォーマンスを測定してみました。上記のグラフが結果ですが、HTML5で一番よい実装よりもFlashのほうが3倍弱高速という結果がでました。ブラウザによってはFlashのほうがHTML5より18倍も高速という結果もでています。

さらに言えば、HTML5の描画パフォーマンスが最も良かったのはSafariですが、ブラウザによってはそれの15%ぐらいのパフォーマンスしかでないブラウザもあり処理速度にばらつきが大きいのが特徴でした。ですが、Flashはどのブラウザでもスコアの振れ幅が小さくブラウザ間の処理速度は安定しているように思います(プラグインなので当然といえば当然の結果ですが)。

続きを読む »

HTML5周辺技術のWebGLとJavaScriptでジニーエフェクト

JavaScriptでMac定番のジニーエフェクトを作ってみました。今回利用したのはHTML5周辺技術のWebGLというもので、プラウザネイティブでGPUを利用できる機能です。

続きを読む »

HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」

HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。

続きを読む »

HTML5でテキストのシャッフル演出ができるJSライブラリ「ShuffleText.js」

Flashでよく見かけるテキストシャッフル演出(文字列がランダムで切り替わる演出、正しい呼び名はわかりませんw)をHTML5で作ってみました。HTMLのタグ(pタグとか)に使うバージョンと、HTML5の新要素Canvasを使うバージョンの二種類を用意しました。

Canvas版のほうはHTML5対応ブラウザ(ChromeやSafari、Firefox)限定となりますが、HTMLエレメント版のほうはブラウザの対応範囲が広くIE6でも動作します。ソースコードはMITライセンスで公開してしますので、個人・商用問わずご自由にお使いください。

それでは以下で使い方を紹介していきます。

続きを読む »

HTML5 Canvasを始めよう:EaselJSを使った流体パーティクル入門

HTML5のCanvasをFlashライクに使えるようにするJavaScriptライブラリ「EaselJS」で流体パーティクルのデモを作ってみました。

EaselJSを使えばFlashのようにHTML5 Canvasを使うことができるので、ActionScriptから概念だけではなくコードの再利用性が高まります。今回は流体パーティクルの表現を通して、EaselJSとCanvasのテクニックを紹介していきます。

続きを読む »

Page 1 of 3712345»...Last »