簡単な OpenGL ES 2.0 レンダラーの Direct3D 11 への移植Port a simple OpenGL ES 2.0 renderer to Direct3D 11

この移植作業では、基本から始めます。Visual Studio 2015 の DirectX 11 アプリ (ユニバーサル Windows) テンプレートに対応するように、頂点シェーディングされた回転する立方体の簡単なレンダラーを OpenGL ES 2.0 から Direct3D に移植します。For this porting exercise, we'll start with the basics: bringing a simple renderer for a spinning, vertex-shaded cube from OpenGL ES 2.0 into Direct3D, such that it matches the DirectX 11 App (Universal Windows) template from Visual Studio 2015. この移植プロセスでは、次について説明します。As we walk through this port process, you will learn the following:

  • 一連の簡単な頂点バッファーを Direct3D の入力バッファーに移植する方法How to port a simple set of vertex buffers to Direct3D input buffers
  • uniform と attribute を定数バッファーに移植する方法How to port uniforms and attributes to constant buffers
  • Direct3D のシェーダー オブジェクトを構成する方法How to configure Direct3D shader objects
  • Direct3D のシェーダー開発で基本的な HLSL セマンティクスを使う方法How basic HLSL semantics are used in Direct3D shader development
  • 非常に簡単な GLSL を HLSL に移植する方法How to port very simple GLSL to HLSL

このトピックは、新しい DirectX 11 プロジェクトを作成したところから始まります。This topic starts after you have created a new DirectX 11 project. 新しい DirectX 11 プロジェクトを作成する方法については、「テンプレートからの DirectX ゲーム プロジェクトの作成」をご覧ください。To learn how to create a new DirectX 11 project, read Create a new DirectX 11 project for Universal Windows Platform (UWP).

これらのリンクのどちらかから作成されたプロジェクトには Direct3D インフラストラクチャ用のコードがすべて用意されているため、OpenGL ES 2.0 から Direct3D 11 にレンダラーを移植するプロセスをすぐに始めることができます。The project created from either of these links has all the code for the Direct3D infrastructure prepared, and you can immediately start into the process of porting your renderer from Open GL ES 2.0 to Direct3D 11.

このトピックでは、2 つのコード パスについて説明します。どちらも同じ基本的なグラフィックス タスクを実行します。頂点シェーディングされた回転する立方体をウィンドウに表示するというものです。This topic walks two code paths that perform the same basic graphics task: display a rotating vertex-shaded cube in a window. どちらの場合も、コードは次のプロセスに対応しています。In both cases, the code covers the following process:

  1. ハードコードされたデータから立方体のメッシュを作成する。Creating a cube mesh from hardcoded data. このメッシュは頂点の一覧として表され、各頂点では位置、法線ベクトル、色ベクトルを処理します。This mesh is represented as a list of vertices, with each vertex possessing a position, a normal vector, and a color vector. シェーディング パイプラインで処理するためにこのメッシュを頂点バッファーに配置します。This mesh is put into a vertex buffer for the shading pipeline to process.
  2. 立方体のメッシュを処理するシェーダー オブジェクトを作成する。Creating shader objects to process the cube mesh. シェーダーは 2 つあります。1 つはラスタライズのために頂点を処理する頂点シェーダーで、もう 1 つはラスタライズ後に立方体の個々のピクセルに色を設定するフラグメント (ピクセル) シェーダーです。There are two shaders: a vertex shader that processes the vertices for rasterization, and a fragment (pixel) shader that colors the individual pixels of the cube after rasterization. これらのピクセルは、表示のためにレンダー ターゲットに書き込まれます。These pixels are written into a render target for display.
  3. 頂点シェーダーとフラグメント シェーダーでそれぞれ処理する頂点とピクセルに使われるシェーダー言語を構成する。Forming the shading language that is used for vertex and pixel processing in the vertex and fragment shaders, respectively.
  4. レンダリングされた立方体を画面に表示する。Displaying the rendered cube on the screen.

OpenGL の単純な立方体

