講演者：小林 信行（ユニティ・テクノロジーズ・ジャパン合同会社） 　　　：京野 光平 a.k.a. ntny（ユニティ・テクノロジーズ・ジャパン合同会社） 　　　：本村 純也（アークシステムワークス株式会社） 　　　：岡本 鯉太郎（株式会社ヘキサドライブ） こんな人におすすめ ・リアルタイムトゥーンシェーダーの技術面に関して深い関心のあるテクニカルアーティストやエンジニア ・リアルタイムトゥーンシェーダーの使いこなしに関して高度な知見を得たいアーティスト ・リアルタイムシェーダーに関してすでに基本的な知見を持っており、さらにそれを発展させたいテクニカルアーティストやエンジニア 受講者が得られる知見 ・プラットフォームを越えたリアルタイムトゥーンシェーダーの知見 ・リアルタイムのノンフォトリアリスティック表現に対する深い洞察

1. トゥーンシェーダートークセッション #1
リアルタイムトゥーンシェーダー
徹底トーク
Unity Technologies Japan G.K.
モデレーター：
小林信行
2018/05/08 Room 5 17:40～18:50

2. CEDECでも、GTMFでも、Unite Tokyoでも、
人気の高い
トゥーンシェーダー。
今宵はその魅力について、
ディープに語り合ってみよう！

3. 小林 信行
UnityやMayaをはじめとする各種3Dツールの研究、ゲ
ーム制作のノウハウの普及、ユニティちゃんトゥーン
シェーダー2.0の開発をしています。その前は原作付き
キャラクターゲームの企画＆監督。
ユニティちゃんプロジェクトの言い出しっぺの一人。
ユニティ・テクノロジーズ・ジャパン合同会社
コミュニティエバンジェリスト
@nyaa_toraneko Nobuyuki-Kobayashi nobuyuki@unity3d.com

4. 京野 光平 a.k.a. ntny
(株)FlightUNITで9年間コンシューマーゲームの開発
に携わり、その後UnityTechnologiesJapanに移籍。
主にユニティちゃんコンテンツを担当しつつ、Unity
を使いアーティスト視点で作例やTipsを提供中。
自著にローポリスーパーテクニック。
ユニティ・テクノロジーズ・ジャパン合同会社
アーティスト
@nD_ntny kohei@unity3d.com

5. 本村・C・純也
アークシステムワークス株式会社にてプランナー、
３Dモデラー、ディレクターを経てテクニカルアーティストに。
２００７年頃から個人的にトゥーンシェーダーの研究を開始。
「GUILTYGEAR XRD」シリーズではメインモデラー、
リギング、シェーダー作成などを担当。
その後「ドラゴンボールファイターズ」ではディレクターを担当。
Unityも趣味で触っています。
アークシステムワークス株式会社
テクニカルアーティスト/ディレクター
@ChrstophrMtmr

6. 岡本 鯉太郎
ゲーム業界歴は長く、ファミコン～PS4、アーケードゲーム
モバイルゲーム、モバイルVR、PSVR等多数開発。
SUITE USERSNOTES の発起人。初投稿がベータテスターを
した SoftimageXSI に搭載された ToonShader。
先日、Maya / 3DSMaxに搭載されている ShaderFX の
オンディマンド のビデオチュートリアルを配信、
リアルタイムの ToonShader (DX11) の作成方法も紹介。
株式会社ヘキサドライブ
テクニカルアーティスト
@SI_UsersNotes BZP10556@nifty.com

7. 今宵のゲストには共通点があります。
それは…

8. 皆、日本のアニメーション作品
を意識した
トゥーンシェーダー
を設計していること。

9. ユニティちゃんトゥーンシェーダー2.0 リアルタイムレンダー作例： C92 「 The Phantom Knowledge 」

10. ユニティちゃんトゥーン
シェーダー2.0
+
プリレンダー作例

