3-D グラフィックスの概要3-D Graphics Overview

Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF)3-D3-D 機能を使うと、マークアップと手続き型コード両方の 3-D グラフィックスを描画、変換、およびアニメーション化することができます。The 3-D3-D functionality in Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) enables developers to draw, transform, and animate 3-D graphics in both markup and procedural code. 開発者は 2-D2-D グラフィックスと 3-D3-D グラフィックスを組み合わせて、リッチなコントロールを作成したり、データの複雑なイラストを提供したり、アプリケーションのインターフェイスのユーザー エクスペリエンスを拡張したりすることができます。Developers can combine 2-D2-D and 3-D3-D graphics to create rich controls, provide complex illustrations of data, or enhance the user experience of an application's interface. 3-D3-D サポートWPFWPFフル装備のゲーム開発プラットフォームを提供するものではありません。support in WPFWPF is not designed to provide a full-featured game-development platform. このトピックでは、WPFWPF グラフィックス システムでの 3-D3-D 機能の概要について説明します。This topic provides an overview of 3-D3-D functionality in the WPFWPF graphics system.

2-D コンテナー内の 3-D3-D in a 2-D Container

3-D3-D グラフィックス コンテンツでWPFWPFは、要素にカプセル化Viewport3D、2 次元要素の構造に含めることができます。graphics content in WPFWPF is encapsulated in an element, Viewport3D, that can participate in the two-dimensional element structure. グラフィックス システムはViewport3Dなどの他の多くの 2 次元のビジュアル要素としてWPFWPFします。The graphics system treats Viewport3D as a two-dimensional visual element like many others in WPFWPF. Viewport3D ウィンドウとして機能 — ビューポート — 3 次元シーンです。functions as a window—a viewport—into a three-dimensional scene. より正確には、3-D3-D シーンが投影されるサーフェイスです。More accurately, it is a surface on which a 3-D3-D scene is projected.

従来の2-D2-Dアプリケーションを使用してViewport3Dグリッドまたはキャンバスなどの別のコンテナー要素と同様です。In a conventional 2-D2-D application, use Viewport3D as you would another container element like Grid or Canvas. 使用できますが、Viewport3D2-D2-D同じシーン グラフでオブジェクトを描画することはできません相互に貫通させる2-D2-D3-D3-D内のオブジェクトは、Viewport3Dします。Although you can use Viewport3D with other 2-D2-D drawing objects in the same scene graph, you cannot interpenetrate 2-D2-D and 3-D3-D objects within a Viewport3D. このトピックでは、描画する方法について重点的は3-D3-D内でのグラフィックス、Viewport3Dします。This topic will focus on how to draw 3-D3-D graphics inside the Viewport3D.

3-D 座標空間3-D Coordinate Space

2-D2-D グラフィックス用の WPFWPF 座標系の原点は、レンダリング領域 (通常は画面) の左上にあります。The WPFWPF coordinate system for 2-D2-D graphics locates the origin in the upper left of the rendering area (typically the screen). 2-D2-D システムでは、x 軸の正の値は右に向かって大きくなり、y 軸の正の値は下に向かって大きくなります。In the 2-D2-D system, positive x-axis values proceed to the right and positive y-axis values proceed downward. 一方、3-D3-D 座標系では、原点はレンダリング領域の中央にあり、x 軸の正の値は右に向かって大きくなりますが、y 軸の正の値は上に向かって大きくなり、z 軸の正の値は原点から手前に向かって大きくなります。In the 3-D3-D coordinate system, however, the origin is located in the center of the rendering area, with positive x-axis values proceeding to the right but positive y-axis values proceeding upward instead, and positive z-axis values proceeding outward from the origin, toward the viewer.

座標系Coordinate systems
従来の 2-D および 3-D 座標系の表現Conventional 2-D and 3-D coordinate system representations

これらの軸によって定義される空間は、WPFWPF 内の 3-D3-D オブジェクトのための静止した基準枠です。The space defined by these axes is the stationary frame of reference for 3-D3-D objects in WPFWPF. この空間内にモデルを構築し、それらを表示するためのライトとカメラを作成するときは、この静止した基準枠 ("ワールド空間") と、モデルに変換を適用するときにモデルごとに作成するローカルな基準枠を区別することをお勧めします。As you build models in this space and create lights and cameras to view them, it's helpful to distinguish this stationary frame of reference, or "world space," from the local frame of reference you create for each model when you apply transformations to it. また、ワールド空間内のオブジェクトは、ライトとカメラの設定により、まったく違って見えたり、またはまったく見えなくなることがありますが、カメラの位置によってワールド空間内のオブジェクトの場所が変化することはないことに注意してください。Remember also that objects in world space might look entirely different, or not be visible at all, depending on light and camera settings, but the position of the camera does not change the location of objects in world space.

カメラと投影Cameras and Projections

2-D2-D で作業する開発者は、2 次元の画面に描画プリミティブを配置することに慣れています。Developers who work in 2-D2-D are accustomed to positioning drawing primitives on a two-dimensional screen. 3-D3-D シーンを作成するときは、実際には 3-D3-D オブジェクトの 2-D2-D 表現を作成しているということを忘れないようにすることが重要です。When you create a 3-D3-D scene, it's important to remember that you are really creating a 2-D2-D representation of 3-D3-D objects. 3-D3-D シーンは観察者の視点によって見え方が異なるので、その視点を指定する必要があります。Because a 3-D3-D scene looks different depending on the onlooker's point of view, you must specify that point of view. Cameraクラスでは、このポイントの表示を指定できます。、3-D3-Dシーンです。The Camera class allows you to specify this point of view for a 3-D3-D scene.

