これはSESSIONS Advent Calendar 2024の2日目の記事です。
はじめに
2024年11月16日～17日に日本科学未来館で開催されたSESSIONS 2024に参加し、Realtime Graphicsコンペティションで3位をいただきました！
SESSIONS 2024では、Realtime Graphicsコンペティションに作品を提出した他、セミナーとShader Jamの解説を行わせていただきました。 セミナーとShader Jamについては別の記事で紹介する予定です。
この記事では、Realtime Graphicsコンペティションの提出作品である『GUARDI▲N』のグラフィックス（主に距離関数によるモデリング）について解説をします。
GUARDI▲Nについて
『GUARDI▲N』は「特撮」をコンセプトのデモ作品（Browser Demo）です。
2人でチーム制作を行い、映像とストーリーは私（gam0022）が担当し、音楽はHADHADさんが担当しました。
当初のアイデアは「天使vs悪魔」の映画的なストーリーを持つデモを作りたいというものでしたが、最終的には「特撮」の要素に振り切ることにしました。ガーディアンが天使のリングを持つのは初期設定の名残りです。
"GUARDI▲N" by @gam0022 & @katai5plate
— がむ (@gam0022) November 18, 2024
3rd Place in Realtime Graphics Competition at #SESSIONS_Party 2024@SESSIONS_Party 2024のリアルタイムGraphicsコンポで3位に入賞しました！
映像は自作のWebGLエンジンによる24KB制限です。
「特撮」をコンセプトにしました。 pic.twitter.com/wDVVRXWX26
Realtime Graphics Competitionで3位🥉をいただきました！ありがとうございます！
— がむ (@gam0022) November 17, 2024
#SESSIONS_Party pic.twitter.com/jhPsIPW867
制作環境
『GUARDI▲N』は自作のWebGLエンジンによるデモです。
音声のみ外部ファイル（mp3ファイル）で、映像は24KBのHTMLファイルで構成されています。
Revision 2020用に開発した「Chromatiq」という名前のシンプルなWebGLエンジンを再利用しました。
「Chromatiq」はShadertoyのようなFullScreenQuadにマルチパスな描画ができるとてもシンプルなWebGLエンジンです。
イメージとしてはGLSLエディターを排除したスタンドアローンなShadertoyが近いかもしれません。
「Chromatiq」の詳細については以下の記事で説明しています。
4年前からの変更点として、lil-guiからTweakpaneに乗り換えました。
Tweakpaneの方がスライダーが圧倒的に使い勝手が良く、小数点以下の細かい数字も調整できるため、制作効率が改善しました。
Tweakpaneはnormalize.fmの#56で知りました。個人的には超オススメです！
#normalizeFM で知ったけど良さそう。https://t.co/D5A4eFNZjU
— がむ (@gam0022) January 28, 2024
ビルや街の距離関数
ビルや街の地形の距離関数はMandelboxをベースにしています。
完成カット
当初のコンセプトは「天使vs悪魔」でしたので、空に浮遊する巨大な空中都市をイメージしながらモデリングを行いました。
しかし、途中から「特撮」に方向転換したため、天界という設定を残しつつも、「特撮」に合うような現代的なビルのジオメトリーとマテリアルに調整しました。
Unityでの下書き
ビルのような突起のついたMandelboxをベースに、Unityを使ってパラメーターを調整しながら街の形状に仕上げました。
球体でMandelboxの上部を切り取ることで、完成カットの街のような形状にしています。
制作途中の様子
制作途中の様子です。最初は中東風のジオメトリーでした。途中で鉄と錆を使ったスチームパンク風のマテリアルも試していました。
マテリアルについても鉄と錆によるスチームパンクのような渋い方向性も試していました。
ガーディアンの距離関数
ガーディアンの距離関数はIFS（Iterated Function System）による折りたたみを使用しています。
forループ内で空間を適当に回転や並行移動させ、最後にBoxの距離関数を評価しています。
このアプローチは『Transcendental Cube』と完全に同じですので、IFSに興味がある方は以下の記事もご覧ください。
UnityでIFSのパラメーターを調整しながらガーディアンのイメージに近づけていきました。
制作の最初期には金色と黒色の百式風カラーリングも試しましたが、最終的には白と金色のカラーリングに決定しました。
モデリングについては、最初期の案がそのまま最終版となりました。
最終版には、天使の要素として天使のリングを追加しました。
戦闘機の距離関数
作品の中盤で怪獣に全滅させられてしまう戦闘機もIFSによる折りたたみを使用しています
同じ天界の陣営であるため、雰囲気を統一するために戦闘機とガーディアンに同じIFSのアプローチを採用しました。
怪獣の距離関数
怪獣（ボス）もIFSを使用しています。
元の距離関数はガーディアンと同様にBoxですが、Smooth Unionを使って角を丸め、生物の有機的なイメージに近づけました。
こちらもUnityでIFSのパラメーターを調整し、怪獣のイメージに仕上げました。
初期案では目玉がありませんでした。
ボスがレーザーで破壊されるアニメーションは、IFSの平行移動のパラメーターで実現しました。
距離関数によるモデリングまとめ
Mandelboxから生み出したビルや街については、個人的にはかなり自信作です。今回のデモで終わらせるのはもったいないので、何か別の作品でもぜひ活用してみたいと考えています。
ガーディアン、戦闘機、怪獣の3要素にはいずれもIFS（Iterated Function System）を使用しました。
怪獣はよくあるIFS感が強すぎたので、可能ならもうひと工夫が必要だったかもしれません。
ここ数年でIFSを多用しているため、次回作では別のアプローチも検討したいと思います。一方で、IFSにはまだ未開拓の可能性があると感じています。
振り返り
かなり短期間の制作スケジュールでしたが、最終的にはなんとか形になったので良かったと思います。
10月の前半はレイトレ合宿 10などで忙しく、SESSIONSへの着手が遅れてしまいました。
今回は映像に登場する要素の距離関数によるモデリングを完全に固めてから、最後にカメラワークと演出をつけるという制作フローで映像を制作しました。なんとか最終的には形になりましたが、仕上げの工程の時間がほとんど無くなってしまったのは反省点です。
これまでの作品も多少ストーリー性はありましたが、アブストラクトなモデリングが多かったため、特撮という非アブストラクトなテーマで映像を作るのにはかなり苦労しました。『Transcendental Cube』では通常のカメラワークを乱数で生成していましたが、今回はカットごとにカメラワークを調整する必要があったため、過去作品と比べると工数が大幅に増えました。
Code Graphics（GLSL Graphics）Compoのように映像を1パスで作成したため（※ポストエフェクトや半透明は別パスにしました）、GLSLが巨大化し、コンパイル時間の増加でイテレーション効率が低下したのも課題でした。
ストーリー性のある複雑な作品を作る場合には、3D空間上にオブジェクトを配置し、オブジェクトスペースのレイマーチングを行えるような仕組みを構築するべきだと改めて感じました。
今回は音楽が間に合わなかった場合、Code Graphicsで提出する可能性もあったため、1パスで進めることにしました。
音楽担当のHADHADさんへの相談も締切直前になってしまいましたが、特撮感のある力強い曲を短期間で作っていただき、とても感謝しています。ありがとうございました🙏
おわりに
SESSIONS 2024は最高のイベントでした！
会場の雰囲気や臨場感を肌で直接感じることができ、やはりオフラインイベントには特別な魅力があると再認識できました。
実際に参加者と話をしたり、作品についての感想やアイデアを交換したりすることで、新たな視点やインスピレーションを得ることができました。
また、会場の音響や再生環境が例年より大幅に改善されていた点も非常に良かったです。
今年から刷新された応募カテゴリーにより、ProcessingやジェネVJ界隈の人々も参加し、例年以上の盛り上がりを感じました。
SESSIONS 2024の運営や準備をしてくださったオーガナイザーの皆さん、そして参加者の皆さん、本当にありがとうございました！
gam0022.net's Tag Cloud
