Away3D3.6

2011.09.15 04:24 PM

Away3D4.0の開発が絶賛進んでるけど、FlashPlayer10対応のAway3D3.6を一足遅れていじってみた。

日本有数の心霊スポット、その名はドブえもんトンネル。
ずーーーっと見てると気分を悪くする場合がありますのでくれぐれもご注意ください。
当方では責任を負いかねます。

Dobuemon Tunnel – wonderfl build flash online

【フラッグ・メッセージ】〜私を、あなたに伝えたい。〜

2011.09.14 02:17 PM

【フラッグ・メッセージ】〜私を、あなたに伝えたい。〜

コクリコ坂×KDDIのキャンペーンサイトの制作に関わらせていただきました。
〜私を、あなたに伝えたい。〜をテーマに、コクリコ坂の舞台である横浜で撮影会を実施。参加者の“伝えたいという気持ち”をU・W旗をモチーフにしたメッセージボードにのせて撮影しています。全8回の撮影で多くの人に参加いただきました。それらの写真をwebサイト上で公開し、伝えるというテーマのもと表現しています。またサイト上のデザインやモーションも旗をイメージして制作しました。
(2011年8月31日をもちまして公開終了いたしました。)

のどごしカンパイマーチ

2011.08.05 07:07 PM

のどごしカンパイマーチ

のどごし<生>のキャンペーンサイト、「のどごしカンパイマーチ」の制作に関わらせていただきました。

Twitterのアカウントを利用してサイト上でマーチに参加できたり、
インスタントくじをすることでのどごし<生>の商品やイベントの参加権利が当たったりするサイトになっています。

ユーザーが参加することによりサイト上に自分のアイコンが現れ、他の参加ユーザーのアイコン達と一緒に楽しげで賑やかにマーチすることで、商品との親近感を訴求しています。
(2011年8月31日をもちまして公開終了いたしました。)

SKYACTIV TECHNOLOGY | Voice Parking

2011.08.05 07:07 PM

SKYACTIV TECHNOLOGY | Voice Parking

「SKYACTIV TECHNOLOGY | Voice Parking」の制作に関わらせていただきました。
MAZDAの新技術SKYACTIV TECHNOLOGYに関する世の中の声を集めて視覚化したサイトになっています。
News記事やTwitter等のつぶやきを地面に描き、そこに人が集まる様子を微速度再生することで、話題が世の中で絶え間なく更新されている様子を表現しました。
更に引きの映像とヨリの映像を同期させ、様々な角度から観て楽しめる演出を盛り込んでいます。
(このサイトは公開終了しました。)

björkのサイトで自分のライブラリが使われてたw

2011.05.30 02:00 PM

http://bjork.com/js/Matrix3D.js
先日人伝えで知ったんだけど、僕のJSライブラリがbjörkのサイトで使われていて地味にビツクリ。
さらに、bjork.comのサイトを作った人のHTML5 3Dエンジンに関しての記事の文中にも僕の名前がしれっと載っててこれまたビツクリ。
http://www.netmagazine.com/tutorials/build-your-own-html5-3d-engine
(リンク切れしてたのでこちら↓で閲覧できます)
http://www.creativebloq.com/3d/build-your-own-html5-3d-engine-7116885

Aqua Contents Produce

2011.04.01 01:18 PM

Aqua Contents Produce

株式会社アクア コンテンツプロデュース部のサイト制作に関わらせていただきました。
株式会社アクアはイラストレーションやキャラクターの制作を中心に、企業や商品の個性を見出し、独創性のある表現を創り、人とモノ、人と企業、さらには人と人の架け橋となることを企業理念にしていらっしゃる制作会社さんです。
今回、制作に関わらせていただいたのは、そのアクアの中でWEBコンテンツの企画・制作を行っているコンテンツプロデュース部のサイトです。

“夢”を精一杯詰め込んだつもりです。ご覧いただけたら幸いです。

関係者の皆様、お疲れさまでした。

daijima.jpのホームページ

2011.03.10 04:27 PM

daijima.jpのホームページ

daijima.jpのホームページを作ってみました。

TwitterだのFacebookだののSNSに押されて、個人のホームページからエネルギーが失われつつある昨今のネット社会を憂い、嘆き、少しでも「個人ホームページ熱いぜ!」という流れを取り戻すために、SNSのやつらに唾を吐くべく、自分のホームページを作るに至りました (嘘)。

個人ホームページの覇権を取り戻すぞー!!(おおげさ)

おふざけはこのくらいにして、技術よりの補足をいくつか。

iPhoneでも閲覧可能にしたかったのでHTML5で作りました。
また、iPhone SafariではJavaScriptでタッチイベントを取得できるので、マルチタッチにも対応させました。iPhone上でのインタラクションも可能です。(ぶっちゃけiPhoneで見ると、もっさもさの動きですけど。。。)iPadや他のスマホでは表示、動作確認をしていないので、おかしなことになっているかもしれません。

Canvasに対応していないIEに関しては、excanvas.jsなどのCanvasをエミュレートするJavaScriptライブラリを利用することで、Canvas用のJavaScriptコードを再現できますが、表示がうまくいかない箇所があったり、動きが激遅だったりしたので、今回は代替Flashを表示させることで対応しました。ですが、同じ見た目、同じ挙動のものを「HTML5+JavaScript版」と「Flash版」の2パターンを作るというのは、当然工数もかかってくるので、実案件の際には、この問題をどう対応していくべきか、今後検討していかなければと思っています。

