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
初心者向けシェーダ講習会 第1回
Search
Pocol
March 31, 2020
Programming
0
600
初心者向けシェーダ講習会 第1回
社内向けにやる予定だったシェーダ講習会の資料です。
ガチ勢お断り。
Pocol
March 31, 2020
Tweet
Share
More Decks by Pocol
See All by Pocol
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
5
3.5k
Hardware-Raytracingを用いたフォトンマッピングの実装について
projectasura
0
630
ReSTIRについて
projectasura
5
2.4k
初心者向けシェーダ講習会 第2回
projectasura
0
400
中級グラフィックス入門~色彩工学編~
projectasura
21
11k
中級グラフィックス入門 ~シャドウマッピング総まとめ~
projectasura
5
3.5k
Other Decks in Programming
See All in Programming
Platformに“ちょうどいい”責務ってどこ? 関心の熱さにあわせて考える、責務分担のプラクティス
estie
2
510
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
740
OWASP Kansai DAY 2025.09: OSINTにふれてみよう
deka_morita
0
160
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
160
CSC305 Lecture 04
javiergs
PRO
0
230
ABEMAモバイルアプリが Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
akkyie
0
300
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.2k
VisionFrameworkで実現する - プライバシーに配慮した「顔ぼかし」機能 / Face blurring with Vision Framework
imaizume
0
180
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.2k
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
2.4k
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
3
920
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.3k
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Navigating Team Friction
lara
189
15k
Optimizing for Happiness
mojombo
379
70k
Building Applications with DynamoDB
mza
96
6.6k
Statistics for Hackers
jakevdp
799
220k
4 Signs Your Business is Dying
shpigford
185
22k
A Tale of Four Properties
chriscoyier
160
23k
Transcript
初心者向け シェーダ講習会 第1回目 Presented By Pocol
目的 • アーティスト・プログラマー向けにシェーダの基礎を解説します。 • シェーダを触れるテクニカルアーティストや シェーダを触れるプログラマーの増員・増強が目的です。 • 最終目標として, Substance Painterでカスタムシェーダを作れることを目指します。
• 今回のシェーダ講習では GLSL を使用します。
おしながき • シェーダって何? • 開発環境整備 • はじめてのシェーダ! • テクスチャマッピングをしてみよう! •
UVアニメーションさせよう!
シェーダってなに? Shading 陰影付けをする処理をシェーディング(Shading)と言います。 シェーダ(Shader)とは元来は陰影付けを行うためのプログラムを指します。 現在では,陰影付け以外の用途にも使われるようになっています。
シェーダって何することができるの? • 色を付けるための計算ができる。 • 色を付けるための計算結果が出力できる。 「シェーダ」って聞くと, なんでも万能な魔法のように誤解しているかもしれませんが, 基本的にはこの2つが本来のメインです。
シェーダモデル • シェーダも時代と共に進化を遂げてきました。 • 時代が進むにつれて,使えるシェーダの機能や使えるシェーダの種類が 増えました。 • シェーダが使える機能セットのことを 「シェーダモデル (Shader
Model)」と呼びます。 • 現在最新のシェーダモデルは6.5です。 https://microsoft.github.io/DirectX-Specs/d3d/HLSL_ShaderModel6_5.html
シェーダモデルが違うとどうなの? • 使える機能や,シェーダの種類が異なります。 Vertex Shader Pixel Shader Vertex Shader Geometry
Shader Pixel Shader Vertex Shader Hull Shader Domain Shader Geometry Shader Pixel Shader Compute Shader Amplification Shader Mesh Shader Pixel Shader Compute Shader 今回のシェーダ講習会ではピクセルシェーダのみ使用します 使える機能やシェーダの種類について詳しく知りたい方はMicrosoft のドキュメント等を参照してください。 https://docs.microsoft.com/en-us/windows/desktop/direct3dhlsl/dx-graphics-hlsl
開発環境の整備(1) • Webブラウザ上でシェーダを書きます。 WebGLに対応しているブラウザが必要となります。 今回は,Google Chromeを使うので, あらかじめインストールしておいてください。 https://www.google.com/intl/ja/chrome/ • 次に
ShaderToyというサイト上でシェーダを書きます。 以下のページにGoogle Chromeでアクセスしてください。 https://www.shadertoy.com/new
開発環境の整備(2) • サイトにアクセスできれば以下のような画面が表示されているはずです。
シェーダを書くところ 実行結果が表示される ところ
はじめてのシェーダ!(1) まずは第一歩として,好きな色を出力シェーダに変えてみましょう。 シェーダを次のように書き換えます。 void mainImage( out vec4 fragColor, in vec2
fragCoord ) { // Normalized pixel coordinates (from 0 to 1) vec2 uv = fragCoord/iResolution.xy; // 赤を出力 vec3 col = vec3(1.0, 0.0, 0.0); // Output to screen fragColor = vec4(col, 1.0); }
はじめてのシェーダ!(2) 書き換えができたら,画面下のコンパイルボタンを押します。 出力結果が赤色になれば 成功です!!
シェーダ解説 void mainImage( out vec4 fragColor, in vec2 fragCoord )
{ // Normalized pixel coordinates (from 0 to 1) vec2 uv = fragCoord/iResolution.xy; // 赤を出力 vec3 col = vec3(1.0, 0.0, 0.0); // Output to screen fragColor = vec4(col, 1.0); } RGBに相当 画面に出力する色
シェーダ解説 void mainImage( out vec4 fragColor, in vec2 fragCoord )
{ // Normalized pixel coordinates (from 0 to 1) vec2 uv = fragCoord/iResolution.xy; // 赤を出力 vec3 col = vec3(1.0, 0.0, 0.0); // Output to screen fragColor = vec4(col, 1.0); } RGBの値 画面に出力する色 A=1.0にしてRGBAとして出力
テクスチャマッピングをしてみよう! • 単色では面白み無いので, 画像を出力できるようにしてみましょう。 1 2 4 3 Polygon1 Polygon2
u v 0 1 1
3次元でも同じです。 • 画像を張り付けるためには ポリゴン上で対応する箇所を示すためのテクスチャ座標が必要です。 CG World Entry.jpより引用 https://entry.cgworld.jp/terms/UV%E3%83%9E%E3%83%83%E3%83%94%E3%83%B3%E3%82%B0.html
テクスチャマッピングには… 画像 1 2 4 3 (0, 1) (1, 1)
(1, 0) (0, 0) テクスチャ座標 が必要です。
シェーダでは… 画像 1 2 4 3 (0, 1) (1, 1)
(1, 0) (0, 0) テクスチャ座標 texture( iChannel0, uv );
クリック テクスチャ選択画面が表示されるようになります。 テクスチャは決められたものしか選択できません。
選択したテクスチャが表示されるようになります。 テクスチャは最大で4つまで設定できます。
早速表示してみよう • 最初に作ったシェーダを書き換えます。 vec3(1.0, 0.0, 0.0); texture(iChannel0, uv).rgb; 赤色 画像から取った色
RGBだけ抜き出し 先ほどは赤色を出力していましたが, これをtexture()という命令を使って,設定した画像からの色を出力するように書き換えます。
テクスチャマッピングのシェーダ 最終的なシェーダは次のようになります。 void mainImage( out vec4 fragColor, in vec2 fragCoord
) { // Normalized pixel coordinates (from 0 to 1) vec2 uv = fragCoord/iResolution.xy; // 画像から取った色を出力 vec3 col = texture(iChannel0, uv).rgb; // Output to screen fragColor = vec4(col, 1.0); }
UVアニメーションさせよう! • 最後にUVアニメーションを実装してみます。 • UVアニメーションはその名の通り,UVつまり テクスチャ座標を変化させることによってアニメーションする方法です。 • まずは,先ほど作ったシェーダを早速書き換えてみましょう。 uv の値を
0.2 だけずらして実行してみましょう。 texture(iChannel0, uv + 0.2).rgb; 0.2だけずらす
実行結果 ちょっとずれるようにできました。
さらにずらしてみる • 0.2だったものを,0.3, 0.4, 0.5…としてみると次のようになります。
時間変化するようにしてみる • テクスチャ座標を加算していくことで, 表示画像がだんだんとずれる様子が分かるようになりました。 • 今は,直接0.2,0.3, 0.4と指定しましたが, この代わりに時間変化で値が変わるようにしてみましょう。 • ShaderToyには
”iTime” という用意されているタイマーがあります。 これを使ってスクロールさせてみます。 texture(iChannel0, uv + iTime).rgb; 時間変化でずらす
UVスクロールのシェーダ • 簡単なUVスクロールのシェーダは次のようになります. void mainImage( out vec4 fragColor, in vec2
fragCoord ) { // Normalized pixel coordinates (from 0 to 1) vec2 uv = fragCoord/iResolution.xy; // 時間変化で画像から取る色を変える vec3 col = texture(iChannel0, uv + iTime).rgb; // Output to screen fragColor = vec4(col, 1.0); }
X方向のみのUVスクロールのシェーダ • X方向にだけスクロールさせたい場合は次のようになります void mainImage( out vec4 fragColor, in vec2
fragCoord ) { // Normalized pixel coordinates (from 0 to 1) vec2 uv = fragCoord/iResolution.xy; uv.x += iTime; // 時間変化で画像から取る色を変える vec3 col = texture(iChannel0, uv).rgb; // Output to screen fragColor = vec4(col, 1.0); }
Y方向のみのUVスクロールのシェーダ • Y方向にだけスクロールさせたい場合は次のようになります void mainImage( out vec4 fragColor, in vec2
fragCoord ) { // Normalized pixel coordinates (from 0 to 1) vec2 uv = fragCoord/iResolution.xy; uv.y += iTime; // 時間変化で画像から取る色を変える vec3 col = texture(iChannel0, uv).rgb; // Output to screen fragColor = vec4(col, 1.0); }
左右に揺らす • X方向に行ったり来たりさせる場合は sin() を使って変化させます。 void mainImage( out vec4 fragColor,
in vec2 fragCoord ) { // Normalized pixel coordinates (from 0 to 1) vec2 uv = fragCoord/iResolution.xy; uv.x += sin(iTime); // 時間変化で画像から取る色を変える vec3 col = texture(iChannel0, uv).rgb; // Output to screen fragColor = vec4(col, 1.0); }
sin()って何? • 正弦波です。 図にすると次のようになります。 • 高校1年の数学で習います(文系・理系共通)
今日の宿題 ・次の動画のように画面端が波のようにうねるUVアニメーションを作ってください。
実装例
本日はここまで! 次回は • 宿題の解説 • ブラー処理 • シェーダの書き方 について説明を行います。