3-D3-D シーンが 2-D2-D サーフェイス上でどのように表現されるかを理解するもう 1 つの方法は、表示サーフェイスへの投影としてシーンを記述することです。Another way to understand how a 3-D3-D scene is represented on a 2-D2-D surface is by describing the scene as a projection onto the viewing surface. ProjectionCamera異なる投影と観察者の表示を変更するには、そのプロパティを指定することができます3-D3-Dモデル。The ProjectionCamera allows you to specify different projections and their properties to change how the onlooker sees 3-D3-D models. APerspectiveCameraシーンを短縮遠近法で描画する投影を指定します。A PerspectiveCamera specifies a projection that foreshortens the scene. つまり、PerspectiveCamera勾配消失点透視投影を提供します。In other words, the PerspectiveCamera provides vanishing-point perspective. シーンの座標空間内でのカメラの位置、カメラの方向と視野、およびシーン内での "上" の方向を定義するベクトルを指定できます。You can specify the position of the camera in the coordinate space of the scene, the direction and field of view for the camera, and a vector that defines the direction of "up" in the scene. 次の図は、PerspectiveCameraのプロジェクション。The following diagram illustrates the PerspectiveCamera's projection.

NearPlaneDistanceFarPlaneDistanceプロパティのProjectionCameraカメラの投影の範囲を制限します。The NearPlaneDistance and FarPlaneDistance properties of ProjectionCamera limit the range of the camera's projection. カメラはシーン内の任意の場所に配置できるため、カメラをモデルの内部またはモデルの非常に近くに実際に配置することができ、オブジェクトを正しく識別するのが困難になる場合があります。Because cameras can be located anywhere in the scene, it's possible for the camera to be actually positioned inside a model or very near a model, making it hard to distinguish objects properly. NearPlaneDistance これを超えるオブジェクトが描画しないカメラからの最小距離を指定することができます。allows you to specify a minimum distance from the camera beyond which objects will not be drawn. 逆に、FarPlaneDistance遠すぎるを認識できるオブジェクトをシーンに含まれませんが、これを超えるオブジェクトを描画しないが、カメラからの距離を指定することができます。Conversely, FarPlaneDistance lets you specify a distance from the camera beyond which objects will not be drawn, which ensures that objects too far away to be recognizable won't be included in the scene.

カメラのセットアップCamera setup
カメラの位置Camera position

OrthographicCamera 正投影を指定します、3-D3-Dモデルを2-D2-Dビジュアル サーフェイスです。specifies an orthogonal projection of a 3-D3-D model to a 2-D2-D visual surface. 他のカメラと同じように、位置、視線方向、および "上" の向きを指定します。Like other cameras, it specifies a position, viewing direction, and "upward" direction. 異なりPerspectiveCamera、ただし、OrthographicCamera遠近法を含まない射影について説明します。Unlike PerspectiveCamera, however, OrthographicCamera describes a projection that does not include perspective foreshortening. つまり、OrthographicCamera辺がカメラの位置で辺を満たす 1 つではなく、並列の表示ボックスについて説明します。In other words, OrthographicCamera describes a viewing box whose sides are parallel, instead of one whose sides meet in a point at the camera. 使用して表示すると、次の図は、同じモデルPerspectiveCameraOrthographicCameraします。The following image shows the same model as viewed using PerspectiveCamera and OrthographicCamera.

正投影と透視投影Orthographic and perspective projection
透視投影と正投影Perspective and Orthographic Projections

次のコードでは、カメラの一般的な設定を示します。The following code shows some typical camera settings.

// Defines the camera used to view the 3D object. In order to view the 3D object,
// the camera must be positioned and pointed such that the object is within view 
// of the camera.
PerspectiveCamera myPCamera = new PerspectiveCamera();

// Specify where in the 3D scene the camera is.
myPCamera.Position = new Point3D(0, 0, 2);

// Specify the direction that the camera is pointing.
myPCamera.LookDirection = new Vector3D(0, 0, -1);

// Define camera's horizontal field of view in degrees.
myPCamera.FieldOfView = 60;

// Asign the camera to the viewport
myViewport3D.Camera = myPCamera;
' Defines the camera used to view the 3D object. In order to view the 3D object,
' the camera must be positioned and pointed such that the object is within view 
' of the camera.
Dim myPCamera As New PerspectiveCamera()

' Specify where in the 3D scene the camera is.
myPCamera.Position = New Point3D(0, 0, 2)

' Specify the direction that the camera is pointing.
myPCamera.LookDirection = New Vector3D(0, 0, -1)

' Define camera's horizontal field of view in degrees.
myPCamera.FieldOfView = 60

' Asign the camera to the viewport
myViewport3D.Camera = myPCamera

モデルとメッシュ プリミティブModel and Mesh Primitives

Model3D ジェネリック型を表す抽象基本クラスは、3-D3-Dオブジェクト。is the abstract base class that represents a generic 3-D3-D object. 構築する、3-D3-Dシーンを表示するにはいくつかのオブジェクトが必要なとシーン グラフを構成するオブジェクトから派生Model3Dします。To build a 3-D3-D scene, you need some objects to view, and the objects that make up the scene graph derive from Model3D. 現時点では、WPFWPFでモデリング ジオメトリをサポートするGeometryModel3Dします。Currently, the WPFWPF supports modeling geometries with GeometryModel3D. Geometryこのモデルのプロパティには、メッシュがプリミティブ。The Geometry property of this model takes a mesh primitive.

