WPF3d Tutorial

WPF es un engine de composición de gráficos que nos permite utilizar diferentes elementos dentro de nuestras UI. Los detalles de cada uno de estos los iremos viendo poco a poco en diferentes posts pero el día de hoy hablaremos un poco de 3D.

Es verdad que el motor de composición de WPF usa DirectX no administrado. Obviamente es un conjunto de funciones que nos dan mucha potencia para la composición de modelos en tercera dimension. Un modelo en 3D dimensión existe en un espacio con 3 ejes, X,Y y Z. Esta escena requiere tener un modelo con una textura y luz aplicada a la misma para que se pueda ver. El motor de composición se encarga de hacer un «render» que transforma mediante algoritmos matemáticos como afecta la luz el modelo para que este pueda ser mostrado en 2D.

Entonces, una escena típica de 3D en WPF deberá contener estos elementos:

  1. Un ViewPort donde podamos alojar nuestra escena.
  2. Una cámara que nos defina una vista a la escena.
  3. Una luz que nos permita ver los modelos dentro de la escena.
  4. Un grupo de modelos que contienen los meshes para la escena.
  5. La textura de estos modelos definida por un material.

Cuando construímos este tipo de aplicaciones tenemos control total sobre el ViewPort y cada uno de los elementos que este contiene, esto nos permitirá modificar en tiempo de ejecución cada uno de los objetos. Así se construiría un cubo en tiempo de ejecución:

    Model3DGroup cube = new Model3DGroup();
    Point3D p0 = new Point3D(0, 0, 0);
    Point3D p1 =new Point3D(5, 0, 0);
    Point3D p2 =new Point3D(5, 0, 5);
    Point3D p3 =new Point3D(0, 0, 5);
    Point3D p4 =new Point3D(0, 5, 0);
    Point3D p5 =new Point3D(5, 5, 0);
    Point3D p6 =new Point3D(5, 5, 5);
    Point3D p7 = new Point3D(0, 5, 5);
    //front side triangles
    cube.Children.Add(CreateTriangleModel(p3, p2, p6));
    cube.Children.Add(CreateTriangleModel(p3, p6, p7));
    //right side triangles
    cube.Children.Add(CreateTriangleModel(p2, p1, p5));
    cube.Children.Add(CreateTriangleModel(p2, p5, p6));
    //back side triangles
    cube.Children.Add(CreateTriangleModel(p1, p0, p4));
    cube.Children.Add(CreateTriangleModel(p1, p4, p5));
    //left side triangles
    cube.Children.Add(CreateTriangleModel(p0, p3, p7));
    cube.Children.Add(CreateTriangleModel(p0, p7, p4));
    //top side triangles
    cube.Children.Add(CreateTriangleModel(p7, p6, p5));
    cube.Children.Add(CreateTriangleModel(p7, p5, p4));
    //bottom side triangles
    cube.Children.Add(CreateTriangleModel(p2, p3, p0));
    cube.Children.Add(CreateTriangleModel(p2, p0, p1));
   
    ModelVisual3D model = new ModelVisual3D();
    model.Content = cube;
    this.mainViewport.Children.Add(model);

Aunque primero tendrías que declararlo en este código de XAML:

<Grid>
<DockPanel
  Width=»Auto»
  VerticalAlignment=»Stretch»
  Height=»Auto»
  HorizontalAlignment=»Stretch»
  Grid.ColumnSpan=»1″
  Grid.Column=»0″
  Grid.Row=»0″
  Margin=»0,0,0,0″
  Grid.RowSpan=»1″>
  <StackPanel>
   <StackPanel.Background>
    <LinearGradientBrush>
     <LinearGradientBrush.GradientStops>
      <GradientStop Color=»White» Offset=»0″/>
      <GradientStop Color=»DarkKhaki» Offset=».3″/>
      <GradientStop Color=»DarkKhaki» Offset=».7″/>
      <GradientStop Color=»White» Offset=»1″/>
     </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>
   </StackPanel.Background>
   <StackPanel Margin=»10″>
    <Button
     Name=»simpleButton»
     Click=»simpleButtonClick»>Simple</Button>
   </StackPanel>
  </StackPanel>
  <Viewport3D Name=»mainViewport» ClipToBounds=»True»>
   <Viewport3D.Camera>
    <PerspectiveCamera
  FarPlaneDistance=»100″
  LookDirection=»-11,-10,-9″
  UpDirection=»0,1,0″
  NearPlaneDistance=»1″
  Position=»11,10,9″
  FieldOfView=»70″ />
    </Viewport3D.Camera>
    <ModelVisual3D>
     <ModelVisual3D.Content>
   <DirectionalLight
    Color=»White»
    Direction=»-2,-3,-1″ />
  </ModelVisual3D.Content>
   </ModelVisual3D>
  </Viewport3D>
</DockPanel>
</Grid>

Se ve muy sencillo. Para más información vean este tutorial de 3D (de donde saque el ejemplo del cubo). Proximamente estaremos revisando 2D vectorial, espero que les guste.

Cheers! Beer [B]


Comentarios

Deja una respuesta