Baku Hashimoto

橋本 麦

プロジェクションマッピング制作支援ツールつくった

スクリーンの形状が複雑なプロジェクションマッピングの制作は、その展開図の上に映像をのせていくわけですが、立体スクリーンに投影された所をリアルタイムで確認しながらコンポジットできたら便利だなーと思い、ツールをつくりました。久々のoFです。

VirtualMapper ( source )

ネーミングセンス無くてすみません。(良い案あったら教えてください)

要するに、UV付きのモデルデータを読み込んで、Syphon(ソフト間で映像をやりとりするためのオープン規格)経由で送信された映像をテクスチャとしてリアルタイム表示するというツールです。

C4Dでモデルデータの書き出し、Syphonの出力をAfter Effectsから行った時の画面キャプチャです。

たいていのVJソフトやビジュアルプログラミング環境はSyphonに対応しています。AEは、AESyphonというプラグインをインストールすれば出力可能です。(シェアウェアですが、解像度制限のかかった試用版もあります)

投影時のキャリブレーションツールはたくさん出回っていますが、制作時に便利なツールはほとんど無くて。結構今でも展開図から組み上がった所を脳内補完しながら、力技で作っているケースが多い気がします。現場テストになって初めて、少し別角度から観ると全然飛び出て見えない、って分かってしんどい思いを何度かしているので、もし次制作する機会があったら大分楽になるかなぁと思ってます。

バグや不具合、アイディアなどあったらissueかTwitterにリプライください。僕自身が必要なひと通りの機能は実装し終えたとはいえ、このまま放置するのも勿体無いので、もし一緒に開発してくださる方がいたらとても嬉しいです。

今後は制作時につくった汎用性の高いリソースやツールはバシバシ共有していきたいです。今年の目標です。

フラットデザイン


source: 小さな喫茶店:WEB2.0風 ボタン アイコン素材 (作ってみた。) – livedoor Blog(ブログ)

一時期のWeb2.0的デザインの過度な「リッチ感」に対する反省と、ユーザーの学習によってデスクトップメタファーやスキューモーフィズム自体が用済みになったことからの反動で生まれたトレンドが、フラットデザインで。削ぎ落とすべきは「必要のないリッチ要素」で、決して無差別にフラットにすれば良いって訳じゃないと思う。

何が言いたいかというと、物理的なヒントは残した方がいいんじゃないかなぁ、って話。

ボタンはやっぱり飛び出て見えた方が良い。「あ、ここ押し込めそう」って直感的に分かるから。上に重なったパネルにはドロップシャドウがあったほうが良い。「影が落ちてる方が下なんだな」と分かるから。上下にオーバーフローしたボックスの内側にもシャドウが欲しい。「まだ上下に隠れて見えない部分があるんだな」と分かるから。

ブリーフケースやメモ帳というメタファーが必要でなくなったとしても、テカリや鏡面反射は余計だったとしても、物理的な性質・位置関係によるヒントはもうしばらく有用な気がする。だって「ただの文字だけど、SUBMITって文字的に多分ここはボタンだな?」って類推を効かせるより、いかにも「ボタン!」って感じがしてた方がずっと分かりやすいじゃん。

そういう意味で、Material Designは、フラットデザインのミニマリズムと、物理的ヒントがもたらす直感性のイイトコ取りしてて良さある。


Webデザインやってると、やれpushStateだの、CSS3 Transitionだの、シングルページだの、血眼になって新しいトレンドを追いかけがちだけど、ぶっちゃけ素人目には、そういう1・2年単位で移ろう「イケてるWebデザイン」なんか気にもとめない気がする。

むしろ、僕個人は、そういう「イケてる感」を醸したい時って大概、同業者への「ちゃんとトレンドについてこれてますよ」アピールをしたいって煩悩に支配されてる時だったりする。

そんなことよか、ブラウザゲーでもない普通のサイトにローディング画面なんて付いてほしくないし、これはボタンか? リンクか? テキストボックスか? とかいちいち迷うくらいならはっきり見た目に差をつけて欲しいし、なにより軽いページであってほしい、ってのが一般ピープルの本音なんじゃないかなと思った。

ロングシャドウデザインは論外。

MoGraphの複製数を増やした時,新しいクローンをニョキっと生やす

タイトルわかりづらいですが…

MoGraphの複製数を増やした時に,いきなりクローンが現れるのではなく,徐々に大きくなりながら現れて欲しい時のためのスクリプトです.今やってる制作で作りました.

project file

import c4d
from c4d.modules import mograph as mo

prevCnt = 0

