Silverlight 5(Beta)で Teapot + Blinn-Phong ④
今回は MainPage.xaml.cs を実装します、これまで実装してきた Teapot クラスとコンパイル済み HLSL シェーダーを使って、ティーポットを描画します。
コンパイル済みシェーダーのロードと登録
まず DrawingSurface_Loade メソッドを実装します。ここでは2つのコンパイル済みシェーダーをストリームとしてロードして、シェーダーを生成し、デバイスに登録してから、前回作成した Teapot クラスをインスタンス化します。
private Teapot teapot;
private void DrawingSurface_Loaded(object sender, RoutedEventArgs e)
{
GraphicsDevice resourceDevice = GraphicsDeviceManager.Current.GraphicsDevice;
// Load vertex shader
Stream shaderStream = Application.GetResourceStream(
new Uri(@"/SilverlightApplication1;component/HLSL/Blinn-Phong.vs",
UriKind.Relative)).Stream;
VertexShader vertexShader =
VertexShader.FromStream(resourceDevice, shaderStream);
// Load pixel shader
shaderStream = Application.GetResourceStream(
new Uri(@"/SilverlightApplication1;component/HLSL/Blinn-Phong.ps",
UriKind.Relative)).Stream;
PixelShader pixelShader =
PixelShader.FromStream(resourceDevice, shaderStream);
// Create Teapot with Shader
teapot = new Teapot(resourceDevice, vertexShader, pixelShader);
}
正しい縦横比の指定
次に DrawingSurface_Resized メソッドを実装します。現在は Grid のサイズを 500x500 固定にしていますが、サイズが変更になったとき、あるいは固定サイズではないとき、実際のサイズで正しい縦横比(アスペクト比)で投影行列を計算しないとゆがんで表示されてしまいます。
private void DrawingSurface_SizeChanged(object sender, SizeChangedEventArgs e)
{
DrawingSurface surface = sender as DrawingSurface;
float aspect = (float)(surface.ActualWidth / surface.ActualHeight);
teapot.Projection = Matrix.CreatePerspectiveFieldOfView(
MathHelper.PiOver4, aspect, 1.0f, 50.0f);
}
描画
最後に DrawingSurface_Draw メソッドを実装します。ここでは単にDrawEventArgsで渡されたグラフィックスデバイスを引数として、ティーポットのDrawメソッドを呼び出すだけです。InvalidateSurfaceメソッドはこのメソッドをコールバック スタックに入れて繰り返すよう指定しています、つまり描画ループを作成しています。XNA 的にこういったループはあたりまえですが、イベント駆動のSilverlight にはあまり見られないやり方ですね。
void DrawingSurface_Draw(object sender, DrawEventArgs e)
{
teapot.Draw(e.GraphicsDevice);
e.InvalidateSurface();
}
ここまで実装できたらF5キーを押せば、このページの最初に載せたBlinn-Phongスペキュラーを持つティーポットがブラウザーに表示されるはずです。
次回はマウス操作でティーポットを回転・拡大縮小させる TrackBall を実装します。
実装した MainPage.xaml.csを添付します。