---
title: 【Unity】Unityでトゥーン表現ためしてみた
tags:  #unity #shader  
author: [おかひろ](https://www.docswell.com/user/okahiro_p)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/LELZ8L93JR.jpg?width=480
description: 2023年9月に新横浜インディゲームもくもく会でLTした資料です。
published: September 10, 23
canonical: https://www.docswell.com/s/okahiro_p/ZRX932-2023-09-10-152925
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/LELZ8L93JR.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/4JMV6MZMJW.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/PJR2PV6LE9.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/PEXD3ZD67X.jpg)

作ったもの


# Page. 5

![Page Image](https://bcdn.docswell.com/page/3EKXY8XG7D.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/L7359255E5.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/87DDGZDY7G.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/VJPX3DX278.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/2EVL41LXJQ.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/57GX12XREL.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/4EQ8DP8YJP.jpg)

天使の輪

参考：ArtStation


# Page. 12

![Page Image](https://bcdn.docswell.com/page/KJ42ZY2ZE1.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/LE1MR6MD7G.jpg)

金属

参考：ArtStation


# Page. 14

![Page Image](https://bcdn.docswell.com/page/GEW31W38E2.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/47ZVP5V9E3.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/YJ65M95D7V.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/GJ5YZNY8J4.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/9E2GR5GVER.jpg)

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


