Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

F9c4e8b768c5857ee6b7003e283765a0?s=47 kenjihanada
February 22, 2019

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

by hayatohishiya

F9c4e8b768c5857ee6b7003e283765a0?s=128

kenjihanada

February 22, 2019
Tweet

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. さいごに シェーダー楽しいよ!                       おわり