KodeLifeでレイマーチングを動かす。
メリクリ！あけおめ！！さやちゃんぐbotです。
この記事はシェーダーアドベントカレンダー5日目の記事として書かれています。
4日目はGazさんによる「シーケンス（シーンの制御） -- GLSL --」でした。
今日はKodeLifeに触ってみたいと思います。シェーダーを描くのにばっちりな環境です。
さっそくレイマーチングをやっていきましょう！！
レイマーチング自体はGam師匠によるWORMHOLEを魔改造したものです。このライティングで何をやっているのかはまた来週に記事を出しますが、今回はレイマーチングの内容にはそんなに触れません。
KodeLifeのダウンロード
KodeLifeはシェーダーのライブコーディングに適したツールです。2019/12の現時点では、以下のサイトからβ版をダウンロードできます。
フラグメントシェーダーのみではなく、頂点シェーダー、テッセレーション、ジオメトリの各レンダリングステージごとにシェーダーを描けます。
テッセレーションとジオメトリは後でじっくり研究してみたいなーと思っております。
あとパスも複数作れます。こちらもいじれてないのでまた後ほど…。
対象のOSはWindows、Mac、Linuxから選べます。
かなり短いタイミングでコンパイルしてくれるので、タイピングしていてストレス無くコーディングを楽しめるのが何よりも良い利点です。
フラグメントシェーダーでの座標の扱い
たいていのレイマーチングでは、座標を-1.0から1.0の範囲におさめ、縦横のアスペクトを調整するところから始めると思います。
以下はGLSLFanで描く場合の典型的な書き方。
vec2 uv = vec2(2.0 * gl_FragCoord.xy- resolution.xy) / min(resolution.x,resolution.y);
これがKodeLifeではこんなかんじ。解像度で掛けて、縦横のより狭い方で割るというやり方でいけば良いです。
vec2 uv = (2.0 * inData.v_texcoord-1.)*resolution/min(resolution.x,resolution.y);
Unityシェーダーで板ポリ(Quad)にレイマーチングを描く時の2*i.uv-1とやり方は一緒です。
ただ、これはシェーダーテンプレートを切り替えてGLSLらしい書き方も普通に可能です。構造体inDataが登場するのはFileメニューから単にNewした場合のテンプレートです。FileメニューのNew From Templateを確認してみましょう。ShadertoyとThe Book of Shadersから選べます。
Shadertoyライクだとこんなかんじ。
The Book of Shadersだとこう。
自分になじんでいると感じるテンプレートを選ぶのが一番良いでしょう。
ガンマ補正
ルックを確認すると、なんとなくKodeLifeはHDRでガンマ補正を自動でやってくれるリニアワークフローなんじゃないかな？みたいに感じましたが、裏は取ってません。(ご存知の方、教えてください)
col = pow(col, vec3(0.4545));
とか入れてしまうとダメなような気がしましたが、まだ検証してません。
Spectrum
これがKodeLifeの大きな見どころの一つではないでしょうか。
動きを見ていると、KodeLifeは起動時にマイク入力をフックしに行ってるかんじです。私が触っているノートPCでは何もしなくてもマイク入力を拾って、画面右下の波形が表示され始めました。
spectrumはuniformで渡されてきたものが利用できます。
試しにVertex Shaderでspectrumを座標に足してみましょう。
gl_Position.xy += spectrum.x * 8.0;
これで画面全体がグラグラ揺れ始めました。マイクをぽんぽん叩くと、それにあわせて揺れます。楽しい！
パラメータを調整して、Fragment Shaderで形状や色を変えてあげればもっと面白いルックが作れることでしょう。
いかがでしたでしょうか。
KodeLifeはシンプルで快適なので、シェーダー入門用の環境としてもいいかんじです。
ぜひ触って遊んでみてください。
アドベントカレンダー明日6日目の記事は「stepであそぼう！～stepはシェーダーで一番楽しい関数。たぶん。～」です。
ではでは。
