Cut Out the Darkness
2013 年最後のおしごと “Cut Out the Darkness”。Panasonic が “ソーラーランタン 10 万台プロジェクト” ってのをやっていて、それをプロモーションするコンテンツ。
世界にはまだ 13 億人 (世界人口の 1/5) もの人が電気がない暮らしをしてるんだって。電気があることが普通すぎて無い暮らしっていうのが想像つかないけど、無いことが普通のひとがまだそんなにいるらしい。Panasonic はそういった地域に、太陽光で発電・蓄電してつかえるソーラーランタン（しかも USB バッテリーにもなる）ってのを開発した。そのソーラーランタンを 2018 年までに 10 万台送るってのが “ソーラーランタン 10 万台プロジェクト”。んで、“Cut Out the Darkness” はそのソーラーランタンにかぶせて使うランタンシェードを Web サイト上でデザインしてもらって、投稿してもらって、投票してもらって、人気上位 100 個のデザインを実際に製造して、ソーラーランタンと一緒に届けようっていうプロジェクト。
さわれる検索のときもいろいろひっかかったように、これもまだちょっとひっかかるとこはある。シェードつくるのもけっこうお金かかるし、そのぶんでもっとたくさんソーラーランタン送れるんじゃないか？とか、かぶせたら暗くなっちゃうしほんとにつかってくれんの？はずされちゃうんじゃ？とか、とか。まーでも、自分自身がそうだったようにこういうキャッチー？なプロジェクトがないと、そもそも誰にも知られないから、そういう意味での存在価値はあるんじゃないかなたぶんたぶん。
Web サイト上でいかに綺麗にシェードを見せるかっていうところをがんばったので、てきとーにデザインしてもそれなりに素敵にみえるようにがんばったので、今年は冬休み長いっぽいので、小学生のときに紙を折りたたんで切ってひろげてわーってやってたのを思い出したりしながら、やってみてくだしあ。
・・・
以下、テクニカルな裏側のおはなしつらつら。
Cut out エディットしつつ 3D プレビューを素敵にっていうところで、Flash (Stage3D) に。WebGL はまだ早い。Stage3D つってもそのまま使うのは現実的じゃないので、いくつかフレームワークを調べた。絵的に Render to Texture してシェーダーで post effect いろいろかなーというところで物色。Away3D は render to texture するまともな方法がない、シェーダーは AGAL かかないといけないめんどくさい、ので NG。Minko3D は render to texture はできる、シェーダーも AS3 (!) で書きやすいようにみえた、んだけど、AS3 で無理やりやろうとしすぎて複雑、あと、まだ若い、ってので NG。んで、結局 Flare3D になった。商用は 12ヶ月の subscription で $496 するし、オープンソースでもないんだけど、render to texture できる、シェーダーは FLSL っていう独自言語だけど、わりと素直な文法なので書きやすい、てとこが決め手。オープンソースじゃない & Stage3D はじめてっていうところでいろいろ謎につまづいたですが、サンプルもそれなりに豊富なのでまーなんとか。
床面・壁面の映り込みはフラグメントシェーダーで、対象ピクセルと光源位置から cut out をてきとうにぼかしたテクスチャをサンプリング。FLSL に if 文と atan2 がない（というか AGAL にない）のにちょっと苦労した。。画面全体の post effect は、光があふれだす感じを表現するのに HDR でやりたかったんだけど、Stage3D では floating point texture つかえないのでなんとなくそれっぽく。ブルームを WWM のときにもやった川瀬式 MGF で実装したんだけど、FLSL はマルチパス必要な post effect でも 1 のシェーダーファイルに書けちゃうのがおもしろい。らくちん。最後に色収差エフェクトも。
Stage3D は、んー、機能を絞ることで対応環境を幅広くしてるっていうことなんだろうけど、ちょっと作りづらいなー、フレームワークでうまく対応できてる範囲内ならそうでもないんだろうけど、ちょっとはみだしたことしようとするとすげえ苦労しそうな印象。あと、HTML をオーバーレイできる環境がわりと限られてるので HTML ページ内に組み込むのがデザイナー泣かせな部分ちょっとある。まー、ゲームでフルスクリーンでってのが主な使い道ですし？
ってなとこかなー。久しぶりに Flash ネタかいた気がするｗ