tutorial 03:Shaders and Effect System の和訳

概要

Summary

In the previous tutorial, we set up a vertex buffer and passed one triangle to the GPU. Now, we will actually step through the graphics pipeline and look at how each stage works. The concept of shaders and the effect system will be explained. Note that this tutorial shares the same source code as the previous one, but will emphasize a different section.

前回のチュートリアルでは、頂点バッファーをセットアップして1 つの三角形を GPU に渡しました。今回はグラフィックパイプラインとそのステージがどう動くのかを実際に見て行きましょう。シェーダーとエフェクトシステムの概念が説明されます。このチュートリアルは前回と同じソースコードを共有しますが、焦点を当てるのは別の項目です。

グラフィックパイプライン

The Graphics Pipeline

In the previous tutorial, we set up the vertex buffer, and then we associated a vertex layout with a vertex shader.

前回のチュートリアルでは頂点バッファをセットアップして、頂点シェーダに頂点レイアウトを関連付けました。

Now, we will explain what a shader is and how it works.

今回はシェーダは何なのか、そしてそれはどの様に動くのかを説明します。

To fully understand the individual shaders, we will take a step back and look at the whole graphical pipeline.

個々のシェーダーを十分に理解するために、前回に戻ってグラフィックパイプラインの全体を見ましょう。

In Tutorial 2, when we called VSSetShader() and PSSetShader(), we actually bound our shader to a stage in the pipeline.

チュートリアル２では、VSSetShader()とPSSetShader()を呼びました。実際にシェーダーがグラフィックパイプラインへ結びついたのはこの時です。

Then, when we called Draw, we start processing the vertex data passed into the graphics pipeline. The following sections describe in detail what happens after the Draw command.

次にDrawを呼び出した時、グラフィックパイプラインへ頂点データを渡すプロセスが開始しました。続くセクションではDraw命令の後に何が起こるか詳細を見ていきます。

シェーダー

Shaders

 In Direct3D 11, shaders reside in different stages of the graphics pipeline. They are short programs that, executed by the GPU, take certain input data, process that data, and then output the result to the next stage of the pipeline.

Direct3D11では数種類のシェーダーがあり、それぞれグラフィックパイプラインの別々のステージを占めています。それらはGPUによって実行される短いプログラムです。特定のデータを受け取って処理し、結果を次のパイプラインへと出力します。

Direct3D 11 supports three basic types of shaders: vertex shader, geometry shader, and pixel shader.

Direct3D11は基礎的なシェーダーとして:頂点シェーダ、ジオメトリシェーダ、そしてピクセルシェーダをサポートします。

A vertex shader takes a vertex as input. It is run once for every vertex passed to the GPU via vertex buffers.

頂点シェーダは入力として頂点を受け取ります。頂点バッファを経由してGPUに通された頂点全てに対し、一度だけ実行されます。

A geometry shader takes a primitive as input, and is run once for every primitive passed to the GPU.

ジオメトリシェーダは入力としてプリミティブを受け取ります。GPUに渡されたプリミティブ全てが一度このシェーダーによる処理を受けます。

A primitive is a point, a line, or a triangle.

プリミティブは点、線、三角形です。

A pixel shader takes a pixel (or sometimes called a fragment) as input, and is run once for each pixel of a primitive that we wish to render. Together, vertex, geometry, and pixel shaders are where the meat of the action occurs.

ピクセルシェーダは入力としてピクセル（または時々フラグメントと呼ばれます）を受け取ります。我々が描画したいプリミティブのピクセルそれぞれに対して一度実行されます。

When rendering with Direct3D 11, the GPU must have a valid vertex shader and pixel shader. Geometry shader is an advanced feature in Direct3D 11 and is optional, so we will not discuss geometry shaders in this tutorial.

Direct3D11で描画する時、GPUは有効な頂点シェーダとピクセルシェーダを保持していなければなりません。ジオメトリシェーダーは進んだ話題であり、使うかどうかは任意なのでこのチュートリアルでは説明しません。

In Direct3D 11 there are also hull and domain shaders for tessellation and compute shaders for compute. For more information about these, see the other samples.

