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.7k
MMOの作り方
kenjihanada
0
2.6k
お父さんが教えるプログラミング教育
kenjihanada
0
2.6k
Other Decks in Technology
See All in Technology
大規模組織にAIエージェントを迅速に導入するためのセキュリティの勘所 / AI agents for large-scale organizations
i35_267
6
330
Snowflake のアーキテクチャは本当に筋がよかったのか / Data Engineering Study #30
indigo13love
0
280
MCPに潜むセキュリティリスクを考えてみる
milix_m
1
880
モバイルゲームの開発を支える基盤の歩み ~再現性のある開発ラインを量産する秘訣~
qualiarts
0
610
P2P ではじめる WebRTC のつまづきどころ
tnoho
1
270
Amazon CloudWatchのメトリクスインターバルについて / Metrics interval matters
ymotongpoo
3
280
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
330
Kiroから考える AIコーディングツールの潮流
s4yuba
1
320
Webの技術とガジェットで那須の子ども達にワクワクを! / IoTLT_20250720
you
PRO
0
130
FAST導入1年間のふりかえり〜現実を直視し、さらなる進化を求めて〜 / Review of the first year of FAST implementation
wooootack
1
180
PdM業務における使い分け
shinshiro
0
670
claude codeでPrompt Engineering
iori0311
0
530
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
695
190k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Automating Front-end Workflow
addyosmani
1370
200k
Visualization
eitanlees
146
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
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イラストに並ぶほど綺麗 工夫次第では物理ベースより軽く,モバイルでリアルタイムで動きます 軽くて綺麗な絵作りをするなら カスタムシェーダーは必須 シェーダーはフォトリアル,ノンフォトリアルに 拠らず様々な表現ができる
さいごに シェーダー楽しいよ! おわり