カイワレスタイル

ゲーム、アニメ、プログラム、興味のあることをツラツラと。

2020年上半期で作ったRaymarchingまとめ

正月

Cyber Fuji 2020

f:id:kaiware007:20200702191416p:plain

neort.io

VRChatの一部界隈でお正月の振り袖の模様をシェーダーで作るムーブメントがあったので便乗して作ってみた作品です。
みんなだいたい和風で作ってたので、ハマってたvaporwaveというかsynthwave的な雰囲気のものを作ってみました。 f:id:kaiware007:20200702215114p:plain

VRChatに持っていったバージョンは、日が登ったり沈んだりする動きも追加しています。
バーチャルとはいえ、衣服の模様がアニメーションするのはインパクトがあって反応を見るのが楽しいです。

Boze ノ ハジマリ

ある日、天啓を得て、VRChat界のNo1ゆるキャラ(?)、三日坊主さんを距離関数してみました。
これが後の"Boze"シリーズとしてそこそこ続くとは、このときは全然考えていませんでした…。

Distance Function : Mikka Bouzu

f:id:kaiware007:20200702191819p:plain

neort.io

基本の三日坊主さんの顔の距離関数です。 通称、Boze。
基本的な距離関数を組み合わせて作っています。

00 Meta Boze

f:id:kaiware007:20200702222936p:plain

neort.io

距離関数にすると何が便利かと言うと、モーフィングさせたり、ねじれさせたり、融合させたりと普段ポリゴンベースのリアルタイムレンダリングだと難しい処理もできるようになることです。
とはいえ、そもそもレイマーチング自体が重いので万能ではないですが…。
この頃は、まだ最適化が甘くてめちゃくちゃ重いです。
あまりに重すぎたので、Neortには動画にして投稿しています。
3月にネット上で開催されたShader1weekCompoというイベントに出展しました。
1週間という限られた時間の中でシェーダーを使った作品を作るというニッチなイベントでしたが、割と作りたいものがはっきりしていたのですんなりと完成できました。
まぁテーマは完全無視してましたが…。

www.shader1weekcompo.org

進撃のBoze

01 Meta Boze Again

f:id:kaiware007:20200702192013p:plain

neort.io

5月に開催された第2回のShader1weekCompo用の作品です。
テーマは「続く」ということで、前回のMetaBozeさんを続投させるということで無理矢理合わせました。
無限にBozeがうねうね伸びていくように見せれて満足です。

Everyday 1 Boze

第2回のShader1weekCompoが終わってから、もっとレンダリングの勉強やレイマーチングのテクニックを身につけたいなと思い立ち、色々Bozeを使って模索をはじめました。
ネタがポンポン思いついたので、毎日投稿できるかもしれないと思って #everyday1boze というタグをつけて投稿し始めました。
結局毎日は無理でしたが…!

02 Party Boze

f:id:kaiware007:20200702192345p:plain

neort.io

グリッドごとに違う動きや色をだせるか試してみた作品その1。
空間をmod関数などでグリッドで区切ってリピートさせてオブジェクトを増やす手法は、レイマーチングではよくやるのですが、グリッドごとに乱数を使ったりすると、形が崩れる問題が度々おきます。
原因は、グリッド内での距離の分だけレイを進ませた時に、グリッドの境界を突き抜けて次のグリッドに大幅に食い込んだりするためです。
このときは、単純にレイが進む距離を半分にしてはみ出しづらくしてごまかしています。

03 Darkmatter Boze

f:id:kaiware007:20200702192432p:plain

neort.io

グリッドごとに違う動きや色をだせるか試してみた作品その2。
モチーフは、子供の頃に図鑑か何かで見た「宇宙誕生以前の図」、磁性流体、Max CooperのOriginsのMVです。

www.youtube.com

04 Endless Boze Tunnel

f:id:kaiware007:20200702192513p:plain

neort.io

自分としては、ずっと見ていられるようなものを作りたいモチベーションがあります。
しかし、何故か無限にループするようなトンネル系のものを作ったことがなかったので作ってみました。
これのためだけに、Boze関数の口の中を深くしました。
実際は拡大してるだけなんですが、中に入っていくような感じに見えて面白かったです。

05 Drop Boze feat. Daruma-Otoshi

f:id:kaiware007:20200702192551p:plain

neort.io

空間のグリッド化をしつつ、破綻しないように頑張ろうとしたけどうまく行かなかった作品。
1つの顔をグリッドで分割して、グリッドごとの顔の位置をずらしたら、達磨落としみたいなものができそうと思って作りました。
結局このときは、グリッドではできなくて、5つの顔を段々になっているBoxとの論理積をとって残った部分をずらしている感じで表現しています。 1つのBoze関数でもそこそこ重いのを、5個も描画してるのでかなり重いです。閲覧注意!

06 Ghost Boze

f:id:kaiware007:20200702192703p:plain

neort.io

空間のグリッド化は、一旦諦めて、ボリュームレンダリングに挑戦してみた作品。
凹みさんのボリュームレンダリング記事がめちゃくちゃ参考になりました。
この世のUnityについての面白そうな技術は、だいたいkeijiro神か凹み神が既にやってたりします。 我々人類は、ありがたく神の恵みを享受しましょう。
通常のレイマーチングで床と天井を作ったあとに、Depthを保持して、ボリュームレンダリングをしているので、うまく床や天井にめり込むようになってます。

tips.hecomi.com

07 Cloud Boze

f:id:kaiware007:20200702192737p:plain

neort.io