モデルを構築するには、最初にプリミティブ (メッシュ) を作成します。To build a model, begin by building a primitive, or mesh. 3-D3-D のプリミティブは、1 つの 3-D3-D エンティティを形成する頂点の集合です。A 3-D3-D primitive is a collection of vertices that form a single 3-D3-D entity. ほとんどの 3-D3-D システムでは、最も簡単な閉じた図形 (3 つの頂点で定義された三角形) でモデル化されたプリミティブが提供されます。Most 3-D3-D systems provide primitives modeled on the simplest closed figure: a triangle defined by three vertices. 三角形の 3 つの頂点は同一平面上にあるため、三角形の追加を続けて、メッシュと呼ばれる複雑な図形をモデル化できます。Because the three points of a triangle are coplanar, you can continue adding triangles in order to model more complex shapes, called meshes.

WPFWPF 3-D3-Dシステムは、現在、MeshGeometry3Dクラス、ジオメトリを指定できます。 これが現在サポートされていません定義済み3-D3-D球体や立方フォームなどのプリミティブです。The WPFWPF 3-D3-D system currently provides the MeshGeometry3D class, which allows you to specify any geometry; it does not currently support predefined 3-D3-D primitives like spheres and cubic forms. 作成を開始、MeshGeometry3Dとして三角形の頂点のリストを指定することでそのPositionsプロパティ。Begin creating a MeshGeometry3D by specifying a list of triangle vertices as its Positions property. 各頂点として指定された、Point3Dします。Each vertex is specified as a Point3D. (Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) では、各頂点の座標を表す 3 組の数値のリストとして、このプロパティを指定します)。ジオメトリによっては、メッシュが多くの三角形で構成され、その一部が同じ角 (頂点) を共有する可能性があります。(In Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML), specify this property as a list of numbers grouped in threes that represent the coordinates of each vertex.) Depending on its geometry, your mesh might be composed of many triangles, some of which share the same corners (vertices). WPFWPF でメッシュを正しく描画するには、どの頂点がどの三角形によって共有されているのかということに関する情報が必要です。To draw the mesh correctly, the WPFWPF needs information about which vertices are shared by which triangles. 使用した三角形のインデックスの一覧を指定することでこの情報を提供する、TriangleIndicesプロパティ。You provide this information by specifying a list of triangle indices with the TriangleIndices property. この一覧で、ポイントが指定された順序を指定します、Positionsリストが三角形を決定します。This list specifies the order in which the points specified in the Positions list will determine a triangle.

<GeometryModel3D>
  <GeometryModel3D.Geometry>
          <MeshGeometry3D 
              Positions="-1 -1 0  1 -1 0  -1 1 0  1 1 0"
              Normals="0 0 1  0 0 1  0 0 1  0 0 1"
              TextureCoordinates="0 1  1 1  0 0  1 0   "
              TriangleIndices="0 1 2  1 3 2" />
      </GeometryModel3D.Geometry>
      <GeometryModel3D.Material>
          <DiffuseMaterial>
              <DiffuseMaterial.Brush>
                  <SolidColorBrush Color="Cyan" Opacity="0.3"/>
              </DiffuseMaterial.Brush>
          </DiffuseMaterial>
      </GeometryModel3D.Material>
  <!-- Translate the plane. -->
      <GeometryModel3D.Transform>
          <TranslateTransform3D
            OffsetX="2" OffsetY="0" OffsetZ="-1"   >
          </TranslateTransform3D>
      </GeometryModel3D.Transform>
  </GeometryModel3D>

上記の例では、Positionsリストは、キューブの形のメッシュを定義する 8 個の頂点を指定します。In the preceding example, the Positions list specifies eight vertices to define a cube-shaped mesh. TriangleIndicesプロパティが 3 つのインデックスの 12 個のグループの一覧を指定します。The TriangleIndices property specifies a list of twelve groups of three indices. リストの各番号へのオフセットを指す、Positions一覧。Each number in the list refers to an offset into the Positions list. 指定された最初の 3 つの頂点など、Positionsリストは (1,1,0) (0,1,0) と (0,0,0)。For example, the first three vertices specified by the Positions list are (1,1,0), (0,1,0), and (0,0,0). 指定された最初の 3 つのインデックス、TriangleIndicesリストは 0、2、および 1、第 3 に、最初に対応し、2 番目の点、Positions一覧。The first three indices specified by the TriangleIndices list are 0, 2, and 1, which correspond to the first, third, and second points in the Positions list. つまり、この立方体モデルを構成する最初の三角形は、(1,1,0)、(0,1,0)、(0,0,0) から作成されます。残りの 11 個の三角形も同じようにして決定されます。As a result, the first triangle that makes up the cube model will be composed from (1,1,0) to (0,1,0) to (0,0,0), and the remaining eleven triangles will be determined similarly.

値を指定して、モデルの定義を続行することができます、NormalsTextureCoordinatesプロパティ。You can continue defining the model by specifying values for the Normals and TextureCoordinates properties. グラフィックス システムがモデルのサーフェイスをレンダリングするには、特定の三角形において面が向いている方向に関する情報が必要です。To render the surface of the model, the graphics system needs information about which direction the surface is facing at any given triangle. この情報を使って、モデルの照明の計算が行われます。光源に正対しているサーフェイスは、光源に対して角度のあるサーフェスより明るくなります。It uses this information to make lighting calculations for the model: surfaces that face directly towards a light source appear brighter than those angled away from the light. WPFWPFは位置座標を使って既定の法線ベクトルを決定できますが、曲面の外観を近似する別の法線ベクトルを指定することもできます。Though the WPFWPF can determine default normal vectors by using the position coordinates, you can also specify different normal vectors to approximate the appearance of curved surfaces.

