さやちゃんぐbotブログ

シェーダーで遊んだりするブログです。

TDF2018シェーダーライブコーディングバトルのGLSLを書き直してUnityで動かす。(2018オレオレアドベントカレンダー)

はいどーもー、さやちゃんぐbotです。

 

今日は「TDF2018シェーダーライブコーディングバトルのGLSLを書き直してUnityで動かす。(2018オレオレアドベントカレンダー)(長い)」と題しまして、一人アドベントカレンダーをやってみようと思います!Yay!

 

「そんな日記はどうでもいい!自分の手元環境ですぐに動かしたい!!」というせっかちな貴方のために、コピペしてすぐに動かせるコードも用意しました!!

至れり尽くせり!!!

scrapbox.io

 

Unlitなシェーダーが書ければ、だいたいどのバージョンのUnityでも良いと思います。

 

今日はこんなあいまいなかんじで進行して参ります!

 

 

まずTokyo Demo Fest(TDF)って何?というところからですが…

 

古くは20世紀の頃からある、DemoやIntroを扱うパーティの日本版というかんじなんですね。プログラムを使って目立つ映像や音楽を披露するお祭りです。去年は行こうと思いながらデスマーチでかないませんでしたが、ようやく初めて遊びに行くことができました。

tokyodemofest.jp

 

かつてはC言語アセンブラで作られていたデモですが、現在ではシェーダー、レイマーチングというあたりの技術要素が主流になっているみたいなんですね。

数年前にフラグメントシェーダーで音楽を出すという離れ業が海外のシーンで披露されてからは、その流れも広まりつつあるようです。今回のTDF2018でもGLSLで音楽を鳴らすところを見ることができました。

 

おいらが20世紀の頃にさんざんThe Black Lotusのメガデモを見たり、Mod Plug Playerで延々modを聴いていた時代とは隔世の感です。

 

誰もがやるような技術ではないものを扱う人が集まる数少ない場ですので、会場には絵描きさん、DJやVJ、RPGツクールでとんがった技術を使う人とかがいたようです。

 

 

さて。

ライブでGLSLをコーディングする、シェーダーライブコーディングバトルを観戦しました!

分・秒きざみで4人が作る絵が派手に変化していくさまはたいへんエキサイティングでしたね!TDF経験がない方は、ぜひ一度足を運んでみると良いと思います。

 

今回のエントリーでは、このGLSLをUnityで動くようにするやり方について書いていきます。

 

Unityでは、たいていはCg/HLSL言語でシェーダーを書くものだと思われますので、まずは言語の違いによるところを書き換えていきます。

すごくおおざっぱに説明すると、変数の型(vec3はfloat3に、mat2はfloat2x2に)、組み込み関数(fractをfracに)を機械的に変えていけばOKです!

 

ポイントはそれっぽくまとめたものがあるので、↓こちらをご参照ください。

scrapbox.io

 

ただ、ハマりどころはあるかもしれません。

 

Cg言語だとパーリンノイズ、noise()が存在しません。後で用意しよう…。(そのうち試してうまくいったらScrapboxに書きます)*1

 

GLSLのmodを、Cg/HLSLのfmodに変更すると、「正の数を扱っている」限りは正しく動作します……負数だと挙動が変わります!

どうやら実装が違うみたいなんですね。リファレンスをあたると、

  • GLSLのmod

This is computed as x - y * floor(x/y).

  • HLSLのfmod

The floating-point remainder is calculated such that x = i * y + f, where i is an integer, f has the same sign as x, and the absolute value of f is less than the absolute value of y.

ということで、これは典型的な「丸め計算で0に近づく動きなのか、絶対値が0に近づく動きなのか」という話。(truncぅ…ですかねぇ…)

必要ならいいかんじに実装を変更しましょう!(これもいずれちゃんとまとめよう…)*2

 

あとはfrag()の先頭で座標をi.uvにして、gl_FragColorみたいなやつをうまいことreturn fixed4()とかに変えれば動くハズっ。

 

で、最後のこれがちょっとまだ研究中なんですね。座標どうするの。

 

i.uvをどうにかするという話ではあるんですが、GLSLのレイマーチングで座標が絡んでくるのはカメラ、レイ、Foldingなどなどがあるんですね。

いまだにこのあたりをどうたどって、どう書き換えればいいのかには到達していません!!

別途また研究を続けようと思います。*3

 

When I die, bury me a Shader!

 

ということで、みなさんもぜひGLSLのレイマーチングをUnityに持ってくる楽しい遊びをやってみてはいかがでしょうか!!

(おしまひ)

*1:世界のkeijiro先生のGitHubにあるソースを利用すると良いです。

github.com

*2:まとめました。

scrapbox.io

*3:Scrapboxで補足を追記しました。