ボリュームレンダリング作品その2。
FBMの値に距離関数の距離を引くことで、雲が形作られてます。
図形との距離が遠いと濃度が0になり、中にはいると距離が負になるので濃度が濃くなる寸法です。
シンプルだけど面白いですね~。

08 Grid Dissolve Boze

f:id:kaiware007:20200702192812p:plain

neort.io

やっと空間のグリッド分割がうまくいった作品。
レイを進ませる時に、必ずグリッドの境界で一旦止まるようにしています。
距離関数のグリッドの立方体の表面との距離と、距離関数の戻り値の距離を比較して、短い方を採用しています。
グリッド境界で必ず止まるので、普通にレイマーチングするよりは試行回数が増えてしまいます。

09 Round Slice Boze

f:id:kaiware007:20200702192904p:plain

neort.io

空間分割作品その2。
グリッド自体は立方体ですが、ずらし方を段ごとに同じにしてるので、輪切りされてるように見せてます。
断面にノイズによるサイケな模様をつけたり、背景をピンクにしたりして怪しい雰囲気を出してみました。

10 BRDF Boze

f:id:kaiware007:20200702193003p:plain

neort.io

本格的にBRDFについて勉強しはじめた作品。
リアルタイム鏡面反射たのし~!
まだ反射処理を1回分しか行っていないので、床に写り込んでいるBozeの表面が反射していないです。

11 U.F.B(Unidentified Flying Boze)

f:id:kaiware007:20200702193054p:plain

neort.io

寝る前に、「カプセルの距離関数は、内部的に直線上の点の位置を計算できてるから、その点上に別の距離関数を置いて距離を返したら、引き伸ばされた図形ができないか?」と思いついて作ってみた作品。 割と思ったとおりの感じの絵になってよかったです。

12 Color Blend Boze

f:id:kaiware007:20200702193147p:plain

neort.io

色や質感をなめらかに合成してみたくて作った作品。
今まで、質感の設定は、衝突した距離関数に応じてインデックスを決めて、最後にまとめて色を割り振るみたいなことをしていましたが、それだとsmoothminなどで複数の物体がブレンドされていても境界付近がぱっきりわかれてしまっていました。
今回は、距離関数に色などの質感設定も返すようにしてsmoothminでもなめらかにブレンドされるようにしてみました。
結果、switch~case文が減ってシンプルになった面もありますが、距離関数を書くのが若干めんどくさくなりました…。
質感や色味は割と気に入っています。

13 Boze Factory

f:id:kaiware007:20200702193250p:plain

neort.io

複数回の鏡面反射とエミッション(発光物)をやってみた作品。
エミッションは単純に足せばいいだけなので簡単ですね。
ただ、レイマーチングでブルーム処理は難しいのでまだできていません(2パス使えれば簡単にできそう)
複数回の鏡面反射は、反射物に写った自身の表面にも、更に反射した絵が写ってないと不自然だったのでやってみたって感じです。
反射の計算が1回だけだと、反射物の表面に写った物体の反射計算が行われません。
単純に試行回数増やすだけなので重いけど、その分情報量もマシマシになるので楽しかったです。

14 Crystal Boze

f:id:kaiware007:20200702193402p:plain

neort.io

レイマーチングでReflect(反射)をやったので、Reflact(屈折)もやってみたいな~と思って作った作品。
球体は透過してるように見えるけど、実際はほぼ全反射する物体です。背景のせいでわかりにくいですね。

レイマーチングの屈折表現はがむさんのシェーダーを参考に実装してみました。

www.shadertoy.com

物体内部にレイを進ませるために距離を絶対値にしたり、法線と進行方向の内積を取ることで内外判定したり、と色々勉強になりました。
はじめ、屈折の法則を知らなかったので、なんで屈折率の逆数を使うのかわからなかったんですが、高校物理のサイトとか見て外に出る時は屈折率が入れ替わるということを知って理解できました。

レイは形状に応じて屈折するので、違和感が無くなるようにBozeの眉毛の深さなど細かいところを調整しました。

15 Non-uniform Scaling Boze

f:id:kaiware007:20200702235545p:plain

neort.io

大きさの指定がXYZ軸ごとに指定できるようにしたBozeのテスト。
座標を大きさで割ったら、図形の大きさも変えれるのは知ってましたが、アーティファクトが出たりしちゃってうまく行かなかったんですが、最後にXYZ軸で最も小さいサイズをかけるとうまくいくことを知りました。
床の模様のせいもあるが「カー○ィボール」と言われました。

まとめ

正月のCyberFuji2020以外、全部Bozeやんけ!
無機質になりがちなレイマーチング作品ですが、愛嬌のある三日坊主さんの顔を使うことで、キャラクター性が出て楽しく見えてモチベーションが上がってます(いつも広い心で許していただいてありがとうございます)
作品作りを通して、自前のレイマーチング用のレンダリングエンジン(?)が出来つつあるので、TDFやRevisionなど、シェーダー系のイベントに作品を投稿してみたいな~という気持ちになりつつあります。
今年ももう半分過ぎてしまいましたが、これからもBozeを作り続けたいです。

また、現在、趣味でjavascript(というかWeb開発全般)とWebGLの勉強がてら、タイムライン操作できるShaderToyもどきを作っています。

f:id:kaiware007:20200702211919p:plain

自分が欲しいからという理由で作ってるので公開するかは未定です(完成するかも未定)
CSSわからん…なんも…

さいごに

twitterにもboze作品の動画を投稿してますが、ほぼ全て避雷さんのShaderRecというサイトでキャプチャしています(いつもお世話になっております) shader-rec.herokuapp.com