Mango Teapot ④ カメラ

Article
08/15/2011

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

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>

</Rectangle.Fill>

<Rectangle.RenderTransform>

</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"/>を追加する必要があります

Mango Teapot ④ カメラ

Additional resources