TextureCoordinatesプロパティのコレクションを指定するPointメッシュの頂点に対するテクスチャの描画方法を決定する座標をマップする方法をグラフィックス システムに指示します。The TextureCoordinates property specifies a collection of Points that tell the graphics system how to map the coordinates that determine how a texture is drawn to the vertices of the mesh. TextureCoordinates 0 ~ ~ 1 の値として指定されます。are specified as a value between zero and 1, inclusive. 同様、Normalsプロパティ、グラフィックス システムは、テクスチャ座標の既定ですが、繰り返しのパターンの一部を含むテクスチャのマッピングを制御するさまざまなテクスチャ座標を設定することもできますを計算できます。As with the Normals property, the graphics system can calculate default texture coordinates, but you might choose to set different texture coordinates to control the mapping of a texture that includes part of a repeating pattern, for example. テクスチャ座標について詳しくは、マネージド Direct3D SDK の後続のトピックをご覧ください。More information about texture coordinates can be found in subsequent topics or in the Managed Direct3D SDK.

次の例では、手続き型コードで立方体モデルの 1 つの面を作成する方法を示します。The following example shows how to create one face of the cube model in procedural code. 立方体全体を単一の GeometryModel3D として描画できることに注意してください。この例では、後で各面に異なるテクスチャを適用するため、個別のモデルとして立方体の面を描画します。Note that you can draw the entire cube as a single GeometryModel3D; this example draws the cube's face as a distinct model in order to apply separate textures to each face later.

MeshGeometry3D side1Plane = new MeshGeometry3D();
Private side1Plane As New MeshGeometry3D()
side1Plane.Positions.Add(new Point3D(-0.5, -0.5, -0.5));
side1Plane.Positions.Add(new Point3D(-0.5, 0.5, -0.5));
side1Plane.Positions.Add(new Point3D(0.5, 0.5, -0.5));
side1Plane.Positions.Add(new Point3D(0.5, 0.5, -0.5));
side1Plane.Positions.Add(new Point3D(0.5, -0.5, -0.5));
side1Plane.Positions.Add(new Point3D(-0.5, -0.5, -0.5));

side1Plane.TriangleIndices.Add(0);
side1Plane.TriangleIndices.Add(1);
side1Plane.TriangleIndices.Add(2);
side1Plane.TriangleIndices.Add(3);
side1Plane.TriangleIndices.Add(4);
side1Plane.TriangleIndices.Add(5);

side1Plane.Normals.Add(new Vector3D(0, 0, -1));
side1Plane.Normals.Add(new Vector3D(0, 0, -1));
side1Plane.Normals.Add(new Vector3D(0, 0, -1));
side1Plane.Normals.Add(new Vector3D(0, 0, -1));
side1Plane.Normals.Add(new Vector3D(0, 0, -1));
side1Plane.Normals.Add(new Vector3D(0, 0, -1));

side1Plane.TextureCoordinates.Add(new Point(1, 0));
side1Plane.TextureCoordinates.Add(new Point(1, 1));
side1Plane.TextureCoordinates.Add(new Point(0, 1));
side1Plane.TextureCoordinates.Add(new Point(0, 1));
side1Plane.TextureCoordinates.Add(new Point(0, 0));
side1Plane.TextureCoordinates.Add(new Point(1, 0));
side1Plane.Positions.Add(New Point3D(-0.5, -0.5, -0.5))
side1Plane.Positions.Add(New Point3D(-0.5, 0.5, -0.5))
side1Plane.Positions.Add(New Point3D(0.5, 0.5, -0.5))
side1Plane.Positions.Add(New Point3D(0.5, 0.5, -0.5))
side1Plane.Positions.Add(New Point3D(0.5, -0.5, -0.5))
side1Plane.Positions.Add(New Point3D(-0.5, -0.5, -0.5))

side1Plane.TriangleIndices.Add(0)
side1Plane.TriangleIndices.Add(1)
side1Plane.TriangleIndices.Add(2)
side1Plane.TriangleIndices.Add(3)
side1Plane.TriangleIndices.Add(4)
side1Plane.TriangleIndices.Add(5)

side1Plane.Normals.Add(New Vector3D(0, 0, -1))
side1Plane.Normals.Add(New Vector3D(0, 0, -1))
side1Plane.Normals.Add(New Vector3D(0, 0, -1))
side1Plane.Normals.Add(New Vector3D(0, 0, -1))
side1Plane.Normals.Add(New Vector3D(0, 0, -1))
side1Plane.Normals.Add(New Vector3D(0, 0, -1))

side1Plane.TextureCoordinates.Add(New Point(1, 0))
side1Plane.TextureCoordinates.Add(New Point(1, 1))
side1Plane.TextureCoordinates.Add(New Point(0, 1))
side1Plane.TextureCoordinates.Add(New Point(0, 1))
side1Plane.TextureCoordinates.Add(New Point(0, 0))
side1Plane.TextureCoordinates.Add(New Point(1, 0))

モデルへのマテリアルの適用Applying Materials to the Model