def main():
    global prevCnt

    md = mo.GeGetMoData(op)
    if md==None: return False

    cnt = md.GetCount()
    marr = md.GetArray( c4d.MODATA_MATRIX )

    if prevCnt < cnt :
        for i in xrange( prevCnt, cnt ) :
            marr[i].Scale( 0.001 )

    md.SetArray( c4d.MODATA_MATRIX, marr, True )
    prevCnt = cnt
    return True

ディレイエフェクタは,スケールが0からの補間の場合変な挙動をするのですが,現在のフレームで新しく登場したクローンのスケールを1フレームだけごく小さな数に設定する事で,補完が上手く効くようになります.

上の動画みたいな単純な例なら複製数を変えずにボリュームエフェクタでマスクをかけるような感覚でスケール -0.999 を適用したほうが早い気もしますが,頂点数の変わるポリゴンやマトリクスに配置した場合,例えばThinking Particlesと併用した時や,伸長するスプラインに配置した時などに使えそうです.

最近C4DのPythonイジってないからかなり忘れてる…

Three.jsでセル・オートマトン

img

Fuse

事務所の飲みで,当時お気に入りだったセル・オートマトンのシミュレーターアプリ”Sablo“を上司にディスられたので,「おもしろいセル・オートマトンつくったる」と一念発起して作ったのがこれ.導火線に火付けて,ダイナマイトを爆発させられます.

fuse

GLSL触り始めてからGPGPU的な事をやりたくなってきたのもあって,かなり楽しかったです.

「前のフレームの計算結果を利用して新しいフレームを計算する」という部分で突っかかったので,一応メモ.

shader.uniforms.buffer.value = this.srcRenderTarget;
renderer.render( dstRenderTarget );

var swap = srcRenderTarget;
srcRenderTarget = dstRenderTarget;
dstRenderTarget = swap;

WebGLRenderTargetはそのままテクスチャとしても扱えるので,2つターゲットを用意してやって,前フレームで描画に使ったのRenderTargetをシェーダのuniformsにセットしてやりつつ,お互いに代わる代わるオフスクリーン描画してあげれば良いみたいです.このサイトのソースを参考にしています. WebGL Cellular Automaton


無駄に楽しくなっちゃって投稿機能も付けてしまいました.MySQLがPHPのgdも勉強できたので結果、良かったということで… ちょこちょことピカチュウやカップル,チンコなどが投稿されてるんだけど,個人的にはこれが好きです.

img
Fuse #27

曲率

非ユークリッド幾何学自体はエッシャーが「円の極限」でモチーフにしていた位だし、ジェネラティブアート界隈でもそこそこの頻度で引用されてるモチーフだけど、大体2次元で終わることが多い上に、曲率が一定の空間しか扱っていなかったりする。

以前3次元で曲率がゼロじゃない空間の見え方をシミュレーションする「Curved Space」ってソフト見つけた時、めちゃクソカッコええな思ったっけか。

ところがインターステラは、曲率が一定じゃない空間での光の歪み方を正確にシミュレートした上に、2時間の映画表現に落としこんでいるっていう所がありえない程カッコイイし、この映画でしか活用できなさそうな超ニッチなレンダラーを開発した人を尊敬するし、こう、色々置いて行かれた気がして悲しい。

とか言っちゃう自分の衒学趣味はいい加減自覚はしてるけど、とにかくインターステラ楽しみ

Three.jsで4次元立体

img

Polychoron

4次元立体の3次元へのステレオグラフ射影をシェーダで書いてみました.dimensionsというWebで見れる数学教育番組のCGが好きだったので自分でも作ってみようと.

GLSLでは4次までの行列しか扱えないので,アフィン変換は出来ませんが,今回は回転しか扱わなかったので4次の回転行列だけで事足りました.

uniform mat4 matrix4D;
uniform float distance;
uniform int stereograph;

attribute float positionW;

void main() {

    // transform in 4D
    vec4 tPosition = matrix4D * vec4( position, positionW );

    tPosition = normalize( tPosition );

    // perspective projection from [0, 0, 0, distance] to XYZ hyperplane
    float d = distance / ( distance - tPosition.w );

    vec3 pPosition = tPosition.xyz * d;

    gl_Position = projectionMatrix * modelViewMatrix * vec4( pPosition, 1.0 );
}

「4次元空間内での座標変換」→「3次元への投影」→「3次元空間内での座標変換」 + 「2次元への投影」と, 2回座標変換と投影が必要になりますが,基本的な事は全く同じです.

