Unity5でまったく同じシーンをWebPlayerとHTML5で書き出して比較。
255個のボックスを上から落下させて物理演算させただけ。
ライトはディレクションライトを1つだけ配置。

2015-03-24_105737.pngのサムネール画像のサムネール画像のサムネール画像のサムネール画像


■WebPlayer書き出し
http://billionmilesaway.com/unity5_web/
・ファイルサイズ:220KB
・GPU使用率:22-30%
・読み込みから再生までの時間:1秒
・レンダリング:綺麗
:コマ落ち:なし
・動作環境:PCのみ。プラグイン必須。

■HTML5書き出し
http://billionmilesaway.com/unity5_html5/
・ファイルサイズ:37.6MB
・GPU使用率:19-26%
・読み込みから再生までの時間:5秒
・レンダリング:汚い(オブジェクトにも影にもジャギーかかりまくり
:コマ落ち:あり
・動作環境:PC(IE不可?)&WebGL対応のスマホ(このシーンは動作不可)

いくらプラグインのインストールが必要と言ってもこれじゃあ比較にならん。2013年時点でWebPlayerのインストール数はたったの400万らしいけど、HTML5書き出しがこんな不安定で重いんじゃ話にならん。
PC意識するんなら圧倒的にインストールされてるFlashPlayer書き出し復活したほうがいいんじゃね?っと思いました。

もしWebGLを使った3Dコンテンツを作ることになっても、Unityを使う選択肢はないね。

あけましておめでとうございます。

放置していたブログ、久々(約二年ぶり)に更新。
昨年末石野真子さんのクリスマスディナーショーのVJやってきたので、それの制作工程なんかを書いていきます。

2014-12-26_115958.png
会場が恵比寿にあるアクトスクエアってところで、360度パノラマスクリーンがある面白い会場でした。
過去にVJはやったことあるけど、さすがに360度スクリーンに投影する映像は作ったことがなかったので色々と苦労しました。

360度パノラマスクリーンがあると言っても全部が全部360度パノラマスクリーン投影するわけではなく、出力できるパターンがいくつかあり、自分はその中の3つのパターンの映像を作ることになりました。

映像は合計5つ作ったんだけど、そのうち3つは360度パノラマスクリーンの映像、
1つはセンタースクリーンの投影される5:1の超ワイドな映像、
もう1つはVJソフトからリアルタイムに出力される映像です。

他にも画像を読み込ませてスクロールさせたり、ランダムに動かすみたいなこともできるみたい。

その中のCGで作ったパノラマ映像について書こうと思います。
360度パノラマの映像は14608px×720pxってわけのわからないサイズw
画素数で言うと最近話題の4Kよりちょっと多いくらい。

開演開始時と終演時に流れる2つの360度パノラマ映像はよくある緞帳が締まったり空いたりする映像だったので、AfterEffectsで作って指定されたパノラマのサイズの映像を作れば良かったから問題はなかったんだけど、ある一曲で流れる映像が一本道を走っているような映像を作ってほしいと要望がありました。

CG背景用の全球面パノラマは作ったことあるけど、360度パノラマ映像なんて作ったことないから、大丈夫かなぁ?っと思ってたけど、結論を言えばLightwaveを使えば簡単にできた。

全方位パノラマと360度パノラマを勘違いしそうになるけど、全方位カメラはこれ。

maru.png
上下左右360度全方位の絵がある。最近流行りのオキュラス用に作るならこれ。
カメラの真下にある道路が写っているのがわかる。

360度パノラマがこれ。
360.jpg
全方位と違い上下の絵が存在しない。スクリーンが固定で上下が存在しないのであればカメラの上下の絵は必要ない。

360度パノラマが撮れるブロギーなんてカメラもあったねー。
ブロギーで撮った映像をアクトスクエアで出力すれば面白いものが作れるかも。

建物とか複雑な形状は存在しないCGってことでMODOでモデリングしたものをVueに読み込んで作ることを初めは検討。
Vueってソフトは手軽にリアルでキレイな景観CGが作れて、360度パノラマ出力も簡単にできるんだけど、いかんせんリアルすぎるせいでレンダリングが遅い...早くしようとクオリティ下げると一気に汚くなるという欠点が...。
なのでVue作ることは早々に諦め、Vueでは背景の空だけ作って、それ以外はいつも使ってるMODOでやることに変更。

っが、しかし...MODOでは全方位パノラマは書き出せるけど、360度パノラマは書き出せないことが判明。やっぱりVueで作ろうかとも思ったけど、レンダリング時間を逆算するとどう考えても間に合わない。

ハーフサイズにしても数日かかる。そこで最近ホコリを被ってた久々Lightwaveの登場!
最終的にはMODOでモデリングしたものをLightwaveに読み込んでアニメーションさせレンダリングすることになった。
モデリングって言っても、木は素材の木、岩はMODOに入ってる素材だから、実際にモデリングしたのは大地と道路だけ。道路つってもただの板ポリだけどね。
正直モデリングからアニメーションまで全部Lightwaveでできるんだけど、最近使ってなくて操作を思い出すのに時間がかかりそうだったから、モデリングはMODOにしました。

2014-12-26_161116.png
MODOでのプレビュー画面


モデリングしちゃえばループできるように前後にいくつか同じものを配置して、10秒で終わるようにアニメーションを設定。フォグを設定しないとループの境目が出てしまうのでフォグを設定してレンダリング。あとはマシン任せ。


MODOでモデリングしたものをLightwaveに読み込んでループ配置したところ。


ハーフサイズの7304*360pxでレンダリングして1フレが約5分。
合計300フレームレンダリングしたから、レンダリング時間は25時間ってところ。フルサイズでレンダリングしたら1フレ大体9分くらいだったから、どう考えても終わんなかった。

やっぱLightwaveのレンダリングは速いなぁっと改めて思った。クオリティはあれだけど...。
まぁ作った3Dモデル自体がこれだからクオリティ上げるなんて不可能だけど。

超短納期だったから忙しかったけど、レンダリング中はやることがないので、友人宅のクリスマスパーティーに行ったりしてましたよ。

360度パノラマの映像はレンダリングしたものが14608px×720pxなんだけど、このまま納品することはできず、これをトリミングして6つの映像の切り分けて納品しました。

アクトスクエアでは6つのプロジェクターを使って、映像を同時に6つ出力することで360度パノラマを実現しているようです。

ただ納品コーデックが最近巷で話題のMPEG1!
MPEG1じゃAEから書き出せないってことでTMPGEncを使ってAEで書きだしたものを変換。

LightwaveでTGAの連番ファイルを書き出す→AEで色調補正→6つにトリミングして書き出し→TMPGEncでMPEG1にエンコード。

っとただでさえパノラマ映像作るの大変なのに、色々やること多くて更に時間がなくなりました。

なんとか当日までには間に合ったけど、360度パノラマスクリーンに投影テストできるのは本番当日という何かあったらどう対処もできない状況だったけど、無事に投影することもでき、レンダリングの問題でズレがあったりして、当日レンダリングし直すところもあったけど、無事に本番を終えることができました


帰り際にスタッフ控室にあいさつに行ったら石野真子さん偶然会ってお土産をいただいてしまいました。
あざーす!

IMG_0757.JPGのサムネール画像

ちなみに360度パノラマを円柱に貼って映像にするとこんな感じ。


360度パノラマだから、前も横も後ろも見える。


ただ実際の会場はフロントスクリーンが大きくて、横から後ろはちょっと小さいから見え方が結構違うけど。

リハときにどんな感じに出力されてるか撮りたかったんだけど、リハ中はバタバタしすぎて全然撮れなかったから、自分の作った映像がどう出力されてたのか実はちゃんと見れてない。

IMG_0747.JPG


 久々のブログでとっ散らかった文章になってしまいましたが、こんなもんです。

それではみなさん本年もよろしくお願いします。

過去のブログでも書いているとおり、2009年4月何のコネもなく独立しましたが、
無事に5年目に突入することができました。
これも日頃からお世話になってる会社さんや、自分の努力の賜物だと思ってます!キリッ

個人の仕事としては昨年度はFlash案件がほぼなくなり、その代わりに映像やCGの仕事が増えて、
Web業界の変革を感じる1年でした。
スマフォが爆発的に普及し、映像も気軽に配信できるようになったので、
今までFlashで見せていたようなものを
映像を使って見せられるようになってきたということだと思います。

Web業界全体で見れば昨年度はHTMLだけでFlashのような演出を無理やりさせるサイトや、
スクロールで派手な演出を見せるパララックスなんてものが騒がれてましたけど、
そんなブームも終わろうとしていると感じます。

個人的には今年度はFlashの復権の予感がしており、PCサイトとスマフォサイト、
アプリの住み分けがうまくされていくと思ってます。
企業側もHTML5の限界やFlashの良さに気づき、
昔ほどではありませんがFlashが復権してくるような気がしてます。

1ソースであらゆるデバイスに対応できるレスポンシブデザインなんてものが少し騒がれ
チラホラと見かけましたが、色々と制限が出てくるのと、
見せ方がどれも同じように見えてしまうので、
残るものも当然あるとは思いますが、
広告的なサイトはかなり多くのものが消えていくと思います。


個人としては5年目の今年が節目だと思っており、
このままフリーを続けていくのか、組織化するのか、またサラリーマンに戻るのかを
この1年を通して考えていこうと思ってます。
正直なところここ数年のWeb業界の流れが早すぎて個人(一人)でやるには
限界を感じているというのもあります。

それと大きなことではありませんが、
今年は色々と新しいことにもチャレンジしようとも思っています。

本年度もよろしくお願いいたします。


2013年4月2日 BillionMilesAway 鈴木順二

新年あけましておめでとうございます。
今年もよろしくお願いします。

っで話はいきなり変わるけど、
JAYPEG
というクリエイターが作品を投稿するサイトがあって、
去年そこでクリスマスカードのコンテストみたいのをやっていた。

暇なときにそれ用のクリスマスカードを作って投稿してみたので、
それの制作工程を書いてみる。

完成版がこちら

 christmas_card.jpg

投稿されてるカードを見て、パンチ効いているのがないなぁっと思ったので、
パンクなデザインにしようかと思って、
自分の好きなスカルヘッドとクリスマスを合わせたデザインにしようと思いました。

クリスマスツリーとスカルヘッドを組み合わせようと考えたけど、
横長なカードだったので、ツリーは止めて緑のサークルのこれにしました。
これがなんてアイテムかよくわかんないんだけど...。

いつもは軽く手描きでラフを描くんだけど、今回はいきなりCGソフトから。
素材のスカルヘッドをCGソフトのmodoで開きます。

01.jpg

スカルヘッドが口を開いてなんか咥えてたら面白いなぁっと思ってたので、
緑のあれを咥えさ、骨っぽい質感のスカルヘッドを
クリスマスっぽくメタルな感じにして、
クリスマスの飾りによく使われるボールを目ん玉に。

02.jpg

緑のあれから生えてるのはmodoのfurを使って生やしました。

03.jpg

下に入っているMerry Christmasという文字はイラレのパスを読み込んで厚みをかけてます。
イラレファイルがドラッグアンドドロップで簡単に読み込めるのもmodoの素晴らしいところ。

04.jpg

05.jpg

 あとは背景入れて、照明の設定、質感の微調整などをしていったけど、
画面左下と右下の空白が寂しいので、
別のスカルヘッドも入れて目ん玉の色を変えたりしていきました。

06.jpg

modoで最終レンダリングしたものが下の画像の上。下が最終版。
自分はCGで完成させることはなく、レタッチをかなりしていくので、
ここから微調整。
今回は時間もなかったのであんまりしてないけど。

07.jpg

レタッチ工程のgifアニメーションがこちら。
特定色域の選択、明るさ・コントラストの調整、
グラデーションオーバーレイの合成などをしていき、
デザインを仕上げていきます。

08.gif

レタッチ作業は終わっても、
パンクなデザインにしてはなんか全体的に眠い感じになっているので、
シャープをかなり強めにかけて全体にノイズ感を出して完成。

09.jpg
以上です!

11月23日にタワレコ渋谷店がリニューアルするんですが、
それのコンセプト映像やインタビュー映像を友達が監督していて、
そのキャンペーンサイトを制作するということで、
Webサイト制作を担当しました。

http://liveliveful.jp/


超カッコイイ映像が見られるので、ぜひぜひ見てみてください。
インタビューが定期的に更新されていくんですが、
更新作業などもやってます。

監督はショウ、
音楽は同じチームのフットサル仲間でもある小野さん、
カメラマンは知り合いの岡村さんと、
以前blindというショートフィルムを作ったメンバーが
4人も関わっていて、自分がWeb担当だから、
撮影もすべて終わっている状態からしか関わっていないけど、
知った名前が多く、面白いプロジェクトでした。

Webサイトの仕事は後々雑誌とかで紹介されたときに、
紙面にスタッフとして名前が載ることはあるんだけど、
今回はWebサイト自体にスタッフ名が掲載されていてるので、
自分の名前が紹介されていてなんか感動。


制作期間が短かったのと、
PC&スマフォ版両方作らないといけなくて、
更にスマフォはAndroid2.x系、Android4.x系、iOS5系、iOS6系と
挙動が違って、Android2.x系に最適化すると、iOS6で動かなくなったりと、
デザインや演出よりも、そっちに無駄に時間がかかってしまいました。

まぁ何はともあれ無事に公開できてよかったです。

超久々の投稿。

登壇者として少し喋らせてもらいました。

最近AfterEffects用に発売されたElement3Dというプラグインがあって、
「今までのAfterEffectsでは表現できなかったような、
3DCG表現がAfterEffectsだけで作れちゃいます」みたいなことを話そうとしたんだけど、
発表当日は自分のPCじゃなかったので、プラグインがうまく動作せず、
用意していたものがほとんど使えなくて、自分の発表はグダグダになってしまいました。

ってことでそのときに作って見せる予定だったものを少し作りこんで、
モーショングラフィックス映像としてYouTubeにアップしてみました。

Element3Dのプラグイン所持者にはiPhone5のCGモデルが無料で配布されていたので、
それを素材として使いました。

途中までマジメに作ってたんだけど、途中からふざけたくなってきたので、
なぜかAndroidの公式キャラのドロイドくんが登場してますがお気になさらず。

この映像はすべてAfterEffectsのみで作ってます。
立体的なCG表現もすべてElement3Dというプラグインを使っていて、
CGソフトは一切使ってません。



【追記 12/10/15】レポートが掲載されました。
 http://techblog.yahoo.co.jp/event/mw2012_report/


3年前の今日、税務署に開業届を出してから、
僕のフリーランスの生活が始まりました。
あれから3年が経過しました。

30歳まで一度海外に行ってみるか、独立するか悩んでたけど、
海外行ってもただの語学留学になりそうたったので結局独立。

大きな目標はなく「ただ一人で仕事がしてみたい!」という
漠然とした考えだったので、事前に準備もなく、何のコネもなく、
初年度は酷い収入でした。

でも暇だった初年度にいろんなところに顔を出していたおかげで、
色んな出会いがあり、そこからお仕事をいただくようになって、
今はなんとか生活できております。
感謝感謝です。

会社員やってたころは目先の仕事だけを
ただひたすらこなすだけだったけど、
独立してからは視野が広くなり、
色んなことにも目を向けられるようになりました。

そのせいでデザインやったり、Flash作ったり、
CG作ったり、ディレクションやったりと、
完全に何でも屋になってしまっておりますが...。

まぁただ実際はその状態を楽しんでいる自分がいます。
これからも特にやる仕事を絞るつもりはありません。

今後もフリーランスとして頑張っていこうと思ってますので、
今後ともよろしくお願いします。


2012年4月2日 鈴木順二



CM自体は面白いんだけど、
相手にスライディングさせられて不機嫌なのか、
お腹が空いて不機嫌なのかがいまいち分からず、
せっかくの沢尻エリカの自虐ネタがもったいない感じになってる。

テンポ感も悪いし...。
もう少し何とかなったんじゃないだろうか。




去年のCut&Pasteで共に戦った戦友のショウダくんがショートフィルムを作り、
それのWebサイトを作りました。
4分程度の短い作品なのでぜひともご覧ください。

http://www.blind-film.net/



原発をテーマにしている作品で、
今の日本人の目からすると描画がリアルなので、
ちょっと衝撃が強いかもしれません。

テーマがテーマなのか、Twitterで話題を呼び、
現時点でVimeoとYouTubeの合計再生数がすでに5万回を越え、
Facebookの「いいね!」を押された回数も900回を超えてます。

Twitterのクチコミで多く広がったせいか、
iPhoneやAndroidでのアクセスがかなり多く、
頼まれてもいないスマフォ用のサイトを作っておいてよかったなぁっと思いました。


ちなみにWebサイトを作ることになったのは、
とあるイベントの帰りに、
「今ショートフィルム作ってるからそれのサイト作ってよ」
と言われたので、
「別にええよ」
と軽く返事をしたのがキッカケ。


海外のKICK STARTERというところで出資を仰ぎ、
そこで資金を集めて製作するという新しい試みが用いられた作品。
サイトにあるSpecial Thanksを押したときに表示されるのが出資者の方々です。

http://www.kickstarter.com/projects/1503216494/blind-post-nuclear-tokyo-commute


監督の彼とは同じ年なのでいい刺激になりますねー。

前に学生さん作った「フミコの告白」って自主アニメがネットで話題になってたけど、
それを作った石田祐康さん制作の新作アニメが素晴らしかったので紹介。



んー。素晴らしい。感動した。

これを見ていて「或る旅人の日記」を思い出した。
あれを見たときの同じ印象(感動)。

卒業後は個人で活動していくか、どっかの会社に就職するのかわかんないけど、
入社するならRobotかな?

数年前からプロジェクションマッピングを使った映像表現が増えてきたけど、
HYUNDAIで使われたプロジェクションマッピングのプロモーションが
素晴らしかったのでブログで紹介。

今までは壁や柱の凸凹を使った表現が多かったけど、
この規模のもので商品自体を置いて表現したのは初めてみた。

基本は白のスクリーンに投影してて、真ん中に本物の車置いてるだけだから、
作り方としてはシンプル。

でもスゴイの一言。



日本じゃまたプロジェクションマッピングの事例はあまり見かけないけど、
一度は生で見てみたい。

初めて見たプロジェクションマッピングはこれ↓
衝撃受けたなぁ。こうゆう表現があるのか!っと。
自分もいつか作ってみたい。



何のブログを書いとんねん。
っと自分でも思うけどちょいと書いてみようと思う。

先日家でとあることをしてたら気絶してそのまま窓ガラスへ衝突し、
割れたガラスで怪我をして、背中を19針も縫いました。

はじめTwitterには「つまずいてこけて怪我をした」
って書いたけど実は全然違うくて、
家にある懸垂マシーンで懸垂をしてたら、
ブラックアウトして倒れた感じ。

急に激しい無酸素運動したのと、
正面を向きながらじゃなく、
上を向きながら懸垂を一気に10回も呼吸を止めてやったらから、
脳に酸素がいかなくなってブラックアウトしたんだと思う。

割れた窓ガラス。血もついてるしまるで事件現場w
大きい破片少し取り除いたけど、無意識にこの穴を潜ってベッドの上に寝てたからすごいと思う。


ママチャリグランプリとは、
F-1のコースでも使われてる富士スピードウェイを
ママチャリで7時間走るというアホなレース。

ママチャリグランプリ

一昨年会社の人たちと参加したけど、
昨年は参加できなかったので、今回で2回目。

参加メンバーは、
鈴木@BMA_JAPAN奥田@alumican_net道家@doke
山上@kappalab小林@ll_koba_ll金井@bigchu阿部@abtky、永野
の合計8名。

前日22時に横浜駅に集合して、レンタカーを借り、
僕の家に寄って荷物を積んでから富士スピードウェイに出発。
現地には夜中の1時に着いて荷物などを下ろし、就寝。
朝6時に起きて、色々準備して朝8時レーススタート。っという流れ。


レース前の集合写真

結果は1290チーム中312位。
7時間で4.5kmある周回コースを33周しました。



新年あけましておめでとうございます。

今年の4月でフリーランスのWebデザイナーになって3年目。
昨年はいろんな方々にお世話になり、
なんとかフリーランスとして生活していけております。

昨年はWebデザイン、Flash制作だけでなく、
映像制作やCG制作、企画・ディレクションなど
多くのことをやらせていただきました。

それにWeb Designingに読者のWebデザイナーとして紹介していただいたり、
Web屋さんなのにCut&Pasteのモーショングラフィックス部門に出場したりと、
色々と刺激的なことも多くありました。

今年も枠にとらわれず、色々と頑張っていこうと思っておりますので、
本年もよろしくお願い致します。 BillionMilesAway 鈴木順二


年賀状用に作ったCGをアニメーションさせてみたのでぜひご覧ください。



■おいおいどうした民主党
去年政権交代した記事を書いて自分的に期待してた民主党だけど、
政権交代して1年以上経って考えてみると、
あんま自民党と変わらなかった気がする。

でも世間の声を聞いてみると、
民主党がダメだからと言ってじゃあ自民党で良かったのか?
という話だったりもする。

鳩山首相が沖縄の米軍基地を辺野古に移設じゃなく、
県外か国外へとか言っちゃって政権交代したもんだから、
党としてなんとかやろうとしたんだけど、
やっぱダメで結局沖縄でということになり、
沖縄の人たちや、日本国内でも民主党叩きが始まり、
支持率は低下しまくり。