Blender ショートカット・キーや操作メモなど

2010.12.31 11:42 PM

Blenderで個人的によく使うショートカット・キーや操作のメモ。
※今後も加筆・修正していく予定です。
Last Update : 2012.12.29

 

●ファイル入出力

ファイル読み込み [F1]
名前をつけて保存 [F2]
保存 [Ctrl] + [W]

 

●視点変更

トップビュー テン・キー[7]
フロントビュー テン・キー[1]
サイドビュー テン・キー[3]
カメラビュー テン・キー[0]
3Dカーソルを原点に [Shift] + [C]
3Dカーソルを視点の中心に [C]
3Dカーソルを選択オブジェクトの中心に [Shift] + [S] + [4]
全体表示 [HOME]
PerspビューとOrthoビューの切り替え テン・キー[5]

※[Ctrl]を押しながらで、反対側の視点になる。

この投稿の続きを読む »

Blenderでモデリングしたデータにメッシュアニメーションをつけてみた。

2010.11.30 01:37 PM

以前作ったこれにメッシュアニメーションをつけてみた。せっかくなので音に合わせてダンスさせてみた。(ダンスというよりただの顔芸。)

Dancing Dobuemon – wonderfl build flash online

実装の流れは、メッシュアニメーション作成→メッシュデータをmd2形式で出力→md2をAway3DLiteで読み込んで表示。

Blenderでモデリング

2010.10.28 03:26 PM

Blenderでモデリングの練習。
Twiiterアイコンとして使わせてもらっているドブえもんを3D化してみた。

Dobuemon ~With Suneo’s Theme~ – wonderfl build flash online

わりとキモいです。ごめんなさい。
ついでにスネオのテーマを添えてみました。

3Dソフトの扱いはド素人かつ完全に我流。とはいえ、俺、モデリング下手くそ。
自分を戒めて今後頑張る意味で晒してみる。
モデリング自体はとても楽しい作業なので、三日坊主にせず、今後も時間を見つけて続けていきたい。なので、ざっくりとした目標をたててみる。半年後にこれを見て、クオリティのひどさに顔を赤らめるくらいのスキルアップはしたいところ。(現時点でも十分恥ずかしさはありますが。。)

あとは、メッシュをいじってフェイスアニメーションを入れたかったんだけど、ColladaにうまくExportできなかったので、あとでやる気が出たら、Pythonなどいじったりして頑張ってみる。

HTML5 Canvasをいじってみた。

2010.09.30 01:01 PM

昨今のHTML5の流れに乗っかって、Canvasをいじってみることに。
即席3Dライブラリを作って、Canvasがどんなものか、処理速度、描画速度はどんなものか等々、もろもろの挙動を体感してみた。
せっかくなので、jsdo.itに投稿した。今更ですが、wonderflとともに本当に素晴らしいサービスですね。ありがとうございます。

変体 – jsdo.it – share JavaScript, HTML5 and CSS

Canvasの描画精度が低いのか自分の作り方が悪いのかわからないが、stroke()で線を引くと微妙にずれたりして、線が重なってる部分が汚く描画されてしまう。そもそもstroke()で線を引かないと、Triangle間に隙間ができてしまう。。。
とりあえず動けばいいレベルの実装なので、ちょっとずつブラッシュアップして汎用化しつつ機能を追加していけたらと思います。

以下今後のタスクなど。
・HTML+css+Javascriptの開発環境を整える。
・prototypeをひさびさに使ったが、若干しっくりきてないので慣れておく。
・asでいうところのpublicだのprivateだのstaticだのは、今回は何も考えずに実装してるので、実案件でそれなりの規模のものを作れる準備として、今後詰めていきたい。

ナビで地上絵―TOKYO ZOO PROJECT

2010.08.31 01:14 PM

ナビで地上絵―TOKYO ZOO PROJECT

『“nav-u”presents ナビで地上絵―TOKYO ZOO PROJECT』キャンペーンサイトのFlash制作を担当させていただきました。

“nav-u”(ナブ・ユー)『NV-U35』を使用して、東京に世界最大の動物園を開園させてしまおうというGPSアートプロジェクトです。“nav-u”の走行ログ機能とGoogle Mapを連携させて、たくさんの動物を入園させました。

動物の地上絵は、「TOKYO ZOO PROJECT制作委員会」が実際に街を自転車走行・歩行した上で作成しています。
また、動物ごとに、制作委員会が走っている道中で見つけたカフェや、お勧めしたい景色等の楽しい「おでかけポイント」も紹介しています。

Twitterの公式アカウント(@tokyozoopj)で、ユーザーから描いてほしい動物を募り、そのツイートの中から制作委員会がピックアップし、実際にコースを作成・公開していきました。
当初は10種類の動物を入園する予定でしたが、最終的には全部で15種類の動物達が入園しました!
この15種類の地上絵の膨大なGPSデータを、いかにGoogle Map上に描画負荷をおさえて表示させるかに、個人的には苦心したところでもあります。

『NV-U35』を使うと、自分でも同じように地上絵を描くことができます。走行ログはPetaMapで共有したり走行軌跡(GPSログ)をKMLフォーマットで記録し、対応アプリケーションで表示することも可能です。当然Google Mapに表示することも可能ですので、興味のある方は、ぜひ挑戦してみてはいかかでしょうか。