http://clockmaker.jp/blog/2014/01/away3d-typescript-fire/
HTML5関連技術のWebGL(three.js)とFlash(Away3D)のパフォーマンス比較 | ClockMaker Blog
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さんからコメントで、ジオメトリの作成部分で最適化が足りない旨の指摘を頂きました。ジオメトリを無駄
「Stage3Dプログラミング」という解説書を執筆しました | ClockMaker Blog
来月上旬発売の「Stage3Dプログラミング〜GPUを使ったFlash 3Dコンテンツ制作〜」というStage3D の書籍を私と酒井さんと高輪さんの3人で執筆しました。Stage3DとはGPUを活用することで高いグラフィックのパフォーマンスが得られるFlashの最新機能です。 ページ数：416ページ 出版社： ワークスコーポレーション 発売日： 2012/6/4 (amazon) 執筆： 池田泰延 (ClockMaker), 酒井直一 (丸林商店), 高輪知明 (nutsu) この書籍は、Staeg3Dの入門からAS3ライブラリの実用的機能までを網羅し、最新情報をがっつりとまとめた一冊となっています。AS3ライブラリは将来性・生産性の点で有望なAway3DとAlternativa3Dの両方を取り上げ、またネイティブなところから理解できるようにもStage3D APIやAGALの解説の章も用
HTML5はFlashの3倍重かった! 描画パフォーマンスの比較 | ClockMaker Blog
最近のHTML5の盛り上がりには勢いがありますが、実際の所HTML5はどうなのか気になったので描画パフォーマンスを測定してみました。上記のグラフが結果ですが、HTML5で一番よい実装よりもFlashのほうが3倍弱高速という結果がでました。ブラウザによってはFlashのほうがHTML5より18倍も高速という結果もでています。 さらに言えば、HTML5の描画パフォーマンスが最も良かったのはSafariですが、ブラウザによってはそれの15%ぐらいのパフォーマンスしかでないブラウザもあり処理速度にばらつきが大きいのが特徴でした。ですが、Flashはどのブラウザでもスコアの振れ幅が小さくブラウザ間の処理速度は安定しているように思います(プラグインなので当然といえば当然の結果ですが)。 検証デモ HTML5やFlashと言っても様々な実装方法があるので、よく使われる方法を幾つか用意して検証しています。
HTML5 Canvasを始めよう：EaselJSとTweenJSでテキストエフェクト | ClockMaker Blog
HTML5のCanvasをFlashライクに使えるようにするJavaScriptライブラリ「EaselJS」と「TweenJS」を使ってデモを作ってみました。 demo 今回のブログ記事では「EaselJS」と「TweenJS」の使い方をデモの作り方を通して紹介します。 ライブラリの紹介 「EaselJS」と「TweenJS」はFlashのエンジニアとして著名なGrant Skinner氏が開発しているJavaScriptライブラリです。「EaselJS」がHTML5 CanvasをFlashライクに使うためのライブラリで、「TweenJS」が汎用的なトゥイーンライブラリです。 ▲EaselJS HTML5のCanvas要素はHTML上に自由に描画することのできる新しい要素で、工夫することでFlashのように豊かな表現を作ることができます。ただCanvasではJavaScriptでちょっと
Stage3D対応のAway3D 4.0 – 3次元空間におけるパーティクル表現 | ClockMaker Blog
Flash Player 11の新機能Stage3Dに対応した3Dライブラリ「Away3D ver 4.0」の作例紹介。前回紹介したパーティクル表現とフィルター表現を組み合わせて作ってみました。 demo (Require Flash Player 11.1) source (FlashDevelop用ファイル一式) 旧来のFlash Playerとのパフォーマンスの違い こちらの作例、どこかで見たことがあるかもしれませんが、これは1年前にFlash Player 10で実装したPV3D演出サンプルNo.09:Spiral Particlesのデモ(記事の後半のデモ)を移植したものです。前回のFlash Player 10のものと今回のFlash Player 11で作った両者のデモを比較してみると、フレームワークの機能の充実度もありますが、Flash PlayerがGPUに対応したことで
ADC MEETUP ROUND 03 発表資料「Stage3D の利用で広がるFlashの表現と可能性」 | ClockMaker Blog
2011年11月12日に開催した ADC MEETUP ROUND 03 MAX RETWEET のフォローアップとして「Stage3D の利用で広がるFlashの表現と可能性」のスライドとサンプルをシェアします。 スライド資料(PDF) 概要 新しくリリースされたFlash Player 11/Adobe AIR 3には新機能としてStage 3Dが搭載されています。Stage 3Dを利用すれば、GPUによってグラフィックのレンダリング性能が飛躍的に向上するため、表現の自由度が高まります。このセッションでは、Stage 3Dの導入方法から、2D・3Dのフレームワークの紹介しました。 デモ一覧 モデルデータ表示デモ(Flash Player 9向け) モデルデータ表示デモ(Flash Player 10向け) モデルデータ表示デモ(Flash Player 11向け・CPU利用) モデルデ
たった数行のコードでクールなパーティクル表現を実現！ Flash Player 11対応の2Dフレームワーク「Starling Framework」 | ClockMaker Blog
たった数行のコードでクールなパーティクル表現を実現！ 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
Stardustを使ってAS3のパーティクル表現を学ぶ Vol.02 | ClockMaker Blog
AS3 のパーティクルエンジンである Stardust (スターダスト)についてチュートリアル記事、第2弾目。 前回の記事では、Stardust は「イニシャライザー」と「アクション」がカスタマイズの鍵ということに触れました。今回の記事ではそれらの役割について説明します。まずは、視覚的にわかりやすいデモを作りましたので、こちらをご覧ください。(右側のパネルで各種パラメーターを調整し、左側で表示されているパーティクルの演出をカスタマイズすることができます) Stardust パラメーターシミュレーション ソースファイル(ZIP, Flex 4プロジェクト) 以下、詳細を説明します。 イニシャライザーとは イニシャライザーとは、パーティクルの初期値を設定するクラスとなります。EmitterクラスのaddInitialize()メソッドを使って、エミッターにイニシャライザーを追加していきます。
PV3D演出サンプルNo.09:Spiral Particles | ClockMaker Blog
最近ブログで 3D 系のデモを投稿していなかったので、8ヶ月ぶりに。軌跡にそって、キラキラなパーティクルが3D空間に放出されるという Flash デモを作ってみました。 デモ (要 Flash Player 10.1 以上) ソースコード (wonderflに一ヶ月前に投稿済み) このデモは、ActionScript 3.0 の 3D エンジン「Papervision3D」とパーティクルエンジン「Stardust」を組み合わせて作ったデモです。どちらもオープンソースのライブラリで、MITライセンスなので無料で利用することができます。両方のライブラリとも当ブログで解説記事を数回にわたり投稿していますので、使い方を知りたい方は次の記事を参考くださいませ。 60個のソースが無料でダウンロードできるFlash 3Dの学習サンプル集 Stardustを使ってAS3のパーティクル表現を学ぶ Vol.0
Stardustを使ってAS3のパーティクル表現を学ぶ Vol.01 | ClockMaker Blog
ActionScript 3.0 のパーティクルエンジンである Stardust (スターダスト)についてチュートリアル記事を書いていこうと思います。 以前、さらっと概要を紹介しましたが、Stardust は MIT ライセンスで公開されているため個人・商用利用ともに扱いやすい AS3 のライブラリです。Stardust はカスタマイズしやすいように設計されたライブラリでもあり、本家サイトではバリエーション豊富で魅力的なサンプルがいくつも紹介されています。(開発者のブログはこちら「CJ’s Blog」) 第1回のチュートリアルでは Stardust を動かすに当たり、最小限のソースコードで動作する使い方を説明します。 1.ライブラリの導入 Google Code からライブラリをダウンロードします。今回はソースファイルが格納されている rar ファイル「Stardust 1.1.132 B
Molehill を搭載した Flash Player 11 インキュベーターリリースが公開 | ClockMaker Blog
待望の新しい3D API Molehill (モールヒル)を搭載した Flash Player Incubator のプレビュー版がリリースされました。以前、「次の世代のFlash Playerは凄いことに！GPUにより数十万ポリゴンが60FPSで動く」という記事で紹介した次世代の Flash Player です。 Adobe AIR and Adobe Flash Player Incubator – Adobe Labs 今回公開されたものを使うことによって Molehill API を利用した SWF をコンパイルすることができます。既に国内外で紹介記事がでてます(早い！) 馬鹿全 – FlashDevelop + FlashPlayer11(Molehill) + Away3D 4.0 Alpha での遊び方 Changing the web, again. – ByteArray
FlashのアニメーションをHTML5に変換するツール「Wallaby」をAdobeが公開 | ClockMaker Blog
FlashのアニメーションをHTML5に変換するツールとして、3月8日「Wallaby (ワラビー)」のプレビュー版がAdobe Labsにて公開されました。 Download Wallaby – Adobe Labs 結論から言うとブラウザ互換など懸念点がありますが、思った以上に変換精度が高いです。そして真っ先に感じたのは、WallabyによってHTML5出力が可能になったという点で、アドビが提供しているFlash ProfessionalはHTML5時代が万が一到来してもオーサリングツールとしてのポジションを保ち続けるだろうということです。 速報として「インストール方法と使い方」と「変換したデモ」を紹介してみます。以下詳細です。 インストール方法と使い方 ①まずはAdobe Labsからアプリケーションをダウンロードします。アプリケーションはAdobe AIR製ですので、事前に最新のA
次の世代のFlash Playerは凄いことに！GPUにより数十万ポリゴンが60FPSで動く | ClockMaker Blog
今年のAdobe MAX 2010で発表された新技術の一つにFlash Playerの新しい3D APIがあります。現状のFlashの3Dでは数千のポリゴンしか処理できませんが、次の時代のFlash Playerでは数十万のポリゴンが処理できるようになります。これは従来と比べて 100倍ものパフォーマンスとなります。どのぐらい凄いかというと、次のビデオを見てもらえばわかるはず。 数十万のポリゴンをHDサイズのフルスクリーンにおいて60 FPSで処理される、という鬼のようなパフォーマンス。なおかつ、CPUの使用率が減るというエンドユーザーに優しい恩恵付き。この技術はFlash PlayerからGPUを利用することにより可能になったものです。コードネームは「Molehill」と呼ばれており、2011年中旬のリリース予定で開発が進められています。 Adobe Labs – 3D APIs for
60個のソースが無料でダウンロードできるFlash 3Dの学習サンプル集 | ClockMaker Blog
当ブログではFlashの3Dに関する記事を数多く書いていますが、この度それらの記事をこの1ページにまとめてみました。系統別にまとめたので、目的とする解説やサンプルが探しやすくなったのではないかと思います。それぞれの記事でソースファイルをダウンロードできますので、学習の理解にお役立てください。 Flashの3Dエンジンで最もメジャーな「Papervision3D」を中心にブログ記事を書いています。 Papervision3D – チュートリアル クリックで再生できます フレームア クションで覚える PV3D チュートリアル Vol.01 フ レームアクションで覚える PV3D チュートリアル Vol.01 (補足) フ レームアクションで覚える PV3D Vol.02 : Primitiveを理解する フ レームアクションで覚える PV3D Vol.03 : Materialを理解する フ
フレームアクションで覚える Papervision3D チュートリアル Vol.01 | ClockMaker Blog
私の身の回りの人やメール等でPapervision3D (ペーパービジョンスリーディー)の使い方を教える機会があり、その度にチュートリアルサイトを教えたりしています。ただ、世の中のコードを見ると様々な書き方があり、スクリプトになれていない初級者にとっては、難解に思われる事が多いかと思います。 そこで、初級者にもやさしいPapervision3D(以下、PV3D)チュートリアルをはじめてみることにしました。チュートリアルビデオを用意して5回ぐらいに渡って連載したいと思います。必要となるスキルレベルは、ActionScript 3.0の入門書を一冊読み終えたぐらいを想定してます。 テーマは「フレームアクションだけの短いコードで、シンプルにPapervision3Dを使ってみる」です。 なお、Papervision3Dの解説はさらに詳しく書籍にもまとめています。このブログを読んでさらにスキルを高
?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+clockmaker+%28ClockMaker+Blog%29
アップルの新デバイス iPad が Flash に対応していないことや、アップルの CEO スティーブ・ジョブズ氏の苦言により、HTML5 は Flash に取って代わるのかという論議が現実味を帯びて論じられるようになりました。 「なぜAppleはiPadにFlashを載せるべきではない」のか AdobeのCTO、Kevin LynchがFlashを擁護―「HTML5はウェブビデオを暗黒時代に投げ戻す」 そこで、HTML 5 と Flash は何が違うのか両者の違いを図にまとめてみました。 (上の画像はクリックで拡大できます) 左側が HTML5 にしかない機能、右側が Flash にしかない機能で、中央の重なっているところが両方が利用できる機能です。グラフィック関係では、HTML5 では描画やビデオ関係はサポートするものの、テキスト周りや高度なグラフィック処理、デバイス機能ではまだ Fl
パーティクル表現のためのAS3ライブラリ「Stardust」 | ClockMaker Blog
ざっくばらんにいろんなライブラリを紹介するシリーズ第三段目。Stardust (スターダスト)という海外のパーティクルライブラリの紹介。2Dにも3Dにもどちらにも利用できる表現の自由度が高いライブラリです。とりあえず、Papervision3Dと組み合わせてデモを作ってみました。蝶が飛んだ軌跡に発生している粒子部分がStardustの効果になります。 demo (Flash Player 9) ライブラリStardust とは 2Dと3Dをサポートするパーティクルエンジンで、ソースコードはMITライセンスとしてGoogle Codeにて公開されています。さまざまな効果やプロパティーを組み合わせて使うことができ、自由度の高いカスタマイズが可能です。 stardust-particle-engine ライブラリの特徴は次のような感じ。 簡単にカスタマイズができる 重力や反発といった物理演算の適
wonderflから学ぶActionScript 3.0最適化 | ClockMaker Blog
いつも勉強になる_level0.KAYACさんのブログでイベント告知(ごはんとFlash -Its a wonderfl rice-)がありましたが、皆さん詳細をチェックしましたか？ ライブコーディングというその場でActionScript 3.0を書いて課題のFlashを作るという企画もあるのですが、私も参戦します。果たして30分で作り上げることができるのか、今から緊張します。 さて、前置きが長くなりましたが、wonderflで検証されたActionScript 3.0最適化手法をまとめてみました。詳細は以下から。 Bitmap関連 Flashの処理速度の最適化において、描画処理の最適化は最も効果があります。ここではスクリプトで高速化した検証結果をまとめてみました。 BitmapDataクラスのdraw()とcopyPixels()だとcopyPixels()のほうが160%高速。 co
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://clockmaker.jp/blog/2014/01/html5-webgl-away3d-typescript-samples/
