2019年9月20日にリニューアルオープンした大阪の大丸心斎橋店の本館の中央エスカレーター吹抜け空間にD-WALLっていう建築と彫刻と映像を掛け合わせたインスタレーションをつくってました。
works archiveはこちら。
Daimaru Shinsaibashi Store
お話もらったのが丁度2年くらい前(!!)で、個人的にはこんなに長いプロジェクト初めてでした。その時の提案時に自分が考えてた事とかサーベイがblogに残ってた。log is 大事。
プログラマブルな建築
この時に思ってたのは自分たちが建築を作るならその「場」に作る意味がある、データからくる意匠設計ってのが考えてたテーマ。
今回は1F〜10Fに繋がった4列のエスカレーターという昇降空間での人の視線導線の可視領域と、壁面構造の背面LEDに対する開口率及び立ち上がりという2種類のパラメータを組み合わせて壁面全体の揺らぎを意匠設計するというアイデアを提案した。
ストーリー部分やらモジュール設計は有國さんと元木くん担当。
冒頭の制作背景の方で話してるのでそちらで。
背面LEDではそうして出来た建築の凹凸陰影を強調するような、
時間や季節で刻一刻と変化する1F~10Fまで一続きとなった映像をWebブラウザベースで制作した。
ざっくり裏側構成はこんな感じ。
Node.jsとWebSocketでマスター機にローカルサーバ立てて
各PCからのブラウザアクセスでURLのクエリ見て1枚絵コンテンツのどの部分を
レンダリングするかってのが決まるってシステム。
自前でsyncシステム作ってみたけど割と上手い事いったのでそのまま採用。
何がいいって複数台へのインストール作業がいらない!何台でも増やせる!
インストールはマスター1台だけであとはブラウザからアクセスすれば終わり。簡単is最高。
こんなん。
sync方法をサーバーからの定期cron方式からenterframeでのpingbackに乗せる形にしたら有線無線関係なくバッチリ👌 後はみんな大好きウェブブラウザで複数台同期コンテンツ開発するだけ🥰 master機以外はブラウザからクエリ付きURLアクセスするだけでセットアップ完了。#nodejshttps://t.co/Tg7MtKCGDY pic.twitter.com/dRf3NYOym2
— you tanaka (@rettuce) April 10, 2019
フロント部分はVue.jsでThree.js使ってシーンごとにcomponent化しておいて
合計50シーンくらい作って20シーンくらいボツった気がする。🤔😭🤔😭🤔
Three.jsも機能としてはそこまで使ってなくて、ほぼ全シーン1枚shader芸。
こんなん。
#Nodejs #WebSocket でローカルネットの複数デバイスでフレームシンクして画面を分割同期するシステムやっと #Vuejs で組み直せた。。シーケンス、Socket、Canvasやら管理は親に持たせてビジュアルだけ個別コンポーネントで無限に作れる。絶対やらねーけどVJアプリすぐ作れそう。G.Wタスク1/3終わり😇 pic.twitter.com/0hlqIg2JMq
— you tanaka (@rettuce) May 2, 2019
ただ、画面上で作っても縦13440pxあるし、
超俯瞰で見てる事になるので(10フロア分で縦50mくらいのLEDに表示される)
作って入れてみても全然おもてたのと違う!表情分からん!みたいな事も多く、
結局は壁面の一部2mx2mを別途クライアント様の会議室に設置してもらって1週間程篭って一人開発合宿してた。
ブラウザベースで作る常設インスタレーションてのもかなり特殊だろうなーと思いつつ
案外凡用性の高いシステムが作れた気もするので今後アプデしつつまたどこかで使えたらいいかも?
個人的にはモジュール設計の部分で元木くんともっと効率的なシステム作ってトライ&エラー機能やら
オリジナルの発注システムくらいまでシステム作り込んだり建築の制作過程に踏み込みたかったな。。てのが残念&反省ポイント。
まーでもめちゃくちゃ長期巨大案件で、皆さま本当にお疲れ様でした〜🙌😭✨
クレジットはこちら。(書かれていないけど本当に沢山の人が作ってる😭)
インタビューされてないので現地の深セン中国スタッフプログラマみたいになっとるw
中国深センLED工場で本番機材で初フレームシンクテスト。排気熱ですげー暑い。
めっちゃ頭抱えててワロタ
you