この調子で色んな立体をつくろうとおもった矢先,jenn3dというツールを発見してしまいまして.こっちからフォークして,自分なりに弄くり回した方が間違いなさそう.

ちなみにjenn3dからstl書き出ししたモデルデータを使って #everyday 作りました.

img

これを使ってモーショングラフィックスできたらなーと思ってます.

ちなみにFlat Torusがお気に入り.

img

すごさ

すごさ ってシンプルに重要な要素だと思う。

センスの良さって、自分で思っている以上に狭いコミュニティにしか伝わらないものだったりするし。ところがすごさって、ちゃんとすごければ、クラスタを飛び越えて理解してもらえるような気がする。

すごくなさをセンスの良さや手法論、コンテクストでもって誤魔化しているような作品って、同じ作り手の共感は買っても、中学の同級生には「で?」の一言で看破されて終わることが多い気がする。

すごさ欲しい。

小銭減らし

img

「1」のつく小銭を4枚まで,「5」のつく小銭は1枚に収めるように会計をするというゲームが去年からマイブームだったので,最適なお金の出し方を計算するツールをなんとなく作ってみた.どういうことかは分かる人は直ぐに分かると思う.

小銭減らし

ちなみに最近は,「その後の割り勘でお釣りが返せるよう小銭の枚数をキープしながら,飲み代を建て替える」のにハマってる.

アナロジー

マネー・ボールを観た。映画としての感想はいいとして、少し考えさせられるものがあったので忘れないうちに書いておく。

自分たちを、マネー・ボールに登場する「経験と勘に頼るスカウトたち」側の人間だと客観視できる人はそう居ない気がする。

マネー・ボールが結果的にある程度の成功を収めたという史実を知っていて、なおかつ映画を通して三人称視点で見つめることの出来る僕たちにとっては、ビリーもスカウト達に劣らず野球に対する愛はあって、ただその立場と用いた手段の為にチーム内や世間に理解されず、一時はバッシングを受けていたに過ぎないんだ。と客観的に捉えることができる。

スカウト達は、自分たちの経験則を盲信し、ビリーのやり方に「野球は数字じゃない」と反発する老害だ。

ただ、あのスカウト自身にとっては、ビリーは自分達が長年培ってきたモノを数字で否定する合理主義の化身で、目の敵にしていたに違いない。


何が言いたいかというと、アナロジーでもって自分を三人称視点から見つめるという発想だ。

FaceBookで最近Viibarの広告が流れてくる。

クラウドソーシングがクリエイティブ業界を侵食することに対するどことない抵抗感は、もしかしたら、僕がそのうち「勘を頼るスカウト」側の人間になっていくことを仄めかしているのかもしれないと思った。

イージング

ルックは然ることながら、イージングが一つ作品のトーンを作り上げているような映像は観ていて楽しい。

androp – MirrorDance | dir. 田向潤

andropのMVの中では一番好き。クラップに合わせての初速キツ目のイージングが、
乾いたリズム感を強調していて小気味いい。

X-MEN First Class Main on End | prod. Prologue

重厚なオーケストラにソウル・バス的なミニマルというギャップがいい。
音のピークから微妙に遅れて、引きずるようなイージングや
不安げに揺れるゴースト表現が、硬派で不安定な空気感を醸し出している。

モチーフの選び方も、オゾンの匂い漂うクリーンルームを連想させるような
2重螺旋を描く構造式、塩基のアルファベットなどの分かりやすいメディカル的モチーフを敢えて避けて、
プリミティブな円と多角形でDNA周りの機構を暗喩的に表現している所がニクい。

Tei Towa – MIND WALL | dir. 中村剛

絶えず視点が揺れ動いている。
ちぐはぐさを感じさせるブレたイージングが、子供の絵のようなルックに病的さを加えている。

砂原良徳 – Lovebeat | dir. 小島淳二

線形補間といったらこれ。
モーションが飛ぶ所も、フレーム落ちや中途半端にキャッシュが残っていた時のAEプレビューみたいなんだけど、
一見エラーのようで計算されつくされている。


多分自分が、日本の局所的なクラスタに居るからってだけなんだろうけど
何となく、目指すイージングが似通っているような気がして。

誇張されたスプリング感と吸着感。
「ニューーーーン!」みたいな。

個人的にだけど大橋さんは、吸着感というよりは、入りと抜きの速度を強めに、中間でフワッと決め絵を見せていくイージングが多くて、少し逆の方向を行ってる気がする。

かくいう僕も「ニューーーーン!」をやってしまいがちではあるんだけど、できることなら案件ごとにイージング感をいくつも使い分けられるようになれたら良いなとか思ってる。