チュートリアル: リアルな 3-D のビリヤード ボールの作成Walkthrough: Creating a Realistic 3-D Billiard Ball

このチュートリアルでは、Visual StudioVisual Studio でシェーダー デザイナーおよびイメージ エディターを使用して、リアルな 3-D のビリヤード ボールを作成する方法について説明します。This walkthrough demonstrates how to create a realistic 3-D billiard ball by using the Shader Designer and Image Editor in Visual StudioVisual Studio. ビリヤード ボールの 3-D の外観は、適切なテクスチャのリソースと複数のシェーダー方法を組み合わせることによって実現します。The 3-D appearance of the billiard ball is achieved by combining several shader techniques with appropriate texture resources.

このドキュメントでは、以下のアクティビティについて説明します。This document demonstrates these activities:

  • ビリヤード ボールの基本的な外観を図形とテクスチャを使用して作成する。Creating the basic appearance of a billiard ball by using shape and texture.

  • ランバート照明モデルを使用して奥行を加える。Adding depth by using the Lambert lighting model.

  • 反射の光源を使用して基本的な外観を強化する。Enhancing the basic appearance by using specular highlights.

  • 環境を反映して空間感覚を作成する。Creating a sense of space by reflecting the environment.

必須コンポーネントPrerequisites

このチュートリアルを実行するには、次のコンポーネントとスキルが必要です。You need the following components and skills to complete this walkthrough:

  • キューブ マップにテクスチャを統合するためのツール (June 2010 DirectX SDK に含まれる DirectX テクスチャ ツールなど)。A tool for assembling textures into a cube map, such as the DirectX Texture Tool that is included in the June 2010 DirectX SDK.

  • Visual StudioVisual Studio のイメージ エディターの知識。Familiarity with the Image Editor in Visual StudioVisual Studio.

  • Visual StudioVisual Studio のシェーダー デザイナーの知識。Familiarity with the Shader Designer in Visual StudioVisual Studio.

図形およびテクスチャの基本的な外観の作成Creating the basic appearance with shape and texture

コンピューター グラフィックスで最も基本的な外観の要素は形と色です。In computer graphics, the most-basic elements of appearance are shape and color. コンピューター シミュレーションでは通常、現実世界のオブジェクトの形を表すために 3-D モデルを使用します。In a computer simulation, it is common to use a 3-D model to represent the shape of a real-world object. 色の詳細は、テクスチャ マップを使用してモデルのサーフェイスに適用されます。Color detail is then applied to the surface of the model by using a texture map.

通常は、使用する 3-D モデルの作成をアーティストに依頼する必要がありますが、ビリヤード ボールは一般的な図形 (球) であるため、シェーダー デザイナーには適切なモデルが組み込まれています。Typically, you might have to ask an artist to create a 3-D model that you can use, but because a billiard ball is a common shape (a sphere), the Shader Designer already has a suitable model built in.

球はシェーダー デザイナーの既定のプレビュー図形です。現在、シェーダーのプレビューで別の図形を使用している場合は、球に切り替えます。The sphere is the default preview shape in the Shader Designer; if you are currently using a different shape to preview your shader, switch back to the sphere.

球を使用してシェーダーをプレビューするにはTo preview the shader by using a sphere

  • シェーダー デザイナーのツール バーで、[球でプレビュー] を選択します。On the Shader Designer toolbar, choose Preview with sphere.

    次の手順では、テクスチャをモデルに適用するシェーダー プログラムを作成しますが、最初に、使用するテクスチャを作成する必要があります。In the next step, you'll create a shader program that applies a texture to the model, but first you have to create a texture that you can use. このチュートリアルでは、イメージ エディターを使用してテクスチャを作成する方法を説明します。これは Visual StudioVisual Studio の一部ですが、適切な形式でテクスチャを保存できるすべてのイメージ エディターを使用できます。This walkthrough demonstrates how to create the texture by using the Image Editor, which is a part of Visual StudioVisual Studio, but you can use any image editor that can save the texture in a suitable format.

    [プロパティ] ウィンドウと [ツールボックス] が表示されていることを確認します。Make sure that the Properties window and the Toolbox are displayed.

