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="en-US" lang="en-US"> 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 --> <!-- InstanceBeginEditable name="ページのタイトル" --> 10<title>Fog</title> 11<!-- InstanceEndEditable --> 12</head> 13<body> 14<div> 15 <div class="body"> <!-- InstanceBeginEditable name="本文のタイトル" --> 16 <h1>Fog</h1> 17 <!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="本文" --> 18 <p>This page uses sample data to describe basic settings for fogs.</p> 19 <p>Fogs are set on the scene environment <B>Properties</B> panel of CreativeStudio.</p> 20 <p>The scene environment can set lights, fogs and cameras for each of several materials in a scene.</p> 21 <p class="new_hint"><B>Note:</B> Fog is a feature for blending a fog color with a fragment color depending on the distance from the camera. This can be used to express haziness in distant scenery. <BR> Fog color is made to change based on the distance from the camera based on depth values representing depth information.</p> 22 <p>The following two methods can be used to create fog.</p> 23 <ul> 24 <li>Fog using the depth buffer</li> 25 <li>Fog using the W buffer</li> 26 </ul> 27 <h2>Loading sample data</h2> 28 <p>Use CreativeStudio to load the ToyBook sample data prepared in the following folder.</p> 29 <p>" %NW4C_ROOT%/SampleData/Graphics/Intermediate/ManualResource/TutorialToyBook/ToyBook.cres "</p> 30 <p>ToyBook uses a fog that uses the depth buffer.</p> 31 <p>In addition, created fogs are reflected in materials using fog settings found on the scene environment <B>Properties</B> panel.</p> 32 <p>Fog has been set for the following node in the loaded ToyBook sample data.</p> 33 <ul> 34 <li>Tree</li> 35 </ul> 36 <img src="assets/fog01.png" alt="Fog Image 01"/> 37 <h2>Checking Material Settings</h2> 38 <p>Use of fog has been enabled for the Tree node in ToyBook on the material Properties panel.</p> 39 <p>Select <B>Tree</B> in the <B>Contents</B> panel to open the material <B>Properties</B> panel.</p> 40 <img src="assets/fog02.png" alt="Fog Image 02"/> 41 <p>Check the fog settings under <B>General</B> on the material <B>Properties</B> panel.</p> 42 <img src="assets/fog03.png" alt="Fog Image 03"/> 43 <p>The <B>Enable fog</B> checkbox should be selected and the <B>Fog number</B> should be 0.</p> 44 <p><B>Fog number</B> represents the number set for the fog on the scene environment <B>Properties</B> panel.</p> 45 <p class="warning">Note that if the <B>Enable fog</B> checkbox is not selected, fog settings will not be applied.</p> 46 <h2>Fog Settings</h2> 47 <p>This section describes how to actually create a new fog that uses the depth buffer and how to set it for Toy_Book on the scene environment <B>Properties</B> panel.</p> 48 <h3>Creating a Fog That Uses the Depth Buffer</h3> 49 <p>On the CreativeStudio menu, select <B>Create > Fog</B> to create a new fog.</p> 50 <p><B>FogCtr2</B> is created on the <B>Contents</B> panel.</p> 51 <h4>Setting Fog Parameters</h4> 52 <p>Select <B>FogCtr2</B> displayed in the <B>Contents</B> panel to open the fog <B>Properties</B> panel.</p> 53 <p>Here, we will change the fog color to make changes due to fog in the sample data easier to see.</p> 54 <p class="new_hint"><B>Note:</B> Left-clicking on the thumbnail allows you to set the color using the displayed <a href="../../../ui_reference/panel/property/index.html#color_picker">color picker</a> popup.</p> 55 <img src="assets/fog04.png" alt="Fog Image 04"/> 56 <p>Settings other than fog color are all the same as those used in the sample data.</p> 57 <p>For details on settings on the fog <B>Properties</B> panel, click <a href="../../../ui_reference/panel/fog/detailed_panel/index.html">Here</a>.</p> 58 <h4>Setting the Created Fog on the Scene Environment Panel</h4> 59 <p>This section describes how to set the fog created on the fog <B>Properties</B> panel on the scene environment <B>Properties</B> panel and apply it to a material.</p> 60 <p>Select <B>SceneEnvironment1</B> displayed in the <B>Contents</B> panel to open the scene environment <B>Properties</B> panel.</p> 61 <img src="assets/fog05.png" alt="Fog Image 05"/> 62 <p>The originally configured <B>FogCtr1</B> is displayed on the scene environment <B>Properties</B> panel.</p> 63 <p>Add the newly FogCtr2 here.</p> 64 <p>Clicking the <B>Add</B> button under <B>Fog settings</B> displays the <B>Add fog</B> dialog box.</p> 65 <img src="assets/fog06.png" alt="Fog Image 06"/> 66 <p>The number displayed is an automatically selected serial number. This number can be changed freely.</p> 67 <p>Here, leave the number unchanged.</p> 68 <p>Use the <B>Fog</B> pull-down menu and select <B>FogCtr2</B>.</p> 69 <img src="assets/fog07.png" alt="Fog Image 07"/> 70 <p>Select <B>FogCtr2</B> and press <B>OK</B>. The newly created fog will be added to the scene environment <B>Properties</B> panel.</p> 71 <img src="assets/fog08.png" alt="Fog Image 08"/> 72 <p>Now, fog settings made on the scene environment <B>Properties</B> panel can be applied to the material.</p> 73 <h3>Applying the Created Fog to a Material</h3> 74 <p>Here, we will apply the fog (<B>FogCtr2</B>) set on the scene environment <B>Properties</B> panel to a material.</p> 75 <p>Since we are setting the fog to Tree of ToyBook, select the Tree material on the <B>Contents</B> panel.</p> 76 <img src="assets/fog02.png" alt="Fog Image 02"/> 77 <p>The material <B>Properties</B> panel will appear when <B>Tree</B> is selected. Change the <B>Fog number</B> under <B>General</B> to <B>1</B>.</p> 78 <img src="assets/fog09.png" alt="Fog Image 09"/> 79 <p>The fog currently set will change to <B>FogCtr2</B> once <B>Fog number</B> is changed to <B>1</B>. Confirm that the fog color changes on the <B>Preview</B> panel.</p> 80 <img src="assets/fog10.png" alt="Fog Image 10"/> 81 <p>This technique can be applied to create various different fogs ahead of time, allowing the fog settings for each material to be easily changed.</p> 82 <p>In addition, a multitude of fog settings can be easily shared within a project using sharing.</p> 83 <!-- InstanceEndEditable --> </div> 84 <div class="footer" /> 85</div> 86<hr><p>CONFIDENTIAL</p></body> 87<!-- InstanceEnd --> 88</html>