11. 「ギルティギア イグザード」シリーズ (アークシステムワークス株式会社）

12. その特徴は、カラー設定に基づいた
正確なカラー配置が設計できる
ことです。
そのようなトゥーンシェーダーは
どのようにして生まれるのでしょうか？

13. Hi（カラー）
通常（ノーマル）
１号影（１影）
２号影（２影）
ユニティちゃん
髪の毛カラー設定
アニメーション制作では、
各シーン単位でパーツごとに
カラー設計がなされる。
カラー設定とは？
これらのカラー設計をする、
色彩設計の専門スタッフが
いるのが普通。

14. 本村の個人的解釈：
写実的でないもの、NPR的な表現はすべてトゥーンシェーダー。
セルシェーダーはその中でセルアニメの表現を再現したもの。
トゥーンシェーダーのほうが範囲が広く、セルシェーダーのほうが狭い。
一つの作品の中でも混在する。キャラはセルシェーダーだけど、背景はトゥーンシェーダーとか。
ラインの有無は表現上の選択。アウトラインを使わないセルアニメ表現もある。
「トゥーンシェーダー」と「セルシェーダー」は
なにが違うの？
（本村） トゥーンシェーダーとセルシェーダーの違い

15. トゥーンシェーダーの開発
をすることになった経緯について
教えてください。
質問：その１

16. SOFTIMAGE|3Dまで全シーンをMiファイルに変換 してからレンダリング
していた為非常に重く遅いものだったが、XSIになって直接Raylibからレン
ダリングし高速化と共に、RenderTreeやインターラクティブなプレビュー
が可能になる など機能も大幅に進化した。
そして、NPR を目指す Special Projects が立ち上がった。
（ PowerCreators'Guide では 表題は XSI Toon Shaders ではない
）
Michael Arias
＊ Softimage|XSIトゥーン = Mentalrayの進化と共に登場
XSI Toon

17. 2002年頃 XSI Toon Shaders のベータテスターとして参加。
NPR なので [ Toon Paint and Host ]レンダーツリー ノードは
既存ノードと共に利用可能だった。
イラスト的な絵を模索する例を作ったのがSUNのキャラ達。
＊Softimage Users Notes (現在の SUITE Users Notes)

18. （本村）
●なんで研究しようと思ったか
・２００７年頃、写実的なゲームでは差別化しにくい、競争できない、と考えて個人的に研究開始。
・需要があるかどうかは不明だった。やりたかったからやった。
●研究経緯
・SoftImageでリアルタイムのトゥーンシェーダーが公開されていたのでSI導入。
・勉強。数度の挫折。プログラム難しい。プログラマとの二人三脚難しい。
・鯉太郎さんの書いたSI用のシェーダーチュートリアルがきっかけとなり
自分で書けるようになった！ 圧倒的感謝！
「Softimage Users Notes リアルタイムの トゥーン・シェーダー を作ろう!! 」
(http://www.comtec.daikin.co.jp/DC/UsersNotes/Ritaro/tutorial/rt_toon_shader_01/)
●書けるようになって
・もはやムスカ状態 「書ける！書けるぞ！」冗談ではなく踊りだすほど嬉しかった。
・プログラマに頼むのではなく、自分でコードを書けるようになってからすさまじくはかどった。
・それまでにいろいろ考えていた表現や仮説を全部その場で自分で試せたのが大きい。
・表現の幅も広がったが、同時に「絵」への理解度も深まった。
●実戦投入
・研究結果を元にセル調のゲームの企画書を会社に提出。いろいろあって中止。
・でもおかげで印象に残り、GuiltyGearのリブート作で技術を実戦投入。
・２０１４年「GUILTY GEAR Xrd -Sign-」発売
・２０１８年「ドラゴンボールファイターズ」にもさらに発展させて適用
（販売：株式会社バンダイナムコエンターテインメント様）

19. GTMF2016アーティストのためのシェーダー入門
（本村）
●講演など
・GDC2018で講演
・アークシステムワークス社内でシェーダーを書ける人が増えるように、社内勉強会を開催。実際書ける人は増えた。
・その資料をベースに、ダイキンさんのお誘いでGTMFにてアーティスト向けシェーダー入門を講演。

20. http://softimage.wiki.softimage.com/xsidocs/realtime_conc_BuildingRealtime
ShaderTrees.htm#Rfo47073

21. https://www.slideshare.net/SIGTART/sa09-realtime-education

22. トゥーンシェダーの基本設計
について

23. GTMF2016アーティストのためのシェーダー入門

24. GTMF2016アーティストのためのシェーダー入門

25. トゥーンシェーダー設計には、
プラットフォームに寄らない
共通の手法がある。
Half Lambertと
Step関数、Lerp関数

26. Half Lambert
Step
Lerp

27. アーティストの作品を、「マスク」ごとに分解す
る
アーティストは、絵を仕上げるまでの過程で、
様々な効果を入れるために、手でマスクを
切っていきます。左のイラストにも塗り分け用
のマスクの他、ハイカラーやリムライト等の
効果をみることができます。
これらの多くは、光源とそれへの向きを考慮
しつつ設計されるものです。
通常色/影色の
塗り分けマスク ハイカラー
（スペキュラ）
リムライト

28. 様々な塗り分け用マスクのパターン
Light Vectorノードとの内積
をとって、光の当たり方の
状態を得る。
View Vectorノードとの内積をとり、
One Minusで反転し、リムライトの
かかり具合の状態を得る。
Half Vectorノードとの内積をとって、
Powerノードで絞り込み、スペキュラ（
グロッシイ)反射の状態を得る。
様々な塗り分け用マスクをシェーダーで作成する時に、よく使われるのは、
モデルのノーマルベクトルとその他のベクトルとの内積（Dot Product）
を求め、それを２つのベクトルの開き具合として使う方法です。
塗り分けマスク ハイカラー（スペキュラ）リムライト

29. リアルタイムに様々なマスク効果を計算する
通常色/影色の
塗り分けマスク
ハイカラー
（スペキュラ）
ユニティちゃんトゥーン
シェーダー2.0では、左の
ような部分にそれぞれの
マスク効果が出ています。
これらのマスク効果は
リアルタイムに計算されて
いますので、光やモーショ
ンの変化に応じて違和感な
く表示されます。
リムライト

30. トゥーンシェーダーを設計する際に、
こだわるポイントは？
質問：その２

31. ＊トゥーンシェーダーは 色数も色諧調も少なく 単純/簡単？
？事実は全く逆！！
リアルなシェーダーの常識外のことをやって
無理くりに好みの色になるよう 自作の山。
こだわり （もう～フェチズムの領域）
== あらゆる角度から見たキャラクターの肌色
あご の 影 ！！
Maya / 3DS Max
ShaderFX （DX11）
RealtimeToonShader

32. （本村）
●アーティストがシェーダーを書く
・「コードが書けるアーティスト」か「絵心があるプログラマ」が書くべき。
・アートは言語化しにくい。言葉で説明して誰かに書いてもらうのは双方にとってストレス。
・トライアンドエラーが必要になるので、思いついたことや直したいところを即座に自分で試行錯誤できる環境が重要。
●DCCツール上でリアルタイムに確認できること
・作りながら常に最終結果を確認できる。直したら直した通りの最終結果が得られる。
・DCCツール上と実機上とで同じ計算結果が得られるようにちゃんと移植すること。
・強調してもしたりないが、これがとにかく最重要。極論すると、これなしでやるのは目をつぶって絵をかくようなもの。
トゥーンシェーダーを設計する際にこだわるポイント
DCCツール上のリアルタイムプレビュー ゲーム実機上でのプレイ画面

33. （本村）
●法線編集について
・昔からこれがカギになると思ってた。汚い陰影の原因は法線。
・シルエットを定義するための情報と、ライティングを定義するための情報を分けて考える。
・ノーマルマップの概念を知る前からPS2時代とかに妄想してた。
・最終的にノーマルマップではなく、頂点法線をつかったのはそのほうが自由度が高く、リアルタイムに調整できたから。
・Softimageの頂点法線編集機能がぴったり需要にはまってくれた。（実はこれも岡本さんのおかげだった！！）
トゥーンシェーダーを設計する際にこだわるポイント
●頂点カラーによる「影の出やすさ」
●良い絵を出すためにモデルに情報を仕込む
・普通のモデルに適用するだけでアニメっぽくなる魔法のシェーダーは無い。
・人間のアニメーターがやっている「影指定」などのコントロールをするためには、そのための情報を仕込む部分が必要。
●法線編集による顔の影のコントロー
ル

34. （本村） トゥーンシェーダーを設計する際にこだわるポイント
●テクスチャ情報に頼りすぎない
・テクスチャの解像度は有限なので、パラメータとして使うには不都合が多い。ドアップに耐えられない。
・０１の陰影で構成されるセルシェーダーではちょっとのノイズでも目立ってしまう。256段階しかない。圧縮で崩れる。
・ノーマルマップを使いにくいのはこれも要因。
・頂点法線、頂点カラーは解像度に依存しないのでノイズが出ない。
・なんかいい代替手段ないすかね？
GGXrdのテクスチャ。縦横のラインだけにすることで解像度によるジャギを回避。
フリーハンドで描くのではなく、「データの配置」というイメージで作られている。
ベース 影色 その他情報

35. モデリングチームとの連携の上で、
何か興味深いエピソードはありますか？
質問：その３

36. ＊DCCの機能を拡充するツールの作成へ
インゲーム開発の場合は、プログラマーがシェーダーを作成。
その場合、アーティストに残されている作業は、
用意されたシェーダーコードの選択と
モデリング、UV調整、テキスチャの作成になる。
== モデリングで特に良くあるのが、法線 と 頂点色 の編集
便利ツールの実装
● ユーザー法線調整ツール（デフォルト機能として実装）
● Blr.VertexColorTools （Photoshop風レイヤー機能)
法線編集ツール
上；NetVew版
下; ユーザー法線編集ツール

