This is an automated email from the git hooks/post-receive script.
git pushed a commit to branch master
in repository Direct3D.wiki.
View the commit online.
commit 15bc1e96e2cbfdcf6d153776938e0314b86edcba
Author: Vincent Torri <vincent.to...@gmail.com>
AuthorDate: Mon Jul 31 04:11:59 2023 -0700
Update 'Direct3D 11 for 2D: Display a pink triangle'
---
Direct3D-11-for-2D%3A-Display-a-pink-triangle.md | 70 +++++++++++++++++++++++-
1 file changed, 69 insertions(+), 1 deletion(-)
diff --git a/Direct3D-11-for-2D%3A-Display-a-pink-triangle.md b/Direct3D-11-for-2D%3A-Display-a-pink-triangle.md
index 76c4674..fa6087e 100644
--- a/Direct3D-11-for-2D%3A-Display-a-pink-triangle.md
+++ b/Direct3D-11-for-2D%3A-Display-a-pink-triangle.md
@@ -1 +1,69 @@
-# Display a pink triangle
\ No newline at end of file
+# Display a pink triangle
+
+The first step for an Evas software engine is to draw pixels in a rectangle. In Direct3D, a rectangle is composed of two triangles, so the first step is to draw one triangle. The next section will modify the code to draw a pink rectangle.
+
+For now, we have used the Rasterizer and Output Merger stages of the pipeline. The following stages are needed to draw something:
+
+1. the Input Asembler (IA) stage, which reads the geometric data,
+2. the Vertex Shader (VS) stage that transforms the geometric data built in the IA stage,
+3. the Pixel Shader (PS) stage which modify each pixel that will be seen.
+
+So first, the 3D scene (actually a 2D scene for our purposes) must be created, that is, our pink triangle.
+
+### Vertices and coordinate system
+
+A vertex is a point in 3D. It is composed of three coordinates of type `float`, which are stored in a structure. But as we want 2D, only 2 components are needed:
+
+```c
+typedef struct
+{
+ FLOAT x;
+ FLOAT y;
+} Vertex;
+```
+
+Later, this structure will be expanded with color components and textures.
+
+The vertices are displayed in a (normalized) coordinate system different from the pixels on the screen (diagram taken from [Direct3D 11.3 Functional Specification](https://microsoft.github.io/DirectX-Specs/d3d/archive/D3D11_3_FunctionalSpec.htm), section 3.3.1):
+
+<p align="center">
+<img alt="coordinates system" src="" width="50%" height="50%">
+</p>
+
+So the normalized coordinate system goes from (-1, 1), corresponding to pixel (0,0) in the window of size (w, h) pixels, to (1, -1), corresponding to pixel (w, h) outside the window. So the normalized coordinate (0, 0) corresponds to the center of the window.
+
+So conversion from pixel coordinates on the screen (from (0, 0) to (w, h), that is 1 pixel outside the window) to normalized coordinates (from (-1, 1) to (1, -1)) must be computed. It is basic math. Let us call xf(x) the value of the normalized coordinates, function of the x coordinate of a pixel. The value xf(x) is affine in x, meaning xf(x) = ax + b, a and b being real numbers. So
+
+* xf(0) = -1 = b, and
+* xf(w) = 1 = aw - 1
+
+So xf(x) = (2x - w)/w. Similarly, yf(y) = (h - 2y) / h. Let us define these two macros:
+
+```c
+#define XF(w,x) ((float)(2 * (x) - (w)) / (float)(w))
+#define YF(h,y) ((float)((h) - 2 * (y)) / (float)(h))
+```
+
+These two macros will be used in the final code below.
+
+### The scene
+
+We have to pass the vertices of our triangle to the GPU. Several steps are needed:
+
+* A vertex buffer which contains the list of the vertices (and other values). The vertices must be set in clock-wise order. The vertex buffer will be binding to the pipeline in the IA stage with `IASetVertexBuffers()`.
+* An index buffer which is a lit of indices (integer numbers) that index the vertices in the vertex buffer. For a triangle, it is useless, but for a rectangle, it will be used. Index buffers are used for memory and speed optimizations.. The vertex buffer will be binding to the pipeline in the IA stage with `IASetIndexBuffer()`.
+* an array of `D3D11_INPUT_ELEMENT_DESC` which describes the format of the coordinates (or color, or texture): `float` or `int`, normalized syntax or not etc... For now, only coordinates.
+* a HLSL program to tell the GPU what to do with the vertices. It could be nothing, rotation, translation etc.. This is a small program called a **Vertex Shader**, which syntax follow the HLSL specification, and which is close to C. The Vertex Shader is bounding to the pipeline at the Vertex Shader stage with `VSSetShader()`.
+* a D3D11 object called input layout created with `CreateInputLayout()` with the array of `D3D11_INPUT_ELEMENT_DESC` and the Vertex Shader. It is bounding to the pipeline at the IA stage with `IASetInputLayout()`.
+* a HLSL program to tell the GPU what to do with the pixels. This is a small program called a **Pixel Shader**, which syntax follow the HLSL specification, and which is close to C. The Pixel Shader is bounding to the pipeline at the Pixel Shader stage with `PSSetShader()`.
+* a topology which sets how the triangles are linked together. See the diagram below (taken from [Direct3D 11.3 Functional Specification](https://microsoft.github.io/DirectX-Specs/d3d/archive/D3D11_3_FunctionalSpec.htm), section 8.10). We use `D3D11_PRIMITIVE_TOPOLOGY_TRIANGLESTRIP` for our future rectangle. The topology is set at the IA stage with `IASetPrimitiveTopology()`.
+
+<p align="center">
+<img alt="coordinates system" src="" width="50%" height="50%">
+</p>
+
+> **NOTE**: the Vertex and Pixel Shaders are compiled at run time for now. But it is better to compile them with a HLSL compiler and include the bytecode in the program.
+
+### Vertex and Pixel shaders
+
+The following code is the HLSL code which contains both the function `main_vs()` for the vertex shader program, and the function `main_ps()` for the pixel shader program:
\ No newline at end of file
--
To stop receiving notification emails like this one, please contact
the administrator of this repository.