イメージ エディターを使用してビリヤード ボールのテクスチャを作成するにはTo create a billiard ball texture by using the Image Editor

  1. 操作するテクスチャを作成します。Create a texture to work with. プロジェクトにテクスチャを追加する方法については、「イメージ エディター」の「作業の開始」を参照してください。For information about how to add a texture to your project, see the Getting Started section in Image Editor.

  2. イメージ サイズを設定し、幅が高さの 2 倍になるようにサイズを変更します。これは、ビリヤード ボールの球状のサーフェイスにテクスチャをマップする方法に必要となるためです。Set the image size so that its width is twice its height; this is necessary because of the way that a texture is mapped onto the spherical surface of the billiard ball. イメージのサイズを変更するには、[プロパティ] ウィンドウの [幅][高さ] プロパティに適切な値を指定します。To resize the image, in the Properties window, specify new values for the Width and Height properties. たとえば、幅を 512、高さを 256 に設定します。For example, set the width to 512 and the height to 256.

  3. テクスチャが球にどのようにマップされるかに留意しながら、ビリヤード ボールのテクスチャを描画します。Draw a texture for the billiard ball, keeping in mind how a texture is mapped onto a sphere.

    テクスチャは次のようになります。The texture should look similar to this:

    ビリヤードのボールのテクスチャTexture for the billiard ball

  4. 必要に応じて、このテクスチャのストレージ要件を減らすこともできます。Optionally, you might want to decrease the storage requirements of this texture. これを行うには、テクスチャの幅を高さに合わせて縮小します。You can do that by reducing the width of the texture to match its height. 幅に従ってテクスチャが圧縮されますが、テクスチャを球にマップする方法のため、ビリヤード ボールをレンダリングすると拡大されます。This compresses the texture along its width, but due to the way that the texture is mapped to the sphere, it will be expanded when the billiard ball is rendered. サイズを変更すると、テクスチャは次のようになります。After resizing, the texture should look similar to this:

    正方形に圧縮されたビリヤードのテクスチャBilliard texture compressed into a square

    これで、このテクスチャをモデルに適用するシェーダーを作成できます。Now you can create a shader that applies this texture to the model.

基本的なテクスチャ シェーダーを作成するにはTo create a basic texture shader

  1. 操作する DGSL シェーダーを作成します。Create a DGSL shader to work with. プロジェクトに DGSL シェーダーを追加する方法に関する詳細については、「シェーダー デザイナー」の「作業の開始」セクションを参照してください。For information about how to add a DGSL shader to your project, see the Getting Started section in Shader Designer.

    既定では、シェーダー グラフは次のようになります。By default, a shader graph looks like this:

    既定のシェーダー グラフThe default shader graph

  2. テクスチャ サンプルの値が現在のピクセルに適用されるように、既定のシェーダーを変更します。Modify the default shader so that it applies the value of a texture sample to the current pixel. シェーダー グラフは次のようになります。The shader graph should look like this:

    テクスチャをオブジェクトに適用するシェーダー グラフA shader graph that applies texture to an object

  3. テクスチャのプロパティを構成して、前の手順で作成したテクスチャを適用します。Apply the texture that you created in the previous procedure by configuring the texture properties. [テクスチャ サンプル] ノードの [テクスチャ] プロパティの値を [Texture1] に設定し、同じプロパティ ウィンドウで [Texture1] プロパティ グループの [ファイル名] プロパティを使用して、テクスチャ ファイルを指定します。Set the value of the Texture property of the Texture Sample node to Texture1, and then specify the texture file by using the Filename property of the Texture1 property group in the same property window.

    シェーダーでテクスチャを適用する方法の詳細については、「方法: 基本テクスチャ シェーダーを作成する」を参照してください。For more information about how to apply a texture in your shader, see How to: Create a Basic Texture Shader.

    ビリヤード ボールは、次のようになります。Your billiard ball should now look similar to this:

    テクスチャ化したビリヤードのボールのクローズアップA closeup of the textured billiard ball

ランバート照明モデルを使用した奥行の作成Creating depth with the Lambert lighting model

これまでは、簡単に認識できるビリヤード ボールを作成してきました。So far, you've created an easily recognizable billiard ball. ただし、フラットで面白味がなく、真に迫った複製ではなく漫画のビリヤード ボールのように見えます。However, it appears flat and uninteresting—more like a cartoon picture of a billiard ball than a convincing replica. 単純なシェーダーのため外観がフラットになり、ビリヤード ボールのサーフェイスの各ピクセルが同じ光量を受けているように見えます。The flat appearance results from the simplistic shader, which behaves as if each pixel on the surface of the billiard ball receives the same amount of light.