37. （本村）
●モデリング指導とシェーダー仕様の伝達
・連携というか、自分が両方設計したので、あとはそれをチーム内に広めた。
・シェーダーとモデル仕様は表裏一体なので、まとめて伝達した。
・モデラーの追加は徐々に少しずつだったので、ほぼマンツーマンで説明と指導ができた。
・マンツーマンで直接伝授したので、あまりドキュメント化されていないのが反省点。
・伝授しながらいろいろ機能追加や変更もあったのでそのたびに逐一説明。小さなチームだからできたこと。
・同時にシェーダー講習会なども行い、今ではモデラーの半数くらいは自前でシェーダーから設計できるように。
●外部のプログラマさんと組んで独自ツールを開発
・デフォルトの機能では不足していた法線編集機能を強化するために、外部のプログラマさんと組んで開発
・SoftImage用法線編集サポートツール「User Normal Translator」 開発：GOTETZ
GitHub: https://github.com/Gotetz/UserNormalTranslator
Youtube: https://www.youtube.com/watch?v=iH3p8N7qbv8&feature=youtu.be
・会社内での使用に限定したくなかったので個人として依頼して、GitHubで公開する形に。GOTETZ氏 感謝！
・強力な法線編集機能をもったツール。チーム内でも共有し、以降、常に活用している。
モデリングチームとの連携についてのエピソード

