Mango Teapot は Windows Phone 7.5 の AR アプリケーション サンプルです。ソースコードは mangoteapot.codeplex.com にあります。 Silverlight と XNA によるグラフィックス デバイスの共有 Teapot クラス 加速度センサーとモーション カメラ Windows Phone 7.5 (“Mango”) ではプログラムからカメラを使うための PhotoCamera クラスが提供されています。Mango Teapot で使いたいのはプレビュー用のビデオです...

Mango Teapot は Windows Phone 7.5 の AR アプリケーション サンプルです。ソースコードは mangoteapot.codeplex.com にあります。 Silverlight と XNA によるグラフィックス デバイスの共有 Teapot クラス 加速度センサーとモーション カメラ Windows Phone 7.5 (“Mango”) では、Windows Phone に搭載されているセンサー、加速度計・コンパス（方位計）・ジャイロスコープからデータを取得する Accelerometer...

Mango Teapot は Windows Phone 7.5 の AR アプリケーション サンプルです。ソースコードは MangoTeapot.codeplex.com にあります。 Silverlight と XNA によるグラフィックス デバイスの共有 Teapot クラス 加速度センサーと モーション カメラ 以前 Silverlight 5 (beta) で Teapot を描画 したとき、頂点バッファとインデックスバッファを基に Blinn-Phong シェーダーで描画する Teapot クラスを作成しました。そのときの Teapot...

Windows Phone "Mango" では、Silverlight と XNA でグラフィックス デバイス（GPU サーフェイス）の共有が可能になっており、両方の API を使って同じ画面の描画ができるようになりました。また、カメラやコンパスや加速度計などさまざまなセンサーもアプリケーションから利用できるようになりました。 先日の「 Windows Phone "Mango" 開発支援セミナー 」用に、これらを活用したAR（Argument Reality）サンプル Mango Teapot を作成したので、その内容を数回に分けて解説します。 Mango Teapot は Windows...

開発環境の準備と DrawingSurface Teapot クラス Blinn-Phong シェーダー 描画 トラックボール シェーダー パラメータの操作 スライダーで Blinn-Phong の光沢度（Shininess）を変更します。Blinn-Phong シェーダーではピクセルシェーダーで法線と等分角ベクトル（ハーフ ベクトル）の内積をべき乗しますがその指数が光沢度です。この光沢度は Teapot.cs でパブリック変数として持っている Shiness プロパティをピクセルシェーダー レジスターの第4成分（w）として渡しています。 specular.W = this .Shininess;...

開発環境の準備と DrawingSurface Teapot クラス Blinn-Phong シェーダー 描画 トラックボール シェーダー パラメータの操作 ティーポットをマウスで回転・拡大縮小するためのトラックボールを実装します。まず Visual Studio の[プロジェクト]→[クラスの追加]で TrackBall.cs を追加します。 トラックボールの実装 この実装は WPF のサンプルコードにあった TrackBall.cs を Silverlight 5 (Beta) 用に改造したものです。基本的な考え方はそのままですが...

開発環境の準備と DrawingSurface Teapot クラス Blinn-Phong シェーダー 描画 トラックボール シェーダー パラメータの操作 今回は MainPage.xaml.cs を実装します、これまで実装してきた Teapot クラスとコンパイル済み HLSL シェーダーを使って、ティーポットを描画します。 コンパイル済みシェーダーのロードと登録 まず DrawingSurface_Loade メソッドを実装します。ここでは2つのコンパイル済みシェーダーをストリームとしてロードして、シェーダーを生成し、デバイスに登録してから...

開発環境の準備と DrawingSurface Teapot クラス Blinn-Phong シェーダー 描画 トラックボール シェーダー パラメータの操作 Silverlight 5（Beta）の XNA には BasicEffect のような便利なクラスがないので、自前で頂点シェーダーとピクセルシェーダーをHLSL（Hight Level Shader Language）で書いて、コンパイルして、ロードして、デバイスに設定しなければなりません。ここでは Blinn-Phong シェーダーを実装して適用します。Silverlight 5 (Beta...

開発環境の準備と DrawingSurface Teapot クラス Blinn-Phong シェーダー 描画 トラックボール シェーダー パラメータの操作 DrawingSurface に描画する Teapot クラスを実装します。Silverlight 5 Beta の XNA には Model とか Mesh のような便利なクラスがないので、自前で頂点バッファとインデックス バッファを作り、DrawIndexedPrimitive で描画しなければなりません。非常にプリミティブな下位レベルの実装になります。 Visual Studio...

Silverlight 5（Beta）で GPU を使った XNA 互換の直接モード 3D が書けるようになったので、Blinn-Phongスペキュラーでシェーディングしたティーポットを表示させてみました。トラックボール クラスでマウス操作による回転縮小も実装しました。数回に分けて解説します。 開発環境の準備と DrawingSurface Teapot クラス Blinn-Phong シェーダー 描画 トラックボール シェーダー パラメータの操作 開発環境の準備 すでに Visual Studio 2010 がインストールされているという前提で話を進めます...

これまで紹介してきたサンプル シェーダー コードをまとめて PsPad.codeplex に公開しました。 Gray.fx Ripple.fx Soble.fx Sharpen.fx ZoomBulr.fx

  単純なぼかしなら、 BlurEffect を使えばよいのでシェーダーを書く必要はありません。 決して BlurBitmapEffect を使ってはいけません （あまりに遅いため、WPF 4では機能しなくなりました）。 Shader Effect Library に面白いぼかし効果がありました。ある点にズームインして収束するようなぼかしをかけられる ZoomBlur です。これも一種の畳み込みなんでしょうか、ズームスケールに応じて15回サンプリングして平滑化しています。WPF側で C0 定数レジスターを変化させればズームイン アニメーションが作れます。マウスを右クリックしながら動かせば焦点の位置が変わります...

Soble  フィルター で使った 3x3 のカーネルを使った畳み込みフィルターは画像処理によく使われます。今回は画像をシャープにする Sharpen フィルターの例を紹介しましょう。    元の画像                                                                 ...

今回からはピクセルシェーダーの実装例を紹介します。Sobel フィルターは輪郭抽出によく使われる畳み込みフィルターで、近傍のピクセルをサンプリングして、各ピクセルにカーネルと呼ばれる重みを乗算して加算します。 現在のピクセルの座標は uv 引数（[0,1]で正規化）で渡されます。近傍のピクセルの位置を得るには画像のサイズが必要ですが、PsPad v1.0 には画像サイズを渡す定数レジスターが定義されていないので（v2.0で実装します！）、640 x 480 として位置を割り出しました。 float dx = 1.0/640.0; float dy = 1.0/480.0; 中心のピクセルは使わないので...

次に Ripple.fx を使ってピクセルシェーダーの定数レジスターを WPF から使う方法を解説します。まず、 PsPad で Ripple.fx をロードし、Save Shader ボタンで、Ripple.ps を保存します。Silverlight でも使えるようにシェーダーモデル 2.0 （ PS2_0 ）でコンパイルするときは、Ripple.fx の終わりの数行で、以下のように lighting 変数の定義と仕様をコメントアウトします。ライティングの効果がなくなりますが、あまり目立ちません。 float2 uv2 = center + distance * direction; ...