【Unity】Unityでトゥーン表現ためしてみた

15.3K Views

September 10, 23

スライド概要

2023年9月に新横浜インディゲームもくもく会でLTした資料です。

profile-image

フリーランスのTAです。 主にもくもく会でのLT資料などをアップロードしたいと思います。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

(ダウンロード不可)

関連スライド

各ページのテキスト
1.

Unityでトゥーン表現ためしてみた おかひろ

2.

自己紹介  おかひろ  Twitter:@okahiro_p  フリーランスのTA  個人で東方二次創作ゲーム作っています

3.

最初に  トゥーン表現に興味があるが、仕事で関わる機会がなかなかないので、趣味で もいいからやるか  「トゥーン」という言葉を使っているが、自分としてはセルルックもしくはイ ラスト調の3D表現を意識  3Dモデラーではないので、モデルやテクスチャは雑です

4.

作ったもの

5.

テクスチャ ベースマップ 陰色マップ アウトライン色マップ 白かった… パラメーターマップ1 パラメーターマップ2 R:陰マップ、G:スペキュラマスク、B: リムマスク、A:濡れマスク R:アウトラインマスク、G:ハイライト、 B:メタリックマスク、A:未使用

6.

テクスチャはSubstancePainterで作成  ベース色、陰色、アウトライン色を並べて指定して同じマスクをかけたり、 パラメーターマップの作成がすごく楽

7.

陰  Lambert   陰の境目のグラデーション幅や、別の色(下の例だと赤)を指定できるようにして いる 参考:LilToon

8.

陰  地面への落ち影はそのままに、陰だけ制御できるようにする  カメラのショットによって見た目の良い陰の付き方を制御できる

9.

影  地面などにCastShadowはするが、自身はReceiveShadowしない   セルフシャドウがあると見た目の制御が難しい 必ず影になるような部分はテクスチャに影を描く

10.

影  ReceiveShadowしないので、例えば建物の裏に入ったときなどにキャラが暗くならない  セルフシャドウは受けないけどほかオブジェクトからの影を受けるようにする   UnityのShadowMapカスタマイズなどが必要?難しそう 建物の裏に入ったらキャラ全体を暗くする  半分だけ暗くするなどができないが、実装コストは安い 日向 日影

11.

天使の輪  参考:ArtStation

12.

顔の陰 影用マスクテクスチャ  影用のマスクテクスチャを用意し、LDotNに補正をかける  ArtStationのやり方だとより表現力が高まるが、頭の向きと右方向ベクトルを スクリプトから渡す必要がある

13.

金属  参考:ArtStation

14.

課題 いろいろ試してみたが、細かい箇所で課題が残る。  Material数がそれなりに増える  眉毛と前髪がそれぞれ別Material   Stencilを使うため  Materialが増えると、SubstancePainterでTextureが増えてしまう  SetPassやDrawCallも増える 影  きれいにかつ出したいところに狙って出すのは結構難しい  テクスチャに影を描くのも、場所によっては破綻する

15.

課題 身体をひねると・・・

16.

まとめ  表現ひとつとってもいろいろなアプローチがある     Shaderで2パス使って背面法で描画  モデルの時点でアウトライン用法線反転Meshを作成  PostEffectのSobelFilterなどでエッジ抽出 どの方法が適切なのかはプロジェクトによる 無料の高機能ToonShaderがいくつもあるので、参考になる    例:アウトライン Shaderかけなくても、十分な表現ができる  LilToon  UnityChanToonShader Boothなどで公開されているVRアバターにもよく使われている トゥーン表現のゲームを見て研究するとよい  じっくり見てみると、「多分こうやってるのかな」ぐらいはわかることがある

17.

参考    ArtStation  https://www.artstation.com/artwork/wJZ4Gg  UnityURPで原神の表現 LilToon  https://lilxyzw.github.io/lilToon/#/  高機能ToonShader NiloToonURP  https://github.com/ColinLeung-NiloCat/UnityURPToonLitShaderExample  一部分しか公開されていないけど勉強になる

18.

ご清聴ありがとうございました