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

今風トゥーンシェーディング 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(...)));

具体的にどんなことやってるの？ディフューズライトの向きとポリゴン法線の内積を陰の強度としてレンダリングすればディフューズを得られます． float3 diff = max(0, dot(N,
L)); ディフューズの値にカラーを掛け合わせることによって，ベタ塗りから少しだけ立体感を演出させることができます(ハーフランバートを用いて，黒くなりすぎないようにすることがポイントです)． float3 diff = max(0, dot(N, L) * 0.2 + 0.8); color = diff * color;　　　　　　　　　　

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

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

具体的にどんなことやってるの？ちょっと本気出してみたトゥーン + 光源方向リムライトエミッション + ブレンドアウトライン + HDR対応
ポストエフェクト + アンチエイリアス FXAA + ブルーム + カラグレコントラストトーンマッピング ※全部独自実装です

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

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

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

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

kenjihanada

More Decks by kenjihanada

Other Decks in Technology

Featured

Transcript