実際には、光は、光源に直接面するサーフェイスで最も明るく見え、光源に対して斜角にあるサーフェイスではやや暗く見えます。In the real world, light appears brightest on surfaces that directly face a light source and appears less bright on surfaces that are at an oblique angle to the light source. これは、サーフェイスが光源に直接面するときに、光線のエネルギーが最も小さいサーフェイス領域に分散されるためです。This is because the energy in the light rays is distributed across the smallest surface area when the surface directly faces the light source. サーフェイスが光源から遠いほど、同じ量のエネルギーが大きいサーフェイス領域に分散されます。As the surface turns away from the light source, the same amount of energy is distributed across an increasingly larger surface area. 光源の反対側に面しているサーフェイスは光エネルギーをまったく受けないので、完全に暗い外観になります。A surface that faces away from a light source receives no light energy at all, resulting in a completely dark appearance. オブジェクトのサーフェイス全体での明るさのばらつきは、オブジェクトの形を示すのに役立つ重要な視覚上の手掛かりです。これがないと、オブジェクトがフラットに見えます。This variance in brightness across the surface of an object is an important visual cue that helps indicate the shape of an object; without it, the object appears flat.

コンピューター グラフィックスでは、複雑な実際の照明相互作用の単純化された近似である照明モデルを使用して、実際の照明の外観を複製します。In computer graphics, lighting models—simplified approximations of complex, real-world lighting interactions—are used to replicate the appearance of real-world lighting. 前に説明したように、ランバート照明モデルは、オブジェクトのサーフェイス全体に拡散反射される光の量を変えます。The Lambert lighting model varies the amount of diffusely reflected light across the surface of an object as described in the previous paragraph. シェーダーにランバート照明モデルを追加して、ビリヤード ボールをより真に迫った 3-D の外観にすることができます。You can add the Lambert lighting model to your shader to give the billiard ball a more convincing 3-D appearance.

ランバート照明をシェーダーに追加するにはTo add Lambert lighting to your shader

  • シェーダーを変更して、ランバートの照明値によってテクスチャ サンプルの値を調整します。Modify your shader to modulate the value of the texture sample by the Lambert lighting value. シェーダー グラフは、次のようになります。Your shader graph should look like this:

    ランバート光源が加えられたシェーダー グラフThe shader graph with Lambert lighting added

  • 必要に応じて、シェーダー グラフの MaterialDiffuse プロパティを構成することによって、照明を動かす方法を調整することもできます。Optionally, you can adjust how the lighting behaves by configuring the MaterialDiffuse property of the shader graph. シェーダー グラフのプロパティにアクセスするには、デザイン サーフェイス上の何もない領域を選択してから、[プロパティ] ウィンドウでアクセスするプロパティをクリックします。To access properties of the shader graph, choose an empty area of the design surface, and then locate the property that you want to access in the Properties window.

    シェーダーでランバート照明を適用する方法の詳細については、「方法: 基本ランバート シェーダーを作成する」を参照してください。For more information about how to apply Lambert lighting in your shader, see How to: Create a Basic Lambert Shader.

    ランバート照明が適用されると、ビリヤード ボールは次のようになります。With Lambert lighting applied, your billiard ball should look similar to this:

    テクスチャ化され、光が照射されたビリヤードのボールのクローズアップA closeup of the textured and lit billiard ball

反射の光源を使用した基本的な外観の強化Enhancing the basic appearance with specular highlights

ランバート照明モデルは、テクスチャのみのシェーダーにはない図形と次元の効果を与えます。The Lambert lighting model provides the sense of shape and dimension that was absent in the texture-only shader. ただし、ビリヤード ボールの外観には多少鈍さが残っています。However, the billiard ball still has a somewhat dull appearance.