Direct3D11にはテセレーションのためのハル、及びドメインシェーダや、計算のためのコンピュートシェーダもあります。これらの詳しい情報は他のサンプルを見て下さい。

頂点シェーダ

Vertex Shaders

Vertex shaders are short programs that are executed by the GPU on vertices. Think of vertex shaders as C functions that take each vertex as input, process the input, and then output the modified vertex.

頂点シェーダはGPUによって実行される短いプログラムです。これはCの関数の様なものだと考えて下さい。それぞれの頂点を入力として受け取って処理し、変化した頂点を出力します。

After the application passes vertex data to the GPU in the form of a vertex buffer, the GPU iterates through the vertices in the vertex buffer, and executes the active vertex shader once for each vertex, passing the vertex's data to the vertex shader as input parameters.

アプリケーションが頂点バッファという形でGPUに頂点情報を渡すと、GPUはバッファ中の頂点それぞれに対して反復処理をします。すなわちアクティブな頂点シェーダがそれぞれの頂点に対して一度実行されるようにします。頂点データは頂点シェーダに入力パラメーターとして渡されます。

While a vertex shader can be used to carry out many tasks, the most important job of a vertex shader is transformation.

頂点シェーダを使って色んな事ができますが、最も重要な仕事は座標変換です。

Transformation is the process of converting vectors from one coordinate system to another.

座標変換は一つの座標系から別の座標系へとベクトル変換する処理です。

For example, a triangle in a 3D scene may have its vertices at the positions (0, 0, 0) (1, 0, 0) (0, 1, 0).

例えば、3Dシーンの中の三角形は (0, 0, 0) (1, 0, 0) (0, 1, 0)という位置を持つかも知れません。

When the triangle is drawn on a 2D texture buffer, the GPU has to know the 2D coordinates of the points on the buffer that the vertices should be drawn at.

三角形が２Dテクスチャバッファに描かれる時、GPUはどこに頂点を描くべきかバッファ上の点の２D座標を知る必要があります。

It is transformation that helps us accomplish this. Transformation will be discussed in detail in the next tutorial.

これを達成する時に役立つのが座標変換です。座標変換の詳細は次のチュートリアルで解説します。

For this tutorial, we will be using a simple vertex shader that does nothing except passing the input data through as output.

このチュートリアルでは入力した内容を出力へ通す以外何もしない単純な頂点シェーダを使いましょう。

In the Direct3D 11 tutorials, we will write our shaders in High-Level Shading Language (HLSL).

このDirect3D11のチュートリアル中ではシェーダーを High-Level Shading Language（HLSL）で書きます。

Recall that our vertex data has a 3D position element, and the vertex shader will do no processing on the input at all.

我々の頂点データは３Dの位置を持ち、そして頂点シェーダは入力に対して何もしない事を思い出して下さい。

The resulting vertex shader looks like the following:
float4 VS( float4 Pos : POSITION ) : SV_POSITION { return Pos; } This vertex shader looks a lot like a C function.

頂点シェーダの結果は以下の様になる事でしょう。