38. NormalPainter
Unity 上でポリゴンモデルの法線編集を可能にするツールです。
Unity 2017.1 系以上、Windows (64bit) or Mac、D3D11 世代以降の Graphics API の環境で動作。
実装されている機能
頂点、法線、タンジェント等の可視化
法線のペイント、回転、スケーリング等 (上の動画参照)
選択範囲によるマスキング
法線のミラーリング (Misc -> Mirroring)
法線の転写 (Edit -> Projection)
各頂点から法線方向にレイを飛ばし、指定オブジェクトに当たった位置の法線を拾ってきます
import / export
法線 <-> 頂点カラーの相互変換
法線をテクスチャとしてエクスポート
法線マップを頂点の法線としてインポート
.obj ファイルとしてエクスポート
FbxExporter を使えば fbx でエクスポートもできます
https://github.com/unity3d-jp/NormalPainter

39. 「影（シャドウ）」と「陰（シェイド）」
の取り扱いについて、
苦労したエピソードはありますか？
質問：その４

40. 光源方向とライトカラー、
およびシェーダーによって
決まる要素
GI（グローバルイルミ
ネーション）のカラー
で決まる要素
ライトのシャドウ
タイプで決まる要
素（キャストシャ
ドウのカラーは、
GIとシェーダーに
依存する）
ポストエフェクト
で設定する要素

41. アニメーション制作では、
多くの影は、光源方向を
意識しつつ、各パーツの
形状（フォルム）を強調
するための目的で置く。
形状（フォルム）を
強調する影とは？
腕やおさげの影などが特徴的
だが、基本となる形状が
「円柱」であることを意識
した影付けがなされている。
一方、セルフシャドウは、
演出的意図がある場合以外は、
手描きアニメでは避ける。

42. セルルックCGでよく使われる、ライトリンキング
ボディ用ライト フェイス専用ライトセルルックCGでは、しばしばフェイス
専用ライトとそれ以外をわける。

43. こういうスパンと切ったような影
はどう作る？
「フォルム重視の落ち影」はどうやって作る？

