ラベル WebGL の投稿を表示しています。 すべての投稿を表示
ラベル WebGL の投稿を表示しています。 すべての投稿を表示

2015年6月12日金曜日

ライブの告知

久々のライブです。Cri☆siSさんの後ろで演奏させてもらったのが2008年で、この年を最後にライブハウスでの演奏はしてない気がします、僕の記憶が確かなら。会社内のイベントではパーティー会場とかニコファーレでボチボチ演奏してはいたんですけどね。で、活動再開だーっと思った矢先に3人目の子供が出来たので……たぶん一時的な復活に終わる気がしていますよ。まぁ、ともかく告知です。

Magical Girls Fes!!3!! @ 2015年7月5日(日)高田馬場CLUB PHASE

女の子イベントですが、バックバンドとして参加します。300人のキャパがある箱で開催される結構大きめなイベントですね。東京女子流のコピーでキーボード担当。Rolandの音源を限界まで駆使して仕込んでます。でも、生演奏を重視したかったのでシーケンスは未使用。オーガニックな味をお楽しみください。

闇の大感謝祭 @ 2015年8月8日(土)浅草KURAWOOD

こっちも300人弱のキャパがある箱。ライブハウス内でおでん、たこ焼きを売ってたりとか、お祭り騒ぎのイベント。今から演奏後に呑んだくれるのが楽しみで仕方がない。
演奏曲ですが、クラウドと言えば雲、雲と言えば八雲。そんなわけでTAKADA BANDでございます。昔から大好きだったんですが、いざ演奏してみるとドフュージョンなキメばかりで変な汗がダラダラと……。こちらはYAMAHAの音源で90年代サウンドを余すところなく再現。再現度という意味ではあらゆる点で海老反り級を目指しております。

とまぁ、そんなところでしょうか。せっかく久々のステージなのでニコファーレで培ったVJ技術を使いまわそうかと思っています。きっとシンセの演奏に合わせて派手に動く映像が僕の横でチカチカしていることでしょう。Powered by Web GL + Web MIDI on Chrome。

(追記)ニコニコに上がってるこの辺の動画がわりと最後の演奏かも。

2014年10月22日水曜日

Web Music Platform 魔改造

YAMAHAさんのWeb Music Platform
bower使ってmodule化されつつあり、自分のモジュールを追加した魔改造もしやすくなってきてます。とりあえず自分の方でもtsstmalibなんかをPolymer化、bowerで突っ込めるようにして、2つばかりVisualizerとして追加、さらにHerokuにdeployできるようにした魔改造版を作ってみました。


実際にdeployしたデモはこちら

そう言えばHeroku、ここ2ヶ月くらいで変な最適化が入ったのか、謎な挙動をしますよね。例えばpostinstallのスクリプト中にgit cloneしたリポジトリから特定のrevisionをcheckoutしようとすると、そこはrepositoryじゃないよ、的な事を言われてcheckoutできない。Google Codeからだとbranch作ってbranch直指定でcloneする以外に解決方法見つからなかった。GitHubの場合はtagを切ってないモジュールをbowerでinstallしようとしても、同じように怒られる。さらにbowerが途中でエラーするとbuild directoryから最終的なdeploy先にbower_componentsの中身がコピーされない? こっち系はあまり詳しくないので、詳しい人がいたら対処法というか裏で何が起きてるのか教えてもらえると嬉しいです。というか、今日ささださんとお昼食べるから聞いてみれば良いのか。

それはそうとscript tag injectionとかXHR、そのままだと並列読み込みとか扱いが面倒なので、Promise化してPromise.allで一気に待つようにしてみたら結構お手軽に高速化できた。もうPromiseなしでは生きていけない。

2014年9月14日日曜日

ニコファーレ完結編


イベント終了。突貫工事だったけど、なんとかそれなりに仕上げることができたかなぁ、と。イベント中はプロの映像制作屋さん・オペレータの2名と一緒にLED照明卓に張り付いていたので、プロの作業を仕込みの段階から長時間見ることができたのが何よりの収穫。

