draw(); #2にてVJを行った

　こういう記事を書くのには慣れてないので、温かい目で見てくれるとありがたいです。。。

　先日、さいなさんと私が主催のLIVEイベント「draw();」の2回目が開催された。今回は、ゲストとしてmoistpeaceさん、よもさんを呼んだり、VRChat上の会場はymgさんにより改修、配信はRIKUPIさんの最強サーバを借りて行ったりと前回よりもいろんな所がパワーアップされていた。

　皆さんのおかげでとても良いイベントになりました、本当に感謝です。

　

ゆるい開発話

　自分のパフォーマンス部分のアーカイブはこちら
　↓↓↓

　youtu.be

　今回は、ymgさんから事前に当日流す曲をふわっと聞いていたので、それに合ったような絵を出すことを意識し、直前までUnity Graphics Programming Seriesを読んでいたこともあり、なんとなくコンピュートシェーダを実装してみたいな～という気持ちがあった。その結果、出来たものを要素ごとにゆるく説明する。



要素1: それなりの数のQuad

　メインとなる要素。いわゆる板ポリをGPUインスタンシングでそれなりの数を描画し、配置のパターンやマテリアルを変化させることで、絵を作っていった。配置のパターンに関しては、コンピュートシェーダで目標となるTransformを計算し、現在のパターンから目標となるパターンに線形補間で変化していくアニメーションを気合いで作った。

　最初はもっと枚数も多かったが、試行錯誤していくうちにこの数に落ち着き、最終的にはコンピュートシェーダでわざわざ実装しなくてもよくはなっているといろんな人に言われ、たしかにと思った。また、「ドロー」という文字上に板ポリが置かれるパターンに関してはp5.jsで点を取得してきた。

　中の絵は、配置のパターンが同じでも絵が変われば、全然飽きないなと思い、こちらは6種類ほど用意した。特にお気に入りは、目(シェーダ芸で描画)とymgさんのアバターの顔のやつです。



要素2: おじさん

　リムライト的に光るフラットシェーディングおじさん。Laspで解析された音のデータを頂点シェーダに渡し、ぐにゃぐにゃさせている。要素1だけだとちょっと不足かな～と感じ、後半に登場させる予定で作成。汎用性が高く、大体の曲に合う。



その他の要素: 空間、ポスプロ

　空間があることを思わせるために、Skyboxに波紋的なやつを描画、ダスト的な役割として小さな立方体をいっぱい描画した。また、低音に反応して画面全体に色を付けるポスプロを追加したことで、白黒だけだった世界にちょっとアクセントが加わったと思う。後はBloom炊いたり、フィルムグレインを追加したり(マッハバンドを防止したかった)。



次の機会までにレベルアップしたい

　まだ書いてない反省点、良かった点はこんな感じ。

  • おじさんをぐにゃぐにゃさせすぎると、オープンサーフェスが出来てしまう
  • カメラがランダムに球面上を移動するので、たまに対象が映ってないことがあった
  • 最初からガッツリこういうのを作ろうと決めていたわけではないので、開発にかなり時間を使った(イベント当日前の一週間は大体毎日5,6時間くらい費やした)
  • 技術力不足を感じる場面が多々あった(これよりも賢く実装できる方法があるんだろうなぁとずっと思ってた)
  • 当日、パフォーマンスしていて楽しかった
  • MIDI信号を受け取るためのものを作ってあったので、絵を作ることだけに集中できた
  • パターンの補間のスピードや、カメラのスピードをパラメータにしてたので、急に早い曲になったりしても対応できた

　イベント自体に関しては、主催として無事に終わって良かった～という気持ちと、ゲストさん効果もあってVRChatのワールドのインスタンスにはいっぱい人が来てくれて、さらにTwitchの方での平均視聴数が30人くらいだったらしくとてもハッピーです。

　ご来場、ご視聴頂いた方、ありがとうございました。次回のdraw();も観てくれるととても嬉しいです。



　ちなみにリポジトリは、publicになっているので良ければ見てください～ 　github.com

　では、再見
　をにゅ