# Rendering 2D in DirectX 11

This topic is 1165 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

Hi everyone,

I'm trying to render 2D image on the screen by using orthographic

I'm able to get the quad to appear on the screen as expected if:

- The vertex structure is Position and Color only AND;

- I don't use D3DXMatrixTranspose()

However If I change the vertex structure to Position and UV and remove the Color, the quad get deformed:

Here is how I calculate world, view, projection matrices for the 2D Quad:

// World
D3DXMATRIX matWorld;
D3DXMatrixIdentity(&matWorld);

// Projection
D3DXMATRIX matOrtho;
// Calculate ortho matrix (for 2D rendering)
// Screen width and height (800x600)
D3DXMatrixOrthoLH(&matOrtho, 800.0f, 600.0f, 0.1f, 1000.0f);

// View
D3DXMATRIX matView;
D3DXVECTOR3 up, position, lookAt;
float yaw, pitch, roll;
D3DXMATRIX rotationMatrix;

// Setup the vector that points upwards.
up.x = 0.0f;
up.y = 1.0f;
up.z = 0.0f;

// Setup the position of the camera in the world.
position.x = 0.0f;
position.y = 0.0f;
position.z = 0.0f;

// Setup where the camera is looking by default.
lookAt.x = 0.0f;
lookAt.y = 0.0f;
lookAt.z = 1.0f;

// Set the yaw (Y axis), pitch (X axis), and roll (Z axis) rotations in radians.
pitch = 0.0f * 0.0174532925f;
yaw   = 0.0f * 0.0174532925f;
roll  = 0.0f * 0.0174532925f;

// Create the rotation matrix from the yaw, pitch, and roll values
D3DXMatrixRotationYawPitchRoll(&rotationMatrix, yaw, pitch, roll);

// Transform the lookAt and up vector by the rotation matrix so the view is correctly rotated at the origin.
D3DXVec3TransformCoord(&lookAt, &lookAt, &rotationMatrix);
D3DXVec3TransformCoord(&up, &up, &rotationMatrix);

// Translate the rotated camera position to the location of the viewer
lookAt = position + lookAt;

// Create view matrix
D3DXMatrixLookAtLH(&matView, &position, &lookAt, &up);

Any idea what's going on?

Edited by Medo3337

##### Share on other sites

@ExErvus: Yes, same problem still exists.

##### Share on other sites

Edit:

// Setup the position of the camera in the world.
position.x = 0.0f;
position.y = 0.0f;
position.z = 0.0f;

// Setup where the camera is looking by default.
lookAt.x = 0.0f;
lookAt.y = 0.0f;
lookAt.z = 1.0f;

//...

// Translate the rotated camera position to the location of the viewer
lookAt = position + lookAt;

// Create view matrix
D3DXMatrixLookAtLH(&matView, &position, &lookAt, &up);

This feels super clunky. Your position and lookAt are constant so the lookAt = position + lookAt is not necessary. Also are you sure your camera is not halfway through the object? Your position is 0,0,0 and you are looking forward

Edited by ExErvus

##### Share on other sites
Vertex structure:
struct VERTEX
{
D3DXVECTOR3 position;
D3DXVECTOR2 uv;
};
Vertices and indices:
int m_screenWidth  = 800;
int m_screenHeight  = 600;
int m_bitmapWidth  = 240;
int m_bitmapHeight  = 240;
int positionX  = 50;
int positionY  = 80;

// Calculate the screen coordinates of the left side of the bitmap.
int left = (float)((m_screenWidth / 2) * -1) + (float)positionX;

// Calculate the screen coordinates of the right side of the bitmap.
int right = left + (float)m_bitmapWidth;

// Calculate the screen coordinates of the top of the bitmap.
int top = (float)(m_screenHeight / 2) - (float)positionY;

// Calculate the screen coordinates of the bottom of the bitmap.
int bottom = top - (float)m_bitmapHeight;

VERTEX _2DVertices[6];
_2DVertices[0].position = D3DXVECTOR3(left, top, 0.0f);  // Top left.
//_2DVertices[0].color = D3DXCOLOR(1.0f, 0.0f, 0.0f, 1.0f);
_2DVertices[0].uv = D3DXVECTOR2(0.0f, 0.0f);

