Silverlight C# 游戏开发：L5 3D基本的灯光

我们在设计和开发3D的时候最常用的就是灯光，它有的时候比摄像机还要重要，一些花哨漂亮的表现主要通过灯光实现，相比场景中只有一个的主要摄像机以外，灯光的类型和内容更加丰富，今天暂用小段时间一起研究一下Silverlight3D当中的灯光。下图是具体实现的预览效果：





在开始之前，需要了解一下基本的灯光类型，Balder3D里有三种灯光类型，分别是OmniLight、ViewLight、DirectionalLight，如果玩过3Dmax的朋友应该是相当的熟悉，这些光的表现形式组合构成了游戏世界的绚丽多彩，没有光的世界大家可以通过最后程序实验一下，看看会如何呢。

OmniLight:也称泛光灯或者点光，比较清楚理解，它就是一个点发出的光源

ViewLight:有了方向和目标，除了这个方向方位之内的都不会被照亮

DirectionalLight：是方向光，它是一个方向的照亮

具体内容可以参考下面的图片说明来理解他们，图片截取自3DMAX，资源来源于网络。





有一个好看的灯光，固然重要，但是我们要先学会如何控制它们，今次的代码比较多，涉及到了界面的操作，我将Lesson05代码全部贴上，我的建议还是下载源文件看比较好一些：）

首先新建Lesson05这个控件，XAML代码如下：（下述代码使用Blend工具制作生成）




Lesson05.xaml

<UserControl x:Class="Balder_Studio.Lesson05"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

<Grid Background="White">
<Grid x:Name="LayoutRoot"/>
<StackPanel HorizontalAlignment="Left" Orientation="Vertical" VerticalAlignment="Top" Width="199" Height="132">
<StackPanel Orientation="Horizontal">
<TextBlock TextWrapping="Wrap" Text="X轴" Width="38" Height="14"/>
<Slider Height="23" x:Name="slider_axis_x" SmallChange="1" Maximum="100" LargeChange="10" Margin="0" Width="100" Minimum="-100" />
<TextBlock x:Name="axis_x" TextWrapping="Wrap" Width="38" Height="14" Text="0"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock TextWrapping="Wrap" Width="38" Height="14"><Run Text="Y"/><Run Text="轴"/></TextBlock>
<Slider Height="23" x:Name="slider_axis_y" SmallChange="1" Maximum="100" LargeChange="10" Margin="0" Width="100" Minimum="-100" />
<TextBlock x:Name="axis_y" TextWrapping="Wrap" Width="38" Height="14" Text="0"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock TextWrapping="Wrap" Width="38" Height="14"><Run Text="Z"/><Run Text="轴"/></TextBlock>
<Slider Height="23" x:Name="slider_axis_z" SmallChange="1" Maximum="100" LargeChange="10" Margin="0" Width="100" Minimum="-100" />
<TextBlock x:Name="axis_z" TextWrapping="Wrap" Width="38" Height="14" Text="0"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock TextWrapping="Wrap" Width="38" Height="14" Text="亮度"/>
<Slider Height="23" x:Name="slider_Strength" Maximum="2" LargeChange="0.1" Margin="0" Width="100" Value="1" />
<TextBlock x:Name="StrengthText" Width="38" Height="14" Text="1"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock TextWrapping="Wrap" Width="38" Height="14" Text="类型"/>
<ComboBox x:Name="LightType" Width="98"/>
</StackPanel>
</StackPanel>
<StackPanel x:Name="LightExSetting" HorizontalAlignment="Left" Orientation="Vertical" VerticalAlignment="Top" Width="199" Height="132" Margin="198,0,-2,0" Visibility="Collapsed">
<StackPanel Orientation="Horizontal">
<TextBlock TextWrapping="Wrap" Text="偏移/方向X" Width="64" Height="14"/>
<Slider Height="23" x:Name="slider_axis_x1" SmallChange="1" Maximum="100" LargeChange="10" Margin="0" Width="100" Minimum="-100" />
<TextBlock x:Name="axis_x1" TextWrapping="Wrap" Width="38" Height="14" Text="0"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock TextWrapping="Wrap" Width="64" Height="14"><Run Text="偏移/方向"/><Run Text="Y"/></TextBlock>
<Slider Height="23" x:Name="slider_axis_y1" SmallChange="1" Maximum="100" LargeChange="10" Margin="0" Width="100" Minimum="-100" />
<TextBlock x:Name="axis_y1" TextWrapping="Wrap" Width="38" Height="14" Text="0"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock TextWrapping="Wrap" Width="64" Height="14"><Run FontFamily="Verdana, Arial, Arial Unicode MS, Lucida Sans Unicode, Lucida Grande" Text="偏移/方向"/><Run FontFamily="Verdana, Arial, Arial Unicode MS, Lucida Sans Unicode, Lucida Grande" Text="Z"/></TextBlock>
<Slider Height="23" x:Name="slider_axis_z1" SmallChange="1" Maximum="100" LargeChange="10" Margin="0" Width="100" Minimum="-100" />
<TextBlock x:Name="axis_z1" TextWrapping="Wrap" Width="38" Height="14" Text="0"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Visibility="Collapsed">
<TextBlock TextWrapping="Wrap" Width="38" Height="14" Text="亮度"/>
<Slider Height="23" x:Name="slider_Strength1" Maximum="1" LargeChange="0.1" Margin="0" Width="100" Value="1" />
<TextBlock x:Name="StrengthText1" Width="38" Height="14" Text="1"/>
</StackPanel>
</StackPanel>
</Grid>
</UserControl>

