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
540
本日のシェーダー芸
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
440
初めての 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
Porting a visionOS App to Android XR
akkeylab
0
470
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
18k
Goで作る、開発・CI環境
sin392
0
230
Hack Claude Code with Claude Code
choplin
4
2.1k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
220
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.8k
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
PicoRuby on Rails
makicamel
2
130
生成AI時代のコンポーネントライブラリの作り方
touyou
1
220
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
BBQ
matthewcrist
89
9.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Writing Fast Ruby
sferik
628
62k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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...シェーダービジュアライザー。シンプルなシェーダーもオシャレに見 せてくれる。その代わり、けっこう重たい。