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.5k
今風トゥーンシェーディング
by hayatohishiya
kenjihanada
February 22, 2019
Tweet
Share
More Decks by kenjihanada
See All by kenjihanada
Akatsuki Summer Internship 2019 インターン成果発表
kenjihanada
0
2k
ゼロから始めるGo Modules
kenjihanada
0
2.4k
俺はビッグエンディアンでテストがしたいんだ!
kenjihanada
0
2.4k
MMOの作り方
kenjihanada
0
2.4k
お父さんが教えるプログラミング教育
kenjihanada
0
2.4k
Other Decks in Technology
See All in Technology
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
コミュニティサービスに「あなたへ」フィードを リリースするまでの試行錯誤
takapy
1
150
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
640
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
20240725 LLMによるDXのビジョンと、今何からやるべきか @Azure OpenAI Service Dev Day
nrryuya
3
1.2k
Azure OpenAI Service Dev Day / LLMでできる!使える!生成AIエージェント
masahiro_nishimi
3
810
セキュリティ研修 Day1【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
2.9k
Building Your Own Lightsaber
phodgson
101
5.9k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
How to Ace a Technical Interview
jacobian
274
23k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
Unsuck your backbone
ammeep
666
57k
In The Pink: A Labor of Love
frogandcode
139
22k
Producing Creativity
orderedlist
PRO
340
39k
Happy Clients
brianwarren
94
6.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
How to name files
jennybc
67
96k
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イラストに並ぶほど綺麗 工夫次第では物理ベースより軽く,モバイルでリアルタイムで動きます 軽くて綺麗な絵作りをするなら カスタムシェーダーは必須 シェーダーはフォトリアル,ノンフォトリアルに 拠らず様々な表現ができる
さいごに シェーダー楽しいよ! おわり