ジェネ系VJで使った要素集エントリ

はじめに

本記事はジェネ系VJ Advent Calendar 2023の2日目の記事です。

1日目は不在なので実質1日目(?)ですので、実装等には触れずにゆるい記事を書きます。

ジェネ系VJとは

リアルタイムレンダリング等を活用して映像をその場で生成するタイプのVJです。そのため、パラメータをその場で変えること（例えば音に合わせてカメラワークを変える等）が出来たりするのが面白さの一つです。自分は主にUnityを使用してVJをしています。

今まで使った要素の紹介

まだ片手で数えるほどしかジェネ系VJをやってきてませんが、過去にやったVJの画像を添えつつ今までに私が使ったことがある要素を紹介します。

ワイヤーフレーム

メッシュの線だけを描画するやつです。普通に面を描画するよりも情報量が増えて嬉しいのと、お手軽にサイバー感が出せます。

シェーダでも実装できると思いますが、上図の時のVJでは、Blenderでワイヤーフレーム状のメッシュを用意してUnityに持ってきました。


縞々模様

こちらも普通に面を描画するよりも情報量が増えて嬉しい要素です。時間によってどんどん縞模様をずらしていくとさらにいい感じ。


フラットシェーディング

面を一色で塗るタイプのシェーディングです。パキっとした感じになり、ポリゴンがポリゴンであることが分かりやすいシェーディングなので、味のあるCG感が出ます。


リムライティング

メッシュの縁に近いほど光が強く当たってるようなライティングです。鋭くさせればアウトラインっぽくも見えます。フラットシェーディングと組み合わせて使うと、めっちゃ𝙘𝙤𝙤𝙡。


色相まわすやつ

曲に合った色または、飽きさせないために色相が変わるパラメータを仕込んでおくやつです。また、パーティクルなどのオブジェクトごとに色を変えると画面が華やかになります。やりすぎるといわゆるゲーミングカラーになります。


メンガーのスポンジ

フラクタル図形の一つで、定番ネタです。単なる立方体よりも情報量が多くて嬉しいです。よくレイマーチングを用いて実装されている印象があります。（上の画像は、B2BVJツールを一緒に開発した@SainaKeyさん実装）


パーティクル

みんな大好きなやつです。
もはや説明不要ですが一応。同じようなオブジェクトを大量に描画し、動きを付けたものです。動き方や、オブジェクトによって結構見え方が変わります。

画面の賑やかしの要素としてもよく使われます。


パラメータを表示するやつ

みんな大好きなやつです２。
内部的なパラメータをあえて見せる要素で、変動した時にアニメーションを付けてよりかっこよくしたりする人もいます。

この時のVJはOSをイメージしてたのもあって、色々ウィンドウを並べました。


イベント名や出演者を登場させるやつ

見出し通りのやつです。イベント名などが画面に登場すると、このために作られたものなんだと認識できるので、個人的には好きです。

まとめ

もっとVJをやって、使える要素を増やしたり、どんな要素が今回合いそうかを見極める力をガシガシ付けていきたいですね。

画面全体に効果をかけるポストエフェクトに関してあえて触れなかったのは、この記事のタイトルの元ネタでもある@kaiware007さんの記事で紹介されているからです。

このページでは実際にエフェクトを試すこともできるので是非ご覧ください！！ unityroom.com

teamLabのインターンに行ってきた

この前の春休みに、teamLabの通年のインターンに行ってきました。そこで自分はインタラクティブチームに混ざり、2週間ほど課題に取り組みました。


teamLabについて

様々な分野のスペシャリストが集まり、最新テクノロジーを使用した大規模なシステム開発やデジタルコンテンツを制作している会社です。海外にも施設があり、関東だと豊洲の方に施設があります。

planets.teamlab.art


取り組んだ課題について

インタラクティブチームのインターンは、基本的に自分で設定した課題に取り組むという形です。自分は、コンピュートシェーダを使いたいという漠然とした気持ちのままインターン当日を迎えてしまいました。結局はトレイル表現に取り組み、開発をする中でやってみたくなったことなどを取り入れていきました。


ちなみにこういうのがトレイル表現です。 docs.unity3d.com

youtu.be


課題に取り組む中で、メンターさんに表現したいものは何かということを問われ、頭を悩ましたことをよく覚えています。やってみたい技術駆動で動いたせいでそうなってしまったわけですが、本来は伝えたいことがあり、それをどうやって表現するかという流れで作品は制作されるものですね。なので、インターン後半からは、トレイルを生体っぽく見せれたら面白くなるんじゃないかと思い、それを軸に開発していきました。