実際のビリヤード ボールには通常、ボールに当たる光を反射する光沢があります。A real billiard ball usually has a glossy finish that reflects a portion of the light that falls on it. この反射光の一部により反射の光源が生じます。これにより、サーフェイスの反映特性をシミュレートします。Some of this reflected light results in specular highlights, which simulate the reflecting properties of a surface. 仕上げの特性によって、ハイライトは局所的または広範囲であったり、あるいは濃淡が異なっていたりします。Depending on the properties of the finish, the highlights can be localized or broad, intense or subtle. これらの反射の光源は、光源、サーフェイスの向き、およびカメラの位置の関係を使用してモデル化されます。つまり、カメラに直接光源を反射するサーフェイスの向きである場合にハイライトが最も強くなり、反射が直接的ではない場合はハイライトが弱くなります。These specular reflections are modeled by using the relationship between a light source, the orientation of the surface, and the camera position—that is, the highlight is most intense when the orientation of the surface reflects the light source directly into the camera, and is less intense when the reflection is less direct.

前に説明したように、フォン照明モデルはランバート照明モデルに基づいて反射の光源を組み込みます。The Phong lighting model builds on the Lambert lighting model to include specular highlights as described in the previous paragraph. シェーダーにフォン照明モデルを追加して、ビリヤード ボールをより目を引く外観が得られる疑似仕上げにすることができます。You can add the Phong lighting model to your shader to give the billiard ball a simulated finish that results in a more interesting appearance.

反射の光源をシェーダーに追加するにはTo add specular highlights to your shader

  1. 追加のブレンドを使用して反射の効果を含めるようにシェーダーを変更します。Modify your shader to include the specular contribution by using additive blending. シェーダー グラフは、次のようになります。Your shader graph should look like this:

    反射光が加えられたシェーダー グラフThe shader graph with specular lighting added

  2. 必要に応じて、シェーダー グラフの反射プロパティ (MaterialSpecularMaterialSpecularPower) を構成することによって反射の光源の動きを調整できます。Optionally, you can adjust the way that the specular highlight behaves by configuring the specular properties (MaterialSpecular and MaterialSpecularPower) of the shader graph. シェーダー グラフのプロパティにアクセスするには、デザイン サーフェイス上の何もない領域を選択してから、[プロパティ] ウィンドウでアクセスするプロパティをクリックします。To access properties of the shader graph, choose an empty area of the design surface, and then in the Properties window, locate the property that you want to access.

    シェーダーで反射の光源を適用する方法の詳細については、「方法: 基本フォン シェーダーを作成する」を参照してください。For more information about how to apply specular highlights in your shader, see How to: Create a Basic Phong Shader.

    反射の光源が適用されると、ビリヤード ボールは次のようになります。With specular highlighting applied, your billiard ball should look similar to this:

    反射が加えられたビリヤードのボールのクローズアップA closeup of the billiard ball with specular added

環境を反映した空間感覚の作成Creating a sense of space by reflecting the environment

反射の光源を適用すると、かなり真に迫ったビリヤード ボールに見えます。With specular highlights applied, your billiard ball looks pretty convincing. これには、形、ペイント、および仕上げが正しく適用されています。It's got the right shape, the right paint job, and the right finish. ただし、ビリヤード ボールが環境の一部であるように見せるもう 1 つの方法があります。However, there's still one more technique that will make your billiard ball look more like a part of its environment.

実際のビリヤード ボールをよく見てみると、光沢のあるサーフェイスには反射の光源だけでなく、その周囲の景色もかすかに映っています。If you examine a real billiard ball closely, you can see that its glossy surface doesn't just exhibit specular highlights but also faintly reflects an image of the world around it. 各ピクセルの最終的な色を決定するには、周囲の景色をテクスチャとして使用し、それをモデルの独自のテクスチャと結合することで、この景色の反射をシミュレートします。You can simulate this reflection by using an image of the environment as a texture and combining it with the model's own texture to determine the final color of each pixel. 必要な仕上げの種類によっては、適切な量の反射テクスチャをシェーダーの他の部分に結合することもできます。Depending on the kind of finish you want, you can combine more or less of the reflection texture together with the rest of the shader. たとえば、ミラーのような高反射性のサーフェイスをシミュレートするシェーダーは、反射テクスチャのみを使用することがありますが、ビリヤード ボールにあるような微妙な反射をシミュレートするシェーダーは、反射テクスチャの値の一部を他のシェーダー計算と組み合わせることがあります。For example, a shader that simulates a highly reflective surface like a mirror might use only the reflection texture, but a shader that simulates a more subtle reflection like the one found on a billiard ball might combine just a small portion of the reflection texture's value together with the rest of the shader calculation.

