XNA と Silverlight (Windows Phone “Mango”)

先週まで Silverlight 5 (Beta) の DrawingSurface の話をしてきましたが、先日リリースされた Windows Phone “Mango” でも XNA と Silverlight でサーフェイスの共有が可能になっています。Windows Phone ではどちらもフルスクリーンに描画するので、DrawingSurface のようなコントロールはなく、以下のメソッドで共有モードを true にするだけです。 SharedGraphicsDeviceManager.   Current.     GraphicsDevice.       SetSharingMode(true); Windows Phone Developer Tools 7.1 Beta をダウンロードしてインストールすれば、Visual Studio 2010 Express for Windows Phoneと Expression Blend がインストールされ、Windows Phone “Mango”用アプリのビルドができます(エミュレータで動作)。ただし、日本語 Expression Blend がインストールされているときは、先にそれを削除する必要があります。 次に Code Samples for Windows Phone にある…

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 大全

「Silverlight 大全」が出版されました(ISBN-13: 978-4797363586)。300ページ強の本で「大全」とは大げさですが、ページ数の割には守備範囲の広い本だと思います。私も著者の一人としてXAMLとコントロールのカスタマイズを担当しました。 Silverlight概要 開発を始める前に Visual Studio を使用した開発 Silverlight アプリケーション開発 基本編 Expression と Visual Studio を使用した開発 Silverlight アプリケーション開発 応用編

0

MSDN Visual C++ デベロッパー センター

MSDN Visual C++ デベロッパー センターがリニューアルされました。中央に「アプリケーション別」「テクノロジ別」「目的別」に分かれたボタン群を持ち、MFCとかCOMの情報、あるいはダウンロードやスキルアップに移動できるようになっています。「これからはじめる」からは、太田さん執筆のVC++入門にアクセスできます。

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

募集:第4回 UX デザイン ワークショップ 6/10

好評のUXデザインワークショップを6月10日に開催します。興味のある方はお早めにお申し込みください。 スケジュール (都合により変更の可能性あり) 09:30 – 10:00 受付 10:00 – 10:30 『概要』 ワークショップの進め方、UX デザインの必要性と概要 10:30 – 12:30 『ユーザー調査、ペルソナ 』 コンテクスチャル インクワイアリー、ユーザー モデリング、グループ内でインタビュー、ペルソナ作成 12:30 – 13:30 昼食 13:30 – 15:00 『ストーリーボード 』 ペルソナ発表、ストーリーボード作成 15:00 – 15:15 休憩 15:15 – 16:45 『スケッチ』 スケッチ作成、ナビゲーション マップ 16:45 – 17:00 休憩 17:00 – 18:00 『発表とまとめ』 18:00 – 19:00 懇親会 “Happy Hour”…

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