ClockMaker Blog

Links for 20130524 [はてなブックマーク]

2013-05-25T00:00:00-07:00

Flash Daily: SEA3D and Away3D demo “Morph Effect” Mouse...

Flash Daily: SEA3D and Away3D demo “Morph Effect” Mouse...
SEA3D and Away3D demo “Morph Effect” Mouse move : Change camera view Mouse Position : Morph strength UP, DOWN, LEFT, RIGHT, SHIFT KEY: Move character SPACE KEY: Item motion

yasu-log ［B!］Flash Daily: SEA3D and Away3D demo “Morph Effect” / オレンジさんのデモ
TypeScriptのススメ～JavaエンジニアのためのJava(like)Script - SSSSLIDE

TypeScriptのススメ～JavaエンジニアのためのJava(like)Script - SSSSLIDE
TypeScriptのススメ ∼ JavaエンジニアのためのJava(like)Script 2013/03/15 Acroquest Technology株式会社谷本心 ( @cero_t ) var Counter = (function() { var count = 0; function Counter() {} Counter.prototype.get = function() ...

yasu-log ［B!］TypeScriptのススメ～JavaエンジニアのためのJava(like)Script / CoffeeScriptや生JavaScriptの比較がありメリットが端的に紹介されている
HaxeとTypeScriptを両方使ってみた感想 - ジンジャー研究室

HaxeとTypeScriptを両方使ってみた感想 - ジンジャー研究室
2013-05-24 HaxeとTypeScriptを両方使ってみた感想型付きAltJSとして名高いHaxeとTypeScriptですが、両方使ってみたので比較しながら感想でも書こうかなということで。あくまで自分の使ってみた範囲でしか話せないのでご容赦を。執筆時点での両者のバージョンは、Haxe2.1/TypeScript0.8で、もうすぐHaxe3.0/TypeScript0.9が出ようという...

yasu-log ［B!］HaxeとTypeScriptを両方使ってみた感想 - ジンジャー研究室 / 一長一短であり、まだ判断が難しいところ。インポートの処理や名前空間の処理についてHaxeが優れている
Re: HaxeとTypeScriptを両方使ってみた感想 - DenkiYagi

Re: HaxeとTypeScriptを両方使ってみた感想 - DenkiYagi
2013-05-25 Re: HaxeとTypeScriptを両方使ってみた感想 Haxe HaxeとTypeScriptを両方使ってみた感想 - ジンジャー研究室に対してのコメント。コメント欄ではレスを書くには余白が狭すぎです。 if式について HaxeのifはBool型しか受け付けないため、存在判定はnullとの比較が必須になる。JavaScriptからHaxeに移行するとifの度にコードが...

yasu-log ［B!］Re: HaxeとTypeScriptを両方使ってみた感想 - DenkiYagi / さきほどの記事に対するコメント記事
[CreateJS] | momoclo

[CreateJS] | momoclo

yasu-log ［B!］CreateJS版のももクロ / 花びらのパーティクル
[Starling] | momoclo

[Starling] | momoclo

yasu-log ［B!］Starling (Stage3D) の方がももクロ / Flash Starlingのほうが早く動く
three.js editor

three.js editor

yasu-log ［B!］three.js editor / AwayBuilderもどきのオンラインツール
生存報告 | blog.taiga.jp

生存報告 | blog.taiga.jp
投稿が停滞していますが無事に生きています。生存報告ついでに当ブログを Movable Type から WordPress に移行しました。あと、ここでは告知していなかったのですが、2011 年の 7 月からクラスメソッド株式会社のプリンシパルパートナーとして、技術ブログの記事を不定期で投稿しています。たいが｜ Developers.IO http://dev.classmethod.jp/...

yasu-log ［B!］生存報告 | blog.taiga.jp / 「弊店 (taiga.jp) で受ける案件は Flex または AIR を使用したものが 100% を占めています」とのこと。

Links for 20130523 [はてなブックマーク]

2013-05-24T00:00:00-07:00

JavaScript、適用範囲広げサーバーサイドの有力言語へ - 大規模開発での注意点：柔軟な言語仕様でコードの...：ITpro

JavaScript、適用範囲広げサーバーサイドの有力言語へ - 大規模開発での注意点：柔軟な言語仕様でコードの...：ITpro
「ITアーキテクト養成講座」第4期がいよいよ6/5（水）開講！ITアーキテクトに求められるタスクとスキルを全4回の短期集中講座で体系的に習得します。詳細・お申し込みはこちら。 JavaScriptで大規模なシステムを構築する際の注意点を説明しよう。注目すべきはJavaScriptの言語仕様である。1人で小さなアプリを開発する際は柔軟でいいのだが、この柔軟さは、大規模開発では仇となる。「JavaS...

yasu-log ［B!］大規模開発での注意点：柔軟な言語仕様でコードの統一性が失われる危険も。仕様を先取りする「TypeScript」で解決しよう
The WebGL potential | TypedArray.org

The WebGL potential | TypedArray.org
The WebGL potential With the rumors of WebGL being more broadly supported, especially IE, the promise of a true cross platform set of GPU APIs is almost there, I personally believe that this will chan...

yasu-log ［B!］The WebGL potential | TypedArray.org
Starling Fire Benchmark - Google Play の Android アプリ

Starling Fire Benchmark - Google Play の Android アプリ
Hello, this is a Starling application for mobile devices that uses the Starling-Extension-Particle-System.It simulates fire and hot air distortion. To make air distortion I used invisible particles th...

yasu-log ［B!］Starling Fire Benchmark - Google Play の Android アプリ / Starlingの炎のパーティクルを試すだけのAndroidアプリ

Links for 20130522 [はてなブックマーク]

2013-05-23T00:00:00-07:00

elsassph/createjs-def · GitHub

elsassph/createjs-def · GitHub
README.md CreateJS Toolkit definitions generator Generate definition files for various languages from CreateJS Toolkit's generated JavaScript library. The Flash Professional Toolkit for CreateJS is an...

yasu-log ［B!］TypeScriptやHaxe用の定義ファイルを作るCreateJS用の便利なJSFL。フィリップさん素敵すぎる
MAX 2013 – The Creativity Conference | Adobe TV

MAX 2013 – The Creativity Conference | Adobe TV
To view this content, you need the latest version of the Flash Player. Adobe TV uses the Open Source Media Framework (OSMF) to deliver a superior video experience. Please upgrade your Flash Player to ...

yasu-log ［B!］ AdobeMAX イベントの全セッションが見れるページ。各ツールのテクニック、新バージョンの機能紹介、ツールに依存しないデザイン話など。
Landscape Generation in Away3D | Tom Danvers

Landscape Generation in Away3D | Tom Danvers
I recently did a client project in AIR that had a location map section. They created the map in 3D Studio Max and wanted the user to be able to control the camera using a touch screen. I used Prefab3D...

yasu-log ［B!］Landscape Generation in Away3D | Tom Danvers / Away3Dの地形ジェネレーター
CreateJS始める前に、いろんな記事を集めてみよう #CreateJS #JavaScript #flash - Qiita [キータ]

CreateJS始める前に、いろんな記事を集めてみよう #CreateJS #JavaScript #flash - Qiita [キータ]
CreateJSをやってるひとのうわさによると Flasherならドキュメント読めばなんとなくわかるんだって。でもやっぱりいろいろ読んでおきたいから、まとめておこう。公式、ドキュメント CreateJS デベロッパーセンター | Adobe Developer Connection [ADC] 公式。ドキュメント、チュートリアルへのリンクなど。 Docs - CreateJS 過去のバージョン...

yasu-log ［B!］CreateJS始める前に、いろんな記事を集めてみよう / まとめ記事
庵野監督「どうか、助けて下さい」　特撮の歴史と現状をまとめた「日本特撮に関する調査報告書」 - ねとらぼ

庵野監督「どうか、助けて下さい」　特撮の歴史と現状をまとめた「日本特撮に関する調査報告書」 - ねとらぼ
「どうか、助けて下さい。特撮、という技術体系が終わろうとしています」――庵野秀明監督がこんな言葉を寄せた、「日本特撮に関する調査報告書」がこのほどPDFで公開されました。同書では、特撮の歴史や系譜、文化的な影響、さらにCGの広まりとともに活躍の場を失いつつある現状など、特撮にまつわるさまざまな情報をまとめています。調査報告書の目次同書は、2012年夏に開催された「館長庵野秀明特撮博物館　ミ...

yasu-log ［B!］庵野監督「どうか、助けて下さい」　特撮の歴史と現状をまとめた「日本特撮に関する調査報告書」 / 「特撮」というワードを「Flash」に置き換えても成り立つ…？
How to Mobilize Atari Arcade in HTML5 | Web Resources | WebAppers

How to Mobilize Atari Arcade in HTML5 | Web Resources | WebAppers
This article recently appeared on the Atari Arcade Developer Center, a collaboration by the teams at gskinner.com , Atari and Internet Explorer. The Atari Arcade: a true game portal showcasing what’s ...

yasu-log ［B!］HTML5ゲーム「レスポンシブ」化の苦労話 / デバイスの幅をいっぱいにするためのEaselJSチップスとして参考になる
CBCNET : TOPIC » Adobe MAX レポート02 – デザインセッションなど

CBCNET : TOPIC » Adobe MAX レポート02 – デザインセッションなど
http://www.cbc-net.com/topic/2013/05/adobe-max-2013-report01/ 2日目の基調講演では、例年のアドビ社からの発表ではなく、様々な分野で活躍するデザイナーやアーティストが登壇し、制作のフィロソフィーなどをプレゼンテーションする内容となった。こちらも今年のMAXを象徴する大きな変化となった。グラフィックデザイナー、美術家であるポーラ・シェア。...

yasu-log ［B!］CBCNET : TOPIC » Adobe MAX レポート02 / たくさんリンク張っていてもらって嬉しいです！

Links for 20130521 [はてなブックマーク]

2013-05-22T00:00:00-07:00

HTML5 canvas のパフォーマンスを向上させる - HTML5 Rocks

HTML5 canvas のパフォーマンスを向上させる - HTML5 Rocks
サポートされているブラウザ: Opera 対応済み Internet Explorer 対応済み Safari 対応済み Firefox 対応済み Chrome 対応済みご使用のブラウザは、この記事で使用している機能の一部に対応していない可能性があります。ご使用のブラウザは、この記事で使用しているすべての機能に対応しています。はじめに Apple の実験から始まった HTML5 canvas...

yasu-log ［B!］HTML5 canvas のパフォーマンスの改善 - HTML5 ROCKS / 描画レイヤーの分離、再描画領域の計算など。再描画領域はフレームワークで対応されると嬉しい‥
HTML5実験室

HTML5実験室
最近、Flashのようなプラグインを使わずに、ブラウザ自体に搭載されつつある新しいウェブ標準の機能（いわゆる広義のHTML5）を使ってアプリやゲームを作ろうという動きがあります。実のところ、HTML5はゲームのようなシビアな用途ではまだまだ問題が多いのですが、個人的に実験作をいろいろ作って特性を調べたりしています。このページではそういったものをまとめて載せています。 IE9以降やChrome等の最...

yasu-log ［B!］HTML5実験室 / HTML5の問題点が鋭く正確に指摘している。必読記事
描画とかGPUアクセラレーションの怪 (モバイル編) ::ハブろぐ

描画とかGPUアクセラレーションの怪 (モバイル編) ::ハブろぐ
何かと不透明なあたり気がつけば一ヶ月ほどブログを更新していませんでした。リハビリ記事です。今回は、GPUを効かせる == それに関連するプロパティ（ただしOSやバージョンによって何がトリガかは厳密に異なる）を適用したら挙動が改善した、というようなノリの体験TIPSをゆるくまとめました。このあたりの振る舞いについては、描画パフォーマンスの問題として、それなりに明らかになってきているように思いま...

yasu-log ［B!］描画とかGPUアクセラレーションの怪 (モバイル編) ::ハブろぐ
pixelplant.com - convert Flash to HTML5

pixelplant.com - convert Flash to HTML5
Please fill in the form and we'll get back to you with a no-obligation quote for the conversion of your file. Please fill in the form and we'll get back to you with more information. Close the form to...

yasu-log ［B!］FlashからHTML5に変換するサービス「pixelplant」。SVGタグになるっぽい
randoriはActionScriptをJavaScriptにコンパイルするframework « イナヅマTVログ

randoriはActionScriptをJavaScriptにコンパイルするframework « イナヅマTVログ
randoriはActionScriptをJavaScriptにコンパイルするframework 2013 年 5 月 21 日 by taikiken | 0 comments 徳さんが深夜にTweetしてた”randori”が超興味津々。 Code Three.js in ActionScript with Randori Compiler ActionScriptで作ったファイルをrando...

yasu-log ［B!］randoriはActionScriptをJavaScriptにコンパイルするframework / FalconJSが何時まで経っても実用の域に達しないので、こちらを期待
JSX / Haxe / TypeScript

JSX / Haxe / TypeScript
Accessibility View text version Categories Technology Upload Details Uploaded via SlideShare as Adobe PDF Usage Rights © All Rights Reserved Statistics Favorites 2 Downloads 0 Comments 0 Embed Views 0...

yasu-log ［B!］スライド資料「JSX / Haxe / TypeScript」/ 少し古いですが参考になるのでブクマ
Multi-touch game "Colore Create" demo (CreateJS + TypeScript)

Multi-touch game "Colore Create" demo (CreateJS + TypeScript)
CreateJS と TypeScript を使用して制作したゲーム「Color Create」のデモムービーです。

yasu-log ［B!］Multi-touch game "Colore Create" demo (CreateJS + TypeScript)

Links for 20130520 [はてなブックマーク]

2013-05-21T00:00:00-07:00

InspiRational:

InspiRational:
Packed with custom designed software Displair became the device with the most precise and accurate gesture control system created for free-space enviroment. Displair opens absolutely the new era in th...

yasu-log ［B!］Adobe MAX 2013の会場で見かけた霧を使ってタッチスクリーンを表現する謎のデバイスの公式ページ
TypeScript Compile Demo

TypeScript Compile Demo
This is a demo of TypeScript Compile. Have a look at the source code.

yasu-log ［B!］TypeScript Compile Demo / ランタイムでTypeScriptをコンパイル(?)して動作させるデモ
Sendra Custom Boots

Sendra Custom Boots

yasu-log ［B!］Sendra Custom Boots / Flash Stage3Dで作られた靴をカスタマイズして購入できるサービス。シミュレーションが綺麗。
PushState for CreateJS

PushState for CreateJS
left: prev, right: next, up: top <canvas> tag is not supported.

yasu-log ［B!］PushState for CreateJS / アルミカンさんが作ったCreateJSとHTML5 PushState(kajitori.jsを利用)で作ったプレゼン資料
HTML5でリッチコンテンツを作る新しい選択肢、Dart言語とStageXLフレームワークとは | ICS LAB

HTML5でリッチコンテンツを作る新しい選択肢、Dart言語とStageXLフレームワークとは | ICS LAB
こんにちは、ICS池田です。今回はHTML5でリッチコンテンツを作るための新しい手法としてDartという言語と、StageXLというフレームワークを紹介したいと思います。Dart言語を使うことでJavaやActionScriptライクにコードを書くことができ、StageXLフレームワークを使うことでFlashのようなリッチコンテンツをHTML5で作ることができます。意外だったGoogle I/...

yasu-log
最新のDart VM がJVMにDeltaBlue ベンチマークで勝つ

最新のDart VM がJVMにDeltaBlue ベンチマークで勝つ
最新のDart VM がJVMにDeltaBlue ベンチマークで勝つ作者： Abel Avram , 翻訳者編集部Ｎ投稿日 2013年5月17日 | 共有 | 後で読むマイリーディングリスト原文(投稿日：2013/05/11)へのリンク Dart2js が手書きのJavaScriptを上回った直後に、最新のDart VMは、JVM 7 64-ビットサーバーと他のバージョンにDelta...

yasu-log ［B!］最新のDart VM がJVMにDeltaBlue ベンチマークで勝つ - InfoQ / 手元のDartium(Dart VMを積んだChromium)だとDartを直接実行すると全然早くないのですが、ブラウザ積むDart VMってなにか制限しているのでしょうか
あるソシャゲ会社のプロジェクトのひっくり返り方。:島国大和のド畜生

あるソシャゲ会社のプロジェクトのひっくり返り方。:島国大和のド畜生
伝聞。あるソシャゲ会社のプロジェクトのひっくり返り方。１年目　新卒に運営の手伝いをさせる。２年目　運営を切り盛りさせる。３年目　開発の頭をやらせる。　そりゃひっくり返るわ。　何一つ開発で学んでないじゃんか。なぜ開発ができると思うんだ。　運営業務はウィークリーでデイリーなので、関わってると運営に関しては結構いいスピードで詳しくなるが。　開発は少なくとも数ヶ月かかるので。詳しくなるには...

yasu-log ［B!］あるソシャゲ会社のプロジェクトのひっくり返り方。
Awwwards | The CSS website Awards

Awwwards | The CSS website Awards
CSS Gallery. The CSS website awards gives recognition, prestige and visibility to the best websites developed with CSS technologyThe awards for design, creativity and innovation on the Internet, which...

yasu-log ［B!］Awwwards | The CSS website Awards / デザインを評価するサイト
長めのページでも pushState して URL 履歴を残そう | デブハゲ

長めのページでも pushState して URL 履歴を残そう | デブハゲ
どうもです。先週はうっかり記事を書くことを忘れてしまいました。それはさておき、忘れてたかのように pushState というか Kazitori.js のサンプルをちょっと。少しずつ Kazitori.js が広まってきてるようでもうちょっとメンテナンスしつつサンプルも増やさんとまずいな―と慌てて2時間くらいで書いたとかそんな馬鹿な話はありません。ありません。とりあえず以下がサンプル...

yasu-log ［B!］長めのページでも pushState して URL 履歴を残そう | デブハゲ
Python で GitHub API と連携して gist に投稿する話 | デブハゲ

Python で GitHub API と連携して gist に投稿する話 | デブハゲ
先日リリースした MY GRUNTFILE ではログインや、 Gruntfile の共有に GitHub API を使用しています。今後デベロッパー向けのサービスやツールについては twitter より GitHub アカウントで認証したほうがマッチしているのではないでしょうか。 GitHub API はどこぞのマイクロブログサービスが提供している API よりはるかに使いやすくなっており、 ...

yasu-log ［B!］Python で GitHub API と連携して gist に投稿する話 | デブハゲ
Untitled

Untitled
Reference Original: Untitled-2 with original Canvas methods. CreateJS: Fun with Particles by Sebastian DeRossi. w/source.

yasu-log ［B!］CreateJSで作られた美しいパーティクル群
Flash CC – 新機能トップ５（僕的に）

Flash CC – 新機能トップ５（僕的に）
Flash Professional CCのリリースが迫って来たので、僕なりのトップ５新機能を紹介するビデオを作ってみました！見どころは、「Number ＃」を若干ラジオDJっぽく言おうとしたところです。 Flash CC – 新機能トップ５（僕的に）中身だけ知りたい方には、続きをご覧を：僕的に気に入ったFlash Pro CC 新機能トップ５：スピードアプリが２秒で起動するのはFlash...

yasu-log ［B!］Flash CC – 新機能トップ５（僕的に）- Andy Hall ブログ / 爆速起動やビデオ書き出し、無限ステージなど素晴らしい
A JavaScript refresh | TypedArray.org

A JavaScript refresh | TypedArray.org
A JavaScript refresh Versions Assembly language of the web No compiling Tools REPL Getting started A dynamically typed language Variables and scope Type conversions Runtime exceptions Primitive and co...

yasu-log ［B!］A JavaScript refresh | TypedArray.org2 users / JavaScriptのおさらい。長文だがすごくよくまとまってる。
lljs cloth demo

lljs cloth demo
Tear-able cloth in asm.js This was written in LLJS which I have ported to compile to asm.js. View the source code, specifically the LLJS file. It automatically scales up to the highest dimension your ...

yasu-log ［B!］lljs cloth demo / ブラウザのスペックによってきめ細かさが違うデモ。asm.js対応ブラウザ「FirefoxAurora」で見ると超きめ細かい
Bullet/WebGL Demo

Bullet/WebGL Demo
This is ammo.js, a port of the Bullet physics engine from C++ to JavaScript using Emscripten in asm.js mode. WebGL rendering in this demo is done using CubicVR.js.

yasu-log ［B!］Bullet/WebGL Demo / asm.jsの性能を確かめることができるデモコンテンツ
無料でCreative Cloudを使い倒せ（5）：アドビの本気度が詰まったAdobe Maxまとめ - ＠IT

無料でCreative Cloudを使い倒せ（5）：アドビの本気度が詰まったAdobe Maxまとめ - ＠IT
アドビシステムズ（以下、アドビ）の年次イベント、Adobe MAXが18カ月ぶりに開催された。Adobe MAXといえば、旧Macromedia時代のMacromedia MAXの流れを汲む、主に開発者向けのイベントである。今回からはクリエイティブ向けのセッションも増加し、デザイナでも参加できるよう「クリエイティブのイベント」して生まれ変わった。会場は前回と同じ、アメリカのロサンゼルス中心部、ダ...

yasu-log ［B!］アドビの本気度が詰まったAdobe Maxまとめ - ＠ IT / 岡本さんの記事
FireworksがCreative Cloudのアップグレードサイクルから外れた意味：Fireworksはまだまだ終わらない - ＠IT

FireworksがCreative Cloudのアップグレードサイクルから外れた意味：Fireworksはまだまだ終わらない - ＠IT
FireworksがCreative Cloudのアップグレードサイクルから外れた意味：Fireworksはまだまだ終わらない FireworksはCreative Cloudのアップグレードサイクルからまたも外れてしまった。これは開発終了を意味するのか、Fireworks大好きな筆者が現地ロサンゼルスで考えた。 2013年5月6日（現地時間）、アメリカ、カリフォルニア州ロサンゼルスのロサンゼルス...

yasu-log ［B!］Fireworksはまだまだ終わらない - ＠ IT/ 現地のMAXに参加した記者の意見

Links for 20130519 [はてなブックマーク]

2013-05-20T00:00:00-07:00

Philippe.me » Type annotations for the CreateJS Toolkit

Philippe.me » Type annotations for the CreateJS Toolkit
Actually I hope you’ve heard of CreateJS. Many people have heard about it, but I often find out that they don’t really know what CreateJS is, what it can do, and why it can really help developing expr...

yasu-log ［B!］Philippe.me » Type annotations for the CreateJS Toolkit / 昨今のCreateJSや言語事情をまとめた良記事。Toolkit for DartやStageXLへの言及もあり。Toolkit for CreateJSで吐き出したシンボルの定義ファイルの作り方も紹介。
SEA3D and Away3D demo "Morph Effect"

SEA3D and Away3D demo "Morph Effect"
To view this page ensure that Adobe Flash Player version 11.1.0 or greater is installed. Instructions Mouse move : Change camera view (マウス操作でカメラ操作) Mouse Position : Morph strength (マウス位置でモーフの強さが変化) UP...

yasu-log ［B!］SEA3Dを使ったモーフエフェクトのデモを作成 - orange-suzuki / Away3Dでモーフィング
TypeScriptのGenerics試してみる - yaakaito.org

TypeScriptのGenerics試してみる - yaakaito.org
こんにちは！うきょーです！TypeScript0.9alpha使える環境作ったのでジェネリクス試すよ！ typescript-dddbaseというのをはじめていたので、これを0.9対応することを見越して、Identify Entity Repositoryをジェネリクス使って考えてみる。使い方 classかinterfaceで名前与えられたものと、string number なんかを使う事が出来...

yasu-log ［B!］TypeScriptのGenerics試してみる - yaakaito.org

Links for 20130518 [はてなブックマーク]

2013-05-19T00:00:00-07:00

Announcing Flash Professional CC – Toolkit for Dart

Announcing Flash Professional CC – Toolkit for Dart
At Google I/O, 2013, Adobe announced The Toolkit for Dart, a new extension to Flash Professional CC. You can now create rich, interactive, and animated content, and publish to the Dart language. Dart ...

yasu-log ［B!］Announcing Flash Professional CC – Toolkit for Dart / これは！！！
Dart News & Updates: Adobe's Flash Pro CC Exports to Dart and HTML5

Dart News & Updates: Adobe's Flash Pro CC Exports to Dart and HTML5
Wednesday, May 15, 2013 Adobe's Flash Pro CC Exports to Dart and HTML5 At Google I/O today, Adobe announced their new Toolkit for Dart, a plugin for Flash Professional CC that allows developers to exp...

yasu-log ［B!］ Wednesday, May 15, 2013 Adobe's Flash Pro CC Exports to Dart and HTML5
StageXL for Dart

StageXL for Dart
The StageXL library is intended for Flash developers who want to migrate their projects as well as their skills to HTML5. Therefore the library provides the familiar Flash API built on top of the Dart...

yasu-log ［B!］StageXL for Dart / Dart言語向けのFlashライクなフレームワーク。Dart言語の癖はあるものの、APIはFlashにかなり近づけて用意されている。
StageXL - Escape

StageXL - Escape
This game was developed with Flash/ActionScript and later ported to HTML5/Dart. The similarity between ActionScript and Dart made it surprisingly easy to convert the as3-files to dart-files. The Stage...

yasu-log ［B!］StageXLで作られたゲーム「Escape」
Flash Pro CC の機能拡張 Toolkit for Dart の発表 - akihiro kamijo

Flash Pro CC の機能拡張 Toolkit for Dart の発表 - akihiro kamijo
現在サンフランシスコで開催されている Google I/O 2013 で、アドビから Toolkit for Dart の発表がありました。（Google Dart チームの発表記事） Toolkit for Dart は Flash Professional CC の機能拡張として提供されます。Toolkit for CreateJS と同じように、ムービークリップやタイムラインアニメーション...

yasu-log ［B!］Flash Pro CC の機能拡張 Toolkit for Dart の発表 - akihiro kamijo

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

2013-05-14T11:41:26Z

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

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

Flash

What’s New and Upcoming in Flash Professional
Flash Pro CCの新機能をトム・バークレーが紹介、セッションの最後には画期的な新機能の紹介も!?
Adobe Scout: Profiling Taken to the Next Level
今度のScoutではメモリ状況の確認が進化。ChroniumブラウザでのHTML5コンテンツの解析も可能に!?
Game Frameworks Panel (Away3D, Starling, Feathers)
主要なStage3Dフレームワークの紹介。各フレームワークの開発者が紹介してました。Starling JSやAway Builderなど新しい技術の発表もありました。
Flash Tech by Zynga
City Villeで有名なZyngaによるFlashの取り組みについての紹介。PlayScriptについても言及あり。
Creating Game Engine In Stage3D and WebGL
WebGLで作ると大変なうえに動く環境が少ないから、Stage3Dのほうがいいという内容でした。

HTML5

CreateJS: Building Rich Interactive Experiences in HTML5
グラント・スキナ―氏によるCreateJSの紹介。
HTML5 for ActionScript 3.0 developers
TypeScript等のコンパイル言語の紹介。
Optimizing Browser Rendering
Fast Performance with CSS on Mobile
JavaScript Puzzle
JavaScriptのパズル形式のセッション。JSの理解度が試されます。
Practical JavaScript
実用的なJSのセッション。問題と現状の対策と未来の解決案を示した良セッション。

その他

Adobe MAX 2013に参加します

2013-05-03T08:21:48Z

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

Adobe MAX 2013のスケジュール

イベントの様子はADC Plusというサイトで逐次お知らせしていくつもりですのでぜひご確認ください。

ADC Plus アドビ関連情報をタイムリーにお届けするカジュアルな情報サイト

また私のTwitterやFacebookでも逐次お知らせしていく予定ですのでこちらも合わせてフォロー下さいませ。

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

2013-04-09T04:35:47Z

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

Demo (Require the browser supported HTML5 Canvas)

Demo (Require the browser supported HTML5 Canvas)

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

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

使い方

(1) こちらのページからZIPファイルをダウンロード

(2)HTMLファイルでCreateJSの必要なライブラリを読み込む

<script type="text/javascript" src="libs/easeljs-0.5.0.min.js"></script>
<script type="text/javascript" src="libs/tweenjs-0.3.0.min.js"></script>
<script type="text/javascript" src="libs/preloadjs-0.2.0.min.js"></script>
<script type="text/javascript" src="libs/Filter.js"></script>
<script type="text/javascript" src="libs/ColorFilter.js"></script>
<script type="text/javascript" src="libs/particleEmitterJs-0.5.0.min.js"></script>

(3)CreateJS (EaselJS)の初期化をしておく

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Particle Emitter Example - Comet</title>
    <script src="libs/easeljs-0.5.0.min.js"></script>
    <script src="libs/tweenjs-0.3.0.min.js"></script>
    <script src="libs/movieclip-0.5.0.min.js"></script>
    <script src="libs/preloadjs-0.2.0.min.js"></script>
    <script src="libs/Filter.js"></script>
    <script src="libs/ColorFilter.js"></script>
    <script src="libs/particleEmitterJs-0.5.0.min.js"></script>
    <script type="text/javascript">
        var canvas;         // the canvas element
        var context;        // the 2d context of the canvas
        var stage;          // the createjs stage
        var emitter;        // the emitter
        var particleImage;  // the image to use for each particle

        function loadAssets() {
            particleImage = new Image();
            particleImage.onload = initCanvas;
            particleImage.src = "images/particle_base.png";
        }

        function initCanvas() {
            canvas = document.getElementById('particleEmitterCanvas');
            context = canvas.getContext("2d");
            stage = new createjs.Stage(canvas);

            createjs.Ticker.setFPS(30);
            createjs.Ticker.addListener(update);
        }

        function update() {
            stage.update();
        }
    </script>
</head>
<body onload="loadAssets();">
    <canvas id="particleEmitterCanvas" style="background-color: black;" width="400" height="300"></canvas>
</body>
</html>

(3) フリーのエディターで表現を作りこむ

Editor | Purple Monkey Studios

ビジュアルエディターではパーティクルの持続時間や発生位置や初期速度、加速度、サイズ、透明度、回転などを設定します。それぞれのパラメーターに関して「分散ぐあい（variance）」を設定することができます。

(4) エディターの右下のコードをコピー

(5) コンテンツの使いたい部分にペースト

(6) ブラウザで確認。終わり

パーティクル表現におけるHTML5とFlashとの比較

ちなみにFlash Player 11対応の2Dフレームワーク「Starling Framework」で紹介したパーティクル表現と比べると、圧倒的にFlashのほうがパフォーマンスが良い感じでした（CPU使用率もFlashのほうが圧倒的に低かったです）。正確な測定をしているわけではありませんが、Flashで下のようなデモを再生するとほぼ負荷が無視できるレベル（CPUは1桁台の使用率）なのに対して、上記のHTML5版はほぼ限界レベルの負荷（CPUは50〜80％の使用率）がかかっています。FlashのほうはGPUを活用しているからだと思いますが、ActionScriptの処理速度の高さもありますので、パーティクル表現をするなら圧倒的にFlashのほうが有利だと思いました。

demo

demo

ライブラリを試した感想

パーティクルの演出調整は基本的にモーションデザイナーのタスクだと思うので、GUIのビジュアルエディターで直感的に編集できるのが利点だと思いました。このパーティクルエディターはCocos2Dや Starlingに似たパーティクルパラメーターになっているので、他の言語間でパーティクルの概念を使いまわす時にも役立つことができそうです。

こういったパーティクルライブラリが登場してきたことで、CreateJSをサポートする拡張ライブラリが充実してきた感があります。興味の持った方はぜひ CreateJS から試してみてはいかがでしょうか？

補足

補足ですが、冒頭のデモは少しライブラリをカスタマイズしていて、加算表現が有効になるようにパーティクルオブジェクトに対してcompositeOperation を”lighter”に設定しています（一行追加しただけ）。パーティクルで加算表現の有無はかなりの違いがあるので、ライブラリ側でも対応してほしいものですね。

Toolkit for CreateJS 1.2の新機能紹介

2013-04-08T12:42:56Z

Flash ProfessionalからHTML5に書き出す機能であるToolkit for CreateJSの最新版Version 1.2が公開されました。前回のリリースが2012年9月だったので8ヶ月ぶりのバージョンアップとなります。

Flash to HTML5 | Learn more about the CreateJS toolkit

今回のバージョンアップにおける新しい機能は、リリースノートや試してみたところによると新しい機能は次の通りです。

モーションガイドのサポート
マスクのサポート
最新版CreateJSバージョンの利用(EaselJS 0.6.0 / TweenJS 0.4.0 等)
ボタンシンボルのサポート
JSXに関連するエラーの修正
プロパティ名に連番が付与されてしまう問題の修正(参照)

特にモーションガイドやマスクはFlash Proでアニメーションを作る際に非常によく使う機能だったので嬉しい機能追加ではないでしょうか。

マスクのデモ (ソースのflaファイル）

モーションガイドのデモ (ソースのflaファイル）

取り急ぎ速報でした。また気づいたことがあれば追記したいと思います。

CreateJSデモコンテンツ「日本全国花粉飛散マップ」

2013-03-19T07:29:10Z

こちらのブログの更新が久しぶりになりました。「日本全国花粉飛散マップ」というコンテンツをa24さんと作ってみました。

日本全国花粉飛散マップ Pollen Map in Japan | ICS

HTML5 CanvasをFlashのように扱えるフレームワーク「CreateJS」と、型指定などを使って効率良くJavaScript開発ができる「TypeScript」を使って開発しています。

CreateJS関連の技術について会社のブログにいくつか記事を投稿していますので、よければご覧くださいませ。

Flash Stage3D対応のAway3D作例 – 燃えさかる炎の表現

2013-02-10T14:23:22Z

Flash Player 11のStage3D (GPUを活用できる機能)に対応した3Dライブラリ「Away3D 4.1 alpha」の作例紹介。Away3Dの最新版4.1 alphaのパーティクル機能と、物理演算ライブラリAwayPhysicsを使ってデモを作ってみました。燃えさかる炎の表現です。

Demo (要Flash Player 11.5)
Source (ドキュメントクラス)

このデモは500行ぐらいのコードで表現を作っています。HTML5 & WebGL に比べて Flash & ActionScript は 3D ライブラリが充実しているので、パーティクル機能や3次元の物理演算を比較的容易に実装できるのがいいなと思いました（最近WebGL系のライブラリを触ってみた感想として）。

負荷に対する考察

パソコンによっては動作が重たいかもですが、手元にある2010年のMacBook Proでフレームレートが60fpsで再生できています。Twitterでどのぐらい動作するのか聞いてみたところ次のとおりでした。（ブログに掲載しているデモは、表現を落としてパフォーマンスがでるように調整しています）

Flashで3Dのパーティクルデモを作ってみました。皆さんのPCだとどのぐらいのフレームレートで表示されますか？ (左上の◯/60の数値) clockmaker.jp/labs/130205_aw… #Stage3D #Away3D

— 池田泰延さん (@clockmaker) 2013年2月6日

Adobe Scoutで測定したところ、パーティクルや物理演算はCPU使用率が10%程度なのでCPUへの負荷は少ないのですが、どうやら炎の描画（ブレンドに加算を利用している）のがGPUに負荷がかかっているようです。いずれは最適化をしていきたいところですが、まだまだ時間がかかってしまいそうなので途中版ですがブログで公開（追記：2013/02/10少し最適化しました)。

Away3Dのパーティクル機能

Away3Dのパーティクル機能については次週2/12(火)のStage3D勉強会(第3回)で解説する予定なので、もしよければこちらのイベントにご参加ください。Ustreamも配信する予定です。

Stage3D 勉強会 (第3回) : ATND

Edge Animateで作成するHTML5サイトのサンプル

2013-02-04T07:34:08Z

随分前に作成したものですが、Edge Animateを使ったウェブサイトサンプルを作ったので紹介します。Edge Animateとは2012年9月にリリースされたアドビのHTML5向けのアニメーション制作ツールです(参考記事)。アニメーションを作るためのタイムラインを持っており、JavaScriptなどを併用してインタラクティブコンテンツを作ることのできます。ユーザーコミュニティーが盛り上がればいいなぁということでソースファイルも配布しておきます。

Edge Animateの特徴

インタラクティブコンテンツを作るには課題の多いHTML5ですが、Edge Animateは初級者でも使いやすいように至れりつくせりの機能がついています。特徴的な機能としては次の通り。

アニメーションは内部的にjQueryアニメーションとして変換されている
既存のHTML製ウェブサイトにアニメーションを付与することができる（既存のコードを壊さない）
Google Web Fontに対応している
旧式IE6〜8対応のGoogle Frameプラグインをサポートしている
旧式ブラウザ向けの下位ステージ対応ができる
プリローダー実装のインターフェースがある
スクリプトを書くことなく、HTML5のアニメーションを作成できる
スニペットが用意されているので、スクリプトの苦手なデザイナーも使いやすい（と思う）

Flash Proとの比較

類似ソフトとしてのFlash Proと比べた時のメリットとしては次の点です。

jQueryを用いて動きを実装しているだけあってFlash実行ファイル(SWF)よりも滑らかに動く ※Flashは最大60fps(16ms毎の画面更新)の制限があるのだが、Edge Animateは約77fps (13ms毎の画面更新である)
イージングの種類がグラフ表示されるので容易かつ効率的に動きを調整できる
After Effectsのようなインターフェースであり、プロパティ別のキーフレームが作りやすい (Flash Proのモーションエディターは非常に使いづらいので…)
レイアウト配置に相対配置(パーセンテージ配置)ができるので、可変レイアウト対応が容易
セマンティックに作成できるのでSEOの効果が期待できる (ゼロスクラッチからでも静止テキストとして出力できるし、既存HTMLサイトの編集ならなおさら効果が期待できる)
Edge Animate 1.0の起動がFlash Pro CS6に比べて爆速

もちろんFlash Proのほうが実現可能な機能が多く完成度が高いのですが、新しいソフトウェアということでメリットだけ書きだしてみました。

ADCに寄稿した記事の紹介

またAdobe Developer Connectionにも記事を寄稿していますので、Edge Animateの使い方については次の記事も参考にしてください。

Edge Animateで作るHTMLモーショングラフィック | ADC – Adobe Developer Connection

Flash Stage3D(Starling)とWorkerを利用した流体パーティクルの表現

2013-01-24T05:34:37Z

Flash Player 11.4で追加されたWorkerと、Stage3D（Starling）を利用して、たくさんの矢印が飛び交う流体パーティクルデモをリメイクしてみました。デモは次のURLから試せます。

Demo (require Flash Player 11.4)
Source (ZIP / Flash Builer 4.7 Archive)

以前、本ブログで次の記事で同様のでデモを作ったことがありましたが、その時はFlashのBitmapDataを活用する設計で作成していました。今回のデモでWorkerを使ったメリットと、Stage3Dを使ったメリットを紹介したいと思います。

ActionScript Workerの利用のメリット

ActionScript WorkerとはFlash Player 11.4から搭載されたマルチスレッドのような機能です（Javaのスレッドとは異なる機能）。バックグランドでもう一個独立したActionScriptの処理を走らせることができるので、次のようなメリットがあります。

1フレームを超えるような重たい処理を実行してもバックグランドで実行される
メイン側で重たい処理を実行するとプチフリーズした状態になるが、上記の理由でWorkerで処理することでプチフリーズのような状態は解消できる
3Dモデルのパースや、画像処理など負荷の高い処理を扱うときにプチフリーズのような状態が起きやすいが、それが解消できる

今回のデモではフォースマップの作成をWorker（バックグランド）の処理とさせました。フォースマップの作成はパーリンノイズを使っているのですが、パーリンノイズは負荷の高い処理なのでWorkerを使わなければその時に流体パーティクルが一瞬止まったような現象が発生します。次のデモで確認すると、2秒ごとにプチフリーズが発生していると思います。

Workerを使用していないデモ

Workerを利用することによってプチフリーズのような状態が解消できます。

Stage3Dの利用のメリット

今回はStage3D(GPU)で作成しているため、コンテンツの領域が広くても負荷が少なく60fpsで再生されています。ブラウザの幅を一杯に広げても滑らかに再生できるはずです。

Wonderflに投稿したのですが、最大40000個のパーティクルを表示しても60FPSを再生できています。

Arrows using Starling – wonderfl build flash online

ちなみにFlash Player のデバッグ版だとリリースビルドされたSWFですら、Stage3Dはびっくりするほどパフォーマンスが下がります。ですので、このコンテンツを確認するときはリリース版のFlash Playerでご確認ください。デバッグ版のFlash Playerを使っているのはFlash開発者だけだと思いますが。

HTML5との比較

HTML5 Canvas (フレームワークにCreateJSを使用)とFlash(Starlingフレームワークを使用)とでパフォーマンスを比較してみました。

HTML5版デモを再生 – 4000個
※IE 10やChrome 24やFirefox 18では初期化にすごく時間がかかります
Flash版デモを再生 – 15000個
※Flash Player 11.4が必要)

HTML5版はSafari 6やChrome 24、IE 10だとなんとか表示できますが、Firefox 18だとガタガタです。ブラウザ毎にパフォーマンスに大きな違いがあるのが特徴かと思います。

Flashだと15000個ぐらいの表示でどのブラウザでも60fpsをキープできています。こういうパーティクルの表現はFlash・ActionScriptに一日の長があるようです。
※描画サイズなど違う条件でテストしているので（HTML5は固定サイズ、Flashは可変サイズ）正確な検証というわけではないので、目安程度に見て頂ければと思います。

もし結果に不満があるようでしたら、ぜひご指摘頂ければと思います。HTML5を最適化すればどのぐらい高速化できるのか、その結果のデモがあれば私も見てみたいです。

WebGL対応のライブラリThree.jsを爆速にする方法

2013-01-18T12:49:38Z

前回のWebGL(Three.js)とStage3D(Away3D)の比較ですが、Mr.doobさんを始め国内外の多くの方からご指摘頂きWebGL(Three.js)版を最適化したところ、最終的にはFlash(Away3D)版と同じぐらいのパフォーマンスになりました。当初、最適化・検証不足で間違った情報を掲載してしまい申し訳ありませんでした。

さて、そのWebGL(Three.js)版を最適化した手法が有意義だったのでシェアしたいと思います。

デモの紹介

まずはこちらの2つのデモの再生を比較してみてください。WebGL対応のブラウザ(例：Google Chrome)でご覧ください。

▼最適化前

▼最適化後

どうでしょう？
圧倒的に後者のほうが滑らかに再生できているのではないかと思います。
後者のほうは配置している3Dのオブジェクト数が10倍近く多いにもかかわらずです。

最適化の秘密

最適化の秘密を紹介したいと思います。Flash(Away3D)の最適化でも紹介したのと同様、GPUを用いるコンテンツにおいてドローコール(描画の命令)の回数はパフォーマンスに最も影響します。そのためドローコールを少なくすることが3Dコンテンツ制作の際に最も気に留めるべきポイントとなります。

大量の3Dオブジェクトを表示する場合は、3Dオブジェクトのジオメトリ(3D形状における頂点の座標群)を結合することによってGPUに対するドローコールを少なくすることができます。Three.jsでは、THREE.GeometryUtils.merge()メソッドでジオメトリを結合できます。コードは次のように記述します。

// 空のジオメトリを作成
var geometry = new THREE.Geometry();
// 立方体個別の要素を作成
var meshItem = new THREE.Mesh(new THREE.CubeGeometry(30, 30, 30, 1, 1, 1)); 

// Box
for (var i = 0; i < 10000; i++) {
    meshItem.position.x = 10000 * Math.random();
    meshItem.position.y = 10000 * Math.random();
    meshItem.position.z = 10000 * Math.random();

    // ジオメトリを結合
    THREE.GeometryUtils.merge(geometry, meshItem);
}

// マテリアルを作成
var material = new THREE.MeshBasicMaterial({color:"#F00"});

// 3D空間に追加
var mesh = new THREE.Mesh(geometry, material);
container.add(mesh);

3Dオブジェクトを一個一個3D空間に追加して表示するよりは、大量の立方体をまとめた巨大な3Dオブジェクトを1個だけ3D空間に追加したほうが負荷が少ないという感じです。前者はGPUに対して一個一個ドローコールが発生するのですが、後者だと1回にまとめて(厳密には転送できる頂点の個数で分割した回数だけ)ドローコールが発生します。

注意点

ジオメトリをまとめてしまうので、3Dオブジェクト(Meshのインスタンス)としては一つになります。そのため、個別にマテリアルを設定したりマウスイベントを設定するのはできなくなります（工夫次第ではできると思いますが、簡単にはできなくなります）。
そのため、同じような形状のジオメトリを大量に表示させたい場合にこのテクニックを使ってみるといいかもしれません。

また3Dモデルを用意するときも、出来る限りメッシュは分割せずに用意するといいでしょう。このあたりの最適化テクニックはFlash Stage3D勉強会で触れられていたので、そちらの資料も参考にしてみるといいでしょう。

Stage3D勉強会(第2回) – 発表資料 | ClockMaker Blog
※Stage3D 勉強会 (第3回)のほうもよければご参加ください

WebGLに対応しているブラウザが少ないのは残念ですが（IE6〜10や多くのモバイルブラウザで未対応）、WebGLはHTMLの可能性を見せてくれる面白い機能だと思います。
(※エンドユーザーのほとんどが見れないうえに、API周りの変更やフォールバックなど不安な点が多いのでWebGLは実戦では使おうとは思いませんが、趣味としては触ってみたいと思います)

HTML5関連技術のWebGL(three.js)とFlash(Away3D)のパフォーマンス比較

2013-01-17T02:50:35Z

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さんからコメントで、ジオメトリの作成部分で最適化が足りない旨の指摘を頂きました。ジオメトリを無駄に作成していたためパフォーマンスが低下し、無駄にメモリ使用量が増えていました。「HTML Demo (Primitive Version Ex) 」のほうではその部分を修正しています。

※[2013/01/17 11:30追記] Sombressoulさんが指摘しているように、Three.jsにはジオメトリをマージする機能が設けられているということで、最適化されているバージョン「HTML Demo (Optimum Version)」を追加しました。

検証結果

私のマシン(Mac OS X 10.8.2, 3.4GHz, AMD Radeon HD 6970M 2048 MB, Chrome 24)で計測した平均FPSは次の通りです。Flashのほうが30倍以上のオブジェクトを表示しても高FPSを保てています。

WebGL (three.js)は1331個のオブジェクトを表示して約41fps
WebGL (three.js)は42875個のオブジェクトを表示して約60fps
Flash (Away3D)は42875個のオブジェクトを表示して約60fps

Stage3DとWebGLの比較というよりは、フレームワークとしてAway3Dとthree.jsの比較といったところでしょうか。WebGLもFlashのStage3DもOpenGL (Stage3Dの場合はDirectXも含む)をキックしているので基本的に描画に関するパフォーマンスの違い大差ないと思うので、Three.jsやAway3Dなどのフレームワーク群がどれだけGPUに最適化した情報を用意できるか、が論点じゃないかと思います。あとActionScriptとJavaScriptのスクリプトの処理速度の差も。

※[2013/01/17 11:30追記] Three.jsのほうの最適化バージョンを作ったら、Away3Dと同じパフォーマンスになりました。

メモリとCPU使用率

メモリとCPU使用率の点もアクティビティモニタを使って調べてみました。WebGLとFlashは同じオブジェクトの個数で試してみました。 ([2013/01/17 11:45追記] 再度検証しなおしました。)

HTML Demo (Optimum Version)
Flash Demo (Optimum Version)

WebGL(Three.js)の場合は、ブラウザのプロセス(Chrome RendererとChrome Helper)の値の合算で次の値で出してみました。

CPU使用率：12.7%
メモリ使用：356.2MB

Flash Stage3Dの場合は、プラグイン(PepperFlashPlayer)が使用している値は次の通りとなります。

CPU使用率：4.6%
メモリ使用：222.1MB

プラグインとブラウザのプロセス(Chrome RendererとChrome Helper)の値の合算だと次の値となります。

CPU使用率：18.7%
メモリ使用：400MB

WebGLとStage3Dのブラウザ対応状況

参考までにWebGLとStage3Dのブラウザ対応状況をまとめておきました。

参照：Can I use WebGL

ソースコード

ソースコードは次の箇所からダウンロード可能です。

WebGL Source (ZIPファイル)
Flash Source (ZIPファイル)