Unityで暖を取る！GLSLをCg/HLSLに書き換えて楽しもう！！～GPUを使い倒してレイマーチングを部屋の壁に飾るまで～
ハッシュタグで検索すると資料のURLを見つけることができるかもしれません！
Roppoingi.unity #2
2019/4/15 メルカリ@六本木ヒルズ
https://gyazo.com/1912c3c15eeb97af51da0dc3df63f37b
https://gyazo.com/b9774d65a601e85f8fccd0b4b533fa17
このLTから得られる知見
楽しいレイマーチングをUnityシーン上にインテリアとして配置する方法
GPUを暖房器具に変貌させる方法
ガンの治療法
誰が発表するのですか
https://gyazo.com/5d7385447eef50b68955addf0b1de656
ねこです。ふだんは五反田のVRの会社で過ごしています。
Twitter: @songofsaya_
https://gyazo.com/224c849584ee85c9b9cc57fd4daab8bf
今日はRoppongi.unityに参加するために、五反田から電車に乗って六本木までやって参りました。
なんのギャグにもなってませんが、これ本当に壇上でしゃべるの？
https://gyazo.com/aa024dcb6a119957cb958817885cd918
なぜこんなスライドを…？
これを書き始めた当初は外が寒かったから。でもだいぶあたたかくなってきましたね！春です！！
今までのUnity勉強会でかつてなかったレベルのゆるふわLTを目指します。
どういうことになるの？
ここにUnityシーンを貼ります。えっ、なんで部屋の壁に飾ってある絵が動いてるの？！みたいなスクショとかがいい。
そうだ、VRCのデバッグシーンをデスクトップモードで動かしてみよう
「これは動画でもアニメーションでもなく、フラグメントシェーダーに描いたコードで動いています」
TODO:誰かを確保する→GLSLのレイマーチングを本資料から参照されてもいいよという人
TDFのシェーダーライブコーディングバトルに参戦した人とか。
「GLSLのレイマーチングって何？」
レイマーチングはガンに効く。(Raymarching is good to cancer.)(光线步进癌症有效)
とにかくやってみる
言語仕様の違いとかはとりあえず置いておく
ShaderLABのことを詳しく話したりしません。
OpenGL、Cg、HLSLの歴史の話とかに軽く触れる。この前提知識があればなぜMicrosoftのドキュメントを読むのかがわかる。
行列とかベクトルとかの話はしません。そもそもわたしは三角関数がわからない！
好きなエディタを選ぼう。ただ、置換機能だけは忘れずに。GLSLからCg/HLSLに書き換える時、変数の型や関数の名前を一括置換します。
https://gyazo.com/c3b0c43a2cac9cc42f1c29e3a607115b
GLSLをUnity向けに翻訳できれば動くようになるハズです。
言語を別の言語にするということを扱うので、本資料の隠しテーマは「言語」です。
https://gyazo.com/75ce1a04a57e8dba84245af6fc9db610
歴史の話
VRの父アイバン・サザランドがグラフィックス関係の研究の礎となった
弟子、ジム・クラークがシリコングラフィックス社を作った
同社でシェーダーIRIS GL(Integrated Raster Imaging System Graphics Library)が生まれた
それをもとにクロノスグループによるGLSL(OpenGL Shading Language)が発展した
クロノスグループはglTFを策定した
glTFがVRMで採用された
現在クロノスグループはOpenXRの旗振り役
VRの歴史はシェーダーに繋がり、シェーダーはVRに繋がる。
歴史の話の続き
NVIDIAからはシェーダー言語Cg(C for Graphics)が生まれた
UnityはCg言語を元にシェーダーの仕組みを作った
これの正体
https://gyazo.com/5a57f036fa1154c51ad57817d5049455
NVIDIAがCgの開発を終えた
https://gyazo.com/eb2b77c3adf6d3723bc5531e5b675d6c
UnityはHLSL言語(Microsoft High Level Shader Language)を取り込むことにした
なので、Unityでシェーダーを書く時に個別の関数を調べる時には、MSのリファレンス読むとだいたい良いです。だいたい。
ということで、本TLではCg/HLSLという表現を使っていきます
さがす
すてきなGLSLのシェーダーを探してみましょう！
最初のコツはなるべく小さいものを選ぶことです。でも、長くてもまあいいんじゃないかなっ。気合と根性と時間を用意しましょう。
慣れればiq神のかたつむりだってUnityに移植できるようになる→Scrapboxに貼った移植コード Snail HLSL ざっくりとした言語の違いの理解
Unityのフラグメントシェーダーではfixed4 frag()で色をreturnする
GLSLのフラグメントシェーダーはvoidになっていて、fragColorとかgl_FragColorみたいなやつにvec4の色をセットする
変数や関数の違いがあります
ハマりどころを除けばある程度は機械的に翻訳できます。
GLSLをUnityに持ってくる手順のアウトライン
Unityで板ポリを用意してUnlitシェーダーとマテリアルを新規作成する
GLSLのシェーダーをテキストエディタに丸コピする
いらないものをざくざく消す─マウスについての行とか
変数・配列の型名・組み込み関数名を一括置換する
組み込みじゃない関数をUnity側に持っていってコンパイルが通るか確認する
ここに続きます
W.I.P
もやもやもや
↓の内容をざくざく載せます
シェーダーをコンバートする様子をライブコーディングでやる？(そんな時間はない)
VRで見てみる？
これはVRC用のシーン作っちゃったからとりあえずデスクトップ版でそのままごらんいただこう。
ShaderGraphで距離関数を描く
HLSLを他のシェーダー言語に変換する
中国語対応リファレンス
code:Chinese Language for Shader
シェーダー/shader/着色器/着色器语言
レンダリングパイプライン/rendering pipeline/渲染管线
フォワードレンダリング/フォワードシェーディング/forward rendering/forward shading/前向渲染
デファードレンダリング/デファードシェーディング/deferred rendering/deferred shading/延迟渲染
プログラマブルシェーダー/programmable shader/可编程渲染管线
頂点シェーダー/vertex shader/顶点着色器
G-Buffer/G缓冲
フラグメントシェーダー/fragment shader/ピクセルシェーダー/pixel shader/什么是片段着色器
ワールド座標/世界坐标系
スペキュラー/specular/镜面反射
ディフューズ/dissuse/扩散
SSSSS/Screen Space SubSurface Scattering/或屏幕空间次表面散射
ブラー/ボケ/blur/bokeh/模糊
フラクタル/fractal/分数
マンデルブロ/Mandelbrot/曼德尔布罗
ボロノイ/voronoi/沃罗诺伊
シェルピンスキーのギャスケット/Sierpinski Gasket/谢尔宾斯基三角形
シェルピンスキーのカーペット/Sierpinski Carpet/谢尔宾斯基地毯
メンガーのスポンジ/Menger sponge/门格海绵/門格海綿
コッホカーブ/Koch curve/科赫曲线
レイマーチング/Raymarching/光线步进
レイトレーシング/Ray Tracing/光线跟踪
Volume Rendering/立体渲染之
中国語の学術論文が増加している
GitHubのTrending Repositoryは半分が中国語
https://gyazo.com/6a2b444e79cdf168f0ea6b044713cfab
GitHubで中国語のレイマーチングリポジトリを探す方法
https://gyazo.com/0684dfc5c8ce933cfd3b65ef41380012