メッシュが 3 次元のオブジェクトのように見えるには、頂点と三角形によって定義されたサーフェイスをカバーするようにテクスチャを適用し、カメラで照明および投影できるようにする必要があります。For a mesh to look like a three-dimensional object, it must have an applied texture to cover the surface defined by its vertices and triangles so it can be lit and projected by the camera. 2-D2-Dを使用する、Brush色、パターン、グラデーション、またはその他のビジュアル コンテンツを画面の領域に適用するクラス。In 2-D2-D, you use the Brush class to apply colors, patterns, gradients, or other visual content to areas of the screen. ただし、3-D3-D オブジェクトの見た目は、オブジェクトに適用された色またはパターンだけでなく、照明モデルの関数になります。The appearance of 3-D3-D objects, however, is a function of the lighting model, not just of the color or pattern applied to them. 現実世界のオブジェクトは、サーフェイスの質によって光の反射が異なります。光沢のあるサーフェイスの見た目は荒くて艶のないサーフェイスとは異なり、光を吸収するオブジェクトや反射するオブジェクトがあります。Real-world objects reflect light differently depending on the quality of their surfaces: glossy and shiny surfaces don't look the same as rough or matte surfaces, and some objects seem to absorb light while others glow. 2-D2-D オブジェクトに適用できるものと同じすべてのブラシを 3-D3-D オブジェクトにも適用できますが、直接適用することはできません。You can apply all the same brushes to 3-D3-D objects that you can apply to 2-D2-D objects, but you can't apply them directly.

モデルのサーフェイスの特性を定義するWPFWPFを使用して、Material抽象クラス。To define the characteristics of a model's surface, WPFWPF uses the Material abstract class. Material の具象サブクラスでは、モデルのサーフェイスの一部の外観特性が決まり、SolidColorBrush、TileBrush、または VisualBrush を渡すことができる Brush プロパティも提供されます。The concrete subclasses of Material determine some of the appearance characteristics of the model's surface, and each also provides a Brush property to which you can pass a SolidColorBrush, TileBrush, or VisualBrush.

  • DiffuseMaterial そのモデルがディフューズ点灯している場合と同様に、ブラシ、モデルに適用されることを指定します。specifies that the brush will be applied to the model as though that model were lit diffusely. DiffuseMaterial を使うことは、2-D2-D モデルにブラシを直接使うことと最もよく似ています。モデルのサーフェイスは光沢があるようにはライトを反射しません。Using DiffuseMaterial most resembles using brushes directly on 2-D2-D models; model surfaces do not reflect light as though shiny.

  • SpecularMaterial モデルのサーフェイスのハードまたは光沢のある、ハイライトように、ブラシ、モデルに適用されることを指定します。specifies that the brush will be applied to the model as though the model's surface were hard or shiny, capable of reflecting highlights. テクスチャがするこの反射品質、または「光沢」提案されます度を設定するにはの値を指定することによって、SpecularPowerプロパティ。You can set the degree to which the texture will suggest this reflective quality, or "shine," by specifying a value for the SpecularPower property.

  • EmissiveMaterial モデルがブラシの色が薄いと等しいに出力された場合と同様に、テクスチャを適用することを指定することができます。allows you to specify that the texture will be applied as though the model were emitting light equal to the color of the brush. これによってモデルが明るくなることはありませんが、DiffuseMaterial または SpecularMaterial のテクスチャとは異なるシャドウになります。This does not make the model a light; however, it will participate differently in shadowing than it would if textured with DiffuseMaterial or SpecularMaterial.

背面のパフォーマンスを高めるため、 GeometryModel3D (カメラからのモデルの反対側にあるので、非表示をこれらの面) が、シーンから除去できます。For better performance, the backfaces of a GeometryModel3D (those faces that are out of view because they are on the opposite side of the model from the camera) are culled from the scene. 指定する、Material平面のようなモデルの背面に適用する設定、モデルのBackMaterialプロパティ。To specify a Material to apply to the backface of a model like a plane, set the model's BackMaterial property.

光彩効果や反射効果など、ある種のサーフェイス品質を実現するには、複数の異なるブラシを連続してモデルに適用することが必要な場合があります。To achieve some surface qualities, like glowing or reflective effects, you might want to apply several different brushes to a model in succession. 適用しを使用して複数のマテリアルを再利用、MaterialGroupクラス。You can apply and reuse multiple Materials by using the MaterialGroup class. MaterialGroup の子は、複数のレンダリング パスの最初から最後まで適用されます。The children of the MaterialGroup are applied first to last in multiple rendering passes.

次のコード例では、単色と描画をブラシとして 3-D3-D モデルに適用する方法を示します。The following code examples show how to apply a solid color and a drawing as brushes to 3-D3-D models.

<GeometryModel3D.Material>
    <DiffuseMaterial>
        <DiffuseMaterial.Brush>
            <SolidColorBrush Color="Cyan" Opacity="0.3"/>
        </DiffuseMaterial.Brush>
    </DiffuseMaterial>
</GeometryModel3D.Material>
<DrawingBrush x:Key="patternBrush" Viewport="0,0,0.1,0.1" TileMode="Tile">
  <DrawingBrush.Drawing>
    <DrawingGroup>
      <DrawingGroup.Children>
        <GeometryDrawing Geometry="M0,0.1 L0.1,0 1,0.9, 0.9,1z"
          Brush="Gray" />
        <GeometryDrawing Geometry="M0.9,0 L1,0.1 0.1,1 0,0.9z"
          Brush="Gray" />
        <GeometryDrawing Geometry="M0.25,0.25 L0.5,0.125 0.75,0.25 0.5,0.5z"
          Brush="#FFFF00" />
        <GeometryDrawing Geometry="M0.25,0.75 L0.5,0.875 0.75,0.75 0.5,0.5z"
          Brush="Black" />
        <GeometryDrawing Geometry="M0.25,0.75 L0.125,0.5 0.25,0.25 0.5,0.5z"
          Brush="#FF0000" />
        <GeometryDrawing Geometry="M0.75,0.25 L0.875,0.5 0.75,0.75 0.5,0.5z"
          Brush="MediumBlue" />
      </DrawingGroup.Children>
    </DrawingGroup>
  </DrawingBrush.Drawing>
