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<!-- InstanceEndEditable --> 10<!-- InstanceBeginEditable name="ページのタイトル" --> 11<title>頂点ライティング</title> 12<!-- InstanceEndEditable --> 13</head> 14<body> 15<div> 16 <div class="body"> <!-- InstanceBeginEditable name="本文のタイトル" --> 17 <h1>頂点ライティング</h1> 18 <!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="本文" --> 19 <p>ここでは、頂点ライティングについて説明します。</p> 20 <p>頂点ライティングに使用する計算式や、ライティング結果が出力されるまでの流れについては、別途用意されている「CTR-グラフィックス入門」を参照してください。</p> 21 <h2>頂点ライティングとは</h2> 22 <p>頂点ライティングとは頂点単位でライティングの計算を行う処理のことです。</p> 23 <p>光源の位置や色、頂点の位置などから、各頂点のカラー値(RGB)を計算した後、頂点間でカラー値を補間します。</p> 24 <p>以下の図は、頂点シェーダーで、頂点単位に陰影をつけたイメージです。</p> 25 <img class="user_guide_chart" src="assets/material_pipeline_rasterize.png" alt="ラスタライズ処理"/> 26 27<!-- 28 <p class="new_hint">補足:<br /> 29 頂点ライトは、フラグメントライトと違い以下の設定ができます。<br /> 30 1. RGBA 値にマイナスの設定ができます。<br /> 31 (例)頂点カラーや半球ライトで設定された色を「頂点ライト」でマイナスすることができます。<br /> 32 2. アルファライティングが使えます。<br /> 33 (例)ライトが当たるところをアルファで抜けるような表現を設定できます。<br /> 34 詳細は、<a href="../default_shader/index.html">こちら</a>を参照してください。</p> 35--> 36 <!-- 37 38 <p>以下の図は、頂点処理から入力された情報をもとに、頂点ライティングを頂点シェーダーで行い、ライティング結果のカラーが出力されるまでの流れを説明しています。</p> 39 <img class="user_guide_chart" src="assets/vertex_lighting_light_color.png" alt="カラー出力の流れ"/> 40 41 42--> 43 <a name="vertex_lighting" id="vertex_lighting"></a> 44 <h2>頂点ライティングの設定</h2> 45 <p>ここでは、頂点ライティングを行う際の「ライト」と「マテリアル」の設定について説明します。</p> 46 <h3>ライトの種類</h3> 47 <p>頂点ライトで使用できるライトの種類</p> 48 <p><em>●「ディレクショナルライト」「ポイントライト」「スポットライト」</em></p> 49 <img class="user_guide_chart" src="../fragment_lighting/assets/fragment_lighting_light_type.png" alt="ライトの種類"/> 50 <p><em>●「半球ライト」</em></p> 51 <p>図のようにスカイカラーとグラウンドカラーを設定することで、二色補間を行うライトになります。</p> 52 <img class="user_guide_chart" src="assets/vertex_lighting_hemisphere_lighting.png" alt="半球ライト"/> 53 <h4>ライトの設定</h4> 54 <p>以下の表は、ライトの種類ごとの設定項目についてまとめたものです。</p> 55 <table> 56 <thead> 57 <tr> 58 <th>カテゴリ</th> 59 <th>項目</th> 60 <th>説明</th> 61 </tr> 62 </thead> 63 <tbody> 64 <tr> 65 <th rowspan="4" class="bgcolor_g">ライトの色</th> 66 <th>アンビエントカラー<br /> 67 ( 環境光 )</th> 68 <td>マテリアルのアンビエントカラーに影響を与える、ライトの色とアルファ値です。</td> 69 </tr> 70 <tr> 71 <th>ディフューズカラー<br /> 72 ( 拡散光 )</th> 73 <td>マテリアルのディフューズカラーに影響を与える、ライトの色とアルファ値です。</td> 74 </tr> 75 <tr> 76 <th>スカイカラー</th> 77 <td>半球ライトで設定できるパラメータです。法線が上向きである頂点に影響を与えるライトの色です。</td> 78 </tr> 79 <tr> 80 <th>グラウンドカラー<br /></th> 81 <td>半球ライトで設定できるパラメータです。法線が下向きである頂点に影響を与えるライトの色です。</td> 82 </tr> 83 <tr> 84 <th rowspan="2" class="bgcolor_y">ライトの姿勢</th> 85 <th>位置</th> 86 <td>ライトの位置です。頂点ライトにおいて、ワールド座標系で設定します。</td> 87 </tr> 88 <tr> 89 <th>方向</th> 90 <td>ライトの方向です。頂点ライトにおいて、ワールド座標系で設定します。アニメーションのついているノードと階層を組むことで、上位の階層から値を受け継ぐことができます。</td> 91 </tr> 92 <tr> 93 <th rowspan="3" class="bgcolor_r">ライトの減衰率</th> 94 <th>距離減衰</th> 95 <td>光の届く距離を減衰率で指定します。ポイントライトとスポットライトで使用します。</td> 96 </tr> 97 <tr> 98 <th>スポットライト減衰</th> 99 <td>光の届く範囲を参照テーブルを用いた減衰率で指定します。スポットライトで使用します。</td> 100 </tr> 101 <tr> 102 <th>スカイカラーウェイト</th> 103 <td>半球ライトで設定できるパラメータです。スカイカラーウェイトの数値を 1 に近づけるとスカイカラーが強くなり、0 に近づけるとグラウンドカラーが強くなります。</td> 104 </tr> 105 </tbody> 106 </table> 107 <h3>マテリアル設定</h3> 108 <p>以下の表は、マテリアルごとに設定できる項目についてまとめたものです。</p> 109 <table> 110 <thead> 111 <tr> 112 <th>カテゴリ</th> 113 <th>項目</th> 114 <th>説明</th> 115 </tr> 116 </thead> 117 <tbody> 118 <tr> 119 <th rowspan="1" class="bgcolor_g">全般</th> 120 <th>オクルージョンを有効にする</th> 121 <td>半球ライトで設定できるパラメータです。 3DCG ツールで設定した頂点アルファを利用して、半球ライトの照射に変化を与えることができます。<br /> 122 項目の名称はオクルージョンですが、あくまで頂点アルファ利用して半球ライトの照射に変化を与えるための項目です。<br /> 123 一般的なアンビエントオクルージョンに限定された項目ではありません。<br /></td> 124 </tr> 125 <tr> 126 <th rowspan="5" class="bgcolor_g">マテリアルの色</th> 127 <th>エミッションカラー<br /> 128 ( 放射色 )</th> 129 <td>頂点ライティングでは使用しません。</td> 130 </tr> 131 <tr> 132 <th>アンビエントカラー<br /> 133 ( 環境色 )</th> 134 <td>物体の陰側を表現する色です。マテリアルで設定します。</td> 135 </tr> 136 <tr> 137 <th>ディフューズカラー<br /> 138 ( 拡散色 )</th> 139 <td>物体表面の質感を表現する色です。マテリアルで設定します。</td> 140 </tr> 141 <tr> 142 <th>スペキュラーカラー 0<br /> 143 ( 鏡面色 0 )</th> 144 <td>頂点ライティングでは使用しません。</td> 145 </tr> 146 <tr> 147 <th>スペキュラーカラー 1<br /> 148 ( 鏡面色 1 )</th> 149 <td>頂点ライティングでは使用しません。</td> 150 </tr> 151 <tr> 152 <th class="bgcolor_y">シーン全体の環境光</th> 153 <th>グローバルアンビエントカラー</th> 154 <td>頂点ライティングでは使用しません。</td> 155 </tr> 156 <tr> 157 <th rowspan="4" class="bgcolor_r">ハイライトの制御</th> 158 <th>分布 0</th> 159 <td>頂点ライティングでは使用しません。</td> 160 </tr> 161 <tr> 162 <th>分布 1</th> 163 <td>頂点ライティングでは使用しません。</td> 164 </tr> 165 <tr> 166 <th>反射</th> 167 <td>頂点ライティングでは使用しません。</td> 168 </tr> 169 <tr> 170 <th>フレネル</th> 171 <td>頂点ライティングでは使用しません。</td> 172 </tr> 173 </tbody> 174 </table> 175 <!-- 176 <h2>頂点ライティングの計算式</h2> 177 <p>ここでは、頂点ライティングを行うさいに使用する計算式について説明します</p> 178 <p>以下の図は、頂点ライティングの処理における、計算の流れについて説明したものです。</p> 179 <img class="user_guide_chart" src="assets/vertex_lighting_color.png" alt="頂点ライティングの計算式"/> 180--> 181 <!-- InstanceEndEditable --> </div> 182 <div class="footer" /> 183</div> 184</body> 185<!-- InstanceEnd --> 186</html> 187