もちろん、反射された景色を、モデルのテクスチャ マップの適用と同じ方法でモデルに適用することはできません。Of course, you can't just apply the reflected image to the model in the same way that you apply the model's texture map. それを行うと、反射された景色がボールに貼りついているかのように、周囲の景色がビリヤード ボールと一緒に動いてしまいます。If you did, the reflection of the world would move with the billiard ball as if the reflection were glued to it. 反射はどの方向からも生じるため、どの角度にも反射マップを与える方法と、環境に応じて反射マップを方向付けておく方法が必要です。Because a reflection can come from any direction, you need a way to provide a reflection map value for any angle, and a way to keep the reflection map oriented according to the world. これらの要件を満たすには、キューブ マップと呼ばれる特殊なテクスチャ マップを使用します。これは、キューブの面を形成するよう配置される 6 つのテクスチャを提供します。To satisfy these requirements you can use a special kind of texture map—called a cube map—that provides six textures arranged to form the sides of a cube. このキューブの中から、テクスチャ値を見つけるためにどの方向でも指し示すことができます。From inside this cube, you can point in any direction to find a texture value. キューブの各面のテクスチャに周囲の景色が含まれている場合は、キューブのサーフェイスの正しい場所をサンプリングすることで景色の反射をシミュレートできます。If the textures on each side of the cube contain images of the environment, you can simulate any reflection by sampling the correct location on the surface of the cube. キューブを環境に合わせておくことで、環境の正確な反射を取得します。By keeping the cube aligned to the world, you'll get an accurate reflection of the environment. キューブをサンプリングする場所を決めるには、オブジェクトのサーフェイスからのカメラ ベクターの反射を計算し、その結果を 3-D テクスチャ座標として使用します。To determine where the cube should be sampled, you just calculate the reflection of the camera vector off the surface of the object, and then use it as 3-D texture coordinates. このようなキューブ マップの使用は、環境マッピングと呼ばれる一般的な方法です。Using cube maps in this way is a common technique that's known as environment mapping.

環境マッピングは、前に説明したように、実際の反射の効果的近似を提供します。Environment mapping provides an efficient approximation of real reflections as described in the preceding paragraphs. 環境マップされた景色の反射をシェーダーに調和させて、ビリヤード ボールにより臨場感を持たせる疑似仕上げを加えることができます。You can blend environment-mapped reflections into your shader to give the billiard ball a simulated finish that makes the billiard ball seem more grounded in the scene.

まず、キューブ マップ テクスチャを作成します。The first step is to create a cube map texture. 多くの種類のアプリでは、特に反射がわずかな場合や、画面の特に目に付く場所にない場合は、効果を得るためにキューブ マップの内容が完全である必要はありません。In many kinds of apps, the contents of the cube map don't have to be perfect to be effective, especially when the reflection is subtle or doesn't occupy a prominent space on the screen. たとえば、多くのゲームでは、環境マッピングに事前計算済みのキューブ マップを使用し、各反射オブジェクトに最も近いものを使用しますが、これは正しい反射ではないことを意味します。For example, many games use pre-computed cube maps for environment mapping and just use the one nearest to each reflective object, although this means that the reflection isn't correct. 真に迫った効果を得るためには概算でも十分な場合があります。Even a rough approximation is often good enough for a convincing effect.