_2DVertices[1].position = D3DXVECTOR3(right, bottom, 0.0f);  // Bottom right.
//_2DVertices[1].color = D3DXCOLOR(1.0f, 0.0f, 0.0f, 1.0f);
_2DVertices[1].uv = D3DXVECTOR2(1.0f, 1.0f);

_2DVertices[2].position = D3DXVECTOR3(left, bottom, 0.0f);  // Bottom left.
//_2DVertices[2].color = D3DXCOLOR(1.0f, 0.0f, 0.0f, 1.0f);
_2DVertices[2].uv = D3DXVECTOR2(0.0f, 1.0f);

// Second triangle.
_2DVertices[3].position = D3DXVECTOR3(left, top, 0.0f);  // Top left.
//_2DVertices[3].color = D3DXCOLOR(1.0f, 0.0f, 0.0f, 1.0f);
_2DVertices[3].uv = D3DXVECTOR2(0.0f, 0.0f);

_2DVertices[4].position = D3DXVECTOR3(right, top, 0.0f);  // Top right.
//_2DVertices[4].color = D3DXCOLOR(1.0f, 0.0f, 0.0f, 1.0f);
_2DVertices[4].uv = D3DXVECTOR2(1.0f, 0.0f);

_2DVertices[5].position = D3DXVECTOR3(right, bottom, 0.0f);  // Bottom right.
//_2DVertices[5].color = D3DXCOLOR(1.0f, 0.0f, 0.0f, 1.0f);
_2DVertices[5].uv = D3DXVECTOR2(1.0f, 1.0f);

// Create 2D rendering index buffer
DWORD _2DIndices[6] = {0, 1, 2, 3, 4, 5};


struct PS_IN
{
float4 Position: SV_POSITION;
float2 UV: TEXCOORD0;
};

cbuffer MatrixBuffer
{
matrix worldMatrix;
matrix viewMatrix;
matrix projMatrix;
}

PS_IN VS(float4 Position: POSITION, float2 UV: TEXCOORD0)
{
PS_IN OUT;
OUT.Position = mul(Position, worldMatrix);
OUT.Position = mul(OUT.Position, viewMatrix);
OUT.Position = mul(OUT.Position, projMatrix);
OUT.UV = UV;
return OUT;
}

float4 PS(PS_IN IN): SV_TARGET
{
return float4(1.0f, 0.0f, 0.0f, 1.0f);
}

##### Share on other sites

Let me first point out that you are using 6 vertices with an index buffer in sequential order. If you want to use an index buffer when you draw you only need 4 vertices.

To the point of the topic:

Without compiling and stepping through it, right away it looks like your camera is halfway through the object. Your quads Z value is 0, the camera's z position is 0. Try setting your camera position Z value to -1. I am curious if that will fix anything.

##### Share on other sites

@ExErvus: That's because I'm relying on rastertek tutorial:

http://www.rastertek.com/dx11tut11.html

Even when I try to set the camera position Z to -1, I see no difference, same problem.

##### Share on other sites

I guess I am stumped at this point. I am sorry I could not be of more service. I would however reccommend you run your program through PIX as you should be able to easily identify the issue in such a simple program. If you have not heard of PIX you can read about it here. https://tomtech999.wordpress.com/2011/09/07/debugging-directx-applications-with-pix-for-windows/

##### Share on other sites

@ExErvus: I think that PIX screenshot might be helpful:

[attachment=29580:pix.png]

##### Share on other sites

Your vertex structure in your C++ code is using a VECTOR3 for the position, while the shader is using a float4.

I'm not sure if that is the whole issue - looking at the PIX screenshot, it looks like things are all mixed up.

• ### What is your GameDev Story?

In 2019 we are celebrating 20 years of GameDev.net! Share your GameDev Story with us.

• 9
• 13
• 9
• 9
• 15
• ### Forum Statistics

• Total Topics
634072
• Total Posts
3015341
×