44. 左図のように、Shadow
Onlyのプレーンを被写体に
差し込むことで、簡単にス
パンと切ったような影を落
とすことができます。
ただし、このプレーンは、
カメラには写りませんが、
背景にも同時に影を落とす
ので注意！
カメラアングルを選びます
が、顔のアップなど、背景
をほぼ飛ばせるカットでは
、効果的な演出ができます
。

45. ＊マスクの生成と２つの影
今回の ShaderFX (Dx11) でのRealtimeToonの例では、
セリフシャドーは TraditionalGameSurfaceShader 内の
ShadowMapを応用しその白黒マスクをLUTのマスクと合成している。
が、ShadowMapからの影も利用している。
理由 == カメラの動きでも影が動くToon実装
セルフシャドーのボケ具合の調整値 大切な絶対領域の影

46. （本村）
●「シャドウ」と「シェード」
・シャドウは光源からの遮蔽、シェードは法線と光源の内積から計算
・でもこれは並行光源＊１が前提の話。本来は、全周囲からの光の到達度合の合算ではないか。
・シャドウ、シェードと合わせてもうひとつ「アンビエントオクルージョン」も考慮する必要がある。
・アニメではアニメーターがこれら全部をひっくるめて「影指定」をしている。
・GGXrdではこの「影指定」の工程を再現するために、頂点カラーや頂点法線、
テクスチャで影の出かたを調整できるようにしている。
●影のデザインはなんのため？
・アニメの影指定はかならずしも「正しい」ことを目指しているわけではなく「伝わること」を目指している。
・なので影はアニメーターによって影指定時に「デザイン」されている。形状の伝達。
・「計算」だけでは「いい絵」にならないのはこのため。「いい絵＝伝わる絵」
●影色の考え方
・影色＝素材感を出すための情報
・環境光＋表面化散乱や透過率によって色が決まる。例：青い空＋赤い血色＝紫っぽい影色
・物質密度が低い＝透過率が高い＝影色が明るい＝やわらかい、薄い、脆い印象 逆もまた真。
●２号影の考え方
・本来、アニメの中での２号影はAO的な使われ方が多い。「影の中の、さらに奥まった部分」の表現
・「より、光源と逆に向いたエリア」ではない。
・法線と光源の内積とは無関係。周囲から遮蔽されているかどうか＝奥ゆきの表現手法
シャドウとシェードの扱い方

47. （本村）
●トゥーン＋セルフシャドウは難しい
・シャドウマップはトゥーンシェーダーに組み込まないと欲しい形にならない。（影が二重になったり、黒くくすんだり）
・GGXRDではマテリアルの仕様的にシェーダーに組み込むことができなかった。なので使ってない。
・UNITYではシェーダーに組み込めた。組み込めたが…！
・うまく組み込めても超限定状況でしかいい感じにならない！（正面に近い角度からライトを当てるなど）
・解像度、深度比較の精度、距離、角度の制限など、まだまだ課題が多い。トゥーンに限らず。
●そもそもシャドウマップの考え方がアニメの影の付け方とマッチしていない。
・シャドウマップは「光源からの投影」
・アニメ風の落ち影の付け方は「環境に対する遮蔽」。アンビエントオクルージョンも含めて「記号化」したもの
・真面目にシャドウマップを使うと上からのライティングが前髪で遮蔽されて顔が真っ暗になる。
・アニメでは、仮に真上にメイン光源があっても、髪の毛の落ち影は記号的に処理されることが多い。ケースバイケースだけど。
・この「ケースバイケース」にただの平行光源からのシャドウマップでは対応しきれない。
シャドウとシェードの扱い方

