Slide 1

Slide 1 text

#つぶやきGLSL 解読!
 2024-10-11 レイトレ合宿10セミナー @gam0022 / Sho HOSODA

Slide 2

Slide 2 text

#つぶやきGLSL とは? X(Twitter)の謎のハッシュタグ #つぶやきGLSL 2

Slide 3

Slide 3 text

#つぶやきGLSL とは? • X(Twitter)の文字数制限は280文字 ‣ ハッシュタグを考慮したら270文字 • 270文字に収まるGLSLシェーダーの作品が たくさん投稿されている • 信じられないような高いクオリティの作品が多数ある ‣ が、何が起きているのか理解できない…😭 ‣ どうにかして理解したい💪 3

Slide 4

Slide 4 text

#つぶやきGLSL の歴史 最初の #つぶやきGLSL • @butadiene121さん • 2020年4月13日 ‣ Revision 2020オンライン開催中 https://x.com/butadiene121/status/1249452139782369280 https://butadiene.hatenablog.com/entry/2021/01/17/000142 4

Slide 5

Slide 5 text

#つぶやきGLSL の歴史 • 2020年4月14日 ‣ 最初の #つぶやきGLSL の翌日! ‣ twigl.app 誕生 • #つぶやきGLSL 専用のエディタ • @h_doxas さんが開発 https://x.com/h_doxas/status/1249876306608549888 5

Slide 6

Slide 6 text

#つぶやきGLSL の歴史 @0b5vrさんの協力により より短く書くための機能が生まれた • classic: 通常モード • geek: uniform が1文字になる • geeker: uniformなどの宣言文を 省略できる 6

Slide 7

Slide 7 text

#つぶやきGLSL の歴史 7 classic geeker

Slide 8

Slide 8 text

#つぶやきGLSL の歴史 • geekest: main関数の省略 8

Slide 9

Slide 9 text

#つぶやきGLSL の歴史 9 classic geekest

Slide 10

Slide 10 text

#つぶやきGLSL の歴史 10

Slide 11

Slide 11 text

#つぶやきGLSL の歴史 ライブコーディング用の機能 ※サウンドのライブコーディングができるのは @lactoice251 さんだけのような気がする 11

Slide 12

Slide 12 text

#つぶやきGLSL の歴史 まとめ • 2020年4月13日 ‣ @butadiene121さんが最初の #つぶやきGLSL を投稿 • 2020年4月14日 ‣ @h_doxas さんが専用エディタ twigl.app を公開 • その後の一ヶ月ほど ‣ 追加機能が次々と搭載される • 短く書くための geekest 等のレギュレーション • Sound Shader • 配信モード • backbuffer • WebGL 2(GLES 3.0) • MRT 12

Slide 13

Slide 13 text

#つぶやきGLSL 解読 13

Slide 14

Slide 14 text

yonatan氏の桜 凄すぎる🤯 https://x.com/zozuar/status/1763906851337326736 14

Slide 15

Slide 15 text

元の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;}

Slide 16

Slide 16 text

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; }

Slide 17

Slide 17 text

コメント付き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;

Slide 18

Slide 18 text

レイマーチングとは ● レイトレーシングと似ている ○ どちらもレイを飛ばして絵を生成する ○ 描画の全体的な流れは完全に同じ ● レイマーチングは衝突判定が特徴的 ○ シーンの形状を距離関数という数式で定義 ↓ 数式(プログラムのコード)で形状をモデリングできる 18

Slide 19

Slide 19 text

距離関数 • 距離関数とは ‣ 任意の座標pから物体表面への最短距離を返す関数 • 球体の距離関数 19 float sdSphere(float3 p, float r) { return length(p) - r; }

Slide 20

Slide 20 text

距離関数 面白いテクニック① 20 float2 opRep(float2 p, float2 interval) { return mod(p, interval) - interval * 0.5; } 座標のmod演算で
 オブジェクトを無限に複製 
 
 テクスチャのWrapモード
 repeat と同じ原理


Slide 21

Slide 21 text

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


Slide 22

Slide 22 text

距離関数 面白いテクニック② 22 A∪B = 
 min(dA, dB)
 A∩B = 
 max(dA, dB)
 変数の定義 
 
 dA = Aの距離関数
 dB = Bの距離関数
 ブーリアン演算

Slide 23

Slide 23 text

Infinite Cylinder - exact https://iquilezles.org/articles/distfunctions/ 23 float sdCylinder( vec3 p, vec3 c ) { return length(p.xz-c.xy)-c.z; }

Slide 24

Slide 24 text

absのイメージ テクスチャのWrapモードのmirrorに似てる 24 https://tsubakit1.hateblo.jp/entry/2017/06/11/235347

Slide 25

Slide 25 text

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ループ数 = 再帰深度 再帰の深度を増やしても 線形にしか負荷が増えない

Slide 26

Slide 26 text

再帰的にUnionを適用するとフラクタルになる https://gam0022.net/blog/2017/03/02/raymarching-fold/ 再帰的にオブジェクトにUnionのブーリアンを適用することでフラクタルをモデリング 26

Slide 27

Slide 27 text

Scale(拡大・縮小) 27

Slide 28

Slide 28 text

まとめ • #つぶやきGLSL 界隈のレベルが高すぎる • ゴードゴルフされたGLSLの理解はかなり大変 ‣ 変数名が1文字 ‣ 文字数短縮のためにトリッキーな書き方 • forの変な使い方 • 手動インライン展開 • 頑張れば理解はできる…かも? ‣ パターンを覚えていけば慣れるかもしれない(修行中) 28

Slide 29

Slide 29 text

つぶやきGLSLの関連記事 • #つぶやきGLSL というハッシュタグが面白い! 1ツイートに GLSL のコードを詰め込むシェー ダーコーディングの世界 - WebGL 総本山 • つぶやきGLSL テクニック集 - Qiita • つぶやきGLSLで今すぐ使えるシェーダーminifyテクニック11選! - のたぐすブログ • GLSL最短チャレンジ #つぶやきGLSL 29

Slide 30

Slide 30 text

END. 30