$30 off During Our Annual Pro Sale. View Details »

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

がむ
October 11, 2024

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

がむ

October 11, 2024
Tweet

More Decks by がむ

Other Decks in Programming

Transcript

  1. #つぶやきGLSL とは? • X(Twitter)の文字数制限は280文字 ‣ ハッシュタグを考慮したら270文字 • 270文字に収まるGLSLシェーダーの作品が たくさん投稿されている •

    信じられないような高いクオリティの作品が多数ある ‣ が、何が起きているのか理解できない…😭 ‣ どうにかして理解したい💪 3
  2. #つぶやきGLSL の歴史 最初の #つぶやきGLSL • @butadiene121さん • 2020年4月13日 ‣ Revision

    2020オンライン開催中 https://x.com/butadiene121/status/1249452139782369280 https://butadiene.hatenablog.com/entry/2021/01/17/000142 4
  3. #つぶやきGLSL の歴史 • 2020年4月14日 ‣ 最初の #つぶやきGLSL の翌日! ‣ twigl.app

    誕生 • #つぶやきGLSL 専用のエディタ • @h_doxas さんが開発 https://x.com/h_doxas/status/1249876306608549888 5
  4. #つぶやきGLSL の歴史 まとめ • 2020年4月13日 ‣ @butadiene121さんが最初の #つぶやきGLSL を投稿 •

    2020年4月14日 ‣ @h_doxas さんが専用エディタ twigl.app を公開 • その後の一ヶ月ほど ‣ 追加機能が次々と搭載される • 短く書くための geekest 等のレギュレーション • Sound Shader • 配信モード • backbuffer • WebGL 2(GLES 3.0) • MRT 12
  5. 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; }
  6. コメント付き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;
  7. 距離関数 面白いテクニック① 20 float2 opRep(float2 p, float2 interval) { return

    mod(p, interval) - interval * 0.5; } 座標のmod演算で
 オブジェクトを無限に複製 
 
 テクスチャのWrapモード
 repeat と同じ原理

  8. 距離関数 面白いテクニック② 22 A∪B = 
 min(dA, dB)
 A∩B =

    
 max(dA, dB)
 変数の定義 
 
 dA = Aの距離関数
 dB = Bの距離関数
 ブーリアン演算
  9. 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ループ数 = 再帰深度 再帰の深度を増やしても 線形にしか負荷が増えない
  10. まとめ • #つぶやきGLSL 界隈のレベルが高すぎる • ゴードゴルフされたGLSLの理解はかなり大変 ‣ 変数名が1文字 ‣ 文字数短縮のためにトリッキーな書き方

    • forの変な使い方 • 手動インライン展開 • 頑張れば理解はできる…かも? ‣ パターンを覚えていけば慣れるかもしれない(修行中) 28
  11. つぶやきGLSLの関連記事 • #つぶやきGLSL というハッシュタグが面白い! 1ツイートに GLSL のコードを詰め込むシェー ダーコーディングの世界 - WebGL

    総本山 • つぶやきGLSL テクニック集 - Qiita • つぶやきGLSLで今すぐ使えるシェーダーminifyテクニック11選! - のたぐすブログ • GLSL最短チャレンジ #つぶやきGLSL 29