作った素材的にはこの辺にあるモノ+αの15種類くらい。3chのミキサーをMIDIコントローラから制御できるようにしたホストアプリをtmalib上に構築してました。今回のために書いたコードは175 commitsにわたり、コード量も倍増。
% git log -p --full-diff --since Aug | wc -l
23742
だそうです。

Tell Your Worldのステージ中に使った素材の一部

ライブラリ実験用に作った3D版Waypointsがパラメータを変えるだけで色々と使いまわせたのは助かったです。特に直前に追加で作ることになったエンドロールとかは数時間しか作業できなかったので……。フォントからテクスチャ作るライブラリ工事だけで時間切れになっちゃった感じ。

本番のエンドロールはMichael Jackson版Behind the Mask

で、色々と見つかった課題。

  • 自分の作ったライブラリで一番まずかった点はミキサーのフェーダ。うかつにも線形に作ってしまったけど、どう考えても対数で作るべきだった。コードばかり書いてて操作をあまりやってなかったので気付かなかった。
  • 機能として足りなかったのはプレビューと速度調整。プロの現場だと、次に使う絵をプレビューで先出ししてて、ステージ上の音楽に合うように映像のループ位置や速度を調整して、ここからって場所が来たら瞬時に切り替えて使う。DJアプリと一緒ですね。今のフレームワークでもタイムラインはきちんと管理してるので、UIさえつければすぐにでも動く。けど、性能的にプレビューまで出すのはちょっとキツイ。本番ではFull HDで生成・出力をしていたけど、エフェクトを重ねてると現状でも30fpsに落ちることがあった。そもそもコンソールと外部出力、複数のウィンドウに対して、同じタイミングで絵を送るのがちょっと難しそう。Web Music Hackathonの打ち上げでも話題に出てたけど、それこそOS XのSyphonみたいな仕組みが欲しくなってくる。
  • シェーダーのコンパイルに数百msec必要で、その間requestAnimationFrameが届かなくなるため、エフェクトのダイナミックなロードが難しい。フレーム落ちを避けようとすると、基本的に曲の頭で色々なリソースを先読みする事になってしまい、メモリ消費が激しくなりがち。ちなみにこのアプリは起動時に500MB以上食ってたし、デバッグ時には作業しているうちに2GB付近まで増えてタブ落ちする事も。
でもまぁ、ウェブアプリベースで本格的な照明制御を行う実験としてはまずまずかな。思いついた事を全てやるには圧倒的に時間が足りなかったけど、まずまずは満足。


2014年9月1日月曜日

ニコファーレ続き

この週末はコントローラ周り、サウンドからのFFT入力、シーケンスをプログラムするためのライブラリとか用意してた。だいぶTODO潰したけど、まだスケジュールきつい。

昔2D向けに作ったWaypointsを3Dに拡張。ポイントスプライトとして頂点計算しつつ、フラグメントシェーダで火球っぽく描く方法を試してみた。点を打つだけなら10万パーティクルくらいいけそうだったんだけど、ポイントサイズが大きくなってくると1万くらいで厳しくなる。空間が広いので1万パーティクルくらいだと結構スパース。


こっちは前に作ったキューブが飛んでくる奴。ワイヤーフレームで表示するモード作って、エフェクトでぼかしてみたら結構かわいくなった。


あと、関係ないけどherokuにデモdeployする時、postinstallの中でライブラリをクローンして特定のリビジョンをチェックアウトという処理をしてたんだけど、チェックアウトの段階で.gitが空とかいうエラーに遭遇。前は動いてたんだけどなぁ。とりあえずbranch作ってgit clone -b で逃げてるけど、なんか不便だ。

2014年8月24日日曜日

3Dラインアート

引き続き、制作の敷居を下げるためのライブラリを開発中。今回は3次元座標を引数にした描画関数を用意してあげて、その関数からの描画がニコファーレ全面ディスプレイに自動展開されて描画される、というもの。と言っても本来は立ち位置によってディスプレイに表示される内容は変化しないといけないので、今回はホール中央から見れば歪がないというのを条件にしてる。まぁ、勢いあれば多少の歪みは気にならないという事で。

ニコファーレのシステムに送る画像はこんな感じの展開図

ホール中央から右前を見た視点をレミュレートした出力

