Mango Teapot ④ カメラ

Mango Teapot は Windows Phone 7.5 の AR アプリケーション サンプルです。ソースコードは mangoteapot.codeplex.com にあります。 Silverlight と XNA によるグラフィックス デバイスの共有 Teapot クラス 加速度センサーとモーション カメラ 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″…

0

Mango Teapot ③ 加速度センサーとモーション

Mango Teapot は Windows Phone 7.5 の AR アプリケーション サンプルです。ソースコードは mangoteapot.codeplex.com にあります。 Silverlight と XNA によるグラフィックス デバイスの共有 Teapot クラス 加速度センサーとモーション カメラ Windows Phone 7.5 (“Mango”) では、Windows Phone に搭載されているセンサー、加速度計・コンパス(方位計)・ジャイロスコープからデータを取得する Accelerometer, Compass, Gyroscope クラスが用意されています。ジャイロスコープはオプションなので搭載されていないデバイスもあります(ジャイロスコープ搭載デバイスのほうが少ない?)。 個々のセンサーから生データを取得して自分で必要なデータに加工してもよいのですが、これらのセンサーをまとめて加工済みのデータを取得できる Motion クラスが用意されています。例えば、この Mango Teapot のようにデバイスの姿勢を取得して3Dオブジェクトの姿勢を制御したいとき、加速度計から重力方向をコンパスから方位をそれぞれ取得して行列を計算するより、Motion からヨー・ピッチ・ローの各角度、あるいは回転行列を取得したほうが簡単です。 MSDN のサンプルは Silverlight ベースなので定期的にコールバックでセンサーのデータを取得していますが、XNA なら OnUpdateで CurrentValue プロパティを使って現在の値を取得するほうが簡単です。CurrentValue については田中達彦さんに教えてもらいました、感謝。回転行列が一発で取得できる Motion.CurrentValue.Attitude.RotationMatrix って素敵ですよね。 private void OnUpdate(object sender, GameTimerEventArgs…

0

Mango Teapot ② Teapot クラス

Mango Teapot は Windows Phone 7.5 の AR アプリケーション サンプルです。ソースコードは MangoTeapot.codeplex.com にあります。 Silverlight と XNA によるグラフィックス デバイスの共有 Teapot クラス 加速度センサーと モーション カメラ 以前 Silverlight 5 (beta) で Teapot を描画したとき、頂点バッファとインデックスバッファを基に Blinn-Phong シェーダーで描画する Teapot クラスを作成しました。そのときの Teapot クラスに以下の変更を加えました。おもに XNA 4.0 への対応とシェーダーから固定機能(BasicEffect)への移行です。 IVertexType XNA 4.0 ではカスタム頂点フォーマットを定義する際に IVertexType を継承しなければならないので、それに対応しました。 private struct VertexPositionNormal : IVertexType {   private Vector3 _vertexPosition;  …

0

Mango Teapot ① Silverlight と XNA によるグラフィックス デバイスの共有

Windows Phone “Mango” では、Silverlight と XNA でグラフィックス デバイス(GPU サーフェイス)の共有が可能になっており、両方の API を使って同じ画面の描画ができるようになりました。また、カメラやコンパスや加速度計などさまざまなセンサーもアプリケーションから利用できるようになりました。 先日の「Windows Phone “Mango” 開発支援セミナー」用に、これらを活用したAR(Argument Reality)サンプル Mango Teapot を作成したので、その内容を数回に分けて解説します。 Mango Teapot は Windows Phone 7.5 の AR アプリケーション サンプルです。ソースコードは mangoteapot.codeplex.com で公開しています。ビルドするには Windows Phone SDK 7.1 Beta 2 が必要です。エミュレータでも動作しますが、実機での動作には Windows Phone “Mango” が必要ですので、もう少しお待ちください。 Silverlight と XNA によるグラフィックス デバイスの共有 Teapot クラス 加速度センサーと モーション カメラ      …

0

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

開発環境の準備と DrawingSurface Teapot クラス Blinn-Phong シェーダー 描画 トラックボール シェーダー パラメータの操作 スライダーで Blinn-Phong の光沢度(Shininess)を変更します。Blinn-Phong シェーダーではピクセルシェーダーで法線と等分角ベクトル(ハーフ ベクトル)の内積をべき乗しますがその指数が光沢度です。この光沢度は Teapot.cs でパブリック変数として持っている Shiness プロパティをピクセルシェーダー レジスターの第4成分(w)として渡しています。 specular.W = this.Shininess; device.SetPixelShaderConstantFloat4(0, ref specular); ですから、MainPage.xaml でスライダー コントロールを追加して(<Border />の下の行に挿入)、MainPage.xaml.cs のコールバックでその値を teapot.Shininess に代入してやれば、光沢度が変更できます。依存プロパティとバインディングを使えばコールバックもいらないでしょうが、これも別の話なので、シンプルに代入します。 <Slider Name="slider1" Height="32" Width="205" Margin="0,0,0,0"   Grid.Row="0" Grid.Column="0"   HorizontalAlignment="Center" VerticalAlignment="Bottom"    Minimum="8" Maximum="128" Value="32" ValueChanged="slider1_ValueChanged"/> private void slider1_ValueChanged(object sender,                                   RoutedPropertyChangedEventArgs<double>…

0

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

開発環境の準備と DrawingSurface Teapot クラス Blinn-Phong シェーダー 描画 トラックボール シェーダー パラメータの操作 ティーポットをマウスで回転・拡大縮小するためのトラックボールを実装します。まず Visual Studio の[プロジェクト]→[クラスの追加]で TrackBall.cs を追加します。 トラックボールの実装 この実装は WPF のサンプルコードにあった TrackBall.cs を Silverlight 5 (Beta) 用に改造したものです。基本的な考え方はそのままですが、WPF 版では Viewport3D をベースにしているため、回転などのデータの持ち方がWPF専用だったので、プライベート変数として回転をクォータニオンで、スケールを単精度浮動小数点で保持し、パブリック変数 Transform は行列型としました。 //private _rotation and _scale  private Quaternion _rotation = Quaternion.Identity; private float _scale = 1.0f; //public Transform public Matrix Transform {   get {    …

0

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

開発環境の準備と DrawingSurface 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;  …

0

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

開発環境の準備と DrawingSurface Teapot クラス Blinn-Phong シェーダー 描画 トラックボール シェーダー パラメータの操作 Silverlight 5(Beta)の XNA には BasicEffect のような便利なクラスがないので、自前で頂点シェーダーとピクセルシェーダーをHLSL(Hight Level Shader Language)で書いて、コンパイルして、ロードして、デバイスに設定しなければなりません。ここでは Blinn-Phong シェーダーを実装して適用します。Silverlight 5 (Beta) でサポートされるのはシェーダーバージョン 2(vs_2_0, ps_2_0)です。 Silverlight プロジェクトを選択して、Visual Studio の [プロジェクト]→[新しいフォルダー]を選び「HLSL」フォルダーを作成します。そのフォルダーにBlinn-Phong.vs.hlsl と Blinn-Phong.ps.hlsl ファイルを作成します。HLSLを右クリックし[追加]→[新しい項目]でテンプレートは何でも構わないと思いますが、テキストファイルでも使いましょう。 Blinn-Phong シェーダー(HLSL) Blinn-Phong はスペキュラー(鏡面反射)を表現するシェーディングで、Phong シェーディングを Blinn が等分角ベクトル(ハーフ ベクトル)を使って表現したものです、詳しくは拙著リアルタイム レンダリングなどを参照してください。 頂点シェーダーでは、各頂点の位置をWVP(World-View-Projection)行列で座標変換するとともに、ライト ベクトルと法線との内積からディフューズ色(拡散反射)と、ライト ベクトルとビュー ベクトルから等分角ベクトルを出力します。 コードからシェーダーに渡す頂点やテクスチャ以外のデータには、座標変換や照明計算に必要な行列や色などがあり、これらはレジスターの形で渡します。1レジスターは4つの浮動小数点で float4 で表し、float4x4 は4つのレジスターを使って行列が渡されることを意味します。Silverlight 側のコードでこれらの変数をデバイスに登録します。詳細はHLSLのドキュメントを参照してください。 // Blinn-Phong.vs.hlsl float4x4…

0

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

開発環境の準備と DrawingSurface Teapot クラス Blinn-Phong シェーダー 描画 トラックボール シェーダー パラメータの操作 DrawingSurface に描画する Teapot クラスを実装します。Silverlight 5 Beta の XNA には Model とか Mesh のような便利なクラスがないので、自前で頂点バッファとインデックス バッファを作り、DrawIndexedPrimitive で描画しなければなりません。非常にプリミティブな下位レベルの実装になります。 Visual Studio の[プロジェクト]→[クラスの追加]で Teapot.cs クラスを作成します。 XNA 用の名前空間を追加 XNA で使うクラスやメソッド用に Microsoft.Xna.Framework などの名前空間を追加します。   … using Microsoft.Xna.Framework; using Microsoft.Xna.Framework.Graphics; using Microsoft.Xna.Framework.Silverlight; using System.Windows.Media.Imaging;       頂点バッファとインデックス バッファ用のクラス変数 頂点バッファとインデックス バッファを宣言するとともに、ティーポットのデータは頂点と法線なので、カスタム頂点構造体 VertexPositionNormal を作成します…

1

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

Silverlight 5(Beta)で GPU を使った XNA 互換の直接モード 3D が書けるようになったので、Blinn-Phongスペキュラーでシェーディングしたティーポットを表示させてみました。トラックボール クラスでマウス操作による回転縮小も実装しました。数回に分けて解説します。 開発環境の準備と DrawingSurface Teapot クラス Blinn-Phong シェーダー 描画 トラックボール シェーダー パラメータの操作   開発環境の準備 すでに Visual Studio 2010 がインストールされているという前提で話を進めます。この「Silverlight 5 で Teapot + Blinn-Phong」開発にはさらに以下のものが必要です、ダウンロードしてセットアップしましょう。 Visual Studio 2010 SP1 Silverlight 5 Beta Tools for Visual Studio 2010 SP1 DirectX SDK XNA Math Helper Library XNA Math Helper Library はダウンロードしたプロジェクト内にある…

0