[連載! とことん VC++] 第 10 回 ネイティブ VC++ におけるグラフィックス オーバービュー、および Direct2D の基本的な利用方法

「[連載! とことん VC++] 第 10 回 ネイティブ VC++ におけるグラフィックス オーバービュー、および Direct2D の基本的な利用方法」が公開されました。 関連サイトとして「逆引き:Direct2D において拡大/縮小、回転などの変換を行う」と「MFC アプリケーションのビューの中で、Direct2D を使用する」も公開されました。 ネイティブのグラフィックス(特にDirect2D)に興味のある方はぜひお読みください。

0

わんくま同盟 東京勉強会 #60

6月25日(土)に、わんくま同盟 東京勉強会 #60 で「異なるグラフィックスAPIによるGPU サーフェイスの共有」の話をします。もともと MSDN Library「Surface Sharing Between Windows Graphics API」を自分でもちゃんと理解したくて内容を決めたんですが、気が付いてみたら Silverlight 5 (beta) や Windows Phone “Mango” でどんどん実装(カプセル化)されしまいました。

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

DrawingSurface:Silverlight 5 Beta

MIX11 で Silverlight 5 Beta がアナウンスされました。Silverlight 5 の新機能に「GPU-accelerated XNA-compatible 3D 」があります。Silverlight 5 のコントロールに DrawingSurface が追加され、そこに XNA 互換の API で 3D が描画できるのです。 WPF の Viewport3D と違って直接モードで描画するので、その中の 3D オブジェクトをコントロールのように使うことはできません。そういう用途には 3D 効果を使うべきです。GPU のサーフェイスを直接描画するという意味ではWPF の D3DImage に似ています。しかし D3DImage では他のプロセスで描画された結果を表示することしかできませんでしたが、 DrawingSurface には Silverlight 内で XNA を使って描画できるのです。 とはいえ、非常にプリミティブな機能しかサポートされていないので、頂点バッファ、頂点シェーダー、ピクセル シェーダーを実装しなければなりません。Model のような便利なクラスはありません。 ①まず、開くページの<object>タグに以下の行を追加します。 <param name=”EnableGPUAcceleration” value=”true” /> ②次に、XAML で DrawingSurface を宣言します。 <DrawingSurface Draw=”DrawingSurface_Draw”…

0