48. （本村）
実際のアニメでのセルフシャドウの例： (BLAZBLUE CENTRALFICTION ゲーム中の手描きアニメパートより）
シャドウとシェードの扱い方
はたしてこのシーンの光源の向きはどうとらえるべきか？
右上：
額飾りの影から真上光源と推定されるが、顔に落ちる
セルフシャドウは範囲が狭い
左上：
影の分布から、キャラ正面からライティング
されていると推定できる
右下：
だが、同じシーンの背後からのカットでは、背面も
普通に明るい。

49. （本村）
●現時点での解の案
・「キャラクター用と背景用でシャドウマップを使い分けられるようにする」（UNITYさんおねがいします）
・キャラクターのセルフシャドウはほぼカメラ正面からの光源で照らす。見た目的には安定する。
・ただそうすると、地面への落ち影や背景のシャドウなどが全部カメラ依存で伸びてしまう。
・なので、背景は固定光源で別個にシャドウを出せるようにしたい。（アクションゲームなどでは真下に影を落としたい等）
●さらに発展すると
・将来的にはAOをトゥーンシェーダーに直接組み込みたい。が、現時点では技術的にまだ難しい。
・SSAOのざらつきはセル表現とはマッチングが悪い。
シャドウとシェードの扱い方
○実はキャラクター固有シャドウマップ生成はすでになくもない。2015年のUnityBlog「UniqueCharacter Shadows in The Blacksmith」
ただ、いろいろ制限があったり、更新がされておらず最新版ではつかえなかったり…。UNITYさんおねがいします！

50. トゥーンレンダリング開発に当たり、
フォワードレンダリングと
デファードレンダリング、
その違いをどう考えますか？
質問：その５

51. フォワードレンダリングとは、
各オブジェクト/マテリアル単位
で、地道にライティング計算を
積み上げていく方式
Gバッファ
デファードレンダリングとは、
時間がかかるライティング計算
を後回しにするために、まずG
バッファと呼ばれるスクリーン
単位のピクセルデータを事前計
算し、続いてピクセル単位でラ
イティング計算をする方式

52. ＊ShaderFX; Maya Viewport2.0 (Dx11) は Forward Rendering
ShaderFX 書き出される HLSL_5(.fx) は シェーダーコート部分のみ
DX11のコード習得にとても良いのでは（不完全でもある）。
イテレーションが早く、楽しい～ (でも気をつける点も)。
Forward Renderingにも新しい試みがある
GDC 2018 Clustered forward rendering
結論 == Forward Rendering は決して古い方法ではない
dx11Shader
Viewport 2.0 表示はレンダリングも可能
例；RealtimeSSAOの連番書き出し
Render Targets Texture

53. （本村）
●現段階ではフォワード
・ディファードのGバッファの処理などを自分で手軽にいじれるようになれば違ってくるかも。現状では難しい。
・キャラはセル調、背景は美術風など、トゥーン表現は色々な質感表現を併用するので、全部同じディファード処理は難しいかも。
・UE4はディファードだが、アークではエミッシブのなかでトゥーンの計算を全部やっているだけ。まるで活用されていない。
●もしディファードにできるなら
・ディファードの考えかたそのものは面白いし好き。光源がたくさんつかえるのも魅力的ではある。
・もしGバッファの細かい部分まで自分でいじれたら、面白いトゥーンシェーダーができるかも。
・Gバッファは画像なので、法線にブラーをかけてから二値化するとか、いろいろ新しい表現ができるのでは。
・現状は必要なスキルや知識が足りないので手が出ない。もっと簡単にカスタマイズできるようになってくれれば…。
ディファードとフォワード

54. 「トゥーンライン」表現を巡り、
苦労したエピソードはありますか？
質問：その６

56. ＊鋭角処理、手書き感、やってみたい方式
XSI Toon でも鋭角は苦手だが、色々方法があった。
ShaderFXでの２Passの背面法も、描画順序も苦手。
XSI Toon は手書き感もかなり調整項目がたくさんあった。
ShaderFXでは 画面に対してノイズ設定で不均等さ。
ShaderFXでやってみたい方式
せっかくDX11 == ジオメトリシェーダのアウトライン
dx11Shader

57. （本村）
●押し出し型アウトラインでラインが途切れる
・法線が共有されていないとそこでアウトラインが途切れてしまう。
・陰影制御の都合上、ハードエッジ（＝共有されない法線）は使いたい。
●そもそも押し出し型アウトラインを選んだわけ
・リアルタイムに確認、調整ができる
・シェーダー側でいろいろいじれる。強弱、デプスオフセットなど
・頂点カラーで制御しているのも、リアルタイムで調整がきくから、というのが大きい。
・また、最終的には頂点シェーダーで厚みを制御するので、頂点カラーが一番ロスが少ない。
●押し出し型アウトラインを使う上での小技（GGXrdでの実例）
・UNREALエンジンにメッシュをインポートする際に自動計算法線を新たに作ってタンジェントに格納。
（エンジンの改造が必要）
・ハードエッジによるアウトラインの「割れ」や、法線編集によって細くなってしまうのを修正。
・タンジェントに入れるのはボーンによる変形に追従させるため。
・これをやるとノーマルマップが使えなくなるが、もともと使ってないので問題ない。
・UNITYでもこれできるようにできないか？改造が必要？
トゥーンラインで苦労したこと
スムースエッジ
ハードエッジ
理想

58. ●アウトラインの重要性
・単に「アニメっぽい」からという理由でやっているわけではない。
・なぜ、アウトラインが必要なのか、有用なのかを考え、「機能」としての必然性で入れている。
・人間の目と脳に備わっている視覚言語プロトコルに強く作用する効果がある。
・最終的には「視認性」の確保のため。スポーツ新聞の見出しと同じ。
（本村） トゥーンラインで苦労したこと
アウトラインありアウトラインなし

59. UTS v2.0.4
UTS Edge Detection ON / Post Effect UTS Edge Detection OFF
新開発のソーベルカラー
フィルタより、セル画時
代の色トレス風の表現を
実現しました。

60. UTS v2.0.4
UTS Edge Detection ON / Post Effect UTS Edge Detection OFF
ソーベルカラーフィルタは
イラスト風のセッティング
の時に、特に効果を発揮す
る。
キャラのみにかける場合を
考慮して、ポストエフェク
トマスクツールも付属して
いる。

61. トゥーンシェーダーの
海外での評価や人気について、
どう思いますか？
質問：その７

62. （本村）
●アニメ表現はボーダーレス
・海外でもアニメの絵柄、表現は一般的になってきている。
・日本人よりもうまいアニメ絵のファンアートを描く人も出てきてる。
・もはや一部の「オタク」的なモノではなくなっている。
・若い層はみんな「ドラゴンボール」とかの再放送を見て育っている。
・感性に違いはない。同じものに感動し、同じものに燃えて、同じものに萌えている。
●ニーズは強い
・特にゲーム界隈では、日本のアニメ、ゲームで育ってきた層から強いニーズがある。
・「ギルティみたいな表現で○○をやってくれ！」という要望は発売以来ずっとある。
・だからといってトゥーン表現にしただけで「売れる」わけではない。
・写実的な表現も人気だし、「トゥーンは不利ではない」という段階。
・最終的には内容とプロモーション次第。
トゥーンシェーダーの海外での評価

63. ＊NPR (トゥーンシェーダ) の必要性と需要
・所謂ハリウッド映画；原作コミックスも超リアルなムービー
CG技術もリアルを求めた結果
・日本のアニメやゲーム；原作漫画ならそのままの画像で動かす動画
NPR表現を求めて ToonShaderを重視する
トゥーン的な画像を現す英語もたくさん、NPRだからか
Anime, Manga (Wikipedia) / Motion Comics (Animated Comic)
Cel Shader / Cartoon Rendering
Manga Style Shaders / Manga ink shader / Japanese Brash (Sumi-E)
海外でのアニメ的な表現の作品
・ObanStarRacers https://obanstarracers.com/
フランス；パリ Sav! The World https://savtheworld.com/
・RWBY http://rwby.jp/ WEBアニメシリーズ
アメリカ；テキサス Rooster Teeth Productions https://roosterteeth.com/
・絵本的表現 2018/1/29 'Via' https://www.blue-zoo.co.uk/feed/via-animated-
short/
イギリス；ロンドン BLUE ZOO https://www.blue-zoo.co.uk/
NPR http://www.red3d.com/cwr/npr/

64. 将来のトゥーンシェーダー向けに
今、期待している技術はありますか？
質問：その８

65. （本村）
●技術：リアルタイムレイトレーシング
・セルフシャドウ、アンビエントオクルージョンなどの特効薬になるか否か。
・どこまで制御できるか
●技術：写実→背景美術の変換
・トゥーンキャラにマッチする背景が必要。
・すでにオフラインではかなり絵画的な変換が可能。リアルタイムにできるようになるのは時間の問題ではないか。
・写実的なゲーム背景→トゥーン用ゲーム背景が可能になる。
●活用法：バーチャルアバター
・Vtuberなどですでに活用されているが、もっといろいろな分野に広まると思う。
・現実とは違う表現で不気味の谷を避けて魅力的な表現を行っている＝トゥーンシェーダーの出番
・バーチャルアバターによるライブドラマ（演劇）などのエンターテインメントもいろいろ考えられる
●活用法：（予想）AI、ARとの連携
・HMDの視界に映った人間が自動的にバーチャルアバターに置き換わるとかすぐできそう。もうあるかも。
・現実の風景も絵画調に変換。言葉通り「アニメの世界」に入れるようになるかも。
・既存のエンターテインメントをエンハンスして楽しむような使い方も考えられる。
・実写スポーツ映像を元に、キャラ、背景を置き換えて、エフェクトやSEを追加して、超人スポーツに変換！とか。
将来のトゥーンシェーダー向けに期待している技術

66. ＊DX12 DXR (リアルタイム)、Arnold Toon (レンダリング)
・DirectX 12；リアルタイムのRaytracingの描画方法
・画面外からの影や映り込み表現
・間接光表現
DX12 == リアルタイム トゥーンシェーダーに生かせる技術として注目したい
・Arnold Toon；新しいバージョンに Shaders > Surface > Toon の項目あり
・輪郭線の表現がかなりある Edge Tonemap / Difference / Mask / Threshold
・色表現も表現がかなりある Tonemap / AO / Flat / Ndoteye
Arnold == 新しいレンダラーの新しいトゥーンレンダリングとして注目したい

67. トゥーンシェーダーの開発にあたって
一番大切なものはなんでしょうか？
質問：その９

68. （本村）
●トライアンドエラーと改善
・現状に満足せずに、常によりよい表現を模索する
・与えられた条件に安住せずに、あらゆる手段で改善案を模索する
●結論：今後のトゥーンシェーダーについて
・写実的な表現は海外を中心に学術的に研究され、付け入るスキが少ないと感じている。
・反面、トゥーンシェーダーはまだまだ全く研究が進んでおらず、いくらでも表現や技法の面で発展の余地がある。
・「枯れた技術」だなんてとんでもない。今後も新しい表現や技法が次々と発見されていくと思う。
・ゲームのグラフィックは昔は日進月歩だったが、リアルな表現ができるようになってからは驚きが減っているように感じる。
・トゥーン表現の発達は昔の日進月歩の時代のワクワク感を取り戻させてくれるのではないか。
・楽しみにしています。（自分もがんばります）
●結論の結論
・でも結局はトゥーンシェーダーだけ頑張っても仕方がなくて、ゲームや映像などの作品としての総合力が問われる。
・グラフィックだけ良くても作品が面白くなければ意味がない。
・そのためには作品にマッチしたグラフィックをチョイスする必要がある。
・さらに、グラフィック以外の部分との協調、協力、提案を通じて作品そのものを底上げしていくことを心掛けるのが重要。
トゥーンシェーダーの開発にあたって一番大切なもの

69. ＊こだわり (フェチズム++で)、作品にあったトゥーンシェーダー(機能限定で)
・キャラクターは画像でも決まる
・そこにどんな こだわり の表現を付けるか 特徴＝個性
・触れば触る程どんどん良くなる（制限無いいじれてしまうので注意）
・トゥーンシェーダーは作品に必要な機能だけにする
・かっこ良くオールインワンを目指さない
・手を抜くところと絶対外せない処理を見極める
・使い方でトゥーンシェーダーの仕様を分ける
■ 作例；今回のリアルタイムトゥーンシェーダーのダンスシーン
・トゥーンシェーダー仕様
・基本的に前から見るシェーダー (後ろから見ない)
・ライトは固定 (変化もしない)
・複数のカメラ、動かない (カット割しかない)
では、その RealtimeToon をキャプチャーした動画を再生してみたいな, いい？
>> Nayu_ShaderFX_CRSs.mp4

71. ・トゥーン表現、セル表現が好きな方、格闘ゲーム、アクションゲームが好きな方
・モデラー、アニメーター、背景、エフェクト、UI、プログラマー、ゲームデザインなど
全職種、常に絶賛募集中です！
・興味のある方は→
http://www.arcsystemworks.jp/official/company/career_join/
開発スタッフ絶賛募集してます！
（本村） お知らせ
アークシステムワークス

72. ■ おしらせ
こだわりや熱量は、それを手に取るユーザーに伝わります。
ヘキサドライブ では、「面白いゲームを届けたい！」
熱い気持ちを人一倍持った方を求めています。
有名IPや憧れだったゲームの受託開発からオリジナルゲームの開発まで、
幅広く様々なコンテンツ制作を行っています。
詳しくは 是非、リクルート のページをご覧ください。
>> https://hexadrive.jp/recruit/
新卒採用、キャリア採用、共にご応募お待ちしております。

73. Thank you!
ご静聴ありがとうございました