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
a-pxl
October 25, 2019
Technology
0
460
僕は雪が見たい(雪シェーダーの作成)
雪シェーダーを作成する
・反射計算
・頂点座標の変更
・歩いた跡をつける
・テッセレーションシェーダー
a-pxl
October 25, 2019
Tweet
Share
More Decks by a-pxl
See All by a-pxl
俺、女の子になります
aizupxl
0
69
Blender 簡単ピストンリグ
aizupxl
0
620
Other Decks in Technology
See All in Technology
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
290
Connect 100+を支える技術
kanyamaguc
0
140
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
240
Github Copilot エージェントモードで試してみた
ochtum
0
130
How Community Opened Global Doors
hiroramos4
PRO
1
130
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
360
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
0
590
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
0
110
AI導入の理想と現実~コストと浸透〜
oprstchn
0
150
2025-06-26_Lightning_Talk_for_Lightning_Talks
_hashimo2
2
110
OPENLOGI Company Profile
hr01
0
67k
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
380
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
Building Flexible Design Systems
yeseniaperezcruz
328
39k
YesSQL, Process and Tooling at Scale
rocio
173
14k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Building Adaptive Systems
keathley
43
2.6k
A better future with KSS
kneath
239
17k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Scaling GitHub
holman
459
140k
Transcript
僕は雪が見たい 照屋 尚志
自己紹介 ・照屋 尚志(てるや ひさし) ・修士1年 ・筋トレサボってた ・それとうどん過剰摂取 ・そして少し太った
皆さんは雪はお好きですか
よく言われること 沖縄には海があるじゃん めんどくさいよ 自転車使えなくなるよ
こちとら雪に夢を抱いてんだよ
私にとっての雪
皆が夢見るように
目標 雪原を作る
始めに ・Planeの作成
雪原の完成!!
嘘です
シェーダーを作成します ・雪の反射を作る ・凹凸を作る ・歩いたところを凹むようにする
シェーダーでやったこと ・ランバート反射、スペキュラ反射 ・ホワイトノイズ、パーリンノイズ作成 ・テッセレーションシェーダー ・頂点座標の変更・法線を求める ・depthカメラを使用した軌跡描画
1.雪の反射について
雪はチカチカ反射する
反射の実装 ・ランバート反射、スペキュラ反射の実装 ・ホワイトノイズテクスチャの作成 ・テクスチャを使用してチカチカ反射させる
ランバート反射について
説明する前に ・法線ベクトル - 面に対して垂直なベクトル(wikipediaより)
ランバート反射 θ 法線ベクトル:N 光源方向ベクトル:L 反射 = max(0, (N ・L)) ベクトルNとベクトルLの内積
0以下であれば値を0にする
スペキュラ反射について
スペキュラ反射について ・スペキュラ反射には主に2種類あります - フォンの反射モデル : 計算が大変 - ブリン・フォン反射モデル : 計算が楽 ・ここでは後者について解説します
ブリン・フォン反射モデル 法線ベクトル:N 光源方向ベクトル:L 視点方向ベクトル:V ハーフベクトル:H θ θ ハーフベクトル : H
= (V + L) / 2 反射量 = max(0, (N ・H)) ベクトルNとベクトルHの内積 0以下であれば値を0にする
実装する
チカチカ反射させる ・先程のスペキュラ反射にホワイトノイズを加える
ホワイトノイズ ・1マスごとにランダムな値を書き込む ・ここでは白~黒の色をランダムに書き込む ・反射で白の部分を反射させ、黒は反射させない
ノイズを追加
表面を凸凹したい
頂点について
凹凸を作る ・ノイズを使って頂点の高さを変える ・パーリンノイズを使う 今はネットから見つけたものを使用
実際にやってみた
問題に気づく ・凹凸がカクカクしている ・頂点数が少ない ・反射がちゃんと出来ていない ・法線が垂直のまま
頂点数を増やしたい..... テッセレーションシェーダー!
テッセレーションシェーダー
テッセレーションシェーダー
テッセレーションシェーダーの実装 ・わけわからんことをずらずら書く ・調べたら出てくるのでそこを 参照してください ※こちらは開発途中のものです
テッセレーションシェーダーの実装
結果
まだ足りない
法線を求める ・反射は法線を元に計算される ・凹凸に合わせた法線を求める必要がある
法線を求める ・隣の頂点同士の高さの差を求める ・隣の頂点の高さはノイズテクスチャから求められる
隣の高さをみる (i, j) (i + 1, j) (i - 1,
j) (i, j - 1) (i, j + 1)
隣の高さをみる (i, j) (i + 1, j) (i - 1,
j) (i, j - 1) (i, j + 1) 黒:低い 白:高い 低 高 低 高
外積を計算 ・隣の高さを使用して外積を計算
外積を計算 法線 =
結果
歩いた後を付ける
カメラの深度 ・カメラでは深度を取ることが出来ます ・深度を使って距離を計ることが出来ます
カメラの深度
カメラの深度
RenderTexture ・カメラが取ったものをRenderTextureに 書 きこむことが出来ます ・RenderTextureを使用して 赤い部分を 凹ませます 実際に書き込んだもの →
カメラの準備 ・Planeの下にカメラを仕込む
結果
凹凸と足跡を合わせる
凹凸と足跡を合わせる ・頂点を上げる計算と下げる計算で法線の求め方が変わる ・凹凸を作成する場合と凹ませる場合の両方とも頂点を 下げ るよう変更 ・2つのテクスチャデータを計算して求める ・どこにも参考記事がない.......
頑張った結果
考察 ・頂点の計算の仕方によって法線の計算が変わる ・丁度よい計算が未だ決まっていない ・改良の余地あり
最後に
ユニティちゃんを歩かせてみた
ユニティちゃんを歩かせてみた
参考にしたゲーム 風ノ旅ビト
参考資料(反射関係)
参考資料(テッセレーション) ・Esさんのサイトから UnityTexturePaintでリアルタイムにオブジェクトを変形する ハイトマップから法線情報の生成 テッセレーション基礎
参考資料(足跡) [Unity] CustomRenderTextureに移動跡を書き込む 【Unity】雪をかき分けるような処理の実装を見ることができる「Snow Trail」紹介