共用方式為


Silverlight 5(Beta)で Teapot + Blinn-Phong ④

  1. 開発環境の準備と DrawingSurface
  2. Teapot クラス
  3. Blinn-Phong シェーダー
  4. 描画
  5. トラックボール
  6. シェーダー パラメータの操作

image

今回は 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を添付します。

MainPage.xaml.cs