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"><!-- 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 --> 9<!-- InstanceBeginEditable name="ページのタイトル" --> 10<title>キューブマップを作成する</title> 11<!-- InstanceEndEditable --> 12</head> 13<body> 14<div> 15 <div class="body"> <!-- InstanceBeginEditable name="本文のタイトル" --> 16 <h1>キューブマップを作る</h1> 17 <!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="本文" --> 18 <p>ここでは、DCC ツールでのキューブマップの作成方法と CreativeStudio での確認まで説明します。</p> 19 <p>以下の 3 つのキューブマップ作成方法を説明します。</p> 20 <ul> 21 <li>キューブにシーンを映り込ませテクスチャにベイクする</li> 22 <li>カメラを使って6方向をレンダリングする</li> 23 <li>画像からキューブマップを作る</li> 24 </ul> 25 <h2>キューブマップと半球マップの違い</h2> 26 <p>半球マップで用意する画像はカメラから見て 180 度分のみなので、モデルに映り込む絵はどこから見ても常に同じですが、<br /> 27 キューブマップが用意する画像は 360 度分なので、見る角度により変化のある映り込みが実現可能となります。</p> 28 <p class="warning">ここで紹介するのは完全反射モデルに対するキューブマップの作り方です。<br /> 29 また、DCC ツールの説明には Maya を使っています。</p> 30 <p>DCC ツールとは、Digital Content Creation の略です。<br /> 31 Maya / XSI / Photoshop など、デジタルコンテンツを作成するツールのことです。</p> 32 <h2>DCCツールでの作成方法 ( 1 )</h2> 33 <h3>キューブにシーンを映り込ませテクスチャにベイクする</h3> 34 <p>キューブマップはキューブに映り込ませています。</p> 35 <h4>映り込ませたいシーンを読み込む</h4> 36 <p>ここでは、例として方向の分かりやすいシーンを作成しています。</p> 37 <img src="assets/cubemap_scene.png" width="400" height="400" alt="方向の分かりやすいシーンにしてみました。" /> 38 <h4>任意の位置にキューブを作成し、キューブの UV と映り込む方向を合わせます</h4> 39 <p>シーンを見渡す位置にキューブを置きます。</p> 40 <p class="warning">キューブの中心からそれぞれの頂点を結んだ先の範囲の画像がキューブそれぞれの面に映り込むので、キューブの大きさは問いません。<br /> 41 ただ、キューブが背景オブジェクトにめり込まないように気をつける必要がある場合も考えられます。</p> 42 <p>デフォルトのキューブの場合、回転に ( 0 , 0 , -90 ) を入れて、トランスフォームにフリーズを入れてください。</p> 43 <p class="warning">デフォルトのキューブの UV は T 型のはみ出た部分に天井と床が映り込むようになっていないのでそれを直す必要があります。<br /> 44 UV を手動で直すのも 1 つの方法ですが、手動で作業した場合は、映り込ませる向きに間違いが起こる可能性がありますので注意が必要です。</p> 45 <h4>キューブの法線を丸めます</h4> 46 <p>全方位の映り込みがきれいにつながります。映り込みがうまくつながらないときはキューブの法線を確認してください。</p> 47 <h4>キューブに [ dgs_material ] という映りこみ用のシェーダーをアサインする</h4> 48 <p>完全反射の設定ができればシェーダーは問いません。以下はdgs_materialのアトリビュートです。</p> 49 <img src="assets/dgs_material.png" width="427" height="954" alt="dgs_materialシェーダーをアサインします。" /> 50 <p>Diffuse : 0 ( 背景以外の映り込みをさせないため、自分自身は真っ黒にします )<br /> 51 Glossy : 0 ( 余計なハイライトはなしにする )<br /> 52 Specular : 1 ( 完全反射させる )</p> 53 <h4>バッチベイクの設定</h4> 54 <p>キューブを選択し [ ライティング ]→[シェーディング]→[バッチベイクの追加]→[テクスチャ] を選びます。<br /> 55 キューブにバッチベイクのアトリビュートが追加されます。</p> 56 <img src="assets/texture_bakeset.png" width="421" height="638" alt="texturebakeset" /> 57 <p>「'正射投影の反射'」にチェック ( テクスチャ座標とモデルの法線の関係を均等にする )<br /> 58 「ファイル名プリフィックス」に出力ファイル名<br /> 59 「単一ベイクマップ」にチェック ( 1 枚のテクスチャに出力すること )<br /> 60 「バックグラウンドモード」では UV の外側のテクスチャ色がはみ出ないように設定します。</p> 61 <h4>バッチベイクをします</h4> 62 <p>キューブを選択し、[ライティング]→[シェーディング]→[バッチベイク ( Mental ray ) ]を選択します。<br /> 63 テクスチャが ''renderData/mentalray/lightMap'' に出力されます。</p> 64 <img src="assets/cubemap_bakeset.png" width="400" alt="バッチベイクでできたテクスチャ" /> 65 <h4>Photoshop でバッチベイクしたデータを開きます</h4> 66 <p class="warning">キューブマップのテクスチャは <em>Hrizontal Cross ( ホリゾンタルクロス )</em> という形にしないといけません。</p> 67 <h4>画像をキューブマップのフォーマットに直します</h4> 68 <img src="assets/horizontal_cross.png" width="768" height="256" alt="アクションでも作ってみては？" /> 69 <ol> 70 <li>イメージを時計回りに 90 度回転し、キューブ 1 個分右にスクロールさせる</li> 71 <li>上下の余白をきちんと取り除き、横は 2 のべき乗、縦はその 75％ になるようにする</li> 72 <li>CreativeStudio の中間ファイルとして保存する</li> 73 </ol> 74 <h4>CreativeStudio でテクスチャを確認します</h4> 75 <p>作成したキューブマップを CreativeStudio で確認します。</p> 76 <img src="assets/cs_cubemap.png" width="400" height="400" alt="見る角度によって映る絵が変わります" /><br /> 77 <img src="assets/cs_bump_and_baked_cubemap.png" width="400" height="400" alt="チェスに貼るとこんなかんじです" /> 78 <h2>DCCツールでの作成方法 ( 2 )</h2> 79 <h3>カメラを使って6方向をレンダリングする</h3> 80 <p>ここでのテクスチャの作成方法は、シーンにカメラを置き、画角を90度にして6方向をレンダリングします。</p> 81 <h4>シーンを読込みます</h4> 82 <p>S だけ伸ばしたのはキューブマップにしたときに上下がつながるかを確認するためです。</p> 83 <img src="assets/camera_cube_scene.png" width="416" height="416" alt="2コマ目の方向をわかりやすくしています" /> 84 <h4>カメラを作成します</h4> 85 <p>画角を 90 度に指定します。横方向で考えると 90 度を 4 回足すと 360 度なので、すべての部分が見えることになります。</p> 86 <p class="warning">「キューブから見た画像」ではなく「キューブに映り込む画像」なのでカメラのスケールは必ず「 -1 」にしてください。</p> 87 <img src="assets/camera_settings.png" width="427" height="731" alt="ビューアングルとカメラのスケールを変更" /> 88 <h4>カメラのアニメーションを作成してレンダリング設定をします</h4> 89 <p>6 コマのアニメーションを作成します。- X 方向から始め、反時計回りに 1 周したあと、上と下を向きます。</p> 90 <p class="warning">カメラが上下を向くときのカメラの傾きに注意してください。</p> 91 <img src="assets/render_settings.png" width="419" height="812" alt="2コマ目の方向をわかりやすくしています" /> 92 <h4>レンダリングをします</h4> 93 <p>以下はレンダリング結果です。 ５ コマ目と ６ コマ目はうまくレンダリングできていると画像の向きを直す必要がありません。</p> 94 <img src="assets/rendered_pictures.png" width="768" height="128" alt="レンダリングしました" /> 95 <h4>Photoshopで合成します</h4> 96 <p>グリッドをロックしてキューブマップの配置にします。</p> 97 <img src="assets/renderred_cube_finished.png" width="512" height="384" alt="これもアクションでいけそうな予感が。" /> 98 <h4>CreativeStudio でテクスチャを確認します</h4> 99 <p>きちんと文字が読めるか確認してください。</p> 100 <p class="warning">まずは方向がわかるシーンでテストするのをお勧めします。</p> 101 <img src="assets/cs_cam_cubemap.png" width="438" height="438" alt="向きの確認大事です。" /><br /> 102 <img src="assets/cs_bump_and_cam_cubemap.png" width="400" height="400" alt="チェスに貼るとこんなかんじです" /> 103 <h2>Photoshopで作る</h2> 104 <h3>画像からキューブマップを作る</h3> 105 <p>自分で描いたり、写真を加工して作ったりする方法です。</p> 106 <img src="assets/photoshop_cube.png" width="512" height="384" alt="photoshopで加工します" /> 107 <h4>横方向の画像を作成（または写真を用意）します</h4> 108 <p>2のべき乗であること、縦横比が1:4であること、左右方向がつながっていること、が条件です。</p> 109 <h4>上と下の方向の画像を用意します</h4> 110 <p>画像サイズを縦に300%にし、上下の画像を用意します。この時、上下どちらも４辺が中央の画像とつながっている必要があります。</p> 111 <h4>保存します</h4> 112 <p>キューブマップは画像サイズが大きくなりがちなので、ETC1フォーマットを積極的に利用します。</p> 113 <h4>CreativeStudioでテクスチャを確認します</h4> 114 <img src="assets/cs_ps_cubemap.png" width="400" height="400" alt="csで表示します" /><br /> 115 <img src="assets/cs_bump_and_ps_cubemap.png" width="400" height="400" alt="チェスに貼るとこんなかんじです" /> <!-- InstanceEndEditable --> </div> 116 <div class="footer" /> 117</div> 118</body> 119<!-- InstanceEnd --></html> 120