</DrawingBrush>
DiffuseMaterial side5Material = new DiffuseMaterial((Brush)Application.Current.Resources["patternBrush"]);
Dim side5Material As New DiffuseMaterial(CType(Application.Current.Resources("patternBrush"), Brush))

シーンの照明Illuminating the Scene

3-D3-D グラフィックスのライトは、現実でのライトと同じように働いて、サーフェイスを見えるようにします。Lights in 3-D3-D graphics do what lights do in the real world: they make surfaces visible. さらに重要なことは、ライトによって投影に含まれるシーンの部分が決まります。More to the point, lights determine what part of a scene will be included in the projection. WPFWPF の Light オブジェクトは、さまざまなライト効果とシャドウ効果を作成し、現実世界のさまざまな照明の動作に従ってモデル化されます。Light objects in WPFWPF create a variety of light and shadow effects and are modeled after the behavior of various real-world lights. シーンには少なくとも 1 つのライトを含める必要があり、含めないとモデルは見えません。You must include at least one light in your scene, or no models will be visible.

次のライトが基本クラスから派生Light:The following lights derive from the base class Light:

  • AmbientLight:位置や方向に均等に関係なくすべてのオブジェクトを照らす環境光を提供します。: Provides ambient lighting that illuminates all objects uniformly regardless of their location or orientation.

  • DirectionalLight:光源のように照らします。: Illuminates like a distant light source. ディレクショナル ライトが、Directionロケーションを指定しないで、Vector3D として指定します。Directional lights have a Direction specified as a Vector3D, but no specified location.

  • PointLight:光源が近くにあるように照らします。: Illuminates like a nearby light source. PointLight には位置があり、その位置から光を投射します。PointLights have a position and cast light from that position. シーン内のオブジェクトは、その位置および光源からの距離に応じて照らされます。Objects in the scene are illuminated depending on their position and distance with respect to the light. PointLightBase 公開、Rangeプロパティで、これを超えるモデルはありませんがライトによって照らさ距離を指定します。exposes a Range property, which determines a distance beyond which models will not be illuminated by the light. また、PointLight には減衰プロパティもあり、距離によって光の強度がどの程度低下するかを指定します。PointLight also exposes attenuation properties which determine how the light's intensity diminishes over distance. 光の減衰には、一定、線形、または 2 次補間を指定できます。You can specify constant, linear, or quadratic interpolations for the light's attenuation.

  • SpotLight:PointLightから継承します。: Inherits from PointLight. SpotLight は PointLight と同じように照らし、位置と方向の両方を持ちます。Spotlights illuminate like PointLight and have both position and direction. 設定円錐形の領域に、光InnerConeAngleOuterConeAngle度で指定されたプロパティ。They project light in a cone-shaped area set by InnerConeAngle and OuterConeAngle properties, specified in degrees.

ライトがModel3Dオブジェクトを変換し、位置、色、方向、および範囲を含む、ライトのプロパティをアニメーション化できるようにします。Lights are Model3D objects, so you can transform and animate light properties, including position, color, direction, and range.

<ModelVisual3D.Content>
    <AmbientLight Color="#333333" />
</ModelVisual3D.Content>
DirectionalLight myDirLight = new DirectionalLight();
Private myDirLight As New DirectionalLight()
myDirLight.Color = Colors.White;
myDirLight.Direction = new Vector3D(-3, -4, -5);
myDirLight.Color = Colors.White
myDirLight.Direction = New Vector3D(-3, -4, -5)
modelGroup.Children.Add(myDirLight);
modelGroup.Children.Add(myDirLight)

モデルの変換Transforming Models

モデルを作成するとき、モデルにはシーン内で特定の位置があります。When you create models, they have a particular location in the scene. モデルをシーン内で移動したり、回転したり、そのサイズを変更したりするのに、モデル自体を定義する頂点を変更するのは実用的ではありません。To move those models around in the scene, to rotate them, or to change their size, it's not practical to change the vertices that define the models themselves. そのような場合は、2-D2-D と同じように、モデルに変換を適用します。Instead, just as in 2-D2-D, you apply transformations to models.

各モデル オブジェクトには、Transformプロパティが、移動、向きを変更したり、モデルのサイズを変更します。Each model object has a Transform property with which you can move, re-orient, or resize the model. 変換を適用するときは、ベクトルにより、または変換で指定する値により、モデルのすべてのポイントをオフセットします。When you apply a transform, you effectively offset all the points of the model by whatever vector or value specified by the transform. つまり、モデルが定義されている座標空間 ("モデル空間") を変換するのであって、シーン全体の座標系 ("ワールド空間") 内でモデルのジオメトリを構成する値を変更するのではありません。In other words, you've transformed the coordinate space in which the model is defined ("model space"), but you haven't changed the values that make up the model's geometry in the coordinate system of the entire scene ("world space").

モデルの変換について詳しくは、「3-D 変換の概要」をご覧ください。For more information about transforming models, see 3-D Transformations Overview.

モデルのアニメーション化Animating Models

