WebGL対応のライブラリThree.jsを爆速にする方法 | ClockMaker Blog
前回のWebGL(Three.js)とStage3D(Away3D)の比較ですが、Mr.doobさんを始め国内外の多くの方からご指摘頂きWebGL(Three.js)版を最適化したところ、最終的にはFlash(Away3D)版と同じぐらいのパフォーマンスになりました。当初、最適化・検証不足で間違った情報を掲載してしまい申し訳ありませんでした。 さて、そのWebGL(Three.js)版を最適化した手法が有意義だったのでシェアしたいと思います。 デモの紹介 まずはこちらの2つのデモの再生を比較してみてください。WebGL対応のブラウザ(例：Google Chrome)でご覧ください。 ▼最適化前 ▼最適化後 どうでしょう？ 圧倒的に後者のほうが滑らかに再生できているのではないかと思います。 後者のほうは配置している3Dのオブジェクト数が10倍近く多いにもかかわらずです。 ※ちなみにFlash
HTML5はFlashの3倍重かった! 描画パフォーマンスの比較 | ClockMaker Blog
最近のHTML5の盛り上がりには勢いがありますが、実際の所HTML5はどうなのか気になったので描画パフォーマンスを測定してみました。上記のグラフが結果ですが、HTML5で一番よい実装よりもFlashのほうが3倍弱高速という結果がでました。ブラウザによってはFlashのほうがHTML5より18倍も高速という結果もでています。 さらに言えば、HTML5の描画パフォーマンスが最も良かったのはSafariですが、ブラウザによってはそれの15%ぐらいのパフォーマンスしかでないブラウザもあり処理速度にばらつきが大きいのが特徴でした。ですが、Flashはどのブラウザでもスコアの振れ幅が小さくブラウザ間の処理速度は安定しているように思います(プラグインなので当然といえば当然の結果ですが)。 検証デモ HTML5やFlashと言っても様々な実装方法があるので、よく使われる方法を幾つか用意して検証しています。
FlashDevelopでASDocを作る方法＋SVNでASDocを公開する方法の解説ビデオ | ClockMaker Blog
かなりニッチな話題ですが、ActionScript 3.0 のライブラリ開発者向けに役立つ情報を。フリーの開発ソフト FlashDevelop を利用して ASDoc（=ライブラリの API ドキュメント）を作る方法の解説ビデオを作ってみました。SVN（サブバージョン）上でASDocを公開する方法もあわせてビデオで解説しています。 高解像度の HD ビデオをアップロードして、ビデオのアノテーションを入れたので、とりあえずビデオを見れば全部わかるはず。Spark project や Google Code で ActionScript 3.0 ライブラリを公開する場合に参考にしてくださいませ。 ライブラリ開発者はこちらもあわせてチェックしておくといいかもです。 ASDoc入りのSWCファイル「Fat SWC」の作り方
ASDoc入りのSWCファイル「Fat SWC」の作り方 | ClockMaker Blog
FlashではSWC（スウィク）ファイルを利用することで、ActionScriptのパブリッシュ/ビルドが早くなることを先日のSpark 勉強会で発表しました（「Spark project 勉強会 SP3」の発表ビデオ）。主にAS3ライブラリ開発者向けの情報になるのですが、そのSWCファイルにASDocコメントを含める方法を紹介します。 ASDoc入りのSWCファイル「Fat SWC」とは 通常のSWCファイルにはASDocコメントが含まれません。つまりコードヒントのコメントを利用できないというデメリットがありました。AS3登場後、様々なAS3ライブラリがSWCファイルで提供されていますが、そのほとんどがコメントなしのSWCです。 Fat SWCとは、SWCファイルにASDocコメントを含めた形式です。そのため対応したソフト（FlashDevelop 3.2.1やFlash Builder
ClockMaker Blog
Adobe MAX JAPAN 2018で登壇してきました 2018年11月25日 (日) 雑談 11月20日（火）のAdobe MAX 2018で「イマドキのUIデザインには欠かせない！ マイクロインタラクションを作るためのズルいCC活用テクニック」と題して発表しました。 発表の振り返りを記事として残しておきたいと思います。少しエモい感じで恥ずかしいですが、この気持ちを忘れないように記事にまとめました。 9年前のAdobe MAX 2009での思い出が原点にありました。 人生を変えた2009年のAdobe MAXを目指した 思い起こせば、Adobe MAXにはじめて参加したのが2009年。締め切り間近の修羅場な仕事があるなか、朝〜夕方はMAX会場、夜から朝にかけて会社で徹夜の開発作業として、無理して参加したことを覚えてます。連日徹夜してでも参加して良かったというのが当時、MAXで強く思っ
フレームアクションで覚える Papervision3D チュートリアル Vol.01 | ClockMaker Blog
私の身の回りの人やメール等でPapervision3D (ペーパービジョンスリーディー)の使い方を教える機会があり、その度にチュートリアルサイトを教えたりしています。ただ、世の中のコードを見ると様々な書き方があり、スクリプトになれていない初級者にとっては、難解に思われる事が多いかと思います。 そこで、初級者にもやさしいPapervision3D(以下、PV3D)チュートリアルをはじめてみることにしました。チュートリアルビデオを用意して5回ぐらいに渡って連載したいと思います。必要となるスキルレベルは、ActionScript 3.0の入門書を一冊読み終えたぐらいを想定してます。 テーマは「フレームアクションだけの短いコードで、シンプルにPapervision3Dを使ってみる」です。 なお、Papervision3Dの解説はさらに詳しく書籍にもまとめています。このブログを読んでさらにスキルを高
Flash Player 10でPV3D上の落書きを保存してみる | ClockMaker Blog
最近は本業でなかなか忙しかったので久しぶりの投稿です。そろそろFlash Player 10(Astro)の勉強も再開しなければと思い、新しくなったFileReferenceを題材にサンプルを作ってみました。PV3D上で落書きしたテクスチャをローカルファイルに保存したり、再度読み込んで再編集もできるというものです。 demo (require Flash Player 10) src Main.mxml World.as 仕様として横1000x縦500pxの画像でぴったり球面に張り付きます。Planet Earth Texture Mapsの低解像度の画像(フリー)がお勧めで、これを使うと地球儀に落書きができます。 FileReference.loadで画像を読み込む 新しくなったFileReferenceではローカルで選択したファイルを直接Flash Playerに読み込むことができます
ローカルファイルが編集できるFlex製の表計算アプリを作ってみました | ClockMaker Blog
最近、PV3Dを使ったビジュアル系な投稿が増えていたので久々にFlexの記事を。3ヶ月前に投稿したFlexでExcelファイルを読み込むデモにFlash Player 10(Astro)の新機能であるFileReferenceをくっつけてローカルファイルの編集ができる簡易的な表計算ウェブアプリを作ってみました。読み込みと保存はExcelで統一したかったのですが挙動が怪しかったので、読み込みはExcelファイル(Microsoft製限定)、保存はCSVというちょっと変な仕様にしています。エクセルファイルはよろしければこちらのサンプルをご利用ください。 demo (require Flash Player 10) src (.mxml、as3xlsライブラリを使用) セキュリティー周りが五月蝿くなったと言われるAstroですが、FileReferenceはローカルアクセスが可能になって便利にな
AS3でよく使われる変数名の意味をまとめたよ | ClockMaker Blog
こちらの記事がおもしろいと思ったので、ActionScript 3.0でよく使われる変数名の意味をまとめてみました。このあたりの変数名で命名していれば他の人にソースを見られても恥ずかしくないのと、初心者の方であれば変数名が何を意味しているのか確認に役立つと思います。 現時点では70個ぐらいピックアップしました。 つっこみがあれば@clockmaker_coreまでリプライ頂ければと思います。 ちなみに@matsumosさんが変数名まとめサイト的なものも開発されるらしいです。そちらも楽しみ！
as3httpclientlib を使ってヘッダーをカスタマイズ | ClockMaker Blog
気になっていたAS3の便利ライブラリを数回にわたって紹介していこうと思います。1回目はいきなりコアなところから。 Flashとサーバーサイド(PHPとか)と通信する場合に、レアケースで役立ちそうなライブラリです。AS3にビルドインで搭載されているURLRequestはご存知の方が多いと思いますが、それとは別の方法で外部通信をできるライブラリとなります。 as3httpclientlib – Project Hosting on Google Code このライブラリの役立つところ ビルドインのURLRequestで制御できないような通信ができるようになります。具体的にはリクエストヘッダーのカスタマイズやマルチパートのフォーム送信(画像をformのパラメーターに含めて送信すること・URLRequestでもできないことはないけど扱いやすくなるかも)ができるみたいです。 リクエストヘッダーのカス
Progression拡張機能「AutoSitemap」をリリース | ClockMaker Blog
extends Progression 拡張機能で Web Designing賞を受賞した作品「AutoSitemap」ですが公開しましたのでお知らせします。 これは、Progressionで作られたウェブサイトに対して、開発者の負担なくサイトマップを実装する拡張機能です。サイトマップ設置によるユーザビリティー向上と、開発時の効率化が目的の拡張機能となります。 サンプル サンプルサイトを見る サンプルサイトのソースファイル(Flash CS4プロジェクト) ライブラリ ソースファイル (MITライセンス・動作仕様はProgression4/Flash CS3以上) ※追記2010年7月12日：Progression4に対応させました。Progression3で利用する場合は、開発用SVNから1.x系のバージョンをダウンロードください。 概要はこんな感じ ライブラリの主な用途や、使い方は次の
パーティクル表現のためのAS3ライブラリ「Stardust」 | ClockMaker Blog
ざっくばらんにいろんなライブラリを紹介するシリーズ第三段目。Stardust (スターダスト)という海外のパーティクルライブラリの紹介。2Dにも3Dにもどちらにも利用できる表現の自由度が高いライブラリです。とりあえず、Papervision3Dと組み合わせてデモを作ってみました。蝶が飛んだ軌跡に発生している粒子部分がStardustの効果になります。 demo (Flash Player 9) ライブラリStardust とは 2Dと3Dをサポートするパーティクルエンジンで、ソースコードはMITライセンスとしてGoogle Codeにて公開されています。さまざまな効果やプロパティーを組み合わせて使うことができ、自由度の高いカスタマイズが可能です。 stardust-particle-engine ライブラリの特徴は次のような感じ。 簡単にカスタマイズができる 重力や反発といった物理演算の適
Progressionを使ってイベントリスナー周りのコードをスマートに書く | ClockMaker Blog
ざっくばらんにAS3のライブラリを紹介するシリーズ２本目。昨年から注目が集まっているFlashのフレームワークProgression 3について改めて開発効率が向上する便利なポイントをチュートリアルビデオもまじえて紹介します。以前、当ブログでおこなった記事のリクエストに次のような要望がありました。 世の中、「Progressionを使うと便利！！！」って感じですが、 何が便利か、さっぱりワカメでございます。 (中略) Progressionの波に乗りたい・・・。 実は私の周りにも同じ事を考えている人もいて、そう思っている方はまだまだ多いのではないかと思います。 一般的にはProgressionはシーン構造と画面遷移の作り方を再定義し、ページ内リンクなどユーザビリティーをあげることがメリットとして紹介されています。知っている人は知っていますが、シーンやキャストといった機能を使わないでも、既存
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
Papervision3D演出サンプルNo.04:細切れフォトグラフ | ClockMaker Blog
先日のフォトプリントのシンプル版。一枚の画像を細切れにして3D的に見せるサンプルです。ペラ一枚の画像を表示するだけでもPapervision3Dが使える例として、いろんな局面で利用しやすい使い方を考えてみました。 demo (WebGL版) demo (require Flash Player 9) source (140行, with Papervision3D 2.0 beta, Tweener 1.31.x) （追記：2023年5月14日）Flash Player終了につきWebGLに移植しました。 画像の分割キャプチャは行列でラクチンに 先日のフォトプリントではBitmapの分割キャプチャは行列(flash.geom.Matrix)を使えば簡単にできることを知らず、親コンテナを作ってその中でDisplayObjectをループ文の中で原点に移動させてキャプチャしていました。Matri
FlashDevelopのインストール(+Flex SDK3) | ClockMaker Blog
Vistaがなぜか起動しなくなり再インストールしたのですが、それに伴ってFlashDevelopをはじめからインストールし直すことになりました。FlashDevelopは優秀なソフトですが、いくつかセットアップしておくべきことがあり面倒なので、メモを残しておきます。Windows Vista(おそらくXPも同様?)の環境での設定例です。 ＜追記 2009年5月1日＞ FlashDevelop RC2に対応した記事に修正しました。 ＜追記2009年7月14日＞ FlashDevelopの最新バージョンで、より詳しくビデオ付きでチュートリアル記事を書きました。 無料でFlashの制作環境が整えられる! FlashDevelopとFlex SDK 3のインストール方法(ビデオ付き) 以下の記事は古いので、参考にする場合は上の記事をご覧ください。 開発統合環境(IDE)であるFlashDevelo
CubicVRをPapervision3D 2.0で作るPart.02(Cube編) | ClockMaker Blog
QuickTime VR(QTVR)のような360度パノラマ表現をFlashとPapervision3Dを使って作成しました。先日はVR表現のもとになる素材画像(Cube Face)がなく断念したCubicVRですが、素材の作成方法がわかりましたのでそれも紹介します。 Demo(require Flash Player 9) Source(require PV3D2.0) 写真はこちらから使用→In the back of the Peninsula Tokyo on Flickr CubicVRのアルゴリズム 立方体の各面にテクスチャ画像を貼り付け、中心のカメラが立方体のなかでグルグルまわります。するとうまい具合にVR(バーチャルリアリティー)な視覚効果が得られるという仕組みです 。 Cube Face素材の作り方 世界地図のメルカトル図法のような「Equirectangular Ima
PaperVision3D 2.0で被写界深度が実現できたよ | ClockMaker Blog
Papervision3D 2.0(GreateWhite)を試していたら、いつの間にか求めていたプロパティが実装されているではありませんか。filtersとsceneZという、なんとも被写界深度が実装できそうなプロパティ。というわけで被写界深度を早速試してみました。今まで苦労したのが嘘のように簡単にできました♪ Demo(require Flash Player 9) 仕様については以下にまとめております。 ポイントはuseOwnContainer DisplayObject3Dに実装されている「useOwnContainer」というプロパティがありますが、これをtrueにすることでfilterやalphaの使用が可能となります。 var o:Plane = new Plane(new ColorMaterial(), 100, 100, 1, 1); o.useOwnContainer
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
