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>フォグの設定は、CreativeStudio のシーン環境パネルで設定します。</p> 21 <p>シーン環境では、シーンに複数あるマテリアル個々に対して、ライト、フォグ、カメラを設定できます。</p> 22 <p class="new_hint">補足：<br /> 23 フォグとは、カメラからの距離に応じてフォグカラーをフラグメントカラーにブレンドする機能です。<br /> 24 遠くの風景が霧 ( フォグ ) によってかすむ表現などが行えます。<br /> 25 奥行き情報であるデプス値をもとに、カメラからの距離に応じてフォグカラーを変化させます。</p> 26 <p>フォグの作成には、以下の 2 つの方法があります。</p> 27 <ul> 28 <li>デプスバッファを使用したフォグ</li> 29 <li>W バッファを使用したフォグ</li> 30 </ul> 31 <h2>サンプルデータの読み込み</h2> 32 <p>CreativeStudio で以下の場所に用意されているサンプルデータ ToyBook を読み込みます。</p> 33 <p>" %NW4C_ROOT%/SampleData/Graphics/Intermediate/ManualResource/TutorialToyBook/ToyBook.cres "</p> 34 <p>ToyBook はデプスバッファを使用したフォグを使用しています。</p> 35 <p>また、作成したフォグは、シーン環境パネルのフォグ設定を使用してマテリアルに反映させています。</p> 36 <p>読み込んだ ToyBook には、以下のノードにフォグが設定されています。</p> 37 <ul> 38 <li>tree</li> 39 </ul> 40 <img src="assets/fog01.png" alt="フォグ画像01"/> 41 <h2>マテリアル設定の確認</h2> 42 <p>ToyBook の Tree は、マテリアルパネルでフォグの使用を許可しています。</p> 43 <p>コンテンツパネルの Tree を選択してマテリアルパネルを開きます。</p> 44 <img src="assets/fog02.png" alt="フォグ画像02"/> 45 <p>マテリアルパネルの全般にあるフォグ設定を確認します。</p> 46 <img src="assets/fog03.png" alt="フォグ画像03"/> 47 <p>フォグを有効にするチェックボックスが ON になっていて、フォグ番号が 0 になっています。</p> 48 <p>フォグ番号とは、シーン環境パネルでフォグが設定されている番号になります。</p> 49 <p class="warning">フォグを有効にするチェックボックスが OFF になっていると、フォグの設定が反映されませんのでご注意ください。</p> 50 <h2>フォグの設定</h2> 51 <p>ここでは、実際にデプスバッファを使用するフォグを新規作成して、シーン環境パネルで Toy_Book に設定する方法を説明します。</p> 52 <h3>デプスバッファを使用するフォグの作成</h3> 53 <p>CreativeStudio のメニュー [作成]→[フォグ] を選択して新規にフォグを作成します。</p> 54 <p>コンテンツパネルに FogCtr2 が作成されます。</p> 55 <h4>フォグのパラメータを設定</h4> 56 <p>コンテンツパネルに表示されている FogCtr2 を選択して、フォグパネルを開きます。</p> 57 <p>ここでは、サンプルデータのフォグからの変更をわかりやすくするために、フォグカラーの変更をします。</p> 58 <p class="new_hint">補足：<br /> 59 カラーサムネイルを左クリックすると、<a href="../../../ui_reference/panel/property/index.html#color_picker">カラーピッカー</a>がポップアップ表示され色の設定ができます。</p> 60 <img src="assets/fog04.png" alt="フォグ画像04"/> 61 <p>フォグカラー以外の設定は、サンプルデータのものとすべて同じにしてあります。</p> 62 <p>フォグパネルの設定項目の詳細は、<a href="../../../ui_reference/panel/fog/detailed_panel/index.html">こちら</a>を参照してください。</p> 63 <h4>作成したフォグをシーン環境パネルに設定</h4> 64 <p>フォグパネルで作成したフォグをシーン環境パネルに設定して、マテリアルに反映させる方法を説明します。</p> 65 <p>コンテンツパネルに表示されている SceneEnvironment1 を選択してシーン環境パネルを開きます。</p> 66 <img src="assets/fog05.png" alt="フォグ画像05"/> 67 <p>シーン環境パネルには、もともと設定されていた FogCtr1 が表示されます。</p> 68 <p>ここに新規で作成した FogCtr2 を追加します。</p> 69 <p>フォグの設定項目の「追加」ボタンを押すと、フォグの追加ダイアログが表示されます。</p> 70 <img src="assets/fog06.png" alt="フォグ画像06"/> 71 <p>番号は自動的に連番が表示されますが、任意に設定変更できます。</p> 72 <p>ここでは、番号は 1 のままにしておきます。</p> 73 <p>フォグのプルダウンメニューを開いて、FogCtr2 を選択します。</p> 74 <img src="assets/fog07.png" alt="フォグ画像07"/> 75 <p>FogCtr2 を選択して「OK」ボタンを押すとシーン環境パネルに新規に作成したフォグが追加されます。</p> 76 <img src="assets/fog08.png" alt="フォグ画像08"/> 77 <p>この状態になると、シーン環境パネルを使用したフォグの設定をマテリアルに反映できます。</p> 78 <h3>作成したフォグをマテリアルで使用する</h3> 79 <p>シーン環境パネルに設定したフォグ ( FogCtr2 ) をマテリアルに反映させます。</p> 80 <p>ToyBook の Tree にフォグを設定しますので、コンテンツパネルでマテリアル Tree を選択します。</p> 81 <img src="assets/fog02.png" alt="フォグ画像02"/> 82 <p>Tree を選択するとマテリアルパネルが表示されますので、全般のフォグ番号を 1 に変更します。</p> 83 <img src="assets/fog09.png" alt="フォグ画像09"/> 84 <p>フォグ番号を 1 にすると設定されているフォグが FogCtr2 に変更されて、プレビュー画面でフォグの色が変化するのを確認できます。</p> 85 <img src="assets/fog10.png" alt="フォグ画像10"/> 86 <p>このことを応用して、さまざまなフォグを作成しておくと簡単に各マテリアルのフォグ設定を変更できます。</p> 87 <p>また、色々なフォグ設定をプロジェクトで共有することで、プロジェクト内でのフォグの共有化も簡単に行えるようになります。</p> 88 <!-- InstanceEndEditable --> </div> 89 <div class="footer" /> 90</div> 91</body> 92<!-- InstanceEnd --> 93</html> 94