シミュレーション上は、ディスプレイの外枠が見えなければスクリーンの境界がまったくわからないくらい綺麗に繋がって見えている。もしかしたら高さ方向の調整はまだ必要かも。視点の高さがスクリーン中央にあることを想定してるけど、実際には結構見上げる感じだった気がするんだよなぁ。

実際に表示できるでもページはこちら。流石にWeb GLを大量に埋め込むとトップページから開いた時に破綻しそうなので。キー操作は「x」「f」「h」「j」「k」「l」。

2014年8月23日土曜日

例によってGLSL Sandbox用のシェーダーを流用

とりあえず流用できる状態にしておけばネタに困ることのないGLSL Sandbox。って事で、今回もさっそく互換フレームを用意してみた。ここからが先が創作っぽくなる部分で、得意ではない部分。……がんばる。



例によって「x」キーで会場エミュレーションモードと展開画面出力(本番用出力)の切り替え、エミュレーションモードでは「h」「j」「k」「l」で視点移動ができます。大画面版は下の画像をクリック。「f」で全画面になり、ディスプレイが1920x1080になっていれば、そのまま本番に入れるデータが出せます。Full HDでうねうねするには、それなりのGPUが必要かも。



※そう言えば、Chrome以外で全く動作確認してません。自分用のツールで時間的余裕もないので……。

2014年8月22日金曜日

ニコファーレ

ニコファーレには結構面白い照明設備があるんだけど、利用価格がお安くない……って事で遊ぶには敷居が高めです。で、今回ちょっと訳あってこの設備向けの作品を作ってるんだけど、フォーマットが特殊。かつ資料だけだと不明な点もあったので会場見学に行ってきました。で、とりあえず現地でのキャリブレーションと本番までの出力確認用に作ったのが下のプログラム。



「x」キーで会場エミュレーションモードと展開画面出力(本番用出力)を切り替えられて、エミュレーションモードでは「h」「j」「k」「l」で視点移動ができます。大画面版はこちら。このシミュレーションモードで出力確認しておけば、本番になって「あれ?違うじゃん」みたいな間違いがなくなるってわけです。

E/Fのスクリーン位置が資料では不明だった点。これらは奥から200pxの位置にあることを確認し、シミュレーションにも反映させました。担当さんの話によれば、これらのスクリーンは移動可能で、取り外すこともできるそうです。ただしステージの袖が見えちゃうので外すのはお薦めではない模様。当日に想定外の位置に設置されていた場合、言えば移動してもらえるそうだけど、基本はこの位置のはずだと言っていました。あと、豆知識としてこの2枚のスクリーンだけは他より2フレームだけ遅延が少ない(早く表示される)そうです。こだわる場合には注意が必要。

天井はスパースなんですよね。同じサイズのLEDが広い間隔で並べられているだけなので、本来あるべき画素サイズと比較すれば、密度(明るさ)は大雑把にはわかります。ただ、LEDのメーカーが違うために天井だけ発色がちょっと青みがかっている。この辺も適当ですがパラメータとしては反映させてます。

って事で、しばらくは久しぶりにGPUをいじり倒す感じ。最近のマシンって新しいからってそんなに体感に影響はないんだけど、GPU触りだすと流石に全然違いますねー。

2012年12月23日日曜日

プロジェクション・マッピングとフラグメント・シェーダ

先日、ライゾマティクスさんのワークショップでプロジェクション・マッピングについて教えてもらいました。その際利用したmapamokが、投影データはフラグメント・シェーダで描く(キリッ)って内容だったので、頑張ってシェーダ書きました。近頃はシェーダは(僕の中では)Java以上にポータルなわけで、せっかくなのでWebGL上で動かしてみました。一応、Chrome、Safari、Firefoxで表示できてると思います。


モデルデータはかにひらさんが配布していた物を利用させて頂きました。ただ、元データはメタセコイア形式だったので、ply形式に変換して使ってます。

plyローダ作ったついでに、いくつか有名なデータを読み込んでみたんですが、100万ポリゴンくらいになると辛く、Happy Buddhaは描画レートが数フレームくらいまで落ちちゃいました。このくらいは平気だと思ってたんだけど・・・あまり詳しく原因見てませんので、別に理由あるかも。同僚はミクとか普通に動かしてたし。