12月といえばアドベントカレンダー。今年はWebGLのアドベントカレンダーに私も表明しましたので、テーマ「Flash Stage3Dとの比較から見えてくる WebGLのあり方について」をテーマとして記事を書いてみます。長文ですが、WebGLとStage3Dのそれぞれの技術について特徴をまとめていますので最後までお付き合いくださいませ。 WebGLとStage3Dとは Stage3DとはFlash(Flash PlayerやAdobe AIR)からOpenGL/DirectXを利用することのできる技術です。2011年にリリースされたFlash Player 11 / Adobe AIR 3に搭載され、多くの商用コンテンツで利用されてきました。 Nissan Stage Juke (Flash Stage3D 事例) http://nissan-stagejuk3d.com WebGLはプラグ
2013年3月26日（水）に弊社が開催したWebGL & Stage3D 勉強会 (第5回)にてパーティクルエフェクトツールの「Sparticle」についてのデモをさせていただきました。今回はそのフォローアップ記事になります。 1. Sparticleの紹介 Sparticleは、リアルタイムプレビュー付3Dパーティクルエフェクト作成ツールです。AIR製のデスクトップツール、オンライン上のWebツールがあり、いずれも無料で利用できます。FlashのStage3Dを使用していますのでGPUパワーを利用し高速に動作する上、GUIによるシンプルな操作が特徴です。ツールで作成したエフェクトは、Away3Dライブラリを使用したコンテンツにに取り込むことができるため、3Dの展示デモや、ゲームコンテンツ、モバイルアプリなどの開発に利用できます。(SparticleはCheng Liao氏による実験的プロ
Flare3DというFlashの3Dライブラリを使ったデモンストレーションを作成しました。 テストのため、床面にフォグ(霧)、キャラクターと地球にスペキュラマップ(テクスチャを使った光の照り返し)を用いています。 ・サンプルコンテンツを見る “Dancing on the Earth” (要 FlashPLayer11) ※音にご注意ください Flare3D Click here to view the embedded video. ツールセットが充実しているFlashの3Dライブラリ。基本的な3D表示に必要なAPI、物理演算エンジンを搭載。 Autodesk社の3d studio Maxと連携したワークフローが提供されています。 去年のAdobe Max2011の映像も合わせてどうぞ。 Flash and 3D, Start Your Engines! Flare3D Studio 専
2013年5月26日、Stage3Dオンラインカンファレンスが開催されましたが、各種3Dライブラリについてまとまった情報が欲しいなと思ったのでブログ記事にしてみました。Flashを用いた3Dコンテンツを導入するにあたり、3dsMax, Maya、Cinema4Dなどの3Dモデル作成ツールとの親和性、GUIで直感的に作成できるシーン構築ツールなどに重点を置いて解説します。 Away3D http://away3d.com/ Adobeと非営利な活動として提携している。3dsMaxとの親和性が高くユーザー数が多い。シーン編集ツールAwayBuilderが登場し、日々進化を続けています。 3Dツールとの親和性 公式では3dsMaxを推奨。3dsMaxのエクスポータープラグインを備えています。（後述のSEA3Dと組み合わせると強力） Blender, Maya, Cinema4D用のスクリプトが提
2013年5月26日、Stage3Dオンラインカンファレンスが開催されましたが、各種3Dライブラリについてまとまった情報が欲しいなと思ったのでブログ記事にしてみました。Flashを用いた3Dコンテンツを導入するにあたり、3dsMax, Maya、Cinema4Dなどの3Dモデル作成ツールとの親和性、GUIで直感的に作成できるシーン構築ツールなどに重点を置いて解説します。 Away3D http://away3d.com/ Adobeと非営利な活動として提携している。3dsMaxとの親和性が高くユーザー数が多い。シーン編集ツールAwayBuilderが登場し、日々進化を続けています。 3Dツールとの親和性 公式では3dsMaxを推奨。3dsMaxのエクスポータープラグインを備えています。（後述のSEA3Dと組み合わせると強力） Blender, Maya, Cinema4D用のスクリプトが提
Away3D 4.0 カスタムフィルタの作り方(前編) 引き続きカスタムフィルタを作る。 次にキラキラするTwinkleFilter3Dだが、そもそものキラキラの元祖？はおそらくこちら。 wonderfl Saqoosha "Snow" Saqooshaさんのキラキラする雪が文字に積もるというもの。 キラキラのロジックは画面を1/4の大きさにしながらBitmapData.draw()でキャプチャして、4倍に引き延ばしたものを加算合成するという単純な操作。 なぜこれだけでキラキラしたりしなかったりするのかというと、おそらく 1/4のBitmapDataにdraw()する時点で、4の倍数ピクセル以外の雪ピクセルの情報が抜け落ちる それを4倍に拡大する際、抜け落ちなかった雪ピクセルは4*4ピクセルに引き延ばされる 加算合成するので、抜け落ちた雪ピクセルはそのままに、圧縮される際に残った雪ピクセル
Away3D 4.0のFlash Player 11 β対応バージョンから実装されたSrage3Dのフィルタ機能。 View3Dのfilters3dプロパティにFilter3DBaseクラスの配列を view3D.filters3d = [new BlurFilter3D(4, 4)]; のように代入すれば使えれる非常にお手軽な機能だ。 今のところ使えるフィルタは4種類。 DepthOfFieldFilter3Dフィルタがちょっとよくわからないが、このプリセットのフィルタを簡易的に確認するデモがこちら。 demo1 ( 要 Flash Player 11 ) 今回はこのフィルタを自作してみよう。 適当に5つのカスタムフィルタを加えたデモがこちら demo2 ( 要 Flash Player 11 ) まずはAway3D内でフィルタとはどのように処理されているのかを見てみよう。 View3D
昨日の記事に続いてFlash Player 11のStage3Dに対応した3Dライブラリ「Away3D ver4」の紹介。今回はフィルター機能を使ったデモを作成しました。プルダウンでエフェクトの種類を選べるので、試してみてください。 demo (Require Flash Player 11.1) source (with Away3D 4.0 alpha) Away3Dにはフィルタ機能が備わっていて、これはStage3D側で処理するポストエフェクトの部類になります。備わっているフィルター機能は次の通り。 ▼RadialBlurFilter3D (放射状ぼかし) ▼MotionBlurFilter3D (モーションブラー) ※モーションブラーはfumixさんが以前Papervision3Dを使って紹介していたこともありました。 MOTION BLUR DEMO 001 (PV3D) – w
Flash Player 11のStage3Dに対応した3Dライブラリ「Away3D ver 4.1 alpha」の作例紹介。Away3Dの最新版4.1 alphaに搭載されたパーティクル機能を使ってデモを作ってみました。 Demo (要Flash Player 11.5) Source (Flash Builder用アーカイブファイル) パーティクルライブラリFlintとAway3Dネイティブパーティクルのパフォーマンス比較 以前ブログの記事（Stage3D対応のAway3D 4.0 – 3次元空間におけるパーティクル表現）でFLiNTというパーティクルライブラリを使ったデモを紹介したことがありました。FLiNTとAway3D 4.1 alphaに搭載されたパーティクル機能を比較したところ、後者のほうが圧倒的にパフォーマンスに優れています。 Adobeの最新ソフトScout (旧Mono
HTML5関連技術であるWebGL (three.js ライブラリを使用)でどれだけのオブジェクトを表示できるのか気になったので、Flash(Away3Dライブラリを使用)とパフォーマンスを比較してみました。WebGL対応ブラウザであるGoogle ChromeやFirefox等でご覧ください。 HTML Demo (Primitive Version) HTML Demo (Primitive Version Ex) HTML Demo (Optimum Version) Flash Demo (Primitive Version) Flash Demo (Optimum Version) 訂正 ※[2013/01/16 23:50追記] 匿名さんやthree.jsの開発者であるMr.doobさんからコメントで、ジオメトリの作成部分で最適化が足りない旨の指摘を頂きました。ジオメトリを無駄
投稿日:2013年01月14日(月) Flash ActionScript3.0Away3DStage3D デモでよく見かける壺や車のボンネットに施されているリアル系のライティングではなく、 ハッタリの効いたアニメ的なライティングについて考えてみました。 Away3Dのバージョンは4.1です。 ライティングの基本 マテリアルとライトを組み合わせて設定する /*ライトを作成する DirectionalLightは空間のどの座標でも同じ角度で当たるライト*/ var light:DirectionalLight = new DirectionalLight(0, -0.1, 0.5); /*LightPickerの作成 配列で複数のライトを組み合わせる(今回は1個)*/ var lightPicker:StaticLightPicker = new StaticLightPicker([li
index 01 状態の変更をできるだけ少なく 02 表示オブジェクトの描画を最適化する 03 Spriteオブジェクトのフラット化とQuadBatchクラス 04 Starlingフレームワークを最適化するActionScriptの設定 Starling Wiki「Performance Optimization」(パフォーマンスの最適化)を題材として、おもな内容の紹介と考察を加える。 01 状態の変更をできるだけ少なく 画面に描かれる表示オブジェクト(DisplayObject)を代表するのがQuadオブジェクト。テクスチャを表示するImageオブジェクトもQuadクラスを継承する。 01-01 状態を決めるプロパティ Starlingは多くのQuadオブジェクトを、できるだけまとめてGPUに送ろうとする。ところが、異なる「状態」(state)のQuadオブジェクトがあると、「状態の変
昨日、Stage3D 勉強会(第2回)にて発表したスライド資料を公開します。 自身が体験したair for iOS&Stage3D&aneでのハマリどころを紹介しております。 というかまだリリースできてないのでなんとか今月中にはリリースしたい。。 自分自身のケーススタディなので、「みたい」とか「らしい」とか語尾を濁しているのはご愛嬌ってことでｗ 64ページの「FDでaneを含んだリリースビルドが落ちる」問題について。 使用するAIRのSDKが3.4以上なら平気みたいです。 3.3を使う場合はFlashDevelopにて、コンパイラー設定のExternal Librariesにaneを設定してあげることで落ちなくなるということを別の記事のコメント欄で教えて頂きました。
![[Event]Stage3D 勉強会 (第2回)での発表資料](https://cdn-ak-scissors.b.st-hatena.com/image/square/f2bc59f83a5d1f2bba95f9dd1e7c66082d352697/height=288;version=1;width=512/https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttp%2Fmemo.393.bz%2Fwp-content%2Fthemes%2FEmptyCanvas%2Fimages%2FthumbForFb.jpg)
2012.7.31 に開催された第二回 Stage3D 勉強会で発表した資料をSlideShareにアップしました。 資料内のDEMOのリンクは下記。 Interractive DEMO 1 [Alternativa3D] ColladaアニメーションモデルをTween24で変形 Interractive DEMO 2 [Alternativa3D] AnmationSwicherクラスによるAnmationClipの切り替え colladaモデルに設定したアニメーションをインタラクティブに切り替えるデモ。 いわゆる3D版gotoAndPlay(“label”)みたいなもの。 Modeling DEMO 1 モデリングサンプル | Octcat Modeling DEMO 2 モデリングサンプル | マリオ Away3D DEMO イラストレータデータ（SVG）＞Blender読み込み立
Flash Professionalを使ったアプリケーション構築の基本を理解していることが前提になります。ActionScript 3を使った開発経験も必要です。 この記事では、Flashの3Dレンダリング性能を飛躍的に向上できる、Flash Player 11で新たに追加された ActionScript APIについて説明します。このチュートリアルでは、まずStage3Dの概要とその仕組みをご紹介します。そして、ActionScriptを使って頂点バッファーとインデックスバッファーで簡単なStage3Dジオメトリを作成する方法も説明します。 ここ数年、デベロッパーは、Flashの3D機能を駆使して魅力的なプロジェクトをいくつも開発してきました。Papervision3D、Away3D、Alternativa3Dなどの3Dエンジンや、これらのエンジンを使って構築した素晴らしいアプリケーショ
少し経ってますが、Adobe Labs に Proscenium のプレビュー版が公開されました。（Proscenium@Labs） Proscenium は Flash Player 11 / AIR 3 の新機能 Stage3D に対応した、アドビ製の 3D フレームワークのコードネームです。評価用のプロジェクトと位置付けられていて、具体的な製品化計画はまだ無いとのことです。 Proscenium のダウンロードはこちらです。（Labs Downloads/Proscenium） Proscenium を試すには Flash Player 11 / AIR 3 の開発環境が必要です。（Flash Professional CS5.5 で Flash Player 11 と AIR 3 を使う方法） なお、ビデオドライバーが古いとクラッシュするという報告があるようです。同様の症状に出会っ
Stage3DはFlash Player 11の目玉機能で、GPUを活用することで従来の1,000倍以上のグラフィックレンダリングができると言われています。本記事では、Flash Professional CS5／CS5.5とFlash Builder 4.5のユーザーを対象にStage3Dの導入方法を解説します。 Stage3Dとは、Flash PlayerからGPUを利用するための仕組みのことです。Stage3Dは低レベルのAPI（ほぼアセンブラ）となっているため、一般の開発者に対する使いやすさはあまり考慮されていません。そのため、通常はAlternativa3D／Away3D／Starlingといったフレームワークを経由して利用します。 Stage3Dでは、表示リスト（DisplayObjectツリー）とは別の描画面を使って2D／3Dを表示します。レイヤー順はStageVideoの描
たった数行のコードでクールなパーティクル表現を実現！ Flash Player 11対応の2Dフレームワーク「Starling Framework」 Flash Player 11の新機能Stage3Dですが、上条さんのブログでも紹介されているとおりStage3Dは3Dだけでなく2DでもGPUを使って描画できます。2DにおいてはStarling(スターリン)というフレームワークが存在し、これを使うことで2次元表現でもGPUの圧倒的なパフォーマンスを得ることができます。Adobe MAX 2011で受講したセッションのまとめでも紹介しましたが、Starling FrameworkはAdobe側もフィーチャーしており、今後が期待できるフレームワークの一つと考えて間違いなさそうです。ちなみStarlingについては次の記事が参考になります。 Starling （新しい ActionScript
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
