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
kenjihanada
February 22, 2019
Technology
0
2.9k
今風トゥーンシェーディング
by hayatohishiya
kenjihanada
February 22, 2019
Tweet
Share
More Decks by kenjihanada
See All by kenjihanada
Akatsuki Summer Internship 2019 インターン成果発表
kenjihanada
0
2.2k
ゼロから始めるGo Modules
kenjihanada
0
2.7k
俺はビッグエンディアンでテストがしたいんだ!
kenjihanada
0
2.8k
MMOの作り方
kenjihanada
0
2.7k
お父さんが教えるプログラミング教育
kenjihanada
0
2.6k
Other Decks in Technology
See All in Technology
Findy Team+ QAチーム これからのチャレンジ!
findy_eventslides
0
450
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
1
200
今この時代に技術とどう向き合うべきか
gree_tech
PRO
2
2.1k
「改善」ってこれでいいんだっけ?
ukigmo_hiro
0
350
防災デジタル分野での官民共創の取り組み (2)DIT/CCとD-CERTについて
ditccsugii
0
310
AI時代におけるデータの重要性 ~データマネジメントの第一歩~
ryoichi_ota
0
700
Introdução a Service Mesh usando o Istio
aeciopires
0
210
AIツールでどこまでデザインを忠実に実装できるのか
oikon48
6
3.5k
事業開発におけるDify活用事例
kentarofujii
2
440
Digitization部 紹介資料
sansan33
PRO
1
5.6k
HR Force における DWH の併用事例 ~ サービス基盤としての BigQuery / 分析基盤としての Snowflake ~@Cross Data Platforms Meetup #2「BigQueryと愉快な仲間たち」
ryo_suzuki
0
240
AWSでAgentic AIを開発するための前提知識の整理
nasuvitz
2
210
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Facilitating Awesome Meetings
lara
56
6.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
RailsConf 2023
tenderlove
30
1.3k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Rails Girls Zürich Keynote
gr2m
95
14k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Designing for humans not robots
tammielis
254
26k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Context Engineering - Making Every Token Count
addyosmani
7
260
Transcript
今風トゥーンシェーディング 2019 / 02 / 22 株式会社アカツキ 菱谷
もくじ ・自己紹介 ・トゥーンシェーディングって何? ・具体的にどんなことやってるの? ・さいごに
・自己紹介 ・トゥーンシェーディングって何? ・具体的にどんなことやってるの? ・さいごに
自己紹介 菱谷 隼人(Hishiya Hayato) 株式会社アカツキ エンジニア 2018年入社 趣味 :ギターを弾くこと 特技
:スマブラ 好きなもの :ラーメン シェーダーが好き!
・自己紹介 ・トゥーンシェーディングって何? ・具体的にどんなことやってるの? ・さいごに
トゥーンシェーディングって何? 2Dっぽく3Dでレンダリングさせること 参考: https://ja.wikipedia.org/wiki/%E3%83%88%E3%82%A5%E3%83%BC%E3%83%B3%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0 https://qiita.com/MuRo_CG/items/c417ef6d6cbeed3dd42b https://game.watch.impress.co.jp/img/gmw/docs/653/140/html/g05.jpg.html
トゥーンシェーディングって何? リアルタイムトゥーンシェーディングで現在, 世界最高峰なのはこれ GRANBLUE FANTASY Versus アークシステムワークスさんが開発中 2019年発売予定 もうイラストにしか見えない すごい
参考: https://versus.granbluefantasy.jp/
トゥーンシェーディングって何? ・2Dイラストを3Dで表現させる 利点:1回作っちゃえば,3Dと同じように動かせる 欠点:作るの難しい… ・現在は2Dイラストの表現のほとんどをトゥーンシェーディングで補える ・アニメーション業界でも,2Dイラスト→トゥーンに以降しつつある ゲームと違って,プリレンダーでOKなのでやりたい放題 映画ドラゴンボールブロリーではトゥーンと3Dレタッチの両方を利用 まとめ
・自己紹介 ・トゥーンシェーディングって何? ・具体的にどんなことやってるの? ・さいごに
具体的にどんなことやってるの? ・陰(シェード) ① ベースカラー ② 1号陰 ③ 2号陰 ・アウトライン 色
/ 太さ / ブレンド ・ハイカラー 物理ベース / ベタ塗り ・ディフューズ ハーフランバート ・頂点カラー アウトライン/陰の制御 ・リムライト 光源/反光源 ブレンド(テクスチャ/平行光色) ・SSS(SubSurfaceScattering) 皮膚 環境光影響 ・FeatherShade グラデーションがかかった陰 ・EnvironmentMapping SphereMapping/CubeMapping ・PolygonZOffset 眉毛/まつ毛を前髪よりも前へ などなど
具体的にどんなことやってるの? 今 回 は こ こ ・陰(シェード) ① ベースカラー ②
1号陰 ③ 2号陰 ・アウトライン 色 / 太さ / ブレンド ・ハイカラー 物理ベース / ベタ塗り ・ディフューズ ハーフランバート
具体的にどんなことやってるの? 元モデル SDユニティちゃんを トゥーンシェーディングしていき ます. ① 陰(シェード) ② アウトライン ③
ハイカラー ④ ディフューズ
具体的にどんなことやってるの? 元モデル ライティング計算を 全て削除し, テクスチャを貼っただけの 状態にします.
具体的にどんなことやってるの? 陰(シェード) 法線とライトの向きの内積値で,どれくら い陰になる領域なのかを0~1に正規化し ます. float d = dot(N, -L)
* 0.5 + 0.5; これにしきい値を設けてstepすると, 0 or 1となりトゥーン調の陰のようにパキッ と出力することができます. step(_Threshold, d); 最後に上記でlerpさせます. color = lerp(base, shade, step(...)); 同じことをすれば2号陰が出ます.
具体的にどんなことやってるの? アウトライン 同じポリゴンを法線方向へ拡大し,前面を カリングすることでアウトラインを表現しま す.この手法を背面法と呼びます. 頂点シェーダー内で頂点を法線方向へ加 算することで実現できます. input.vertex.xyz += input.normal
* width;
具体的にどんなことやってるの? ハイカラー とある点で光源の強い光が照り返したよう な表現をハイカラー(スペキュラ)と呼びま す. ライトの向きとビュー方向の和で照り返し 部分の法線を算出し,ポリゴン法線と内積 することでどれくらい照り返されるのかを 導き出せます. dot(N,
normalize(L + V)); 陰と同様にしきい値でstepさせると,ベタ 塗りのハイカラーを得られます. lerp(0, highCol, step(threshold, dot(...)));
具体的にどんなことやってるの? ハイカラー とある点で光源の強い光が照り返したよう な表現をハイカラー(スペキュラ)と呼びま す. ライトの向きとビュー方向の和で照り返し 部分の法線を算出し,ポリゴン法線と内積 することでどれくらい照り返されるのかを 導き出せます. dot(N,
normalize(L + V)); 陰と同様にしきい値でstepさせると,ベタ 塗りのハイカラーを得られます. lerp(0, highCol, step(threshold, dot(...)));
具体的にどんなことやってるの? ディフューズ ライトの向きとポリゴン法線の内積を陰の 強度としてレンダリングすればディフュー ズを得られます. float3 diff = max(0, dot(N,
L)); ディフューズの値にカラーを掛け合わせる ことによって,ベタ塗りから少しだけ立体感 を演出させることができます(ハーフラン バートを用いて,黒くなりすぎないようにす ることがポイントです). float3 diff = max(0, dot(N, L) * 0.2 + 0.8); color = diff * color;
具体的にどんなことやってるの? 完成! ・陰(シェード) ・アウトライン ・ハイカラー ・ディフューズ 上記4つだけでも良い感じのトゥーンを得られ ましたね! 作風に合わせてリムライトやポストエフェクト を重ねていけば,もっと綺麗なレンダリング
結果を得ることができますよ!
具体的にどんなことやってるの? ちなみに…
具体的にどんなことやってるの? ちょっと本気出してみた トゥーン + 光源方向リムライト エミッション + ブレンドアウトライン + HDR対応
ポストエフェクト + アンチエイリアス FXAA + ブルーム + カラグレ コントラスト トーンマッピング ※全部独自実装です
具体的にどんなことやってるの? ちょっと本気出してみた トゥーン + 光源方向リムライト エミッション + ブレンドアウトライン + HDR対応
ポストエフェクト + アンチエイリアス FXAA + ブルーム + カラグレ コントラスト トーンマッピング ※全部独自実装です
・自己紹介 ・トゥーンシェーディングって何? ・具体的にどんなことやってるの? ・さいごに
さいごに ・トゥーンシェーディングについて 2Dっぽい3Dレンダリング 最近のトゥーンシェーディングは2Dイラストに並ぶほど綺麗 工夫次第では物理ベースより軽く,モバイルでリアルタイムで動きます 軽くて綺麗な絵作りをするなら カスタムシェーダーは必須 シェーダーはフォトリアル,ノンフォトリアルに 拠らず様々な表現ができる
さいごに シェーダー楽しいよ! おわり