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"><!-- InstanceBegin template="/Templates/default_template.dwt" codeOutsideHTMLIsLocked="false" --> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5<meta http-equiv="Content-Style-Type" content="text/css" /> 6<!-- InstanceBeginEditable name="CSS の相対パス指定" --> 7<link href="../../../../../common/manual.css" rel="stylesheet" type="text/css" /> 8<!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="ページのタイトル" --> 9<title>Creating a Cube Map</title> 10<!-- InstanceEndEditable --> 11</head> 12<body> 13<div> 14 <div class="body"> <!-- InstanceBeginEditable name="本文のタイトル" --> 15 <h1>Creating Cube Maps</h1> 16 <!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="本文" --> 17 <p>Here, we describe how to create a cube map using a DCC tool and checking it under CreativeStudio. </p> 18 <p>The following three cube mapping methods will be described. </p> 19 <ul> 20 <li>Projecting a scene onto a cube and baking the texture</li> 21 <li>Rendering six directions using a camera</li> 22 <li>Creating a cube map from an image</li> 23 </ul> 24 <h2>The Difference Between a Cube Map and a Hemisphere Map</h2> 25 <p>The image prepared for a hemisphere map is only 180 degrees as seen from the camera and the image reflected in models is always the same as seen from any angle. However, because the image prepared for a cube map is a full 360 degrees, cube maps allow the expression of reflections that vary based on the angle of view.</p> 26 <p class="warning">This page describes how to create a cube map for a fully reflective model.<br /> Maya is used as the DCC tool in this description. </p> 27 <p>DCC tool is an acronym for Digital Content Creation. <br /> Maya, XSI, Photoshop and other such applications are examples of digital content creation tools. </p> 28 <h2>Creating a Cube Map With a DCC Tool (Part 1)</h2> 29 <h3>Projecting a scene onto a cube and baking the texture</h3> 30 <p>The cube map is projected onto a cube. </p> 31 <h4>Load the scene to be projected</h4> 32 <p>Here, we will create a scene with easy to understand directionality as an example.</p> 33 <img class="manual_image" src="assets/cubemap_scene.png" width="400" height="400" alt="We tried to make a scene with easily understood directionality." /> 34 <h4>Create a cube in any location and adjust the direction of projection to match the cube UV</h4> 35 <p>Place the cube in a location that surveys the scene.</p> 36 <p class="warning">The size of the cube does not matter because the images inside the each of the areas given by connecting the cube center to each of its vertices is projected onto each surface of the cube.<br /> However, take care that the cube does not intersect with any background objects.</p> 37 <p>In the case of the default cube, enter (0, 0, -90) for the rotate and enter freeze for the transform.</p> 38 <p class="warning">The default cube UV is not configured so the floor and ceiling reflect in the T-shaped part that sticks out, so this must be corrected.<br /> Although you can also adjust the UV manually, manual adjustment requires great care because there is a possibility of making a mistake in the orientation used for projection. </p> 39 <h4>Round the cube normals</h4> 40 <p>Rounding the cube normals leads to a cleaner refelction in all directions. If the reflection does not match up well, check the cube normals.</p> 41 <h4>Assign the shader "dgs_material" used for reflections to the cube</h4> 42 <p>The shader does not matter as long as it is configured to be fully reflecting. The attributes of <B>dgs_material</B> are given below.</p> 43 <img class="manual_image" src="assets/dgs_material.png" width="427" height="954" alt="Assigning the dgs_material shader." /> 44 <p>Diffuse : 0 (Make <B>dgs_material</B> itself black because reflections other than the background will not be made.)<br /> Glossy : 0 (Eliminate excessive highlighting)<br /> Specular : 1 (Make the material perfectly reflecting)</p> 45 <h4>Configure batch baking</h4> 46 <p>Select the cube and select Lighting/shading > Add batch bake > Texture.<br /> The batch bake attribute is added to the cube.</p> 47 <img class="manual_image" src="assets/texture_bakeset.png" width="421" height="638" alt="texturebakeset" /> 48 <p>Check <B>Reflect orthogonal projection</B> (balances the relationship between texture coordinates and model normals)<br />Enter the output file name in <B>File name prefix</B>.<br />Check <B>Single bake map</B> (output for one texture)<br />Set the <B>Background mod</B>e so that texture colors on the outside of the UV do not stick out).</p> 49 <h4>Execute the batch bake</h4> 50 <p>Select the cube and select <B>Lighting/shading > Batch bake</B> (Mental ray).<br /> The texture is output to "renderData/mentalray/lightMap".</p> 51 <img class="manual_image" src="assets/cubemap_bakeset.png" width="400" alt="The texture resulting from batch baking" /> 52 <h4>Open batch bake data using Photoshop</h4> 53 <p class="warning">The cube map texture must be made into the shape of a horizontal cross.</p> 54 <h4>Adjust the image to the cube map format</h4> 55 <img class="manual_image" src="assets/horizontal_cross.png" width="768" height="256" alt="How about creating using an action?" /> 56 <ol> 57 <li>Rotate the image 90 degrees clockwise and scroll one cube's worth to the right</li> 58 <li>Remove the white at the top and bottom, set the horizontal to a power of two, and set the vertical to 75%</li> 59 <li>Save as a CreativeStudio intermediate file</li> 60 </ol> 61 <h4>Check the texture using CreativeStudio</h4> 62 <p>Check the created cube map under CreativeStudio.</p> 63 <img class="manual_image" src="assets/cs_cubemap.png" width="400" height="400" alt="The reflected image changes depending on the angle of view" /><br /> <img class="manual_image" src="assets/cs_bump_and_baked_cubemap.png" width="400" height="400" alt="It looks like this when applied to the chess piece" /> 64 <h2>Creating a Cube Map With a DCC Tool (Part 2)</h2> 65 <h3>Rendering six directions using a camera</h3> 66 <p>With this method of creating textures, we place a camera in the scene, set the image angle to 90 degrees, and render six directions.</p> 67 <h4>Load the scene</h4> 68 <p>S only has been extended to check whether the top and bottom connect properly when used as a cube map.</p> 69 <img class="manual_image" src="assets/camera_cube_scene.png" width="416" height="416" alt="The direction of the second frame has been made easy to understand" /> 70 <h4>Create a camera.</h4> 71 <p>Specify the image angle as 90 degrees. All parts can be seen because adding 90 degrees four times in the horizontal represents 360 degrees.</p> 72 <p class="warning">Because this is the image projected onto the cube, not the image seen from the cube, the camera scale must be set to -1.</p> 73 <img class="manual_image" src="assets/camera_settings.png" width="427" height="731" alt="Change the view angle and camera scale" /> 74 <h4>Create a camera animation and make rendering settings</h4> 75 <p>Create a six-frame animation. Starting from the -X direction, make the camera rotate counterclockwise one time, and then face up and down.</p> 76 <p class="warning">Pay close attention to the camera inclination when the camera faces up and down.</p> 77 <img class="manual_image" src="assets/render_settings.png" width="419" height="812" alt="The direction of the second frame has been made easy to understand" /> 78 <h4>Perform rendering</h4> 79 <p>The results of rendering are shown below. If Frame 5 and Frame 6 are rendered well, the orientation of the image does not need to be corrected.</p> 80 <img class="manual_image" src="assets/rendered_pictures.png" width="768" height="128" alt="After rendering" /> 81 <h4>Combine these six images using Photoshop.</h4> 82 <p>Lock the grid and arrange the cube map.</p> 83 <img class="manual_image" src="assets/renderred_cube_finished.png" width="512" height="384" alt="This also feels like it can be handled by action." /> 84 <h4>Check the texture using CreativeStudio</h4> 85 <p>Check that the characters can be read correctly.</p> 86 <p class="warning">First, we recommend testing the cube map using a scene where directions are easy to determine.</p> 87 <img class="manual_image" src="assets/cs_cam_cubemap.png" width="438" height="438" alt="Orientation check confirmed without problem." /><br /> <img class="manual_image" src="assets/cs_bump_and_cam_cubemap.png" width="400" height="400" alt="This is how it looks applied to a face." /> 88 <h2>Creating Using Photoshop</h2> 89 <h3>Creating a cube map from an image</h3> 90 <p>With this method, the image is created by drawing it yourself or processing a photograph. </p> 91 <img class="manual_image" src="assets/photoshop_cube.png" width="512" height="384" alt="Processing using Photoshop" /> 92 <h4>Create an image for the horizontal direction (or prepare a photograph)</h4> 93 <p>Conditions are: the horizontal must be a power of two, the ratio between vertical and horizontal must be 1:4, and left and right directions must connect.</p> 94 <h4>Prepare images for the top and bottom</h4> 95 <p>Make the image size 300% in the vertical and prepare images for the top and bottom. At this point, the four edges of the top and bottom images must connect to the central image. </p> 96 <h4>Save the file</h4> 97 <p>Use the ETC1 format since the image size of cube maps can become quite large.</p> 98 <h4>Check the texture using CreativeStudio</h4> 99 <img class="manual_image" src="assets/cs_ps_cubemap.png" width="400" height="400" alt="Display under CreativeStudio" /><br /> <img class="manual_image" src="assets/cs_bump_and_ps_cubemap.png" width="400" height="400" alt="It looks like this when applied to the chess piece" /> <!-- InstanceEndEditable --> </div> 100 <div class="footer" /> 101</div> 102<hr><p>CONFIDENTIAL</p></body> 103<!-- InstanceEnd --></html> 104
