Autumn breakdown
12/1、2にTokyo Demo Fest 2018が開催されました。 コンポの上位陣が興味深い参加リポートを公開しています。 ( gam0022さん、sadakkeyさん、kaneta1992さん、setchiさん )
これをみていたら別に入賞とかしていないけどなにか書きたくなったのでブレイクダウンを大公開。 …特別なことはしてませんけどね。
下準備
最近iq氏が公開している文章をいくつか更新していて、とりあえずこれを見るだけである程度今時の手法をキャッチアップできます。 近似の距離関数の更新やサンプルが少ない正確な法線の求め方などがあってこんなところもまだまだ進歩の余地があるのだなという感じです。
ノイズ
さてまず無いと始まらないのがノイズです。
そうそうfract(sin)を乱数と言い張れるのはWebGL1.0までだよねーと違うのを使おうとしたらsandboxは1.0だったんだよねw
— Pentan (@c5h12) December 17, 2018
という経緯でshadertoyを漁ってみたところHash without Sineというものを発見。 fract(sin(dot()))と比べているのですがなかなか良い感じでは無いでしょうか。 (感じ方には個人差がry
これを使っています。
葉
葉の形状は楕円とカプセルをsmooth minimum(以下smin)で合成したものです。
このsminもいつの間にか新しいものが考案されていたりします。
しかしsminは便利すぎて堕落しますね。
模様は葉の付け根が原点なので簡単に放射状の模様をつけて真ん中あたりは適当にごまかしています。
石畳
石畳は特にひねりもなくパターンにfbmを重ねてハイトマップを作っています。
ここから法線を作り簡単なライティングをし、適当に飛ばして葉の雰囲気に合うような感じにしています。
ついでにハイトマップからアンビエントオクルージョンっぽいものを作って立体感を調整。
カラーリングはフィーリングで適当に。
仕上げ
Worley noise(通称ボロノイ)の要領で葉を散らします。
実は重なり順が必ず左から右、下から上になっているのですがぱっと見気にならないのでそのままです。
葉が目立たなかったので縁にドロップシャドウをつけました。
ディスタンスフィールドのテクスチャはこういう小ネタが簡単です。
これでとりあえず出来上がりですが平面では地味すぎるので適当にパース変形をして立体的に。 コンポではBGMが流されて運良くテンポが合うと見栄えが変わる(気がする)ので周期的な動きがあると良いと思ったのですがいまいち考えつかなかったので苦し紛れに軽く揺らしてみました。 謎のカメラの動きはこれですw
あとはビネッティングとガンマ補正のパラメータをフィーリングで決めて完成です。
完成品はShadertoyにあります。
とこんな感じです。 実は特別なことはしていないのは、仕込みかけていたものが1日目に会場で少しいじった分のコピペミスで破壊されていることに家で気づいて心折れかけたものの、シェーダーバトルは1時間だったんだから一晩あれば何かできるさと1から作ったからだったりします。
マシンパワーの余裕は大事です_:(´ཀ`」 ∠):