float4 VS( float4 Pos : POSITION ) : SV_POSITION
{
return Pos;
｝

この頂点シェーダはCの関数に良く似ています。

HLSL uses C-like syntax to make learning easier for C/C++ programmers.

HLSLはCに似た構文を使うのでC/C++のプログラマーは学習が容易です。

We can see that this vertex shader, named VS, takes a parameter of float4 type and returns a float4 value.

我々はこの頂点シェーダにVSという名前と、float4型の引数と戻り値をがある事が分かります。

In HLSL, a float4 is a 4-component vector where each component is a floating-point number.

HLSLでは、float4は浮動小数点数４つから成るベクトルです。

The colons define the semantics of the parameter as well as the return value. As mentioned above, the semantics in HLSL describe the nature of the data.

コロンは引数や戻り値のセマンティクスを定義します。以前述べたように、HLSLではセマンティクスはデータの性質（種類）を説明します。

In our shader above, we choose POSITION as the semantics of the Pos input parameter because this parameter will contain the vertex position.

上記のシェーダーは引数PosのセマンティクスとしてPOSITIONを選びました。なぜならこの引数は頂点の位置を格納する事になるからです。

The return value's semantics, SV_POSITION, is a pre-defined semantics with special meaning.

戻り値であるSV_POSITIONは、特別な意味を持つ定義済みセマンティクスです。

This semantics tells the graphics pipeline that the data associated with the semantics defines the clip-space position.

このセマンティクスはそのセマンティクスと関連付けられたデータがクリップスペースの位置を定義するために使われる事をグラフィックパイプライン教えます。

This position is needed by the GPU in order to drawn pixels on the screen. (We will discuss clip-space in the next tutorial.)

この位置は画面にピクセルを描く命令においてGPUが必要とします。（クリップスペースは次のチュートリアルで説明します。）

In our shader, we take the input position data and output the exact same data back to the pipeline.

このシェーダーでは入力に位置データを受け取り、全く同じデータである出力をパイプラインへ戻します。

ピクセルシェーダ

Pixel Shaders

Modern computer monitors are commonly raster display, which means the screen is actually a two-dimensional grid of small dots called pixels.

最近のコンピューターのモニターは一般的にラスター表示です。この意味は画面は実際にはピクセルと呼ばれる小さなドットの２次元格子だという事です。

Each pixel contains a color independent of other pixels. When we render a triangle on the screen, we don't really render a triangle as one entity. Rather, we light up the group of pixels that are covered by the triangle's area. Figure 2 shows an illustration of this.

それぞれのピクセルは他のピクセルから独立して色成分を保持します。我々が画面に三角形を描いた時、ひとつの実体として本当に三角形を描く訳ではありません。むしろ三角形に覆われる領域をピクセルのグループとしてライトアップするのだと言えます。図２にはこれを表します。

図２.左：描きたい物.　右：実際に画面に出る物

The process of converting a triangle defined by three vertices to a bunch of pixels covered by the triangle is called rasterization.

３つの頂点で定義される三角形をその三角形で覆われているピクセルの束へ変換する処理がラスタライズです。

The GPU first determines what pixels are covered by the triangle being rendered.

最初にGPUは三角形が描かれた時にどのピクセルが覆われるかを測定します。

Then it invokes the active pixel shader for each of these pixels.

次にそれらのピクセルに対してアクティブなピクセルシェーダーを適用します。

A pixel shader's primary purpose is to compute the color that each pixel should have.

ピクセルシェーダの主な目的はそれぞれのピクセルが持つべき色を計算する事です。

The shader takes certain input about the pixel being colored, computes the pixel's color, then outputs that color back to the pipeline.

このシェーダーは色となるピクセルに関しての特定の入力を受け取り、ピクセル色を計算します。そしてその色を出力してパイプラインへ戻します。

The input that it takes comes from the active geometry shader, or, if a geometry shader is not present, such as the case in this tutorial, the input comes directly from the vertex shader.

ピクセルシェーダへの入力は、アクティブなジオメトリシェーダからやって来ます。もしくは、このチュートリアルの様にジオメトリシェーダが用意されない場合、入力は頂点シェーダから直接来ます。

The vertex shader we created above outputs a float4 with the semantics SV_POSITION. This will be the input of our pixel shader.

我々が上で作った頂点シェーダはセマンティクス SV_POSITIONを伴ったfloat4を出力します。これがピクセルシェーダの入力となります。

Since pixel shaders output color values, the output of our pixel shader will be a float4. We give the output the semantics SV_TARGET to signify outputting to the render target format. The pixel shader looks like the following:

ピクセルシェーダは色の値を出力するので、我々のピクセルシェーダの出力はfloat4となります。我々は出力に、SV_TARGETというセマンティクスを与えます。これはレンダーターゲットフォーマットへ出力するという意味になります。このピクセルシェーダの次のようになります。

float4 PS(float4 Pos: SV_POSITION) : SV_Target
{
// 黄色（透明度は =1）
return float4(1.0f, 1.0f, 0.0f, 1.0f);
}

シェーダーの作成

Creating the Shaders

In the application code, we will need to create a vertex shader and a pixel shader object.

私達はアプリケーションコード中で、頂点シェーダとピクセルシェーダのオブジェクトを作る必要があります。

These objects represent our shaders, and are created by calling D3DX11CompileFromFile().

これらのオブジェクトがシェーダーを表します。そしてこれはD3DX11CompileFromFile()を呼ぶことで作れます。

The code is demonstrated below:

このコードは以下の様に記述できます。

// Create the vertex shader
if( FAILED( D3DX11CompileFromFile(
"Tutorial03.fx", NULL, NULL, "VS", "vs_4_0",
D3DCOMPILE_ENABLE_STRICTNESS,
NULL, NULL, &pVSBlob, &pErrorBlob, NULL ) ) )
return FALSE;

// Create the pixel shader
if( FAILED( D3DX11CompileFromFile(
"Tutorial03.fx", NULL, NULL, "PS", "ps_4_0",
D3DCOMPILE_ENABLE_STRICTNESS,
NULL, NULL, &pPSBlob, &pErrorBlob, NULL ) ) )
return FALSE;

まとめ

Putting It Together

After walking through the graphics pipeline, we can start to understand the process of rendering the triangle we created at the beginning of Tutorial 2.

グラフィックパイプラインを歩き通した後は、チュートリアル２のはじめに作った三角形描画の処理を理解し始める事が出来ます。

Creating Direct3D applications requires two distinct steps.

 Direct3Dのアプリケーションを作るには２つの違ったステップが必要です。

The first would be creating the source data in vertex data, as we've done in Tutorial 2. The second stage would be to create the shaders which would transform that data for rendering, which we showed in this tutorial.

一つは頂点情報を元にソースデータを作る事で、これはチュートリアル２で行いました。次のステージはシェーダーを作ることです。シェーダが描画のためにデータを座標変換します。これはこのチュートリアルでやりました。

セマンティックあげーるよ

セマンティックあげーるよ 

　　　　　　　　　＿＿＿＿＿＿　 
 　　　 　　　,;i|||||||||||||||||||||||||||||||ii;､
 　　　　　／||||||||||||||||||||||||||||||||||||||ii;､
 　　／￣￣＼||||||||||||||||||||||||||||||||||||ii;ﾞヽ,
 '"￣ヽ　　　　　ヽ!!||||||||||||||||　　||||||||||!!"ﾍ　　　
 ヽ　　　　　　　　　 ﾞ!!!||||||||||||　　|||||||!!　　 i
 |||ｌ　　　　　　　　　 　　ﾞﾞヽ､ｌｌ,,‐''''""　　　　 | 
 |||ｌ　　　　　＿＿＿＿　　　ﾞｌ　　　＿＿　　　＼||||||||| 
 ||!'　　　 ／ヽ､　　　　 oﾞ＞┴＜"o　　 /＼　　 |
 ＼　　／　　|ミﾐヽ──‐'"ﾉ≡- ﾞ'──''彡| |､　|　
 　 ￣|　　　　|ミミミ／"￣ ､,,／|ｌ￣"'''ヽ彡|| |､/
 　ヽ､ｌ|　　　　|ミミミ|　 |､────ﾌヽ |彡ｌ| |/　
 　 ＼/|ｌ　　　 |ミミミ|　＼_/￣￣ﾌ_/　 |彡|ｌ/　　　
 　　＼　ﾉ　　 ｌ|ミミミ|　　＼二二､_/　 |彡|　　　
 　　　￣＼　　ｌ|ミミミ|　　　￣￣￣　　|ﾒ/　　　　　
 　　　　|　＼　ヽ＼ミヽ　　　￣￣"'　　|/　　　　　
 　　　 /　　＼ヽ､ヽﾞ''''ヽ､＿＿＿＿_／/　　　　
 　　／　　ヽ　ﾞヽ─､──────'/|　　　　　　　
 . ／　　　　　　　ﾞ＼　＼　　　　 /　/ ＼＿＿ 
 　　　───'''"￣￣￣ﾞﾞヽ､__,,/,-'''"￣　　　ﾞ''─