つぶやきGLSL解読！ / Raytracing Camp 10

レイトレ合宿10のセミナースライドです。
https://gam0022.net/blog/2024/10/23/rtcamp10/

Google Slides版
https://docs.google.com/presentation/d/1cyUxFuOa-5OTdOu2v9XfczwpI-HGx1c4G716FbvPez0/edit#slide=id.g27a8e85b88a_0_0

1. #つぶやきGLSL 解読！
 2024-10-11 レイトレ合宿10セミナー @gam0022 / Sho HOSODA
2. #つぶやきGLSL とは？ X（Twitter）の謎のハッシュタグ #つぶやきGLSL 2
3. #つぶやきGLSL とは？ • X(Twitter）の文字数制限は280文字 ‣ ハッシュタグを考慮したら270文字 • 270文字に収まるGLSLシェーダーの作品が たくさん投稿されている • 信じられないような高いクオリティの作品が多数ある ‣ が、何が起きているのか理解できない…😭 ‣ どうにかして理解したい💪 3
4. #つぶやきGLSL の歴史 最初の #つぶやきGLSL • @butadiene121さん • 2020年4月13日 ‣ Revision 2020オンライン開催中 https://x.com/butadiene121/status/1249452139782369280 https://butadiene.hatenablog.com/entry/2021/01/17/000142 4
5. #つぶやきGLSL の歴史 • 2020年4月14日 ‣ 最初の #つぶやきGLSL の翌日！ ‣ twigl.app 誕生 • #つぶやきGLSL 専用のエディタ • @h_doxas さんが開発 https://x.com/h_doxas/status/1249876306608549888 5
6. #つぶやきGLSL の歴史 @0b5vrさんの協力により より短く書くための機能が生まれた • classic: 通常モード • geek: uniform が１文字になる • geeker: uniformなどの宣言文を 省略できる 6
7. #つぶやきGLSL の歴史 7 classic geeker
8. #つぶやきGLSL の歴史 • geekest: main関数の省略 8
9. #つぶやきGLSL の歴史 9 classic geekest
10. #つぶやきGLSL の歴史 10
11. #つぶやきGLSL の歴史 ライブコーディング用の機能 ※サウンドのライブコーディングができるのは @lactoice251 さんだけのような気がする 11
12. #つぶやきGLSL の歴史 まとめ • 2020年4月13日 ‣ @butadiene121さんが最初の #つぶやきGLSL を投稿 • 2020年4月14日 ‣ @h_doxas さんが専用エディタ twigl.app を公開 • その後の一ヶ月ほど ‣ 追加機能が次々と搭載される • 短く書くための geekest 等のレギュレーション • Sound Shader • 配信モード • backbuffer • WebGL 2（GLES 3.0） • MRT 12
13. #つぶやきGLSL 解読 13
14. yonatan氏の桜 凄すぎる🤯 https://x.com/zozuar/status/1763906851337326736 14
15. 元のGLSL 15 vec3 p,q=vec3(-.1,.65,-.6);for(float j,i,e,v,u;i++<130.;o+=.007/exp(3e3/(v*vec4(9,5,4,4)+e*4e6)) ){p=q+=vec3((FC.xy-.5*r)/r.y,1)*e;for(j=e=v=7.;j++<21.;e=mi n(e,max(length(p.xz=abs(p.xz*rotate2D(j+sin(1./u+t)/v))-.53 )-.02/u,p.y=1.8-p.y)/v))v/=u=dot(p,p),p/=u+.01;}
16. clang-formatで自動整形 16 vec3 p, q = vec3(-.1, .65, -.6); for (float j, i, e, v, u; i++ < 130.; o += .007 / exp(3e3 / (v * vec4(9, 5, 4, 4) + e * 4e6))) { p = q += vec3((FC.xy - .5 * r) / r.y, 1) * e; for (j = e = v = 7.; j++ < 21.; e = min(e, max(length(p.xz = abs(p.xz * rotate2D(j + sin(1. / u + t) / v)) - .53) - .02 / u, p.y = 1.8 - p.y) / v)) v /= u = dot(p, p), p /= u + .01; }
17. コメント付きGLSL 17 vec3 p, q = vec3(-.1, .65, -.6); // qの初期値はカメラのオフセット値 for (float j, i, e, v, u; i++ < 130.; // iで130回レイマーチングのループ o += .007 / exp(3e3 / (v * vec4(9, 5, 4, 4) // oは出力カラー // フラクタルのスケール倍率で色付け + e * 4e6 // 背景を白くするFog効果 ))) { // p = レイの先端座標　// q = pをオフセットするための変数　// vec3((FC.xy - .5 * r) / r.y, 1) = レイの方向, 1は焦点距離 p = q += vec3((FC.xy - .5 * r) / r.y, 1) * e; for (j = e = v = 7.; j++ < 21.; // eが距離関数 e = min // minはUnionのBoolean操作 (e, max // maxはIntersectionのBoolean操作 ( // abs(p.xz)で4方向に複製　　// Y軸の無限円柱の距離関数 0.2は半径 length(p.xz = abs(p.xz * rotate2D(j + sin(1. / u + t) / v)) - .53) - .02 / u, p.y = 1.8 - p.y // 無限円柱の長さ制限のためにXZ平面でclip ) / v ) ) // dot(p, p)は距離の2乗 // u: フラクタルのスケール倍率 // v: 現在のフラクタルのスケール倍率 v /= u = dot(p, p), p /= u + .01;
18. レイマーチングとは • レイトレーシングと似ている ◦ どちらもレイを飛ばして絵を生成する ◦ 描画の全体的な流れは完全に同じ • レイマーチングは衝突判定が特徴的 ◦ シーンの形状を距離関数という数式で定義 ↓ 数式（プログラムのコード）で形状をモデリングできる 18
19. 距離関数 • 距離関数とは ‣ 任意の座標pから物体表面への最短距離を返す関数 • 球体の距離関数 19 float sdSphere(float3 p, float r) { return length(p) - r; }
20. 距離関数 面白いテクニック① 20 float2 opRep(float2 p, float2 interval) { return mod(p, interval) - interval * 0.5; } 座標のmod演算で
 オブジェクトを無限に複製 
 
 テクスチャのWrapモード
 repeat と同じ原理

