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 <h2>What is a Fog?</h2> 20 <p>Fog is a feature for blending a fog color with a fragment color depending on the distance from the camera. </p> 21 <p>This can be used to express haziness in distant scenery. </p> 22 <p>Fog color is made to change based on the distance from the camera based on depth values representing depth information. </p> 23 <h2>Sample Configuration</h2> 24 <p>This section describes how to actually set a fog effect using the sample data Toy_Book.</p> 25 <p>The following two methods can be used to create fog.</p> 26 <ul> 27 <li>Fog using the depth buffer</li> 28 <li>Fog using the W buffer</li> 29 </ul> 30 <p>Toy_Book 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 <h3>Loading sample data</h3> 33 <p>Use CreativeStudio to load the Toy_Book sample data prepared in the following folder.</p> 34 <p>" %NW4C_ROOT%/SampleData/Graphics/Intermediate/Tutorial/toy_book/Toy_Book.cres "</p> 35 <p>Fog has been set for the following node in the loaded Toy_Book sample data.</p> 36 <ul> 37 <li>Tree</li> 38 </ul> 39 <img class="manual_image" src="assets/fog01.png" alt="Fog Image 01"/> 40 <h2>Checking Material Settings</h2> 41 <p>Use of fog has been enabled for the <B>Tree</B> node in Toy_Book on the material <B>Properties</B> panel.</p> 42 <p>Select <B>Tree</B> in the <B>Contents</B> panel to open the material <B>Properties</B> panel. </p> 43 <img class="manual_image" src="assets/fog02.png" alt="Fog Image 02"/> 44 <p>Check the fog settings under <B>General</B> on the material <B>Properties</B> panel.</p> 45 <img class="manual_image" src="assets/fog03.png" alt="Fog Image 03"/> 46 <p>The <B>Enable fog</B> checkbox should be selected and the <B>Fog number</B> should be 0.</p> 47 <p><B>Fog number</B> represents the number set for the fog on the scene environment <B>Properties</B> panel. </p> 48 <p class="warning">Note that if the <B>Enable fog</B> checkbox is not selected, fog settings will not be applied.</p> 49 <h2>Fog Settings</h2> 50 <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> 51 <h3>Creating a Fog That Uses the Depth Buffer</h3> 52 <p>On the CreativeStudio menu, select <B>Create > Fog</B> to create a new fog.</p> 53 <p><B>FogCtr2</B> is created on the <B>Contents</B> panel. </p> 54 <h4>Setting Fog Parameters</h4> 55 <p>Select <B>FogCtr2</B> displayed in the <B>Contents</B> panel to open the fog <B>Properties</B> panel.</p> 56 <p>Here, we will change the fog color to make changes due to fog in the sample data easier to see. </p> 57 <img class="manual_image" src="assets/fog04.png" alt="Fog Image 04"/> 58 <p>Settings other than fog color are all the same as those used in the sample data. </p> 59 <p>For details on settings on the fog <B>Properties</B> panel, click <a href="../../../../../ui_reference/panel/property/fog/detailed_panel/index.html">Here</a>.</p> 60 <h4>Setting the Created Fog on the Scene Environment Panel </h4> 61 <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> 62 <p>Select <B>SceneEnvironment1</B> displayed in the <B>Contents</B> panel to open the scene environment <B>Properties</B> panel.</p> 63 <img class="manual_image" src="assets/fog05.png" alt="Fog Image 05"/> 64 <p>The originally configured <B>FogCtr1</B> is displayed on the scene environment <B>Properties</B> panel. </p> 65 <p>Add the newly FogCtr2 here. </p> 66 <p>Clicking the <B>Add</B> button under <B>Fog settings</B> displays the <B>Add fog</B> dialog box.</p> 67 <img class="manual_image" src="assets/fog06.png" alt="Fog Image 06"/> 68 <p>The number displayed is an automatically selected serial number. This number can be changed freely. </p> 69 <p>Here, leave the number unchanged. </p> 70 <p>Use the <B>Fog</B> pull-down menu and select <B>FogCtr2</B>.</p> 71 <img class="manual_image" src="assets/fog07.png" alt="Fog Image 07"/> 72 <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> 73 <img class="manual_image" src="assets/fog08.png" alt="Fog Image 08"/> 74 <p>Now, fog settings made on the scene environment <B>Properties</B> panel can be applied to the material. </p> 75 <h3>Applying the Created Fog to a Material</h3> 76 <p>Here, we will apply the fog (<B>FogCtr2</B>) set on the scene environment <B>Properties</B> panel to a material. </p> 77 <p>Since we are setting the fog to <B>Tree</B> of Toy_Book, select the <B>Tree</B> material on the <B>Contents</B> panel. </p> 78 <img class="manual_image" src="assets/fog02.png" alt="Fog Image 02"/> 79 <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> 80 <img class="manual_image" src="assets/fog09.png" alt="Fog Image 09"/> 81 <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> 82 <img class="manual_image" src="assets/fog10.png" alt="Fog Image 10"/> 83 <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> 84 <p>In addition, a multitude of fog settings can be easily shared within a project using sharing. </p> 85 <h3>Fog Settings Using the W buffer</h3> 86 <!-- #BeginLibraryItem "/Library/now_making.lbi" --> <!-- 作成中！ --> <img class="user_guide_chart" src="../../../../../../Library/assets/now_making.png" alt="Under Construction"/><!-- #EndLibraryItem --> <!-- InstanceEndEditable --> </div> 87 <div class="footer" /> 88</div> 89<hr><p>CONFIDENTIAL</p></body> 90<!-- InstanceEnd --> 91</html> 92
