デザインセンスがなくてもかっこいいビジュアルグラフィックスができるんですか？

デザインセンスが なくても カッコいい グラフィックスが できるんですか？ モーショングラフィックス大好き少年が、 シェーダーと出会う話

【言い訳】俺が登壇するまでの流れ 登壇決定から今日までの日数… ２日

やさしくしてね

「カッコいい」が好きだった 思春期の俺の話

モーショングラフィックスが好きだった モーショングラフィックス… 文字や図形などを使った、良い映像。

自分もやってみた あれこれ試すけど… センスがない！！！

鼻の黒い点がある 鼻の黒い点がない

問題：次のような関数を考えよ。 視線ベクトル 𝒑𝒑 と面の法線ベクトル 𝒏𝒏 が与えられる。 横からの目線のとき、その面を透明にしたい。 すなわち、不透明度を • 𝒑𝒑 と 𝒏𝒏 が平行に近ければ大きく • 𝒑𝒑 と 𝒏𝒏 が垂直に近ければ0に近く すればよい。 そのような関数を実装できるだろうか？ 厳密には… ベクトルは正規化されているものとしてよい。 また、法線ベクトルの向きは適切な向きになっているものとしてよい。

俺にはデザインのセンスがなくても… 数学力が ある！ （ちょっと）

具体的に何ができるの？ いかにシェーダーが数学を使うか知ってもらおう

こういうのを書いてみました 輪郭が浮き彫りになるやつ（オーブのようなイメージ）

オーブができるまで 1/3 まず素直にテクスチャの色をそのまま表示するコードを書く。

オーブができるまで 2/3 視線ベクトル 𝒑𝒑 と面の法線ベクトル 𝒏𝒏 を取得する。 不透明度 (col.a) を 1 − 𝒑𝒑 � 𝒏𝒏 に設定する。

オーブができるまで 3/3 輪郭をパキッとさせるため、不透明度を4乗する。

いろいろあります シェーダー×数学 先程の例でも、内積と指数関数を用いた。他にも… • どの角度から見てもこちらを向いてくるシェーダー ⇒ 回転行列 • 画面を歪ませたりしたいんですけど ⇒ 極座標 など • 画面を一刀両断してみたい！ ⇒ 外積 (切断面の法線ベクトル) パッと思いつくだけでこんなにある

何が嬉しい？ 勝ちまくりモテまくり ２選

嬉しいこと① ネタが思いつきやすい • 一般的に、デザインは簡単にネタ切れを起こす。 • 「カッコいい動画」のパターンを挙げてください→抽象的で難しい • 普通に他分野を学んでいて面白かったことを実装すれば良い。 • この物理モデルを実装してみよう→具体的で取り組みやすい • 基本的に何でもできます。 • 畳み込みニューラルネット・逆運動学・探索アルゴリズムを組み合わせている人 もいて、怖い。 https://phi16.hatenablog.com/entry/2019/09/02/010324

• https://phi16.hatenablog.com/entry/2019/09/02/010324

嬉しいこと② 言いやすい 以前までの自分： 「このアルゴリズムを使ってこのボトルネックが解消して オーダーがこうなるから高速化できて～」 • 地元の友だちから「何？」って目で見られる • 楽しいのに、伝わらない…。 今の自分： 「こういうことをやっています（動画を見せる）」 • 親に話しやすい • 視覚に訴えかけてくるので、ちゃんと伝わる

「やってみようかな」←そんなあなたに • つぶやきGLSL • やってる人多いイメージある • つぶやきGLSLのススメ - notargs さん https://www.slideshare.net/slideshow/glsl-249579645/249579645 • WebGL • フロントエンド大好き人間におすすめかも • Three.js使うと楽です 「Three.js 入門」で検索 • Unity (Shaderlab/Shadergraph) • 「Unityシェーダープログラミングの教科書 ShaderLab言語解説編」 • Shadergraphでビジュアルプログラミングできるよ

• https://www.slideshare.net/slideshow/glsl-249579645/249579645
• https://booth.pm/ja/items/660001

シェーダーには夢がいっぱい！

ご清聴 ありがとうございました！ 感謝の牛肉、アンガトビーフ（アンガスビーフ）