このチュートリアルを終了すると、OpenGL ES 2.0 と Direct3D 11 の次の基本的な違いを理解できます。Upon completing this walkthrough, you should be familiar with the following basic differences between Open GL ES 2.0 and Direct3D 11:

  • 頂点バッファーと頂点データの表現。The representation of vertex buffers and vertex data.
  • シェーダーを作成して構成するプロセス。The process of creating and configuring shaders.
  • シェーダー言語と、シェーダー オブジェクトに対する入力と出力。Shading languages, and the inputs and outputs to shader objects.
  • 画面の描画動作。Screen drawing behaviors.

このチュートリアルでは、次のように定義される簡単で一般的な OpenGL レンダラーの構造体を参照します。In this walkthrough, we refer to an simple and generic OpenGL renderer structure, which is defined like this:

typedef struct 
{
    GLfloat pos[3];        
    GLfloat rgba[4];
} Vertex;

typedef struct
{
  // Integer handle to the shader program object.
  GLuint programObject;

  // The vertex and index buffers
  GLuint vertexBuffer;
  GLuint indexBuffer;

  // Handle to the location of model-view-projection matrix uniform
  GLint  mvpLoc; 
   
  // Vertex and index data
  Vertex  *vertices;
  GLuint   *vertexIndices;
  int       numIndices;

  // Rotation angle used for animation
  GLfloat   angle;

  GLfloat  mvpMatrix[4][4]; // the model-view-projection matrix itself
} Renderer;

この構造体には、インスタンスが 1 つあり、頂点シェーディングされた非常に簡単なメッシュをレンダリングするために必要なコンポーネントがすべて含まれています。This structure has one instance and contains all the necessary components for rendering a very simple vertex-shaded mesh.

  Any OpenGL ES 2.0 コードでは、このトピックでは、Khronos グループによって提供される Windows API の実装に基づいており、Windows C のプログラミング構文を使用します。Note  Any OpenGL ES 2.0 code in this topic is based on the Windows API implementation provided by the Khronos Group, and uses Windows C programming syntax.

 

理解しておく必要があることWhat you need to know

テクノロジTechnologies

前提条件Prerequisites

  • (省略可能)。Optional. DXGI と Direct3D の EGL コードの比較」をご覧ください。Review Port EGL code to DXGI and Direct3D. このトピックを読むと、DirectX によって提供されるグラフィックス インターフェイスについて理解を深めることができます。Read this topic to better understand the graphics interface provided by DirectX.

手順Steps

トピックTopic 説明Description

シェーダー オブジェクトの移植Port the shader objects

OpenGL ES 2.0 から簡単なレンダラーを移植する場合、最初の手順では、Direct3D 11 の対応する頂点シェーダー オブジェクトとフラグメント シェーダー オブジェクトを設定し、コンパイル後にメイン プログラムがシェーダー オブジェクトと通信できるようにします。When porting the simple renderer from OpenGL ES 2.0, the first step is to set up the equivalent vertex and fragment shader objects in Direct3D 11, and to make sure that the main program can communicate with the shader objects after they are compiled.

頂点バッファーと頂点データの移植Port the vertex buffers and data

この手順では、シェーダーが指定された順番で頂点を走査できるようにするインデックス バッファーとメッシュを格納する頂点バッファーを定義します。In this step, you'll define the vertex buffers that will contain your meshes and the index buffers that allow the shaders to traverse the vertices in a specified order.

GLSL の移植Port the GLSL

バッファーとシェーダー オブジェクトを作成して構成するコードが完成したら、それらのシェーダー内のコードを OpenGL ES 2.0 の GL シェーダー言語 (GLSL) から Direct3D 11 の上位レベル シェーダー言語 (HLSL) に移植します。Once you've moved over the code that creates and configures your buffers and shader objects, it's time to port the code inside those shaders from OpenGL ES 2.0's GL Shader Language (GLSL) to Direct3D 11's High-level Shader Language (HLSL).

画面への描画Draw to the screen

最後に、回転する立方体を画面に描画するコードを移植します。Finally, we port the code that draws the spinning cube to the screen.

 

その他のリソースAdditional resources