WPFWPF 3-D3-D の実装は、2-D2-D グラフィックスと同じタイミングおよびアニメーション システムに参加しています。The WPFWPF 3-D3-D implementation participates in the same timing and animation system as 2-D2-D graphics. つまり、3-D シーンをアニメーション化するには、そのモデルのプロパティをアニメーション化します。In other words, to animate a 3-D scene, animate the properties of its models. プリミティブのプロパティを直接アニメーション化することもできますが、通常は、モデルの位置や外観を変更する変換をアニメーション化する方が簡単です。It's possible to animate properties of primitives directly, but it's typically easier to animate transformations that change the position or appearance of models. 変換に適用できるため、Model3DGroupオブジェクト個々 のモデル、およびアニメーションの 1 つのセットを Model3DGroup の子と別の子オブジェクトのグループにアニメーション セットを適用することができます。Because transformations can be applied to Model3DGroup objects as well as individual models, it's possible to apply one set of animations to a child of a Model3DGroup and another set of animations to a group of child objects. また、シーンの照明のプロパティをアニメーション化することにより、さまざまな視覚効果を実現できます。You can also achieve a variety of visual effects by animating the properties of your scene's lighting. 最後に、カメラの位置または視野をアニメーション化することで、投影自体をアニメーション化することもできます。Finally, you might choose to animate the projection itself by animating the camera position or field of view. WPFWPF のタイミングおよびアニメーション システムの背景情報については、「アニメーションの概要」、「ストーリーボードの概要」、および「Freezable オブジェクトの概要」の各トピックをご覧ください。For background information on the WPFWPF timing and animation system, see the Animation Overview, Storyboards Overview, and Freezable Objects Overview topics.

WPFWPF のオブジェクトをアニメーション化するには、タイムラインを作成し、アニメーションを定義して (時間経過と共に一部のプロパティの値を実際に変更します)、アニメーションを適用するプロパティを指定します。To animate an object in WPFWPF, you create a timeline, define an animation (which is really a change in some property value over time), and specify the property to which to apply the animation. のすべてのオブジェクトを3-D3-Dシーンの子であるViewport3Dシーンに適用するアニメーションの対象となるプロパティは、Viewport3D のプロパティのプロパティ。Because all the objects in a 3-D3-D scene are children of Viewport3D, the properties targeted by any animation you want to apply to the scene are properties of properties of Viewport3D.

その場で揺れるように見えるモデルを作成したいものとします。Suppose you want to make a model appear to wobble in place. 適用することができます、RotateTransform3Dモデルに 1 つのベクトル間のの回転の軸をアニメーション化するとします。You might choose to apply a RotateTransform3D to the model, and animate the axis of its rotation from one vector to another. 次のコード例では、RotateTransform3D が TransformGroup でモデルに適用される複数の変換の 1 つであるものとして、変換の Rotation3D の Axis プロパティに Vector3DAnimation を適用する方法を示します。The following code example demonstrates applying a Vector3DAnimation to the Axis property of the transformation's Rotation3D, assuming the RotateTransform3D to be one of several transforms applied to the model with a TransformGroup.

//Define a rotation
RotateTransform3D myRotateTransform = new RotateTransform3D(new AxisAngleRotation3D(new Vector3D(0, 1, 0), 1));
'Define a rotation
Dim myRotateTransform As New RotateTransform3D(New AxisAngleRotation3D(New Vector3D(0, 1, 0), 1))
Vector3DAnimation myVectorAnimation = new Vector3DAnimation(new Vector3D(-1, -1, -1), new Duration(TimeSpan.FromMilliseconds(5000)));
myVectorAnimation.RepeatBehavior = RepeatBehavior.Forever;
Dim myVectorAnimation As New Vector3DAnimation(New Vector3D(-1, -1, -1), New Duration(TimeSpan.FromMilliseconds(5000)))
myVectorAnimation.RepeatBehavior = RepeatBehavior.Forever
myRotateTransform.Rotation.BeginAnimation(AxisAngleRotation3D.AxisProperty, myVectorAnimation);
myRotateTransform.Rotation.BeginAnimation(AxisAngleRotation3D.AxisProperty, myVectorAnimation)
//Add transformation to the model
cube1TransformGroup.Children.Add(myRotateTransform);
'Add transformation to the model
cube1TransformGroup.Children.Add(myRotateTransform)

ウィンドウへの 3-D コンテンツの追加Add 3-D Content to the Window

シーンをレンダリングするには、モデルとするライトを追加、Model3DGroupを設定し、Model3DGroupとして、ContentModelVisual3DTo render the scene, add models and lights to a Model3DGroup, then set the Model3DGroup as the Content of a ModelVisual3D. 追加、ModelVisual3DChildrenのコレクション、Viewport3Dします。Add the ModelVisual3D to the Children collection of the Viewport3D. カメラの追加、Viewport3Dを設定してそのCameraプロパティ。Add cameras to the Viewport3D by setting its Camera property.

最後に、追加、Viewport3Dウィンドウにします。Finally, add the Viewport3D to the window. ときに、Viewport3Dキャンバスのようなレイアウト要素の内容を設定して、Viewport3D のサイズの指定が含まれるそのHeightWidthプロパティ (から継承されたFrameworkElement)。When the Viewport3D is included as the content of a layout element like Canvas, specify the size of the Viewport3D by setting its Height and Width properties (inherited from FrameworkElement).

