Visão geral de elementos gráficos 3D
Este tópico fornece uma visão geral da funcionalidade 3-D no sistema de elementos gráficos Windows Presentation Foundation (WPF) . A implementação WPF 3-D permite que aos desenvolvedores desenhar, transformar e animar elementos gráficos 3D tanto no código de marcação quanto em código procedural, usando os mesmos recursos permitidos pela plataforma para gráficos 2D. Os desenvolvedores podem agrupar 2-D e 3-D elementos gráficos para criar controles avançados, fornecem ilustrações complexas de dados ou aprimorar a experiência do usuário da interface do aplicativo. 3-D suporte em WPF não foi projetado para fornecer uma plataforma de desenvolvimento de Game completo.
Este tópico contém as seguintes seções.
3-D em um Contêiner 2-D
Espaço de coordenadas 3D
Câmeras e projeções
Primitivas de Modelo e Malha
Aplicando Materiais ao Modelo
Iluminação de Cena
Transformando modelos
Animando modelos
Adicionar conteúdo 3D para a janela
Tópicos relacionados
3-D em um Contêiner 2-D
Conteúdo de elementos gráficos 3-D em WPF é encapsulado em um elemento, Viewport3D, que pode participar da estrutura bidimensional do elemento. O sistema gráfico trata Viewport3D sistema autônomo um elemento visual bidimensional sistema autônomo muitas outras em WPF. Viewport3D funciona sistema autônomo uma janela — uma porta de visualização — em uma cena tridimensional. Mais precisamente, ela é uma superfície na qual uma cena 3-D é projetada.
Em um aplicativo 2-D convencional, use Viewport3D como faria com outro elemento contêiner como Grid ou Canvas. Embora você possa usar Viewport3D com outros objetos de desenho 2-D no mesmo grafo de cena, você não pode interpenetrar objetos 2-D e 3-D em um Viewport3D. Este tópico abordará como desenhar elementos gráficos 3-D dentro de Viewport3D.
Espaço de coordenadas 3D
O sistema de coordenadas de WPF para elementos gráficos 2-D localiza a origem na parte superior esquerda da área de rendering (geralmente a tela). No sistema 2-D, valores positivos do eixo x aumentam para a direita e valores positivos do eixo y aumentam para baixo. No sistema de coordenadas 3-D, no entanto, a origem está localizada no centro da área de rendering, com valores positivos do eixo x aumentando para a direita, mas com valores positivos do eixo y aumentando para cima, e com valores positivos do eixo z aumentando para fora a partir da origem, em direção ao observador.
Representações convencionais de sistemas de coordenadas em 2D e 3D
.png "Sistemas de coordenadas")
O espaço definido por esses eixos é o quadro estacionário de referência para objetos 3-D no WPF. Ao criar modelos nesse espaço e criar luzes e câmeras para exibi-los, é útil distinguir este quadro estacionário de referência, ou "espaço do mundo", do quadro local de referência que você cria para cada modelo quando você aplica transformações a ele. Lembre-se também que objetos no espaço do mundo podem parecer totalmente diferentes, ou nem mesmo serem visíveis, dependendo das configurações de câmera e de luz, mas a posição da câmera não altera a localização dos objetos no espaço do mundo.
Câmeras e projeções
Os desenvolvedores que trabalham em 2-D estão acostumados a posicionar primitivas gráficas em uma tela bidimensional. Quando você cria uma cena 3-D, é importante lembrar que você está realmente criando uma representação 2-D de objetos 3-D. Como uma cena 3-D parece diferente dependendo do ponto de vista do observador, você deve especificar esse ponto de vista. A classe Camera permite que você especifique este ponto de vista de uma cena 3-D.
Outra maneira para compreender como uma cena 3-D é representada em uma superfície 2-D é descrevendo a cena como uma projeção na superfície de exibição. O ProjectionCamera permite que você especifique diferentes projeções e suas propriedades para alterar como o observador vê a cena 3-D. Uma PerspectiveCamera especifica uma projeção que encurta a vista da cena. Em outras palavras, a PerspectiveCamera fornece perspectiva de ponto desaparecendo no infinito. Você pode especificar a posição da câmera no espaço de coordenadas da cena, a direção e o campo de visão para a câmera, e um vetor que define a direção "para cima" na cena. O diagrama a seguir ilustra a projeção da PerspectiveCamera.
As propriedades NearPlaneDistance e FarPlaneDistance de ProjectionCamera limitam o intervalo de projeção da câmera. Como câmeras podem ser localizadas em qualquer lugar da cena, é possível que a câmera para realmente ser posicionados dentro de um modelo ou muito perto de um modelo, tornando difícil distinguir objetos corretamente. NearPlaneDistance permite que você especifique uma distância mínima de câmera além do qual objetos não serão desenhados. Por outro lado, FarPlaneDistance permite que você especifique uma distância da câmera além da qual os objetos não serão desenhados, o que garante que objetos muito distantes para serem reconhecidos não sejam incluídos na cena.
Posição da câmera
.png "Instalação de câmera")
OrthographicCamera especifica uma projeção ortogonal de um modelo 3-D para uma superfície visual 2-D. Como outras câmeras, ela especifica uma posição, direção de visualização e direção "para cima". Ao contrário da PerspectiveCamera, no entanto, OrthographicCamera descreve uma projeção que não inclui perspectiva de ponto desaparecendo no infinito. Em outras palavras, OrthographicCamera descreve uma caixa de exibição cujos lados são paralelos, em vez de uma cujos lados se encontram em um ponto na câmera. A imagem a seguir mostra o mesmo modelo como exibido usando PerspectiveCamera e OrthographicCamera.
Ponto de vista e projeções ortográficas
.png "Projeção em perspectiva e ortográfica")
O código a seguir mostra algumas configurações típicas da câmera.
<!-- Add a camera. -->
<Viewport3D.Camera>
<PerspectiveCamera FarPlaneDistance="20" LookDirection="5,-2,-3" UpDirection="0,1,0" NearPlaneDistance="1" Position="-5,2,3" FieldOfView="45" />
</Viewport3D.Camera>
// 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.
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;
Primitivas de Modelo e Malha
Model3D é a classe base abstrata que representa um objeto 3-D genérico. Para criar uma cena 3-D, você precisa de alguns objetos para exibir, e os objetos que compõem o grafo de cena derivam de Model3D. Atualmente, o WPF oferece suporte a geometrias de modelagem com GeometryModel3D. A propriedade Geometry desse modelo tem uma primitiva de malha.
Para criar um modelo, comece criando uma primitiva, ou malha. Uma primitiva 3-D é uma coleção de vértices que formam uma única entidade 3-D. A maioria dos 3-D os sistemas oferecem primitivos modelados na figura fechada a mais simples: um triângulo definido por três vértices. Como os três pontos de um triângulo são coplanares, você pode continuar a adicionar triângulos para modelar mais formas complexas, denominadas malhas.
The WPF 3-D system currently provides the MeshGeometry3D class, which allows you to specify any geometry; it does not currently support predefined 3-D primitives like spheres and cubic forms. Comece criando um MeshGeometry3D especificando uma lista dos vértices de triângulo como sua propriedade Positions Cada vértice é especificado como um Point3D. (No Extensible Application Markup Language (XAML), especifique esta propriedade como uma lista de números agrupados de três em três que representam as coordenadas de cada vértice.) Dependendo de sua geometria, sua malha pode ser composta de muitos triângulos, alguns dos quais compartilham os mesmos cantos (vértices). Para desenhar a malha corretamente, o WPF precisa de informações sobre quais vértices são compartilhados por quais triângulos. Você fornece essa informação especificando uma lista de índices de triângulo com a propriedade TriangleIndices. Esta lista especifica a ordem na qual os pontos especificados na lista Positions determinará um triângulo.
<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>
No exemplo anterior, a lista Positions especifica oito vértices para definir uma malha em forma de cubo. A propriedade TriangleIndices especifica uma lista de doze grupos de três índices. Cada número na lista refere-se a um deslocamento na lista Positions. Por exemplo, os três primeiros vértices especificados pela lista Positions são (1,1,0), (0,1,0) e (0,0,0). Os três primeiros índices especificados pela lista TriangleIndices são 0, 2 e 1, que correspondem ao primeiro, terceiro e segundo pontos na lista Positions. Como resultado, o primeiro triângulo que constitui o modelo do cubo será composto a partir de (1,1,0) para (0,1,0) para (0,0,0), e os onze triângulos restantes serão determinados da mesma forma.
Você pode continuar definindo o modelo especificando valores para as propriedades Normals e TextureCoordinates. Para renderizar a superfície do modelo, o sistema gráfico precisa de informações sobre qual direção a superfície está faceando em qualquer dado triângulo. Ele usa essas informações para fazer os cálculos de iluminação do modelo: as superfícies que enfrentam diretamente em direção a uma fonte de luz aparecem mais brilhantes do que aqueles angular para fora da luz. Embora o WPF possa determinar vetores normais padrão usando as coordenadas de posição, você também pode especificar vetores normais diferentes para aproximar a aparência de superfícies curvas.
The TextureCoordinates propriedade especifica uma coleção de Points que informam ao sistema gráfico como mapear as coordenadas que determinam como uma textura é desenhada para os vértices da malha. TextureCoordinates são especificados sistema autônomo um valor entre 0 e 1 inclusive. Como com a propriedade Normals, o sistema de elementos gráficos pode calcular coordenadas de textura padrão, mas você pode escolher definir coordenadas de textura diferentes para controlar o mapeamento de uma textura que inclui parte de um padrão de repetição, por exemplo. Mais informações sobre coordenadas de textura podem ser encontradas em tópicos posteriores ou no SDK do Direct3D gerenciado.
O exemplo a seguir mostra como criar uma face do modelo do cubo no código procedural. Observe que você pode desenhar o cubo todo como uma única GeometryModel3D; este exemplo desenha a face do cubo como um modelo distinto para aplicar texturas separadas para cada face posterior.
MeshGeometry3D side1Plane = 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));
Aplicando Materiais ao Modelo
Para que uma malha tenha aparência de um objeto tridimensional, ela deve ter uma textura aplicada para cobrir a superfície definida por seus vértices e triângulos para que possa ser iluminada e projetada pela câmera. Em 2-D, você usa a classe Brush para aplicar cores, padrões, gradientes ou outro conteúdo visual a áreas da tela. A aparência dos objetos 3-D, no entanto, é uma função do modelo de iluminação, não apenas da cor ou padrão aplicado a eles. Objetos do mundo real reflitam luz de maneira diferente dependendo da qualidade de suas superfícies de: superfícies acetinadas e brilhantes não têm a mesma aparência sistema autônomo superfícies aproximadas ou fosca e alguns objetos parecem absorver luz enquanto outras pessoas com brilho. Você pode aplicar os mesmos pincéis aos objetos 3-D que você pode aplicar a objetos 2-D, mas você não pode aplicá-los diretamente.
Para definir as características de um modelo da superfície, WPF usa a classe abstrata Material. As subclasses concretas de Material determinam algumas das características de aparência da superfície do modelo, e cada uma também fornece uma propriedade Brush para a qual você pode passar um SolidColorBrush, TileBrush ou VisualBrush.
DiffuseMaterial especifica que o brush seja aplicado ao modelo, apesar de esse modelo ter sido iluminado difusamente. Usar DiffuseMaterial assemelha-se muito a usar pincéis diretamente em modelos 2-D; superfícies do modelo não refletem luz como as brilhantes.
SpecularMaterial especifica que o brush será aplicado ao modelo como se o modelo da superfície fosse rígido ou brilhante, capaz de refletir realces. Você pode definir o grau pelo qual a textura exibirá essa qualidade reflexiva, ou "brilho", especificando um valor para a propriedade SpecularPower.
EmissiveMaterial permite que você especifique que a textura será aplicada como se o modelo estivesse emitindo luz igual à cor do brush. Isso não faz o modelo uma luz; no entanto, ele participará do sombreamento de maneira diferente de como ocorreria caso a textura fosse realizada com DiffuseMaterial ou SpecularMaterial.
Para obter um melhor desempenho, as backfaces de um GeometryModel3D (as faces que estão fora do modo de exibição por estarem do lado oposto do modelo da câmera) são cortadas da cena. Para especificar um Material para aplicar à backface de um modelo como um plano, defina a propriedade BackMaterial do modelo.
Para obter algumas qualidades de superfície, como efeitos brilhantes ou reflexivos, convém aplicar vários pincéis diferentes a um modelo em sucessão. Você pode aplicar e reutilizar vários materiais usando a classe MaterialGroup. Os filhos do MaterialGroup são aplicados do primeiro ao último em múltiplas passadas de renderização.
Os seguintes exemplos de código mostram como aplicar uma cor sólida e um desenho como pincéis a modelos 3-D.
<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>
<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"]);
Iluminação de Cena
Luzes de 3-D elementos gráficos, faça o que fazem luzes no mundo real: eles tornam superfícies visíveis. Mais especificamente, luzes determinam que parte de uma cena será incluída na projeção. Objetos de luz objetos no WPF criam uma variedade de efeitos de luz e sombra e são modelados com comportamento similar ao de várias luzes do mundo real. Você deve incluir pelo menos uma luz a sua cena, ou nenhum modelo será visível.
As seguintes luzes derivam da classe base Light:
AmbientLight fornece luz ambiente que ilumina todos os objetos uniformemente, independentemente de seu local ou orientação.
DirectionalLight: Ilumina como uma fonte de luz distante. Luzes direcionais têm uma Direction especificada como um Vector3D, mas nenhum local especificado.
PointLight Ilumina como uma fonte de luz próxima. PointLights têm uma posição e lançam luz a partir dessa posição. Objetos na cena estiver aceso dependendo sua posição e distância com relação à luz. PointLightBase expõe uma Range propriedade, que determina a distância além do qual modelos não irão ser aceso pela luz. PointLight também expõe propriedades de atenuação que determinam como a intensidade da luz diminui com a distância. Você pode especificar interpolações constantes, lineares ou quadráticas para a atenuação da luz.
SpotLight herda de PointLight. Spotlights iluminam como PointLight e têm tanto posição quanto direção. Eles projetam luz em uma área em forma de cone definida por propriedades InnerConeAngle e OuterConeAngle, especificadas em graus.
Luzes são objetos Model3D, portanto você pode transformar e animar propriedades de luz, incluindo a posição, cor, direção e intervalo.
<ModelVisual3D.Content>
<AmbientLight Color="#333333" />
</ModelVisual3D.Content>
DirectionalLight myDirLight = new DirectionalLight();
myDirLight.Color = Colors.White;
myDirLight.Direction = new Vector3D(-3, -4, -5);
modelGroup.Children.Add(myDirLight);
Transformando modelos
Quando você cria modelos, eles têm uma localização específica na cena. Para mover esses modelos pela cena, girá-los ou alterar seu tamanho, não é prático alterar os vértices que definem os próprios modelos. Em vez disso, apenas como em 2-D, você aplica transformações a modelos.
Cada objeto de modelo tem uma propriedade Transform com a qual você pode mover, reorientar ou redimensionar o modelo. Quando você aplicar uma transformação, você efetivamente desloca todos os pontos do modelo por qualquer vetor ou valor especificado pela transformação. Em outras palavras, o espaço de coordenadas no qual o modelo é definido ("espaço do modelo") foi transformado, mas os valores que formam a geometria do modelo no sistema de coordenadas de toda a cena ("espaço do mundo") não foram alterados.
Para obter mais informações sobre como transformar modelos, consulte Visão Geral Sobre Transformações 3D.
Animando modelos
Em WPF, a implementação 3-D participa do mesmo sistema de animação e tempo dos elementos gráficos 2-D. Em outras palavras, para animar uma cena 3D, anime as propriedades de seus modelos. É possível animar propriedades de primitivas diretamente, mas é geralmente mais fácil animar transformações que alterem a posição ou a aparência de modelos. Como as transformações podem ser aplicadas a objetos Model3DGroup bem como a modelos individuais, é possível aplicar um conjunto de animações a um filho de um Model3DGroup e outro conjunto de animações para um grupo de objetos filhos. Você também pode obter uma variedade de efeitos visuais animando as propriedades de iluminação da seu cena. Finalmente, você pode escolher animar a própria projeção animando a posição da câmera ou o campo de exibição. Para informações básicas sobre o sistema de animação e de tempo no WPF, consulte os tópicos Revisão de Animação, Visão geral sobre Storyboards e Visão geral sobre objetos Freezable.
Para animar um objeto no WPF, você cria uma linha de tempo, define uma animação (que é realmente uma alteração em alguns valores de propriedade ao longo do tempo) e especifica a propriedade à qual deve-se aplicar a animação. Como todos os objetos em uma cena 3-D são filhos de Viewport3D, as propriedades alvo de qualquer animação que você deseja aplicar à cena são propriedades das propriedades de Viewport3D.
Suponha que você queira fazer com que um modelo pareça mover-se de um lado a outro no mesmo lugar. Você pode optar por aplicar uma RotateTransform3D ao modelo, e animar o eixo de sua rotação de um vetor para outro. O exemplo de código a seguir demonstra a aplicação de uma Vector3DAnimation à propriedade Axis da Rotation3D da transformação, supondo que o RotateTransform3D é uma das várias transformações aplicadas ao modelo com um TransformGroup.
//Define a rotation
RotateTransform3D myRotateTransform = 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;
myRotateTransform.Rotation.BeginAnimation(AxisAngleRotation3D.AxisProperty, myVectorAnimation);
//Add transformation to the model
cube1TransformGroup.Children.Add(myRotateTransform);
Adicionar conteúdo 3D para a janela
Para renderizar a cena, adicione modelos e luzes a um Model3DGroup, e defina o Model3DGroup como o Content de um ModelVisual3D. Adicione os ModelVisual3D às coleções Children da Viewport3D. Adicione câmeras à Viewport3D definindo sua propriedade Camera.
Finalmente, adicione a Viewport3D à janela. Quando a Viewport3D for incluída como o conteúdo de um elemento de layout como Canvas, especifique o tamanho da Viewport3D definindo suas propriedades Height e Width (herdadas de FrameworkElement) .
Consulte também
Conceitos
Visão Geral Sobre Transformações 3D