Saqoosha

  1. About
  2. Archives
  3. Search
  4. Say
Language:

Cut Out the Darkness

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 ネタかいた気がするw

Christmas experiments 2013

メリクリー。ひさびさにプライベートワークー。

UNIT9 所属の Interactive Developer、David Ronai 氏からのお誘いで Christmas experiments 2nd edition に参加しました。Christmas experiments ってーのはいわゆるアドベントカレンダーで、クリスマスまでの毎日、digital artist 的なひとたちがひとりひとつづつ experiment を公開していくってやつ。わたしは 12/17 たんとうで、 Jason Saragih の FaceTrackerEmscripten で JavaScript に移植してみるってのをやりました。こんなかんじ。


Live demo はこつら

FaceTracker で取得した顔の各ポイントをもとに、3D メッシュを再構築して、てきとうにひげをはやして、うそ物理シミュレーションっぽいことをしてみてます。3D メッシュ再構築は ofxFaceTrackerコードを拝借。Emscripten + asm.js やっぱすげい。速い。ネイティブよりはもちろん遅いんだけど、処理する画像サイズを 320x240 に小さくしたりグレースケール変換せずにグリーンチャンネルだけつかうようにしたりすると、Firefox 26 (on iMac Mid 2010) で 30fps で処理できる。Chrome も 31 から asm.js 対応したっぽくて、Firefox ほどじゃないけどまー動く。OpenCV もすんなり JS から使えるようになったので FaceTracker 以外にもいろいろできること広がった気がする。

ほんとはサンタの帽子かぶせてメリクリメッセージ入れてクリスマスカード的なのが作れるってーとこまでやりたかったんだけど、変なバグにひっかかっちゃって時間切れ。。technical experiment としてはまー成功したのでよしとします。技術的なバックグラウンドとかメイキング的なことはまた来週とかに書きまーす。

例によってソースは全部公開してありますのでどぞ。FaceTracker は非商用に限りフリーということなので、商用利用したい場合は別途おといあわせくださいー。