Lesson05.xaml.cs代码如下，具体实现请参照Lesson04的讲述

Lesson05.xaml.cs
using System;
using System.Windows.Threading;
using System.Windows.Controls;
using System.Windows.Media;
using Balder.Math;
using Balder.Objects.Geometries;
using Balder.View;
using Balder.Lighting;
using Balder.Execution;

namespace Balder_Studio
{
public partial class Lesson05 : UserControl
{
//选择的灯光
Light _SelectedLight = null;
public Lesson05()
{
InitializeComponent();
slider_axis_x.ValueChanged += new System.Windows.RoutedPropertyChangedEventHandler<double>(slider_axis_ValueChanged);
slider_axis_y.ValueChanged += new System.Windows.RoutedPropertyChangedEventHandler<double>(slider_axis_ValueChanged);
slider_axis_z.ValueChanged += new System.Windows.RoutedPropertyChangedEventHandler<double>(slider_axis_ValueChanged);
slider_Strength.ValueChanged += new System.Windows.RoutedPropertyChangedEventHandler<double>(slider_axis_ValueChanged);

slider_axis_x1.ValueChanged += new System.Windows.RoutedPropertyChangedEventHandler<double>(slider_Offset_ValueChanged);
slider_axis_y1.ValueChanged += new System.Windows.RoutedPropertyChangedEventHandler<double>(slider_Offset_ValueChanged);
slider_axis_z1.ValueChanged += new System.Windows.RoutedPropertyChangedEventHandler<double>(slider_Offset_ValueChanged);

OmniLight _OmniLight = new OmniLight();
ViewLight _ViewLight = new ViewLight();
DirectionalLight _DirectionalLight = new DirectionalLight() {Direction=new Coordinate(-1,-1,0) };
//设定在同一个默认位置
_OmniLight.Position = _ViewLight.Position = _DirectionalLight.Position = new Coordinate(0, 0, 0);
//最开始的时候都不会亮
_OmniLight.IsEnabled = _ViewLight.IsEnabled = _DirectionalLight.IsEnabled = false;

LightType.Items.Add(new TextBlock() { Text = "点光源", Tag = _OmniLight });
LightType.Items.Add(new TextBlock() { Text = "聚光源", Tag = _ViewLight });
LightType.Items.Add(new TextBlock() { Text = "方向光", Tag = _DirectionalLight });
LightType.SelectedIndex = 0;
LightType.SelectionChanged += new SelectionChangedEventHandler(LightType_SelectionChanged);

#region L1 - L4的代码
//L1
Game game = new Game() { Width = 600, Height = 400 };
game.Camera = new Camera();
game.Camera.Position = new Coordinate(100, 120, 150);
game.Camera.Target = new Coordinate(0, 0, 0);
#endregion
game.Children.Add(_OmniLight);
_OmniLight.IsEnabled = true;
_SelectedLight = _OmniLight;
game.Children.Add(_ViewLight);
game.Children.Add(_DirectionalLight);
#region L1 - L4的代码
//L3
Game_Axis axis_x = new Game_Axis(new Vertex(-300, 0, 0), new Vertex(300, 0, 0), Colors.Red);
Game_Axis axis_y = new Game_Axis(new Vertex(0, -300, 0), new Vertex(0, 300, 0), Colors.Blue);
Game_Axis axis_z = new Game_Axis(new Vertex(0, 0, -300), new Vertex(0, 0, 300), Colors.Green);
//L4
Balder.Objects.Geometries.Geometry group = new Balder.Objects.Geometries.Geometry() { Name = "MeshGroup" };
group.InteractionEnabled = true;
group.Children.Add(axis_x);
group.Children.Add(axis_y);
group.Children.Add(axis_z);
//L2
Mesh Teapot = new Mesh();
Teapot.Position = new Coordinate(0, 0, 0);

Teapot.AssetName = new Uri("/Balder_Studio;component/Res/teapot.ase", UriKind.Relative);
//L4
group.Children.Add(Teapot);
group.Children.Add(new Box() { Dimension = new Coordinate(10, 20, 30), Position = new Coordinate(100, 10, 0), Name = "MyBox" });
group.Children.Add(new Box() { Dimension = new Coordinate(10, 30, 10), Position = new Coordinate(10, 10, -100) });
game.Children.Add(group);

LayoutRoot.Children.Add(game);
#endregion

}
#region 控制灯光的界面事件
void LightType_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
//选择一个新的光源之时
if (_SelectedLight != null)
_SelectedLight.IsEnabled = false;
_SelectedLight = ((LightType.SelectedItem as TextBlock).Tag as Light);
_SelectedLight.IsEnabled = true;
if (_SelectedLight is OmniLight)
LightExSetting.Visibility = System.Windows.Visibility.Collapsed;
else
LightExSetting.Visibility = System.Windows.Visibility.Visible;

}

void slider_axis_ValueChanged(object sender, System.Windows.RoutedPropertyChangedEventArgs<double> e)
{
axis_z.Text = ((int)slider_axis_z.Value).ToString();
_SelectedLight.Position.Z = slider_axis_z.Value;
axis_y.Text = ((int)slider_axis_y.Value).ToString();
_SelectedLight.Position.Y = slider_axis_y.Value;
axis_x.Text = ((int)slider_axis_x.Value).ToString();
_SelectedLight.Position.X = slider_axis_x.Value;
StrengthText.Text = slider_Strength.Value.ToString();
_SelectedLight.Strength = slider_Strength.Value;
}
void slider_Offset_ValueChanged(object sender, System.Windows.RoutedPropertyChangedEventArgs<double> e)
{
axis_z1.Text = ((int)slider_axis_z1.Value).ToString();
axis_y1.Text = ((int)slider_axis_y1.Value).ToString();
axis_x1.Text = ((int)slider_axis_x1.Value).ToString();

if (_SelectedLight is ViewLight)
{
var l = _SelectedLight as ViewLight;
l.XAngleOffset = slider_axis_x1.Value;
l.YAngleOffset = slider_axis_y1.Value;
l.ZAngleOffset = slider_axis_z1.Value;
}
else
{
var l = _SelectedLight as DirectionalLight;
var X = slider_axis_x1.Value / slider_axis_x1.Maximum;
var Y = slider_axis_y1.Value / slider_axis_y1.Maximum;
var Z = slider_axis_z1.Value / slider_axis_z1.Maximum;
l.Direction = new Coordinate(X, Y, Z);
}
}

#endregion
}
}

我在其中加入了一些注释，希望有用：）细心的朋友可能会发现，这次没有讲解有关灯光颜色的问题，下次我专门写一篇有关颜色的部分，这样看起来更加直观，期望各位能够对Silverlight3D产生一些兴趣，加入这个开发方向上来。

好吧下一步让我们看看运行效果，同时附送本文章的源代码点击这里下载。

工程中如果缺少Balder.dll请在这里快速下载：SL4_Balder.rar