Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
本日のシェーダー芸
Search
Yuichi Sato
April 28, 2020
Programming
1
530
本日のシェーダー芸
N 高等学校通学コースプログラミングクラス 2020年4月28日(火) のプレ LT 大会での発表資料です。
Yuichi Sato
April 28, 2020
Tweet
Share
More Decks by Yuichi Sato
See All by Yuichi Sato
深層学習学習中
satoyuichi
0
27
深層学習はじめました
satoyuichi
0
43
瞑想アプリ
satoyuichi
0
39
SDF を作りたかった
satoyuichi
0
430
初めての iPhone ネイティブアプリ
satoyuichi
0
54
キャンフェスにゲームを出そう -StruckOut 編-
satoyuichi
0
18
ミクちゃんが歌ったら 家に帰ろう
satoyuichi
0
13
体温記録送信アプリ
satoyuichi
0
15
コロナ横目にバージョンアップ
satoyuichi
0
69
Other Decks in Programming
See All in Programming
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.4k
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
330
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
5k
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
870
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
580
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
250
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
150
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
110
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
380
ふつうの技術スタックでアート作品を作ってみる
akira888
0
130
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
337
57k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
The Cult of Friendly URLs
andyhume
79
6.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Git: the NoSQL Database
bkeepers
PRO
430
65k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
Docker and Python
trallard
44
3.4k
Optimizing for Happiness
mojombo
379
70k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
The Invisible Side of Design
smashingmag
300
51k
Transcript
本日の Shader 芸 佐藤 雄一
自己紹介 名前:佐藤 雄一(ゆーいち) 好物:エレキギター、(初期)仏教、Smalltalk 好きなエディタ:Emacs 好きなキーボード:HHKB Twitter:@satoyuichi80
Shader とは 頂点、ピクセルごとに GPU 上で実行されるプログラムのこと。頂点ごとに実効されるも のは頂点シェーダー(Vertex Shader)、ピクセルごとのはピクセルシェーダー(Pixel Shader)またはフラグメントシェーダー(Fragment Shader)と呼ばれる。比較的に頂点 シェーダーは影が薄いような気がする。
おそらく一般的には広義に質感を決めるためのパラメーター、テクスチャ、シェーダー プログラムを含めてシェーダーと呼ばれているようす。 https://docs.unity3d.com/jp/460/Manual/Materials.html
Shader 芸とは 本来シェーダーはオブジェクトを引き立てるためのものだが、シェーダー自体が出しゃ ばっているというか、そもそもオブジェクトは板ポリ一枚とかシェーダーをくっつけるため だけに存在するような状態に成り下がっているくらい主張が強いシェーダーを作成する 行為。 純粋にピクセルシェーダのみでの表現が多いが、テクスチャや音声データを使う場合 もある。数学と感性の世界なのでハードルが高いと思われがちだが、そんなでもない。 https://qiita.com/kaneta1992/items/21149c78159bd27e0860
今回の作品「ヒトダマ」 モチーフは炎 https://www.youtube.com/watch?v=gxhFeUBl7_w
CineShader 入力した Shader の実行結果が額縁の中に表示されるおしゃれなヤツ。ここに嵌めて 栄えるような作品を考えました。(佇むおねーさんがポイント)
工夫したところ 参考になるようにシンプルでありながら、見栄えがするように作成。四角形 + 円 + ノイ ズ(Simplex Noise)の組み合わせ。 + +
=
苦労したところ • 方向性が決まるまで難儀した • モチーフが変わった(最初は稲妻にしようと思っていた) • 納得いく結果にするための微調整に時間がかかった • ノート PC
がうなりを上げるのでグラフィクスの強い PC が欲しくなった
数学の活用として楽しいのでオススメ 以下、技術的な解説
基本の基本 -1 <= x <= 1, -1 <= y <=
1 の範囲の数値を作る。数値を (x, y, 0) => (R, G, B) として 可視化すると右のようになる。(負の範囲は黒くなっている) 色と演算結果の対応が感覚的に理解できるようになると楽。
円を作る (0, 0) からの距離を取る。(1.0 以上は白くなっている)
閾値を取る ある値(ここでは 0.5)を境に 0 と 1 に分ける。 実際は step 関数ではなく
smoothstep 関数を用いることで、境界をぼかして使ってい る。
反転する 1 から引いて反転することで完成。 三角関数を使って位置を揺らすことで炎の動きっぽくしている。大きさや動きの違う円 を複数組み合わせて、ノイズを適用して炎の質感としている。
四角形を作る x 座標のある値(ここでは 0.5)を境に 0 と 1 に分ける。
片側の枠を作る y 座標も同じくある値(ここでは 0.5)を境に 0 と 1 に分け、先ほどの結果と合成する。1 以上の値にしたくないため max
関数を使用して合成している。
各軸で折り畳む(Folding) 絶対値を取ることで、各軸に対して折り畳む。直感的な理解がし難いが、シェーダー芸 では良く使われるので、ぜひ身につけたいテクニック。
反転する 1 から引いて反転することで完成。 続けて敷き詰めのテクニックを組み合わせる。
タイリング(Tiling) 座標をスケールして fract 関数で小数部のみを取り出して、 0 から 1 の範囲を複数作 る。(最初に座標を 0
から 1 の範囲にしていることに注意)
各範囲で四角形を作る さらに原点中心で回転させ、色とノイズで質感をつけている。
リンク集 • The Book of Shaders…非常に丁寧な解説で優良サイトへのリンクも豊富。即変更 が確認できるサンプルコードがとても便利。 • シェーダー芸人になりたかった6か月前の自分に教えてあげたいリンク集…日本 トップレベルのシェーダー芸人のかねたさんの記事。文字通り、初心者が知りたくな
るような内容が書かれている。 • Shadertoy…シェーダー投稿サイト。参考にするのはもちろん、実行環境としても便 利。 • CineShader...シェーダービジュアライザー。シンプルなシェーダーもオシャレに見 せてくれる。その代わり、けっこう重たい。