HTML5で3Dを実現する本格派WebGLフレームワーク、Away3D TypeScriptの公式デモ HTML5で3Dを実現するWebGL対応のフレームワークAway3D TypeScriptが10月に発表されました。WebGLで3Dを実現する類似ライブラリとしてMr.doob氏らが開発しているThree.jsが名前が知られていますが、Away3D TypeScriptは同等以上に高機能であり高いパフォーマンスを有しています。今回は公式サンプル(Githubでソースコードが公開されている)を通して、Away3Dでどのような表現が可能であるのか紹介していきます。 Away3Dとは Away3DはFlash Stage3Dでもっとも使われているフレームワークの一つです。アドビが提供するAdobe Gaming SDK(フレームワークやツールのパッケージ群)にもAway3Dは採用されています。
遅くなりましたが、Twitter上でアルミカンの方にシステムの設計が気になるからブログ書いてという要望があったので書いてみます。 (記事自体は1ヶ月前に書き終わってたのですが・・) 僕は、社内ではインスタの制作をふられる事が多いのですが、毎回インスタの全体設計時に、「通信方法」「PC機材」「OS」で悩みます。 今回はそんな中で培ってきたノウハウ中の「通信」について、わりと長文の記事を書いてみます。 東京支社の移転お披露目パーティでインスタ展示するというお仕事を担当しました。 どういうインスタだったかは下記の動画ご覧ください。 (突貫で作った割には沢山の方々に高評価のお言葉を頂けました。暖かい目をお持ちの来場者の皆様ありがとうございました!汗) DOORS OF TEN デザイン含めた制作期間が10日間を切っているという「これ何てタイトルの無理ゲー?」な状況だったのですが、 どうすれば乗り切
レンズフレアは、カメラのレンズに光源が直接入ったときに発生する光の現象です。映画やゲームでよく見られる演出で、リアルなシーンを演出するために使われます。Three.js でレンズフレアを表現するデモを紹介します。 本記事はThree.js r176(2025年5月)のバージョンで作成しています。 デモとサンプルコード サンプルを別ウインドウで開く コードを確認する マウスドラッグすることで、レンズフレアを確認できます。 Three.jsでのレンズフレア レンズフレアの実現には、Three.jsのLensflareを使います。Three.jsではレンズフレア機能が アドオン として分離されているため、Lensflare.jsを個別に読み込みます。 import { Lensflare, LensflareElement, } from "three/examples/jsm/objects/
http://orange-suzuki.com/labs/spaces/ Away3Dライブラリを使った作例です。 しばらく眺めていただくと、こんな感じでイメージが変わります。 … 技術解説 背景は銀河をイメージして、Photoshopでこのような画像を作成しました。下記リンクにあるPhotoshopのカスタムブラシがお勧めです。 球体の縁をふわっとさせるのにこのような処理をしています。 material.addMethod(new RimLightMethod(0xdddddd, 0.1, 1)) 背景を輝かせている処理。輝きフィルターの閾値(threshold)の値は1を超えると輝き方が急激に変化します。今回は1.5に設定。 // 輝きフィルター bf = new BloomFilter3D( 16, 16, 1.5, 1, 1 ) // 色相フィルター hsf = new HueS
投稿日:2012年10月04日(木) Flash ActionScript3.0Away3DBlenderMMD FlashのStage3D用エンジンAway3DでMMD(MikuMikuDance)のキャラクタモデルを表示する実験をしてみました。直接Away3Dで読み込むことができなかったのでBlenderを経由させたのですが、そこが一番大変でした。 アペミクさん可愛すぎ 可愛いミクさんが表示できたから満足。曲に合わせてピカピカ光るようにしてみました。床に書いたのは今回の実験で使ったAway3Dクラス群です。 心残りな事は、本当は表情もつけてあげたかったけどモーフィングアニメーションをAway3Dでどうやって実現したらいいかが分からなかった事。MMDアニメーションをBlenderにインポートする所で躓いて、自分で動かしたらMPが減りそうな踊りになった事。ブルーム系のエフェクトを再現するこ
今回、Away3D 4.0 GoldでBlenderから書き出したColladaファイルをアニメーションすることに成功しました。 やる前はcolladaのアニメーションのサンプルがないのでできるかどうかよく分かりませんでしたが DAEParser.asのソースコードを見たところアニメーションのデータを格納する関数があったので もしかしたらできるのではないかと思いやってみることにしました。 しかし手元に何の情報もなくしかたがないので関連するソースコードを一行一行すべて読んでいくことにしました。 そして丸3日かかりましたがようやくつながりが見えてきたのでさっそくプログラムにして なんとか動かすことができました。これは本当に大変でした。(;^_^ A ■操作方法 地面をマウスドラッグ:カメラ回転 ◆【できあがりはこちらをクリック】(要:FlashPlayer11、ビデオカード等GPU搭載PC)
画像認識のフレームワーク OpenCV が使える ANE( AIR Native Extension )を見つけたので、付属のサンプルコードをちょちょっといじって、上のスクリーンショットのような Desktop AIR 用「のぞき見アプリ」を作って遊んでみました。 これ、どんなアプリかといえば、OpenCV で見ている人の顔を追跡して、顔の位置に応じて Away3D 4.0 のカメラをグリグリ動かしています。 顔の位置にカメラが付いてくるので、表示されている 3Dモデルを上下左右からのぞき込んだり、近くに寄ったり遠くに離れたりして… こんな感じで動きます。 これまでも Flash で顔認識を実装したライブラリはあったのですが、OpenCV からの移植版で動作がもっさりとしたものばかりで、3D と組み合わせるととても恐ろしいことになっていましたが、ネイティブの C++版 OpenCV をラッ
Flash Stage3Dに対応したAway3D 4.0が正式版となり「Away 4.0 GOLD」として公開されました。2年前のAdobe MAX 2010で紹介されて以降、4.0 alpha、4.0 betaと長い間開発中でしたが、より安心して使えるようになったのではないでしょうか。また4.0正式版の発表と合わせて、Away FoundatonはAdobeの公式サポートを受けることになったことも発表しました。従来からのオープンソースのスタンスは変わらないようですが、資金繰りの心配が要らなくなる分、フレームワークの開発が一層進むものだと予想します。 ※Away3DはオープンソースのActionScriptフレームワークでありApache License v2.0 のライセンスが適用されています。ライセンスの範囲内であれば商用・個人利用問わず無償で利用することができます。 さて、Away3
ながらく3Dの作品を投稿していなかったので、リハビリがてらFlash Stage3D (Away3D 4.0 beta ※Away3D 4.0 GOLD にアップデートしました)を使って地球の表現を作ってみました。日の入と日の出の瞬間が一番綺麗に見えます。 demo source code 地球 ノーマルマップやスペキュラマップを使った表現も、SubsurfaceScatteringDiffuseMethodやFresnelSpecularMethodなどのメソッドを使えば、ベーシックな表現から味わい深い質感になります。こういう様々な選択肢が扱いやすい形で用意されているのがAway3Dの素敵なところ。凸凹しているのはノーマルマップをつかったバンプマッピング(Bump Mapping)というものですね。 ※素材の画像は有償なので公開しませんが、ソースコードはご自由にお使いください。 月 つい
PV3Dのテクニカル担当のポジションを揺るぎないものにしつつある、Andy Zupko 氏により、PV3Dにも Z-Sort の問題を克服する新機能が実装されたみたい。何をするものかというと、Away3Dのコレと全く同じ。 詳しい話は、御本人のエントリーを参照していただくとして、 zupko.info | Using QuadTrees In Papervision3D 久々に備忘録としてメモっとく。 新たに加わったのは、QuadrantRenderEngine というレンダラ。 レンダー定義の際に org.papervision3d.render.QuadrantRenderEngine をインポートしたうえで renderer = new QuadrantRenderEngine(QuadrantRenderEngine.ALL_FILTERS); とか指定する。引数に指定できる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く