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.4k
今風トゥーンシェーディング
by hayatohishiya
kenjihanada
February 22, 2019
Tweet
Share
More Decks by kenjihanada
See All by kenjihanada
Akatsuki Summer Internship 2019 インターン成果発表
kenjihanada
0
1.9k
ゼロから始めるGo Modules
kenjihanada
0
2.4k
俺はビッグエンディアンでテストがしたいんだ!
kenjihanada
0
2.3k
MMOの作り方
kenjihanada
0
2.3k
お父さんが教えるプログラミング教育
kenjihanada
0
2.3k
Other Decks in Technology
See All in Technology
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
790
DMM.com アルファ室採用案内資料
hsugita
1
160
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
770
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
180
本当のAWS基礎
toru_kubota
0
530
JAWS-UG Bedrock Claude Night
yamahiro
3
610
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
5
530
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
0
260
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
900
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
340
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
260
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
530
Featured
See All Featured
Faster Mobile Websites
deanohume
299
30k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
Building a Modern Day E-commerce SEO Strategy
aleyda
17
6.4k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Building Adaptive Systems
keathley
31
1.9k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
Navigating Team Friction
lara
178
13k
Building Applications with DynamoDB
mza
88
5.6k
Optimizing for Happiness
mojombo
370
69k
The Language of Interfaces
destraynor
151
23k
The Invisible Customer
myddelton
114
12k
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イラストに並ぶほど綺麗 工夫次第では物理ベースより軽く,モバイルでリアルタイムで動きます 軽くて綺麗な絵作りをするなら カスタムシェーダーは必須 シェーダーはフォトリアル,ノンフォトリアルに 拠らず様々な表現ができる
さいごに シェーダー楽しいよ! おわり