Aurora/Smoke Effect

Essentially there are 3 layers of the same tiled “clouds” image overlaid on a flat Mesh inside a Viewport3D.  Each image has a slight translucency.  The Meshes are rotated to be at slight offsets from one another.  The layers are then animated through a translation along the x-axis at different velocities.  A Linear gradient is then added to act as an Opacity Mask to offer the effect of the smoke fading into darkness.  Two light sources are used, one AmbientLight and another DirectionalLight, however you can use whatever combination works best for you.

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Grid.Resources>

    <ImageSource x:Key="SmokeImage">

      C:\clouds2.png

    </ImageSource>

  </Grid.Resources>

  <Viewport3D>

    <Viewport3D.Camera>

      <PerspectiveCamera FieldOfView="45" FarPlaneDistance="110" LookDirection="0,0,-1" NearPlaneDistance="0.1" Position="0,0,5" UpDirection="0,1,0"/>

    </Viewport3D.Camera>

  <ModelVisual3D>

  <ModelVisual3D.Content>

    <GeometryModel3D>

      <GeometryModel3D.Geometry>

        <MeshGeometry3D Positions="-1,1,0 -1,-1,0 1,-1,0 1,1,0" TextureCoordinates="0,0 0,1 1,1 1,0" TriangleIndices="0 1 2 0 2 3"/>

      </GeometryModel3D.Geometry>

      <GeometryModel3D.Material>

        <DiffuseMaterial>

          <DiffuseMaterial.Brush>

            <VisualBrush Stretch="Fill" TileMode="None">

              <VisualBrush.Visual>

                <Grid  Width="594" Height="426">

                  <Grid Opacity="1" Name="CloudGrid">

              <Grid.Triggers>

                <EventTrigger RoutedEvent="Grid.Loaded">

                        <BeginStoryboard>

                          <Storyboard Name="CloudStoryboard">

          <DoubleAnimation Storyboard.TargetName="cloud1Transform"

           Storyboard.TargetProperty="(TranslateTransform.X)"    

           From="0" To="1024" RepeatBehavior="Forever" Duration="0:0:12"/>

          <DoubleAnimation Storyboard.TargetName="cloud2Transform"

           Storyboard.TargetProperty="(TranslateTransform.X)"    

           From="0" To="1024" RepeatBehavior="Forever" Duration="0:0:16"/>

          <DoubleAnimation Storyboard.TargetName="cloud3Transform"

           Storyboard.TargetProperty="(TranslateTransform.X)"    

           From="0" To="1024" RepeatBehavior="Forever" Duration="0:0:20"/>                              </Storyboard>

                        </BeginStoryboard>

                      </EventTrigger>

                    </Grid.Triggers>

                    <Grid>

                      <Grid.Background>

                        <ImageBrush Opacity="0.75" ImageSource="{StaticResource SmokeImage}" ViewportUnits="Absolute" Viewport="0 0 1024 1024" TileMode="Tile">

                          <ImageBrush.Transform>

                            <TransformGroup>

                              <TranslateTransform x:Name="cloud1Transform"/>

                              <RotateTransform Angle="225"/>

                            </TransformGroup>

                          </ImageBrush.Transform>

                        </ImageBrush>

                      </Grid.Background>

                    </Grid>

                    <Grid>

                      <Grid.Background>

                        <ImageBrush Opacity="0.75" ImageSource="{StaticResource SmokeImage}" ViewportUnits="Absolute" Viewport="0 0 1024 1024" TileMode="Tile">

                          <ImageBrush.Transform>

                            <TransformGroup>

                              <TranslateTransform x:Name="cloud2Transform"/>

                              <RotateTransform Angle="270"/>

                            </TransformGroup>

                          </ImageBrush.Transform>

                        </ImageBrush>

                      </Grid.Background>

                    </Grid>

                    <Grid>

                      <Grid.Background>

                        <ImageBrush Opacity="0.75" ImageSource="{StaticResource SmokeImage}" ViewportUnits="Absolute" Viewport="0 0 1024 1024" TileMode="Tile">

                          <ImageBrush.Transform>

                            <TransformGroup>

                              <TranslateTransform x:Name="cloud3Transform"/>

                              <RotateTransform Angle="315"/>

                            </TransformGroup>

                          </ImageBrush.Transform>

                        </ImageBrush>

                      </Grid.Background>

                    </Grid>

            </Grid>

<!--gradient to give effect of smoke fading into darkness-->

                  <Grid>

                    <Grid.Background>

                      <LinearGradientBrush StartPoint="0 0" EndPoint="0 1">

                        <LinearGradientBrush.GradientStops>

                          <GradientStop Color="#FF000000" Offset="0.0"/>

                          <GradientStop Color="#00000000" Offset="0.8"/>

                          </LinearGradientBrush.GradientStops>

                        </LinearGradientBrush>

                      </Grid.Background>

                    </Grid>

                  </Grid>

                </VisualBrush.Visual>

              </VisualBrush>

            </DiffuseMaterial.Brush>

          </DiffuseMaterial>

        </GeometryModel3D.Material>

      </GeometryModel3D>

    </ModelVisual3D.Content>

  </ModelVisual3D>

  <ModelVisual3D>

    <ModelVisual3D.Content>

      <AmbientLight Color="#FF808080"/>

    </ModelVisual3D.Content>

  </ModelVisual3D>

  <ModelVisual3D>

    <ModelVisual3D.Content>

      <DirectionalLight Color="#FF7F7F7F" Direction="0,0,-1">

        <DirectionalLight.Transform>

          <TranslateTransform3D OffsetX="0" OffsetY="0" OffsetZ="3"/>

        </DirectionalLight.Transform>

      </DirectionalLight>

    </ModelVisual3D.Content>

  </ModelVisual3D>

</Viewport3D>

</Grid>