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
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
18k
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
87
29k
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.8k
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
14
4.8k
Discover Metal 4
rei315
2
140
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
10
5.2k
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
900
生成AI時代のコンポーネントライブラリの作り方
touyou
1
220
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
How STYLIGHT went responsive
nonsquared
100
5.6k
GitHub's CSS Performance
jonrohan
1031
460k
Code Review Best Practice
trishagee
69
18k
Adopting Sorbet at Scale
ufuk
77
9.5k
Agile that works and the tools we love
rasmusluckow
329
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Become a Pro
speakerdeck
PRO
29
5.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
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...シェーダービジュアライザー。シンプルなシェーダーもオシャレに見 せてくれる。その代わり、けっこう重たい。