次の方法で共有

Mango Teapot ④ カメラ

  • [アーティクル]

Mango Teapot は Windows Phone 7.5 の AR アプリケーション サンプルです。ソースコードは mangoteapot.codeplex.com にあります。

  1. Silverlight と XNA によるグラフィックス デバイスの共有
  2. Teapot クラス
  3. 加速度センサーとモーション
  4. カメラ

Mango-Teapot_thumb2_thumb1

Windows Phone 7.5 (“Mango”) ではプログラムからカメラを使うための PhotoCamera クラスが提供されています。Mango Teapot で使いたいのはプレビュー用のビデオです。プレビュー ビデオを使う方法は、コンストラクトした PhotoCamera オブジェクトを VideoBrush のソースに指定するだけです。

cam = new Microsoft.Devices.PhotoCamera();

viewfinderBrush.SetSource(cam);

VideoBrush から分かる通り、プレビュービデオの表示には Silverlight を使います。結局ティーポット以外の表示要素は全て Silverlight ですね。以下のような XAMLで VideoBrush を使って矩形を塗りつぶします。

<Rectangle Name="videoRect" Width="640" Height="480"

    Canvas.ZIndex="1" Visibility="Collapsed">

  <Rectangle.Fill>

    <VideoBrush x:Name="viewfinderBrush" />

  </Rectangle.Fill>

  <Rectangle.RenderTransform>

   <RotateTransform Angle="90" CenterX="240" CenterY="240" />

  </Rectangle.RenderTransform>

</Rectangle>

注意しなければいけないのは OnDraw メソッドでの描画順です。ティーポットは必ずビデオの手前に表示したいので、elementRendererを描画してからティーポットを描画します。通常 Silverlight では UI 表示を担当し、ゲームコンテンツの手前に表示するため、最後に elementRenderer を描画することが多いのですが、Mango Teapot では反対になります。

private void OnDraw(object sender, GameTimerEventArgs e)

{

  // Silverlight UI 要素をテクスチャにレンダリング

  elementRenderer.Render();

  // デバイスのクリーンアップ

  SharedGraphicsDeviceManager.Current.GraphicsDevice.Clear(Color.CornflowerBlue);

 

  // 先に Silverlight UI 要素を描画

  spriteBatch.Begin();

  spriteBatch.Draw(elementRenderer.Texture, Vector2.Zero, Color.White);

  spriteBatch.End();

 

  // 最後にティーポットを描画

  teapot.Draw(SharedGraphicsDeviceManager.Current.GraphicsDevice);

}

これで Mango Teapot 完成です。Mango ではセンサーやカメラが使え、XNA の 3D コンテンツと Silverlight のビデオ・UI という両方のいいとこ取りができるので、こんな AR アプリもすぐにできてしまいます。

 

【追記】アプリからカメラを使うには WMAppManifest.xml に <Capability Name="ID_CAP_ISV_CAMERA"/>を追加する必要があります