Flash Stage3D対応のAway3D – レンズフレアーとパーティクル

Flash Player 11のStage3Dに対応した3Dライブラリ「Away3D ver 4.1」を使ってレンズフレアーとパーティクル表現を作ってみました。次のリンクでデモとソースコードを公開していますので、ぜひお試し下さいませ。

  • Demo (要Flash Player 11.8)
  • Source (Flash Pro CC または Flash Builder で利用できます)

マウスで画面をドラッグ・アンド・ドロップするとアングルを動かすことができます。

続きを読む »

「まにまにフェスティバル(まにフェス)P2」登壇のお知らせ

「まにまにフェスティバル(まにフェス)P2」という大阪でのWebのイベントで登壇することになりましたのでお知らせします。私は「HTML5を利用したハイエンドコンテンツの制作」と題して、HTML5の最先端の技術が可能にする表現について紹介する予定です。

他のスピーカーの皆さんの話も聞き逃せないセッションばかりなので、都合があえばぜひお越しくださいませ!

  • 日時 2013年8月10日(土)10:30〜20:00
  • 場所 大阪産業創造館 3F・4F
  • 参加費 3F:無料/4F:3,000円(要事前申込)※学生無料
  • 内容詳細・申込みは公式サイト

続きを読む »

Web技術情報メディア「HTML5 Experts.jp」参加のお知らせ

日本に、もっとエキスパートを。「すべての記事が永久保存版」を目指すWeb技術情報メディア『HTML5 Experts.jp』がオープンしました。私もHTML5 Expertsのメンバーとして参加させてもらっていまして、ゲームや広告表現に役立つ技術(例えばCanvasやWebGL、altJS)に関する記事を執筆していく予定です。今のところ次のページで私に関することが掲載されています。

続きを読む »

Flash Pro CCの新機能紹介:進化した高品質なビデオ書き出し機能

Flash Professional CC (通称、Flash Pro CC)の新機能として注目されているのが「ビデオの高画質な書き出し」機能です。

どんなに負荷の高いFlashコンテンツでも、ドロップフレームすることなく60fpsでHDビデオとして書き出すことができるようになっています。(試したところ120fps HDの動画ファイルも作れています)

第7回『進化した Flash Pro CC – Flash, HTML5, ビデオ表現の可能性を探る』 | ADC OnAirでの放送で紹介したのですが、物理演算ライブラリの「Box2D」を使ってリアルタイムではとても再現できないような高負荷なFlashコンテンツをHDの60fpsの動画として書きだしてみました。

※Flash Pro CCで生成されたビデオファイルをAdobe Media Encoder CCを使ってエンコードしています。

YouTubeだとフレームレートが落ちてしまうので直接ビデオファイルを自分のサーバーにアップしたのですが、60fpsの動画は動きの気持ちよさが違いますね。

続きを読む »

「Adobe MAX 2013 報告会 @ 熊本 + RETWEET」のお知らせ

7/13(土)開催の「Adobe MAX 2013 報告会 @ 熊本 + RETWEET」というセミナーイベントで登壇することになりました。今年の5月にロサンゼルスで開催されたAdobe MAXでの新製品・技術を題材に、Web関連の新しくでてきた技術として話そうと思います。

私は「開発者のためのHTML5入門〜TypeScriptとHaxe〜」「HTML5もFlashも! Flash Professional CCの新機能紹介」「Stage3Dフレームワーク最新情報」と題して発表する予定です。

参加費は無料ですので、興味がありましたらぜひご参加くださいませ。

  • 開催日:2013年7月13日 13:00〜18:00
  • 会場:くまもと県民交流館パレア
  • 参加費:無料

続きを読む »

Stage3D対応のAway3D 4.1 – Mergeクラスで最適化して100万ポリゴンを実現

今日はFlash Stage3Dの話。以前紹介したパーティクル機能によるパフォーマンス最適化の続編です。以前はパーティクル機能を使ってジオメトリをマージすることで高速化できることを紹介しました。同等のことがAway3D 4.1 betaaway3d.tools.commands.Mergeクラスで実現できます。

同じようなデモをWebGL(three.js)で試した時は40万ポリゴン程度でしたが、今回はFlash(Away3D)で100万ポリゴンを試してみました。

起動に15〜20秒くらい時間がかかりますが、私のMacBook Air (2011年9月購入)でも60fpsで再生されます。※リリース版Flash Playerにて

この方法はWebGL対応のライブラリThree.jsを爆速にする方法で紹介した内容とも同じで、頂点情報を一つにまとめることでドローコールを少なくし高速化しています。

Away3Dをよりパフォーマンス高く使いたい場合はぜひお試しくださいませ。

HTML5やFlashの最新情報が盛りだくさん、ICS LABブログの紹介

Twitterで度々紹介していたのですが、ClockMaker Blog以外にも会社のほうで技術系ブログをやっています。

テーマはFlashやHTML5などウェブ上でリッチコンテンツを実現する技術の紹介で、主に次の情報を扱っています。

  • 最新技術の紹介
  • パフォーマンスの検証記事
  • 最適化テクニックの紹介

はてなブックマークのホットエントリ向けのタイトルの記事が多いのですが、内容的には精度の高い記事を意識しています(ClockMaker Blogよりも役立つ情報が多いはず)。よければICS LABRSSフィードを購読してくださいませ。よろしくお願いします。

Adobe MAX 2013で受講したセッションのまとめ

Adobe MAX 2013の開催から早くも1週間。Adobe MAXではCreative Cloud新製品の発表などの他、技術的なセッションが数多く開催されます。私はセッションに参加するごとにツだるようにしていたのですが、それらをトゥギャってみました。初出の情報や、現地ならではの情報をまとめることができたとおもいます。

ジャンルごとに受講したセッションを分類してますので、気になるセッションがあればチェックしてみてくださいませ。
続きを読む »

Adobe MAX 2013に参加します

こんにちは、池田です。来週5/6(月)〜5/8(水)にロサンゼルスで開催されるAdobe MAX 2013に行ってきます(アドバンテージツアーで参加します)。今年で参加は3回目になるのですが、私のスケジュールは次のようになっています。主にFlash/HTML5/CreateJSに関することを中心に受講するセッションを選びました。

続きを読む »

HTML5 Canvasでパーティクル表現!パーティクルエンジンParticleEmitterJS

にゃあプロジェクトさんに教えてもらったのですが、HTML5用のパーティクルエンジン「ParticleEmitterJS」が面白そうだったので試してみました。次のような表現がビジュアルエディターを使ってHTML5で簡単に作ることができます。

  • Demo (Require the browser supported HTML5 Canvas)

  • Demo (Require the browser supported HTML5 Canvas)

ParticleEmitterJSCreateJS のフリーの拡張ライブラリで、簡単にパーティクルエフェクトを作ることができます。パーティクルエフェクトはゲームやコンテンツ表現の演出強化や、雲や炎などのシミュレーションにも利用できます。パーティクルは基本的に数値演算を利用するためプログラマの領分という印象が強いですが、ParticleEmitterJSはモーションデザイナーも使いやすいようにビジュアルエディターが用意されています。

以下、使い方を紹介したいと思います。

※追記 2015/12/19

記事「CreateJS でパーティクルシステムの開発に挑戦しよう – CreateJS入門 – ICS MEDIA」でフルスクラッチでパーティクルシステムを作成する方法を解説しました。ぜひご覧ください。

続きを読む »