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>参照テーブルを使ったマテリアルの表現方法</title> 13<!-- InstanceEndEditable --> 14</head> 15<body> 16<div> 17 <div class="body"> <!-- InstanceBeginEditable name="本文のタイトル" --> 18 <h1>サンプルデータ Pierrot のLUT の解説</h1> 19 <!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="本文" --> 20 <p>ここでは、サンプルデータ 21 Pierrot を使用して参照テーブルの設定方法を説明します。 22 <h2>サンプルデータの読み込み</h2> 23 <p>CreativeStudio のメニュー [ファイル]→[開く]→[中間ファイル] から以下の場所にある Pierrot.cmdl を読み込みます。</p> 24 <p>NW4C_ROOT%/SampleData/Graphics/Intermediate/ManualResource/TutorialToyPierrot/Pierrot.cmdl</p> 25 <p>図 1. サンプルデータ Pierrot</p> 26 <img src="assets/lookup_table_00.png" alt="" width="800" height="452" /> 27 <h3>サンプルデータの確認</h3> 28 <p>Pierrot.cmdl を読み込むと CreativeStudio に以下のコンテンツが読み込まれます。</p> 29 <p>図 2. Pierrot コンテンツパネル</p> 30 <img src="assets/lookup_table_01.png" alt="" width="221" height="425" /> 31 <p>モデル ( toy_pierrot ) 以下に 5 つのマテリアルがありますが、ここではマテリアル「PierrotClothMat」の LUT の設定を説明します。</p> 32 <p>まずは参照テーブル（＝ LUT）「PierrotClothMat」の設定をわかりやすくするために他のメッシュを隠します。</p> 33 <p>コンテンツパネルで toy_pierrot を選択してモデルパネルを開きます。プロパティのメッシュ欄のリストの「PierrotClothMat」以外のチェックを外します。</p> 34 <p>図 3. 「シェイプノード toy_pierrot のメッシュ一覧」</p> 35 <img src="assets/lookup_table_02.png" alt="" width="360" height="242" /> 36 <p>プレビューパネルをみると帽子と服以外のメッシュが隠され、PierrotClothMat の設定されているメッシュが分かりました。</p> 37 <p>図 4. 「メッシュ PierrotClothMat のみのプレビュー」</p> 38 <img src="assets/lookup_table_03.png" alt="" width="500" height="550" /> 39 <p>それではこのメッシュに設定されている参照テーブルについて解説していきます。<br /> 40 </p> 41 <h3>PierrotClothMat のセカンダリ設定の確認</h3> 42 <p class="new_hint">ここでは標準モードの画面で説明をしていきます。参照テーブルの設定をする際には主に「フラグメント」と「カラー」のタブを使っていきます。</p> 43 <p>図 5. 「マテリアルプロパティの標準UI」</p> 44 <img src="assets/lookup_table_04.png" alt="" width="400" height="137" /> 45 <p>まずは、ツリービュー内の「PierrotClothMat」を選択し、プロパティで「フラグメント」のタグを選択します。</p> 46 <h4>テクスチャコンバイナの確認</h4> 47 <p>参照テーブルで設定したものは、テクスチャコンバイナでは「セカンダリカラー」として使用します。ここでは PierrotClothMat の参照テーブルの設定だけを見ていきたいので、現状のコンバイナ設定を残したまま、コンバイナを 1 段追加し、計算式を A 、ソース 0 に「セカンダリカラー」と設定してください。</p> 48 <p>図 6. 「テクスチャコンバイナを1段追加」</p> 49 <img src="assets/lookup_table_05.png" alt="" width="358" height="555" /> 50 <p class="new_hint">今までの設定を残しつつ実験的にコンバイナ式の確認をしたいときにお勧めです。確認できたらはあとは削除するだけでよいので便利だと思います。</p> 51 <p>プレビューパネル上の PierrotClothMat は以下のようになりました。</p> 52 <p>図 7. 「セカンダリのみのプレビュー」</p> 53 <img src="assets/lookup_table_06.png" alt="" width="500" height="550" /> 54 <p>参照テーブルを使って表現している部分がわかりました。黒い部分は光が当たっていないことを意味します。<br /> 55 </p> 56 <h4>レイヤーコンフィグの確認</h4> 57 <p>次にレイヤーコンフィグを見ていきます。</p> 58 <p class="new_hint">その他レイヤーコンフィグの組み合わせについては～～を参考にしてください。</p> 59 <p>レイヤーコンフィグ 0 では、「スポット」「分布 0」と、「反射 R（グレースケール）」が使えます。アクティブな要素については水色の表示になりますが、反射Rだけは表示が変わりません。注意してください。（※UI修正の可能性高）</p> 60 <p>図 8. 「アクティブな参照テーブル」</p> 61 <img src="assets/lookup_table_07.png" alt="" width="358" height="144" /> 62 <p>「スポット」がアクティブになっているマテリアルはスポットライトの影響を受けることができます。スポットライトも参照テーブルを使用するため、その参照テーブルをマテリアル側から「スポット」で予約しています。</p> 63 <p class="new_hint">このサンプル内ではスポットライトの使用はしていません。<br /> 64 </p> 65 <p>図 9. 「使用されている要素」</p> 66 <img src="assets/lookup_table_08.png" alt="" width="358" height="475" /> 67 <p>要素「分布 0」と「反射 R」「反射 G」「反射 B」が赤枠で囲まれています。これは「これらの要素が今セカンダリの表現に使われています」という意味になります。</p> 68 <p class="new_hint">レイヤーコンフィグ 0 では反射 R しか使用できませんので、反射 G と反射 B は反射 R のカーブが適用されます。よって反射カラーの表現はグレースケールに限定されます。<br /> 69 </p> 70 <h2>PierrotClothMat の参照テーブル設定の詳細</h2> 71 <p>個々の参照テーブルの設定を見ていきます。<br /> 72 </p> 73 <h3>分布 0 の参照テーブルについて</h3> 74 <h4>分布 0 のプレビュー</h4> 75 <p>分布0の設定だけを見ていきたいので、参照テーブルの項目内の反射の項目の赤枠内をクリックし、反射の項目をすべて非アクティブにします。</p> 76 <p>図 10. 「反射の要素を非アクティブに」</p> 77 <img src="assets/lookup_table_09.png" alt="" width="358" height="475" /> 78 <p class="new_hint">「反射 R」「反射 G」「反射 B」のうちどれか 1 つをクリックするだけで 3 つの項目すべてが非アクティブになります。</p> 79 <p>図 11. 「分布 0 の参照テーブルのみのプレビュー」</p> 80 <img src="assets/lookup_table_10.png" alt="" width="500" height="550" /> 81 <p>分布 0 ではモデルのキワに入る赤いハイライトを表現しているのことがわかります。</p> 82 <h4>分布 0 の色</h4> 83 <p>分布 0 の指定はプロパティの「カラー」タブ内のスペキュラー 0 で行っています。</p> 84 <p>カラーのタブを選択します。</p> 85 <p>図 12. 「カラーのタブを選択」</p> 86 <img src="assets/lookup_table_11.png" alt="" width="400" height="137" /> 87 <p>スペキュラー 0 の色を確認します。</p> 88 <p>図 13. 「スペキュラー 0 の確認」</p> 89 <img src="assets/lookup_table_12.png" alt="" width="380" height="610" /> 90 <p>「フラグメント」のタブに移動します。</p> 91 <p>図 14. 「フラグメントのタブを選択」</p> 92 <img src="assets/lookup_table_13.png" alt="" width="400" height="137" /> 93 <p>今度はさらに分布 0 の赤枠内をクリックし非アクティブにします。</p> 94 <p>図 15. 「分布 0 を非アクティブに」</p> 95 <img src="assets/lookup_table_14.png" alt="" width="358" height="475" /> 96 <p>この状態でプレビューを見てみます。</p> 97 <p>図 16. 「分布 0 を非アクティブにした状態でのプレビュー」</p> 98 <img src="assets/lookup_table_15.png" alt="" width="500" height="550" /> 99 <p>スペキュラー 0 の設定色でメッシュ全体が塗りつぶされました。</p> 100 <p class="new_hint">スペキュラー 0 の色（光）の分布が分布 0 の参照テーブルの影響を受けないため、スペキュラー 0 の設定色がすべての場所に 100% で適応されています。</p> 101 <h4>分布 0 の参照テーブル</h4> 102 <p>フラグメントのタブの分布 0 を再びアクティブにします。</p> 103 <p>図 17. 「分布 0 の要素をアクティブに」</p> 104 <img src="assets/lookup_table_16.png" alt="" width="358" height="475" /> 105 <p>分布 0 は「SpeculatLut_4」という参照テーブルを使用しています。</p> 106 <p>次に SpeculatLut_4 のデータを見ていきます。ツリービューに紫に黄色のカーブの入ったアイコン横に Pierrot_lut とあります。</p> 107 <p>図 18. 「参照テーブルセット Pierrot_lut」</p> 108 <img src="assets/lookup_table_17.png" alt="" width="220" height="431" /> 109 <p>これが「参照テーブルセット」と呼ばれるもので、参照テーブルというカーブデータをまとめて管理しています。プロパティをみてみると、このシーン全体で使用している参照テーブルが一覧できます。</p> 110 <p>図 19. 「参照テーブルセット Pierrot_lut のプロパティ」</p> 111 <img src="assets/lookup_table_18.png" alt="" width="400" height="437" /> 112 <p class="new_hint">このページで紹介している PierrotClothMat で使用しているカーブは上記赤枠で囲んだ 2 本になります。</p> 113 <h4>カーブエディタでの確認</h4> 114 <p>ツリービュー内で参照テーブルセット「Pierrot_lut」を選択した状態でカーブエディタを開きます。</p> 115 <p>図 20. 「参照テーブルセット Pierrot_lut のプロパティ」</p> 116 <img src="assets/lookup_table_19.png" alt="" width="340" height="520" /> 117 <p>Pierrot_lut 左横の三角形アイコンをクリックしリストを開きます。ツリー内の SpeculatLut_4 のカーブを選択すると右側にカーブが表示されます。表示されるカーブが見づらい時はグラフ内をクリック、グラフ編集をアクティブにし、「W」キーを押します。</p> 118 <p class="new_hint">その他詳しいカーブエディタの使い方については～を参考にしてください。</p> 119 <p>図 21. 「SpecularLut_4 のカーブ」</p> 120 <img src="assets/lookup_table_20.png" alt="" width="1080" height="520" /> 121 <p>SpecularLut_4 のカーブは横軸の 0 ～ 1 にきれいに収まっています。CreativeStudio ではこの 0 ～ 1 の範囲で入力角の指定を行います（正確には -1 ～ 0 もあります）。</p> 122 <p class="new_hint">入力角は光のあたる方をを 1、当たらない方を 0 と考えるとイメージしやすいと思います（ -1 ～ 0 の範囲は光の当たらない裏側となります）。</p> 123 <p>次に SpeculatLut_4 のカーブを見ていきます。0 の時の値が高く、1 の時の値が低くなっています。</p> 124 <p class="new_hint">参照カーブにより明るいところが暗く、暗いところを明るくしている、と考えてください。</p> 125 <p class="new_hint">カーブエディタの縦軸は光の強さで、こちらも 0 ～ 1 になります。その他カーブの編集等詳しいことは～を参考にしてください。</p> 126 <p>ところでどこが明るくなるところなの？については次の項目で説明します。</p> 127 <h4> 128 </p> 129 分布 0 と入力角 NV</h4> 130 <p>参照テーブルのカーブを調整することによって、明るい～暗いの分布を自由に設定できることが分かりました。しかし、これだけでは参照テーブルで指定する前段階での明るい～暗いが何を基準にしているのかが不明瞭です。そこで出てくるのが「入力角の要素」です。</p> 131 <p>図 22. 「入力角の指定」</p> 132 <img src="assets/lookup_table_21.png" alt="" width="358" height="475" /> 133 <p>「NV」というのが SpecularLut_4 が参照している入力角の要素です。</p> 134 <p class="new_hint">N は Normal の略でモデルの法線、V は View の略で視線（カメラから画面奥に向かう矢印）を表しています。NV というのはこのNとVの線分がなす角度です。</p> 135 <p>一般的にモデルは正面から照らされたときがより明るくなります。入力角も同じことが言えて、ここでは N と V の角度が正対＝角度0 になっているとき一番明るく、明るいので入力角も最大の 1 となります。この NV で指定される陰影をベースに、先ほど見た参照テーブル SpecularLut_4 を使うことで明るいところを暗く、暗いところを明るくしています。</p> 136 <h4>NV のプレビュー</h4> 137 <p>上記を踏まえもう一度プレビューウィンドウ上のモデルをみてみます。</p> 138 <p>図 23. 「NV のプレビュー」</p> 139 <img src="assets/lookup_table_22.png" alt="" width="500" height="550" /> 140 <p>カメラの正面方向を向いていそうな法線は暗く、カメラの正面方向を向かなくなればなるほど、スペキュラー 0 の色が際立ってきているのがわかると思います。</p> 141 <p class="new_hint">NV を使ってモデルの淵の光を際立たせる効果は、リムライトやフレネル反射の疑似的な表現としても効果的だと思います。 </p> 142 <h4>分布0のまとめ</h4> 143 <p>分布 0 の参照テーブルは入力角 NV を使っています。NV では本来、カメラの正面方向を見る法線は入力角 1 で明るく、カメラから見た法線の角度が広がり入力角が 0 に近づくにつれ暗くなる表現ですが、これを参照テーブルを使うことにより明暗を逆転させています。<br /> 144 </p> 145 <h3>反射 R の参照テーブルについて</h3> 146 <p>反射テーブルRGBの役割は光の強弱を色に置き換えることです。しかし、レイヤーコンフィグ 0 では反射は R しか使えません。反射 G と B には反射 R のテーブルが自動的に適用されるため、反射 R の表現する色はグレースケールです。よって、反射 R のみの表現としては分布テーブル 1 本と役割は同じです。ただ、反射 R は分布テーブルとは設定が少しだけ違います。</p> 147 <h4>反射 R のプレビュー</h4> 148 <p>「フラグメント」タブ内、参照テーブルの項目内の「反射」の要素を再びアクティブにします。</p> 149 <p>図 24. 「反射の要素をアクティブに」</p> 150 <img src="assets/lookup_table_23.png" alt="" width="358" height="475" /> 151 <p>プレビューを見てみます。</p> 152 <p>図 25. 「分布 0 に反射 R を追加したプレビュー」</p> 153 <img src="assets/lookup_table_24.png" alt="" width="500" height="550" /> 154 <p>グレーのハイライト部分が足されました。足された部分が反射 R の参照テーブルで設定された部分です。</p> 155 <p>ここで、反射 R のみのプレビューも見たいと思うので、「カラー」タブに移動し、スペキュラー 0 の色をすべて 0 にしてください。</p> 156 <p>図 26. 「スペキュラー 0 の色を 0 に」</p> 157 <img src="assets/lookup_table_25.png" alt="" width="380" height="610" /> 158 <p>スペキュラー 0 の色が乗らなくなりますので、反射 R のみの表現を見ることができます。</p> 159 <p>図 27. 「反射 R のみのプレビュー」</p> 160 <img src="assets/lookup_table_26.png" alt="" width="500" height="550" /> 161 <h4>反射 R の色</h4> 162 <p>分布テーブル 0 と 1 は元からグレースケールなので、カラータブ内のスペキュラー 0 と 1 で色を指定する仕組みがあります。一方、反射テーブルは 3 本のカーブを RGB に見立て、光の分布を色に変えることができるため分布テーブルのようにカラーを設定する口が用意されていません。</p> 163 <p class="new_hint">反射 R をコンバイナ内でコンスタントカラー等とかけ合わせることで反射 R をカラーにすることは可能です。しかしその際には、分布 0 や 1 で作るハイライトに色が付いていないかの確認は必要です。コンバイナ内ではすべての参照テーブルをまとめて「セカンダリカラー」として扱われるためです。</p> 164 <h4>カーブエディタでの確認</h4> 165 <p>フラグメントライティングの項目内の参照テーブルの欄をみると、反射 R は SpecularLut_3 という参照テーブルを参照しています。</p> 166 <p>図 28. 「反射 R の使用している参照テーブル」</p> 167 <img src="assets/lookup_table_27.png" alt="" width="358" height="475" /> 168 <p>ツリービューの Pierrot_lut を選択してカーブエディタを開き、SpecularLut_3 のカーブを表示します。</p> 169 <p>図 29. 「SpecularLut_3 のカーブ」</p> 170 <img src="assets/lookup_table_28.png" alt="" width="1080" height="520" /> 171 <p>先ほどの 分布 0 で見たカーブと違い、このカーブは右上がりに、光の強さは入力角 1 の時 0.4 なので、明るいところを明るく照らすが、光の強さはそれほど強くなさそう、というのがわかります。</p> 172 <p>ここで、試しにカーブの右端のキーの値を 1.0 上にしてみます。</p> 173 <p>図 30. 「SpecularLut_3 のカーブ調整後のプレビュー」</p> 174 <img src="assets/lookup_table_29.png" alt="" width="500" height="550" /> 175 <p>グレーの弱いハイライトが白くくっきりになりました。</p> 176 <p class="new_hint">カーブの編集中にまれに意図しないシェーディングの変化をしたり、修正の影響が現れなくなることがあります。そのときは一旦カーブエディタを閉じて開きなおして修正を再開してください。</p> 177 <h4>反射 R と入力角 NH</h4> 178 <p>フラグメントライティングの項目内の参照テーブルの欄をみると、反射 R の入力角は NH となっています。</p> 179 <p>図 31. 「反射 R の入力角」</p> 180 <img src="assets/lookup_table_30.png" alt="" width="358" height="475" /> 181 <p>N は先ほども説明した Normal の略でモデルの法線です。 </p> 182 <h4>ハーフベクトル H と入力角 NH </h4> 183 <p>H はハーフベクトルの略で、ライトと V（カメラ）の２つの中間を表す線分です。よって、入力角 NH はモデルの法線とライト、カメラの関係です。</p> 184 <p>入力角 NH は NV の時と同じく、 H がモデルの法線 N を照らしていると仮定します。そうすると、2 つの線分のなす角が 0 に近づくにつれ明るくなるので、入力角は最大の 1 に近づき、 NH の角度が広がるにつれ暗くなるので、入力角は最低の 0 に近づきます。</p> 185 <h4>NH の表現しているもの</h4> 186 <p class="new_hint">NH の線分が一致する時「<strong>一番明るく</strong>」なり、このとき、モデルの法線 N を中心にしてカメラとライトの線分が「<strong>対象</strong>」になります。H がライトとカメラの中間点であるためです。</p> 187 <p class="new_hint">一般的にハイライトとかスペキュラーと呼ばれる「<strong>強い光</strong>」がモデルに当たると、その光は法線に対して「<strong>対象</strong>」となる角度に反射し、これを正面から見たときに「<strong>一番まぶしく</strong>」感じます。</p> 188 <p>これら ２ つの条件を合わせた考え方が NH です。入力角は 2 つの線分のなす角度のことですので、法線とライトとカメラの 3 つの線分の関係をハーフベクトルを使い、2 つにまとめています。</p> 189 <p>そして、NH が表現しているものですが、後者ハイライトやスペキュラーと呼ばれる強い光のことです。この強い光を CreativeStudio のマニュアルや CTR グラフィックス入門では「スペキュラー」と呼んでいます。</p> 190 <h4>反射 R のまとめ</h4> 191 <p>反射 R の色はグレースケールで、入力角は NH を使っており、これにより強い光「スペキュラー」効果を表現しています。また、H はライトとカメラの中間の線分であるため、スペキュラーの乗り方は、ライト、カメラ、そして法線の影響をうけて変化します。</p> 192 <h3>分布 0 と反射 R のテーブルの関係</h3> 193 <p>最後に 2 種類の参照テーブルを使って作られた表現が「セカンダリカラー」としてまとめられる段階でどのような計算をされるかについて紹介します。詳細は省きますが、分布 0 と反射 R は足し算されています。</p> 194 <p class="new_hint"> 詳しくは、CTR グラフィック入門を参考にしてください。</p> 195 <h2>参照テーブルのマテリアル設定における役割</h2> 196 <p>参照テーブルを使ったセカンダリカラーの表現はモデルの質感をワンランク上げるためにとても大切な要素ですので、最後に簡単な比較画像を用意しました。</p> 197 <p>図 32. 「セカンダリの明るさを変えた例 1」</p> 198 <img src="assets/lookup_table_31.png" alt="" width="500" height="550" /> 199 <p>単体で見ると、右も悪くないと思うかもしれないですが、それではすべてのモデルを表示してみましょう。</p> 200 <p>図 33. 「セカンダリの明るさを変えた例 2」 </p> 201 <img src="assets/lookup_table_32.png" alt="" width="1043" height="513" /> 202 <h2>最後に</h2> 203 <p>PierrotClothMat を使った参照テーブルの説明はこれで終わりですが、カーブエディタで参照カーブをもっと大胆に変化させたり、他の入力角を使ってみても面白い表現が可能です。また、コンバイナ設定や法線マップ、さまざまなライティング方法を駆使することで、参照テーブルだけに頼らなくても非常に豊かな質感表現が可能です。</p> 204 <p>このページで使用している toy_pierrot のシーンはそれらさまざまな要素を詰め込んでいますので、参照テーブルだけでなく、他の部分もいろいろ分析してみると次につながる発見があると思っています。</p> 205 <p> </p> 206 <!-- InstanceEndEditable --> </div> 207 <div class="footer" /> 208</div> 209</body> 210<!-- InstanceEnd --> 211</html> 212