イメージ エディターを使用して環境マップのテクスチャを作成するにはTo create textures for an environment map by using the Image Editor

  1. 操作するテクスチャを作成します。Create a texture to work with. プロジェクトにテクスチャを追加する方法については、「イメージ エディター」の「作業の開始」を参照してください。For information about how to add a texture to your project, see the Getting Started section in Image Editor.

  2. 幅と高さが等しくなるように、またそれぞれの値が 2 のべき乗になるようにイメージ サイズを設定します。これは、キューブのマップに対してインデックスを作成する場合に必要です。Set the image size so that its width is equal to its height, and is a power of two in size; this is necessary because of the way that a cube map is indexed. イメージのサイズを変更するには、[プロパティ] ウィンドウの [幅][高さ] プロパティに適切な値を指定します。To resize the image, in the Properties window, specify new values for the Width and Height properties. たとえば、[幅][高さ] の各プロパティの値を 256 に設定します。For example, set the value of the Width and Height properties to 256.

  3. 単色を使用してテクスチャを塗ります。Use a solid color to fill the texture. このテクスチャはキューブ マップの下部になります。これは、ビリヤード台のサーフェイスに対応します。This texture will be the bottom of the cube map, which corresponds to the surface of the billiard table. 次のテクスチャのために使用した色を覚えておいてください。Keep the color you used in mind for the next texture.

  4. 1 番目と同じサイズで 2 番目のテクスチャを作成します。Create a second texture that is the same size as the first. このテクスチャはキューブ マップの 4 面で繰り返されます。これは、ビリヤード台のサーフェイスおよび面と、ビリヤード台の周辺の領域に対応します。This texture will be repeated on the four sides of the cube map, which correspond to the surface and sides of a billiard table, and to the area around the billiard table. 下部のテクスチャと同じ色を使用して、このテクスチャでビリヤード台のサーフェイスを描画します。Make sure to draw the surface of the billiard table in this texture by using the same color as in the bottom texture. テクスチャは次のようになります。The texture should look similar to this:

    キューブ マップの側面のテクスチャThe texture for the sides of the cubemap

    効果を得るために反射マップは写真のようにリアルである必要はありません。たとえば、この文書のイメージを作成するために使用したキューブ マップには、6 つではなく 4 つのポケットがあります。Remember that a reflection map doesn't have to be photorealistic to be effective; for example, the cube map used to create the images in this article contains just four pockets instead of six.

  5. 他のテクスチャと同じサイズで 3 番目のテクスチャを作成します。Create a third texture that is the same size as the others. このテクスチャはキューブ マップの上部になります。これは、ビリヤード台の上にある天井に対応します。This texture will be the top of the cube map, which corresponds to the ceiling above the billiard table. この部分の反射をより目を引くものにするには、天井の照明を描画して、前の手順でシェーダーに追加した反射の光源を強めることができます。To make this part of the reflection more interesting, you can draw an overhead light to reinforce the specular highlights that you added to the shader in the previous procedure. テクスチャは次のようになります。The texture should look similar to this:

    キューブ マップの上部のテクスチャThe texture for the top of the cubemap

    キューブ マップの面について個々のテクスチャを作成したので、ツールを使用して、1 つの .dds のテクスチャに格納できるキューブ マップにそれらのテクスチャを統合できます。Now that you have created individual textures for the sides of the cube map, you can use a tool to assemble them into a cube map that can be stored in a single .dds texture. キューブ マップを .dds テクスチャ形式で保存できれば、キューブ マップを作成するどのプログラムでも使用できます。You can use any program you want to create the cube map as long as it can save the cube map in the .dds texture format. このチュートリアルでは、June 2010 DirectX SDK の一部である DirectX テクスチャ ツールを使用して、テクスチャを作成する方法を説明します。This walkthrough demonstrates how to create the texture by using the DirectX Texture Tool that's a part of the June 2010 DirectX SDK.

DirectX テクスチャ ツールを使用してキューブ マップを統合するにはTo assemble a cube map by using the DirectX Texture Tool

  1. DirectX テクスチャ ツールのメイン メニューで、[ファイル][New Texture] の順に選択します。In the DirectX Texture Tool, on the main menu, choose File, New Texture. [New Texture] ダイアログ ボックスが表示されます。The New Texture dialog box appears.

  2. [Texture Type] グループで、[Cubemap Texture] を選択します。In the Texture Type group, choose Cubemap Texture.

  3. [サイズ] グループの [幅][高さ] に適切な値を入力し、[OK] をクリックします。In the Dimensions group, enter the correct value for the Width and Height, and then choose OK. 新しいテクスチャ ドキュメントが表示されます。A new texture document appears. 既定では、テクスチャ ドキュメントに最初に表示されるテクスチャは、Positive X のキューブ面に対応します。By default, the texture first shown in the texture document corresponds to the Positive X cube face.

  4. テクスチャ キューブの面に作成したテクスチャを、キューブ面に読み込みます。Load the texture that you created for the side of the texture cube onto the cube face. メイン メニューで、[ファイル][Open Onto This Cubemap Face] の順に選択し、キューブの面に作成したテクスチャを選択したら、[開く] を選択します。On the main menu, choose File, Open Onto This Cubemap Face, select the texture that you created for the side of the cube, and then choose Open.

  5. Negative XPositive Z、および Negative Z キューブ面について、手順 4. を繰り返します。Repeat step 4 for the Negative X, Positive Z, and Negative Z cube faces. そのためには、読み込む面を表示する必要があります。To do so, you must view the face that you want to load. 別のキューブ マップの面を表示するには、メイン メニューで、[表示][Cube Map Face] の順に選択し、表示する面を選択します。To view a different cube map face, on the main menu, choose View, Cube Map Face, and then select the face that you want to view.

  6. Positive Y キューブ面について、テクスチャ キューブの上部に作成したテクスチャを読み込みます。For the Positive Y cube face, load the texture that you created for the top of the texture cube.

  7. Negative Y キューブ面について、テクスチャ キューブの下部に作成したテクスチャを読み込みます。For the Negative Y cube face, load the texture that you created for the bottom of the texture cube.

  8. テクスチャを保存します。Save the texture.

    次のようなキューブ マップのレイアウトが想像されます。You can imagine the layout of the cube map like this:

    環境キューブ マップのレイアウトLayout of the environment cube map

    上のイメージは +Y (正の Y) キューブ面、真ん中のイメージは、左から -X、+Z、+X、-Z キューブ面、下のイメージは -Y キューブ面です。The image at the top is the positive Y (+Y) cube face; in the middle, from left to right, is the -X, +Z, +X, and -Z cube faces; at the bottom is the -Y cube face.

    これで、キューブ マップ サンプルを残りのシェーダーに調和させるようにシェーダーを変更できます。Now you can modify the shader to blend the cube map sample into the rest of the shader.

