Upgrade to Pro — share decks privately, control downloads, hide ads and more …

1時間でフラグメントシェーダー入門からボロノイ図まで

051079dd58f238f302fcbffd12adbec7?s=47 hanachiru
November 30, 2020

 1時間でフラグメントシェーダー入門からボロノイ図まで

学校のとあるイベントで用いた資料です。
演習メインで進めていく形式ですが、知識ゼロからでも進められるように作成してみたつもりです。
せっかく作ったので公開。

051079dd58f238f302fcbffd12adbec7?s=128

hanachiru

November 30, 2020
Tweet

Transcript

  1. 始める前に ・適度に質問をしていきます - ルーレット(https://shge.github.io/roulette/) ・今日使うコード一覧を先に配布します

  2. 扱うテーマ:コンピューターグラフィックス 今日の目標は以下の作品を作ること(時間がなければ一部割愛)

  3. 描画とは ・モニタ上の画素に点を打つこと  例) 4kディスプレイ:3840x2160 => 3,840 x 2,160 = 8,294,400個の画素

    引用:https://www.youtube.com/watch?v=wUx_Y9BgC7k
  4. フラグメントシェーダー ・入力された画素の座標に色を付けるアルゴリズム ※後で詳しく説明するので、ニュアンスが分かればOK

  5. フラグメントシェーダー ・入力された画素の座標に色を付けるアルゴリズム 引用:https://github.com/ColinLeung-NiloCat/UnityURPToonLitShaderExample シェーダー 変更 シェーダーAで描画 シェーダーBで描画

  6. フラグメントシェーダーをブラウザ上で書く ・ShaderToyというフラグメントシェーダーを書けるサイトを使う  (https://www.shadertoy.com/)

  7. フラグメントシェーダーをブラウザ上で書く ・右上のNewを押すと、フラグメントシェーダーが書ける画面に移動

  8. ShaderToyについて ・ブラウザでフラグメントシェーダーが書けるサイト ・言語はGLSL - C言語をベースとしたシェーダー専用言語 - リファレンスの日本語メモ  (https://gist.github.com/gyohk/abf13dbcb5be750b3b021752b280ccd3)

  9. ShaderToyの画面説明

  10. 1. はじめてのフラグメントシェーダー ① 配布したコード ② ShaderToy

  11. 1. はじめてのフラグメントシェーダー 正しく動けば赤色の画面が出力されるはず

  12. 色の表現方法について 色はRGB(赤・緑・青)によって表現できる ・それぞれの値が0 ~ 255の値をとるのが一般的 例. ・黒: (R, G, B)

    = (0, 0, 0) ・白: (R, G, B) = (255, 255, 255) ・赤: (R, G, B) = (255, 0, 0) ・黄: (R, G, B) = (255, 255, 0)
  13. 色の表現方法について(GLSLでの) 全ての色はRGBA(赤・緑・青・透明度)によって表現できる ・GLSLという言語ではそれぞれ0 ~ 1の値を持つ4次元ベクトルとして表現 例. ・黒: (R, G, B,

    A) = (0, 0, 0, 1) ・白: (R, G, B, A) = (?, ?, ?, ?) ・赤: (R, G, B, A) = (?, ?, ?, ?) ・黄: (R, G, B, A) = (?, ?, ?, ?)
  14. フラグメントシェーダー(再掲) ・入力された画素の座標に色を付けるアルゴリズム

  15. 1.はじめてのフラグメントシェーダー 出力する色 描画する画素の座標 赤色を表す4次元ベクトル

  16. フラグメントシェーダー(再掲) ・入力された画素の座標に色を付けるアルゴリズム

  17. 2.座標の正規化 ・入力された座標の2次元ベクトル(fragCoord)は解像度によって入力される範囲が 異 なる 描画範囲が512x512px 描画範囲が1024x1024px

  18. 2.座標の正規化 ・描画範囲のピクセル数の違いをなくすため  描 画範囲の幅(iResolution : vec2)で割る

  19. 2.座標の正規化 出力画像

  20. 2.座標の正規化 出力画像 (x, y) = (1, 0) (x, y) =

    (1, 0) (x, y) = (0, 1) (x, y) = (1, 1)
  21. 2.座標の正規化 出力画像 (R,G,B,A) = (1, 0, 0, 1)

  22. 3. 時間経過を取得する ・エモい出力を得るためには、時間経過(iTime : float)が必要不可欠  iTime・・・実行されてから何秒たったか

  23. 3. 経過時間を取得する t B(青色の強さ)

  24. 4. 経過時間を使った作品の練習 ・以下の出力画像を得るためにはどんなコードを打てば良いか 出力画像

  25. 4. 経過時間を使った作品の練習 ・以下の出力画像を得るためにはどんなコードを打てば良いか 出力画像 ヒント  ・経過時間は iTime  ・右下の点uv = (1,

    0)に注目   - (R,G,B,A) = (0, 0, 0, 1) 黒   - (R,G,B,A) = (1, 0, 0, 1) 赤  ・左下の点uv = (0, 0)   - (R,G,B,A) = (0, 0, 0, 1) 黒   - (R,G,B,A) = (1, 0, 0, 1) 赤  ・3番目のコードにかなり近い
  26. 4. 経過時間を使った作品の練習の答え 出力画像 |sin(x + t)| t R(赤色の強さ) x座標

  27. 5. 経過時間を使った作品の練習 その2 ・以下の出力画像を得るためにはどんなコードを打てば良いか 出力画像

  28. 5. 経過時間を使った作品の練習 その2 ・以下の出力画像を得るためにはどんなコードを打てば良いか 出力画像 ヒント  ・一つ前のもの練習   「abs(sin(uv.x + iTime))」を加工  ・モノクロ

      => (R, G, B, A) = (x, x, x, 1)  ・コードの雰囲気があってれば   波の数とか速度は気にしなくてOK
  29. 5. 経過時間を使った作品の練習その2 答え 出力画像 |sin(40(x + t))|

  30. 6. step関数を使う ・step関数を使うとよりクッキリと描画できる   例:step(0.3, x)

  31. 6. step関数を使う ・以下の出力画像を得るためにはどんなコードを打てば良いか   出力画像

  32. 6. step関数を使う ・以下の出力画像を得るためにはどんなコードを打てば良いか   出力画像 ヒント  ・一つ前の練習   「abs(sin((uv.x - iTime)

    * 40.0))」  ・
  33. 6. step関数を使う 出力画像 col x 白 黒

  34. 7. 距離関数を使う ・距離関数(ディスタンスフィールド)とは2点間の距離を返す関数のこと   distance(d0, d1) ・・・点d0と点d1の距離を返す

  35. 7. 距離関数を使う ・中央からの距離をそのまま色として出力   

  36. ・中央からの距離をそのまま色として出力    7. 距離関数を使う ・外に近くにつれて白くなる ・右上uv = (1, 1)の点は  (R,G,B,A)=(0.70,

    0.70, 0.70, 1)
  37. 8. 今までの知識と距離関数のコラボ ・以下の出力画像を得るためにはどんなコードを打てば良いか 出力画像

  38. 8. 今までの知識と距離関数のコラボ ・以下の出力画像を得るためにはどんなコードを打てば良いか 出力画像 ヒント  ・距離関数 distance(d0, d1)  ・  ・経過時間

    iTime  ・sin関数 sin(x)
  39. 8. 今までの知識と距離関数のコラボ ・以下の出力画像を得るためにはどんなコードを打てば良いか 出力画像 sin(100d + 20t)

  40. 9. ボロノイ図 ・平面に配置された複数の点(母点)に対して、平面上の点を最も近い母点によって グ ループ分けした図 引用:http://alexbeutel.com/webgl/voronoi.html

  41. 9. ボロノイ図 ・平面に配置された複数の点(母点)に対して、平面上の点を最も近い母点によって グ ループ分けした図 一番簡単なアルゴリズムの手順  o(mn) m:ピクセルの数,n:母点の数 1. 各母点からの距離を全て求める 2. 一番距離が近い母点を見つける

    3. 色に反映
  42. 9. ボロノイ図 ・以下の出力画像を得るためにはどんなコードを打てば良いか 出力画像

  43. 9. ボロノイ図 ・以下の出力画像を得るためにはどんなコードを打てば良いか 一番簡単なアルゴリズムの手順   o(mn) m:ピクセルの数,n:母点の数 1. 各母点からの距離を全て求める 2. 一番距離が近い母点を見つける

    3. 色に反映 出力画像
  44. 9. ボロノイ図のコード 出力画像

  45. 9. ボロノイ図のコード ・今日書いたコードの回答例一覧を配布します 出力画像 一番簡単なアルゴリズムの手順   o(mn) m:ピクセルの数,n:母点の数 1. 各母点からの距離を全て求める 2.

    一番距離が近い母点を見つける 3. 色に反映
  46. まとめ ・フラグメントシェーダーとは入力された画素の座標に色を付けるアルゴリズム ・Shadertoyというサイトで手軽に書くことができる ・数学の知識をフル活用しながら、エモい動画やエフェクトを作ろう