<UserControl x:Class="HostingWpfUserControlInWf.UserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    >
  
    <Grid>

      <!-- Place a Label control at the top of the view. -->
      <Label 
                HorizontalAlignment="Center" 
                TextBlock.TextAlignment="Center" 
                FontSize="20" 
                Foreground="Red" 
                Content="Model: Cone"/>

      <!-- Viewport3D is the rendering surface. -->
      <Viewport3D Name="myViewport" >

        <!-- Add a camera. -->
        <Viewport3D.Camera>
          <PerspectiveCamera 
                        FarPlaneDistance="20" 
                        LookDirection="0,0,1" 
                        UpDirection="0,1,0" 
                        NearPlaneDistance="1" 
                        Position="0,0,-3" 
                        FieldOfView="45" />
        </Viewport3D.Camera>

        <!-- Add models. -->
        <Viewport3D.Children>

          <ModelVisual3D>
            <ModelVisual3D.Content>

              <Model3DGroup >
                <Model3DGroup.Children>

                  <!-- Lights, MeshGeometry3D and DiffuseMaterial objects are added to the ModelVisual3D. -->
                  <DirectionalLight Color="#FFFFFFFF" Direction="3,-4,5" />

                  <!-- Define a red cone. -->
                  <GeometryModel3D>

                    <GeometryModel3D.Geometry>
                      <MeshGeometry3D 
    Positions="0.293893 -0.5 0.404509  0.475528 -0.5 0.154509  0 0.5 0  0.475528 -0.5 0.154509  0 0.5 0  0 0.5 0  0.475528 -0.5 0.154509  0.475528 -0.5 -0.154509  0 0.5 0  0.475528 -0.5 -0.154509  0 0.5 0  0 0.5 0  0.475528 -0.5 -0.154509  0.293893 -0.5 -0.404509  0 0.5 0  0.293893 -0.5 -0.404509  0 0.5 0  0 0.5 0  0.293893 -0.5 -0.404509  0 -0.5 -0.5  0 0.5 0  0 -0.5 -0.5  0 0.5 0  0 0.5 0  0 -0.5 -0.5  -0.293893 -0.5 -0.404509  0 0.5 0  -0.293893 -0.5 -0.404509  0 0.5 0  0 0.5 0  -0.293893 -0.5 -0.404509  -0.475528 -0.5 -0.154509  0 0.5 0  -0.475528 -0.5 -0.154509  0 0.5 0  0 0.5 0  -0.475528 -0.5 -0.154509  -0.475528 -0.5 0.154509  0 0.5 0  -0.475528 -0.5 0.154509  0 0.5 0  0 0.5 0  -0.475528 -0.5 0.154509  -0.293892 -0.5 0.404509  0 0.5 0  -0.293892 -0.5 0.404509  0 0.5 0  0 0.5 0  -0.293892 -0.5 0.404509  0 -0.5 0.5  0 0.5 0  0 -0.5 0.5  0 0.5 0  0 0.5 0  0 -0.5 0.5  0.293893 -0.5 0.404509  0 0.5 0  0.293893 -0.5 0.404509  0 0.5 0  0 0.5 0  " 
    Normals="0.7236065,0.4472139,0.5257313  0.2763934,0.4472138,0.8506507  0.5308242,0.4294462,0.7306172  0.2763934,0.4472138,0.8506507  0,0.4294458,0.9030925  0.5308242,0.4294462,0.7306172  0.2763934,0.4472138,0.8506507  -0.2763934,0.4472138,0.8506507  0,0.4294458,0.9030925  -0.2763934,0.4472138,0.8506507  -0.5308242,0.4294462,0.7306172  0,0.4294458,0.9030925  -0.2763934,0.4472138,0.8506507  -0.7236065,0.4472139,0.5257313  -0.5308242,0.4294462,0.7306172  -0.7236065,0.4472139,0.5257313  -0.858892,0.429446,0.279071  -0.5308242,0.4294462,0.7306172  -0.7236065,0.4472139,0.5257313  -0.8944269,0.4472139,0  -0.858892,0.429446,0.279071  -0.8944269,0.4472139,0  -0.858892,0.429446,-0.279071  -0.858892,0.429446,0.279071  -0.8944269,0.4472139,0  -0.7236065,0.4472139,-0.5257313  -0.858892,0.429446,-0.279071  -0.7236065,0.4472139,-0.5257313  -0.5308242,0.4294462,-0.7306172  -0.858892,0.429446,-0.279071  -0.7236065,0.4472139,-0.5257313  -0.2763934,0.4472138,-0.8506507  -0.5308242,0.4294462,-0.7306172  -0.2763934,0.4472138,-0.8506507  0,0.4294458,-0.9030925  -0.5308242,0.4294462,-0.7306172  -0.2763934,0.4472138,-0.8506507  0.2763934,0.4472138,-0.8506507  0,0.4294458,-0.9030925  0.2763934,0.4472138,-0.8506507  0.5308249,0.4294459,-0.7306169  0,0.4294458,-0.9030925  0.2763934,0.4472138,-0.8506507  0.7236068,0.4472141,-0.5257306  0.5308249,0.4294459,-0.7306169  0.7236068,0.4472141,-0.5257306  0.8588922,0.4294461,-0.27907  0.5308249,0.4294459,-0.7306169  0.7236068,0.4472141,-0.5257306  0.8944269,0.4472139,0  0.8588922,0.4294461,-0.27907  0.8944269,0.4472139,0  0.858892,0.429446,0.279071  0.8588922,0.4294461,-0.27907  0.8944269,0.4472139,0  0.7236065,0.4472139,0.5257313  0.858892,0.429446,0.279071  0.7236065,0.4472139,0.5257313  0.5308242,0.4294462,0.7306172  0.858892,0.429446,0.279071  "                   TriangleIndices="0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 " />
                    </GeometryModel3D.Geometry>

                    <GeometryModel3D.Material>
                      <DiffuseMaterial>
                        <DiffuseMaterial.Brush>
                          <SolidColorBrush 
                            Color="Red" 
                            Opacity="1.0"/>
                        </DiffuseMaterial.Brush>
                      </DiffuseMaterial>
                    </GeometryModel3D.Material>

                  </GeometryModel3D>

                </Model3DGroup.Children>
              </Model3DGroup>

            </ModelVisual3D.Content>

          </ModelVisual3D>

        </Viewport3D.Children>

      </Viewport3D>
    </Grid>
  
</UserControl>

関連項目See also