環境マッピングをシェーダーに追加するにはTo add environment mapping to your shader

  1. 追加のブレンドを使用して環境マッピングの効果を含めるようにシェーダーを変更します。Modify your shader to include the environment mapping contribution by using additive blending. シェーダー グラフは、次のようになります。Your shader graph should look like this:

    2 種類の反射型シェーダー ノードのクローズアップA closeup of both kind of reflective shader nodes

    シェーダー グラフを単純化するために、[積和演算] ノードを使用できることに注目してください。Note that you can use a Multiply-Add node to simplify the shader graph.

    環境マッピングを実装するシェーダー ノードの詳細なビューを次に示します。Here's a more detailed view of the shader nodes that implement environment mapping:

    環境マッピングが加えられたシェーダー グラフThe shader graph with environment mapping added

  2. キューブ マップのテクスチャのプロパティを構成して、前の手順で作成したテクスチャを適用します。Apply the texture that you created in the previous procedure by configuring the texture properties of the cube map. [キューブ マップのサンプル] ノードの [テクスチャ] プロパティの値を [Texture2] に設定し、[Texture2] プロパティ グループの [ファイル名] プロパティを使用して、テクスチャ ファイルを指定します。Set the value of the Texture property of the Cubemap Sample node to Texture2, and then specify the texture file by using the Filename property of the Texture2 property group.

  3. 必要に応じて、[定数] ノードの [出力] プロパティを構成して、ビリヤード ボールの反射を調整できます。Optionally, you can adjust the reflectivity of the billiard ball by configuring the Output property of the Constant node. ノードのプロパティにアクセスするには、[プロパティ] ウィンドウで目的のノードをクリックしてから、アクセスするプロパティをクリックします。To access properties of the node, select it and then in the Properties window, locate the property that you want to access.

    環境マッピングが適用されると、ビリヤード ボールは次のようになります。With environment mapping applied, your billiard ball should look similar to this:

    環境マッピングが適用されたビリヤードのボールのクローズアップA closeup of the environment mapped billiard ball

    この最終的なイメージでは、真に迫ったビリヤード ボールを作成するために追加した効果がどのように連携しているかに注目してください。In this final image, notice how the effects that you added come together to create a very convincing billiard ball. 図形、テクスチャ、および照明は、3-D オブジェクトの基本的な外観を作成し、反射の光源および景色の反射は、ビリヤード ボールをより目を引くものにして、環境の一部であるかのように見せます。The shape, texture, and lighting create the basic appearance of a 3-D object, and the specular highlights and reflections make the billiard ball more interesting and look like a part of its environment.

関連項目See Also

方法: シェーダーをエクスポートする How to: Export a Shader
方法: シェーダーを 3-D モデルに適用する How to: Apply a Shader to a 3-D Model
シェーダー デザイナー Shader Designer
イメージ エディター Image Editor
シェーダー デザイナー ノードShader Designer Nodes