本日のシェーダー芸

N 高等学校通学コースプログラミングクラス 2020年4月28日(火) のプレ LT 大会での発表資料です。

Transcript

1. 本日の Shader 芸 佐藤 雄一
2. 自己紹介 名前：佐藤 雄一（ゆーいち） 好物：エレキギター、(初期)仏教、Smalltalk 好きなエディタ：Emacs 好きなキーボード：HHKB Twitter：@satoyuichi80
3. Shader とは 　頂点、ピクセルごとに GPU 上で実行されるプログラムのこと。頂点ごとに実効されるも のは頂点シェーダー(Vertex Shader)、ピクセルごとのはピクセルシェーダー(Pixel Shader)またはフラグメントシェーダー(Fragment Shader)と呼ばれる。比較的に頂点 シェーダーは影が薄いような気がする。 　おそらく一般的には広義に質感を決めるためのパラメーター、テクスチャ、シェーダー プログラムを含めてシェーダーと呼ばれているようす。 https://docs.unity3d.com/jp/460/Manual/Materials.html
4. Shader 芸とは 　本来シェーダーはオブジェクトを引き立てるためのものだが、シェーダー自体が出しゃ ばっているというか、そもそもオブジェクトは板ポリ一枚とかシェーダーをくっつけるため だけに存在するような状態に成り下がっているくらい主張が強いシェーダーを作成する 行為。 　純粋にピクセルシェーダのみでの表現が多いが、テクスチャや音声データを使う場合 もある。数学と感性の世界なのでハードルが高いと思われがちだが、そんなでもない。 https://qiita.com/kaneta1992/items/21149c78159bd27e0860
5. 今回の作品「ヒトダマ」 モチーフは炎 https://www.youtube.com/watch?v=gxhFeUBl7_w
6. CineShader 　入力した Shader の実行結果が額縁の中に表示されるおしゃれなヤツ。ここに嵌めて 栄えるような作品を考えました。（佇むおねーさんがポイント）
7. 工夫したところ 　参考になるようにシンプルでありながら、見栄えがするように作成。四角形 + 円 + ノイ ズ(Simplex Noise)の組み合わせ。 + + =
8. 苦労したところ • 方向性が決まるまで難儀した • モチーフが変わった（最初は稲妻にしようと思っていた） • 納得いく結果にするための微調整に時間がかかった • ノート PC がうなりを上げるのでグラフィクスの強い PC が欲しくなった
9. 数学の活用として楽しいのでオススメ 以下、技術的な解説
10. 基本の基本 　-1 <= x <= 1, -1 <= y <= 1 の範囲の数値を作る。数値を (x, y, 0) => (R, G, B) として 可視化すると右のようになる。（負の範囲は黒くなっている） 　色と演算結果の対応が感覚的に理解できるようになると楽。
11. 円を作る 　(0, 0) からの距離を取る。（1.0 以上は白くなっている）
12. 閾値を取る 　ある値(ここでは 0.5)を境に 0 と 1 に分ける。 　実際は step 関数ではなく smoothstep 関数を用いることで、境界をぼかして使ってい る。
13. 反転する 　1 から引いて反転することで完成。 　三角関数を使って位置を揺らすことで炎の動きっぽくしている。大きさや動きの違う円 を複数組み合わせて、ノイズを適用して炎の質感としている。
14. 四角形を作る 　ｘ 座標のある値(ここでは 0.5)を境に 0 と 1 に分ける。
15. 片側の枠を作る 　y 座標も同じくある値(ここでは 0.5)を境に 0 と 1 に分け、先ほどの結果と合成する。1 以上の値にしたくないため max 関数を使用して合成している。
16. 各軸で折り畳む(Folding) 　絶対値を取ることで、各軸に対して折り畳む。直感的な理解がし難いが、シェーダー芸 では良く使われるので、ぜひ身につけたいテクニック。
17. 反転する 　1 から引いて反転することで完成。 　続けて敷き詰めのテクニックを組み合わせる。
18. タイリング(Tiling) 　座標をスケールして fract 関数で小数部のみを取り出して、 0 から 1 の範囲を複数作 る。（最初に座標を 0 から 1 の範囲にしていることに注意）
19. 各範囲で四角形を作る 　さらに原点中心で回転させ、色とノイズで質感をつけている。
20. リンク集 • The Book of Shaders…非常に丁寧な解説で優良サイトへのリンクも豊富。即変更 が確認できるサンプルコードがとても便利。 • シェーダー芸人になりたかった6か月前の自分に教えてあげたいリンク集…日本 トップレベルのシェーダー芸人のかねたさんの記事。文字通り、初心者が知りたくな るような内容が書かれている。 • Shadertoy…シェーダー投稿サイト。参考にするのはもちろん、実行環境としても便 利。 • CineShader...シェーダービジュアライザー。シンプルなシェーダーもオシャレに見 せてくれる。その代わり、けっこう重たい。