今回の開発は、試す段階と、試したものを組み込んでいく段階に分けて開発することを意識してました。 試す段階では、

  • 紙に考えを書いてみることで整理する
  • コンピュートシェーダで実装する前にまずはCPUで実装してみる（デバッグしやすいので楽）
  • シーン上の3Dギズモを用いて計算結果を可視化しみる（メンターさんに教えてもらった）

などを実際に行いました。どれも新しいことに取り組むにはめちゃくちゃ大事なことでこれは今後の開発でも意識したいです。


自分のレベル感について

ちょっと恥ずかしいですが、teamLabのインターンに行ってみたい！という人に少しでも役立てたらいいなと思い、書きます。

まず、インターンに申し込んだ段階での自分のレベル感は、

  • 情報工学系の大学3年（課題などでリアルタイムCGを扱う）
  • Unityをもうちょっと使えるようになろうと意識したのは応募した半年くらい前
    • 便利なC# / Scripting APIの機能を調べて使用してみる
    • シェーダをある程度書けるようになる
  • リアルタイム3DCGの知識がちょっとはある
    • GPUパイプライン、古典的なライティングモデルなど
    • 数学と物理が得意というわけではない（高校数学と線形代数ﾁｮｯﾄﾀﾞｹ）

こんな感じです。めちゃくちゃすげ～～～ことができるみたいなのはなくて、自分が参加できたのは運もあったと考えていて時期的に応募数が少なかったことも絡んでいると思っています。


感想

本当にあっという間でした。出来なかったことなどもあったりしますが、2週間という期間はだれずに一気に駆け抜けることができるちょうどいい期間であると感じました。また、もっとアグレッシブに動いて、社員さんの画面を見させてもらったりすればよかったな～と思いますが、社員さんとのランチもほぼ毎日連れていってもらい、色んなお話を聞かせて頂きました。技術的な面でも、社員さんとどれくらい差があるのかが見え自分の立ち位置を確認出来たり、メンターさんに教えてもらいながら課題に取り組むことでパワーアップ出来たと思います。



では、再見 をにゅ



P.S. みなさんの記事もめちゃくちゃ良いので、読んでください。

note.com

note.com

ikep.hatenablog.com

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

　では、再見
　をにゅ

楽にnanoKONTROL2をUnityで動かすためのセットアップツールをつくった

github.com

　UnityでKORG nanoKONTROL2（以下、ナノコン）を使用する際のセットアップを楽にできるツールをつくった。



モチベ

  • Input SystemでMIDIを扱うときはセットアップが大変。なので、できるだけ楽に素早く、セットアップを行いたい。
  • ついでに、MIDIコンの各種コントローラの状況をUnity上で可視化されると嬉しい（操作ミスをなるべく減らすため）。



機能

  • ナノコンをUnityで使う際のセットアップ済みのPrefab
  • カーソルで触るとちゃんと動くuGUI製のナノコンを模したUI
  • Inspectorで設定するだけで完結するナノコンからの信号を受け取り、メソッドを実行できるコンポーネント

　VJ用途としてはとりあえず、これだけあればOKという感じ。



中身

　クラス図はこんな感じで、MVRPを意識して作っている。NanoKON2ModelがMIDIの値を持っておくクラスになっており、それに対してみなが値をセットしたり、値が変化したことを購読するようになっている。 　また、今回はUniRxを導入しておりこの辺のイベント駆動は書きやすかった。

qiita.com

　物理のナノコンを動かすと、uGUIのナノコンも同じ動きをするようになっており、上記の記事でも触れているようにイベントが一巡してしまう問題がある。これのせいで、HogeHogeクラスのメソッドが2回呼び出されてしまう。

　解決策として、UIらにカーソルによって触られたかどうかの状態を知るためのbool型のReactivePropertyを持たせた。そして値のストリームと合成し、触れられたときにだけイベントが通知されるようにフィルタをかけている。これでHogeHogeクラスのメソッドは1回しか呼び出されず、いい感じになった。



今後やりたいこと

  • 不具合が生じたらその都度修正
  • コントローラがボタンのところには、momentaryかtoggleかを簡単に切り替えれる機能の追加
  • 実践で使用

　1月中にVJをやる予定があるので、そこで使っていきたい。VJ楽しいので皆さんもやりましょう。

www.korg.com