1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
3<!-- InstanceBegin template="/Templates/default_template.dwt" codeOutsideHTMLIsLocked="false" -->
4<head>
5<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6<meta http-equiv="Content-Style-Type" content="text/css" />
7<!-- InstanceBeginEditable name="CSS の相対パス指定" -->
8<link href="../../../../common/manual.css" rel="stylesheet" type="text/css" />
9<script type="text/javascript" src="../../../../common/ibox.js"></script>
10<!-- InstanceEndEditable -->
11<!-- InstanceBeginEditable name="ページのタイトル" -->
12<title>material_toon</title>
13<!-- InstanceEndEditable -->
14</head>
15<body>
16<div>
17  <div class="body"> <!-- InstanceBeginEditable name="本文のタイトル" -->
18    <h1>MaterialToon</h1>
19    <!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="本文" -->
20    <p>MaterialToon はアニメ調の TOON シェーダー表現です。</p>
21    <p>RGB の参照テーブルを階段状に描くことでこのような表現が可能です。</p>
22    <p>ここでは、マテリアルサンプル MaterialToon の設定について説明します。</p>
23    <img src="assets/chess03.png" alt="toon_chess画像"/>
24    <h2>マテリアルの設定</h2>
25    <p>CreativeStudio のコンテンツパネルに表示されている toon_mat をクリックしてマテリアルパネルを開きます。</p>
26    <h3>全般</h3>
27    <p>マテリアルパネルの「全般タブ」を確認します。</p>
28    <p>ライティングの設定が「フラグメントライティング」になっています。</p>
29    <p>これは MaterialToon の参照テーブルがフラグメントライトで行われていることを意味します。</p>
30    <img src="assets/toon_chess02.png" alt="toon_chess画像02"/>
31    <p class="new_hint">補足：<br />
32      ライティングは使用するライトに合わせて変更する必要があります。</p>
33    <h3>カラーの設定</h3>
34    <p> MaterialToon では参照テーブルでスペキュラーの色を指定しますので、カラーの設定は行いません。</p>
35    <!-- <img src="assets/toon_chess03.png" alt="toon_chess画像03"/> -->
36    <h3>フラグメントの設定</h3>
37    <p>マテリアルパネルの「フラグメントタブ」を確認します。</p>
38    <p>MaterialToon のレイヤーコンフィグは「コンフィグレーションタイプ 0」です。</p>
39    <img src="assets/toon_chess04.png" alt="toon_chess画像04"/>
40    <p>レイヤーコンフィグの詳細は、<a href="../../../../user_guide/material/layer_configuration/index.html">こちら</a>を参照してください。 </p>
41    <h4>参照テーブルの確認</h4>
42    <p>参照テーブルでは、「参照テーブルセット」と「参照テーブルで使用されている要素」を確認します。</p>
43    <h5>参照テーブルセット</h5>
44    <p>MaterialToon は、参照テーブルセットに LookupTableSetContentCtr0 が選択されています。</p>
45    <img src="assets/toon_chess05.png" alt="toon_chess画像05"/>
46    <p class="new_hint">補足：<br />
47      参照テーブルセットは、作成した参照テーブルをまとめて管理しています。<br />
48      CreativeStudio のコンテンツパネルに表示されている LookupTableSetContentCtr0 をクリックすると参照テーブルセットパネルが表示され、管理されている参照テーブルが確認できます。</p>
49    <h5>参照テーブルの要素</h5>
50    <p>MaterialToon では 反射 R の設定のみ有効で 反射 G や 反射 B は使用しない設定になっています。</p>
51    <img src="assets/toon_chess06.png" alt="toon_chess画像06"/>
52    <p class="new_hint">補足：<br />
53      設定した参照テーブルで使用されている要素は、赤枠で囲まれて表示されます。</p>
54    <p>参照テーブルの要素についての詳細は、<a href="../../../../user_guide/material/lookup_tables/index.html">こちら</a>を参照してください。</p>
55    <h5>入力角を確認</h5>
56    <p>MaterialToon では  NH を使用しています。</p>
57    <img src="assets/toon_chess07.png" alt="toon_chess画像07"/>
58    <p class="new_hint">補足：<br />
59      入力角 NH はライトと視点の影響を受ける光です。主にスペキュラー表現として使用します。</p>
60    <p>入力角の種類については、<a href="../../../../user_guide/material/lookup_tables/index.html#input_angle">こちら</a>を参照してください。</p>
61    <h5>テクスチャコンバイナの設定を確認</h5>
62    <p>MaterialToon ではコンバイナ 0 のカラーを設定しています。</p>
63    <img src="assets/toon_chess09.png" alt="toon_chess画像09"/>
64    <table>
65      <thead>
66        <tr>
67          <th>設定項目</th>
68          <th>設定</th>
69        </tr>
70      </thead>
71      <tbody>
72        <tr>
73          <th>計算式</th>
74          <td>A</td>
75        </tr>
76        <tr>
77          <th>A : ソース 0</th>
78          <td>セカンダリカラー</td>
79        </tr>
80      </tbody>
81    </table>
82    <p>この設定は、セカンダリカラーをそのまま使うことを意味します。</p>
83    <p class="new_hint">補足：<br />
84      ソース 1 と ソース 2 に頂点シェーダーの出力結果が入っていますが「計算式で使用されていません」ので、モデルに対して何も影響を与えません。</p>
85    <h2>参照テーブルの確認</h2>
86    <p>MaterialToon で実際に使用されている参照テーブルをカーブエディタパネルで確認します。</p>
87    <p>CreativeStudio のコンテンツパネルにある LookupTableSetContentCtr0 を選択します。</p>
88    <p>上記状態で、メニュー [ウィンドウ]→[カーブエディタ] を選択してカーブエディタパネルを開きます。</p>
89    <!-- <a href="assets/toon_chess10.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/toon_chess10.png" alt="toon_chess画像10"/></a>-->
90    <ul>
91      <li>横軸 : 入力角の要素同士が作る角度で 0 → 1 ( 90 度 → 0 度 ) の変化になります。</li>
92      <li>縦軸 : 色 ( 光 ) の強さです。</li>
93    </ul>
94    <h3>toon_reflectance の設定</h3>
95    <p>カーブエディタパネルに表示されている toon_reflectance を選択してカーブを確認します。</p>
96    <a href="assets/toon_chess11.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/toon_chess11.png" alt="toon_chess画像10"/></a>
97    <p>階段状のカーブで TOON のような段階的な影を表現しています。</p>
98    <!-- InstanceEndEditable --> </div>
99  <div class="footer" />
100</div>
101</body>
102<!-- InstanceEnd -->
103</html>
104