つぶやき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

Transcript

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