21. 距離関数 面白いテクニック② ブーリアン演算 21 A∪B
 A
 B
 A∩B
 A-B
 B-A

22. 距離関数 面白いテクニック② 22 A∪B = 
 min(dA, dB)
 A∩B = 
 max(dA, dB)
 変数の定義 
 
 dA = Aの距離関数
 dB = Bの距離関数
 ブーリアン演算
23. Infinite Cylinder - exact https://iquilezles.org/articles/distfunctions/ 23 float sdCylinder( vec3 p, vec3 c ) { return length(p.xz-c.xy)-c.z; }
24. absのイメージ テクスチャのWrapモードのmirrorに似てる 24 https://tsubakit1.hateblo.jp/entry/2017/06/11/235347
25. absで反転コピー 25 float dMenger(float3 z0, float3 offset, float scale) { float4 z = float4(z0, 1.0); [loop] for (int n = 0; n < _MengerIteration; n++) { z = abs(z); if (z.x < z.y) z.xy = z.yx; if (z.x < z.z) z.xz = z.zx; if (z.y < z.z) z.yz = z.zy; z *= scale; z.xyz -= offset * (scale - 1.0); if (z.z < - 0.5 * offset.z * (scale - 1.0)) z.z += offset.z * (scale - 1.0); } return (length(max(abs(z.xyz) - float3(1.0, 1.0, 1.0), 0.0)) - 0.05) / z.w; } 箱の距離関数を1回だけ計算 空間の折りたたみ forループ数 = 再帰深度 再帰の深度を増やしても 線形にしか負荷が増えない
26. 再帰的にUnionを適用するとフラクタルになる https://gam0022.net/blog/2017/03/02/raymarching-fold/ 再帰的にオブジェクトにUnionのブーリアンを適用することでフラクタルをモデリング 26
27. Scale（拡大・縮小） 27
28. まとめ • #つぶやきGLSL 界隈のレベルが高すぎる • ゴードゴルフされたGLSLの理解はかなり大変 ‣ 変数名が1文字 ‣ 文字数短縮のためにトリッキーな書き方 • forの変な使い方 • 手動インライン展開 • 頑張れば理解はできる…かも？ ‣ パターンを覚えていけば慣れるかもしれない（修行中） 28
29. つぶやきGLSLの関連記事 • #つぶやきGLSL というハッシュタグが面白い！ １ツイートに GLSL のコードを詰め込むシェー ダーコーディングの世界 - WebGL 総本山 • つぶやきGLSL テクニック集 - Qiita • つぶやきGLSLで今すぐ使えるシェーダーminifyテクニック11選！ - のたぐすブログ • GLSL最短チャレンジ #つぶやきGLSL 29
30. END. 30