今風トゥーンシェーディング

Transcript

1. 今風トゥーンシェーディング 2019 / 02 / 22 株式会社アカツキ 菱谷

2. もくじ ・自己紹介 ・トゥーンシェーディングって何？ ・具体的にどんなことやってるの？ ・さいごに

3. ・自己紹介 ・トゥーンシェーディングって何？ ・具体的にどんなことやってるの？ ・さいごに

4. 自己紹介 菱谷 隼人(Hishiya Hayato) 株式会社アカツキ エンジニア 2018年入社 趣味 ：ギターを弾くこと 特技

   ：スマブラ 好きなもの ：ラーメン シェーダーが好き！

5. ・自己紹介 ・トゥーンシェーディングって何？ ・具体的にどんなことやってるの？ ・さいごに

6. トゥーンシェーディングって何？ 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

7. トゥーンシェーディングって何？ リアルタイムトゥーンシェーディングで現在， 世界最高峰なのはこれ GRANBLUE FANTASY Versus アークシステムワークスさんが開発中 2019年発売予定 もうイラストにしか見えない すごい

   参考： https://versus.granbluefantasy.jp/

8. トゥーンシェーディングって何？ ・2Dイラストを3Dで表現させる 　　利点：1回作っちゃえば，3Dと同じように動かせる 　　欠点：作るの難しい… ・現在は2Dイラストの表現のほとんどをトゥーンシェーディングで補える ・アニメーション業界でも，2Dイラスト→トゥーンに以降しつつある 　　ゲームと違って，プリレンダーでOKなのでやりたい放題 　　映画ドラゴンボールブロリーではトゥーンと3Dレタッチの両方を利用 まとめ

9. ・自己紹介 ・トゥーンシェーディングって何？ ・具体的にどんなことやってるの？ ・さいごに

10. 具体的にどんなことやってるの？ ・陰(シェード) ① ベースカラー ② 1号陰 　　③ 2号陰 ・アウトライン 　　色

    / 太さ / ブレンド ・ハイカラー 　　物理ベース / ベタ塗り ・ディフューズ 　　ハーフランバート ・頂点カラー アウトライン/陰の制御 ・リムライト 光源/反光源 　　ブレンド(テクスチャ/平行光色) ・SSS(SubSurfaceScattering) 　　皮膚 　　環境光影響 ・FeatherShade 　　グラデーションがかかった陰 ・EnvironmentMapping 　　SphereMapping/CubeMapping ・PolygonZOffset 　　眉毛/まつ毛を前髪よりも前へ などなど

11. 具体的にどんなことやってるの？ 今 回 は こ こ ・陰(シェード) ① ベースカラー ②

    1号陰 　　③ 2号陰 ・アウトライン 　　色 / 太さ / ブレンド ・ハイカラー 　　物理ベース / ベタ塗り ・ディフューズ 　　ハーフランバート

12. 具体的にどんなことやってるの？ 元モデル SDユニティちゃんを トゥーンシェーディングしていき ます． 　① 陰(シェード) 　② アウトライン 　③

    ハイカラー 　④ ディフューズ

13. 具体的にどんなことやってるの？ 元モデル ライティング計算を 全て削除し， テクスチャを貼っただけの 状態にします．

14. 具体的にどんなことやってるの？ 陰(シェード) 法線とライトの向きの内積値で，どれくら い陰になる領域なのかを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号陰が出ます.

15. 具体的にどんなことやってるの？ アウトライン 同じポリゴンを法線方向へ拡大し，前面を カリングすることでアウトラインを表現しま す．この手法を背面法と呼びます． 頂点シェーダー内で頂点を法線方向へ加 算することで実現できます． input.vertex.xyz += input.normal

    * width;

16. 具体的にどんなことやってるの？ ハイカラー とある点で光源の強い光が照り返したよう な表現をハイカラー(スペキュラ)と呼びま す． ライトの向きとビュー方向の和で照り返し 部分の法線を算出し，ポリゴン法線と内積 することでどれくらい照り返されるのかを 導き出せます． dot(N,

    normalize(L + V)); 陰と同様にしきい値でstepさせると，ベタ 塗りのハイカラーを得られます． lerp(0, highCol, step(threshold, dot(...)));

17. 具体的にどんなことやってるの？ ハイカラー とある点で光源の強い光が照り返したよう な表現をハイカラー(スペキュラ)と呼びま す． ライトの向きとビュー方向の和で照り返し 部分の法線を算出し，ポリゴン法線と内積 することでどれくらい照り返されるのかを 導き出せます． dot(N,

    normalize(L + V)); 陰と同様にしきい値でstepさせると，ベタ 塗りのハイカラーを得られます． lerp(0, highCol, step(threshold, dot(...)));

18. 具体的にどんなことやってるの？ ディフューズ ライトの向きとポリゴン法線の内積を陰の 強度としてレンダリングすればディフュー ズを得られます． float3 diff = max(0, dot(N,

    L)); ディフューズの値にカラーを掛け合わせる ことによって，ベタ塗りから少しだけ立体感 を演出させることができます(ハーフラン バートを用いて，黒くなりすぎないようにす ることがポイントです)． float3 diff = max(0, dot(N, L) * 0.2 + 0.8); color = diff * color;　　　　　　　　　　

19. 具体的にどんなことやってるの？ 完成！ ・陰(シェード) ・アウトライン ・ハイカラー ・ディフューズ 上記4つだけでも良い感じのトゥーンを得られ ましたね！ 作風に合わせてリムライトやポストエフェクト を重ねていけば，もっと綺麗なレンダリング

    結果を得ることができますよ！

20. 具体的にどんなことやってるの？ ちなみに…

21. 具体的にどんなことやってるの？ ちょっと本気出してみた トゥーン + 光源方向リムライト エミッション + ブレンドアウトライン + HDR対応

    ポストエフェクト + アンチエイリアス FXAA + ブルーム + カラグレ コントラスト トーンマッピング ※全部独自実装です

22. 具体的にどんなことやってるの？ ちょっと本気出してみた トゥーン + 光源方向リムライト エミッション + ブレンドアウトライン + HDR対応

    ポストエフェクト + アンチエイリアス FXAA + ブルーム + カラグレ コントラスト トーンマッピング ※全部独自実装です

23. ・自己紹介 ・トゥーンシェーディングって何？ ・具体的にどんなことやってるの？ ・さいごに

24. さいごに ・トゥーンシェーディングについて 　　2Dっぽい3Dレンダリング 　　最近のトゥーンシェーディングは2Dイラストに並ぶほど綺麗 　　工夫次第では物理ベースより軽く，モバイルでリアルタイムで動きます 軽くて綺麗な絵作りをするなら カスタムシェーダーは必須 シェーダーはフォトリアル，ノンフォトリアルに 拠らず様々な表現ができる

25. さいごに シェーダー楽しいよ！ 　　　　　　　　 　　　　　　　　　　　　　おわり