{"id":1030,"date":"2015-03-03T18:07:04","date_gmt":"2015-03-03T18:07:04","guid":{"rendered":"http:\/\/anthroponaute.fr\/blog-informatique\/?p=1030"},"modified":"2015-03-15T09:44:58","modified_gmt":"2015-03-15T09:44:58","slug":"introduction-a-directx-10-rendu-partie-2","status":"publish","type":"post","link":"https:\/\/www.la-porte-des-nebuleuses.net\/blog-informatique\/?p=1030","title":{"rendered":"Introduction \u00e0 DirectX 10 – Rendu basique – partie 2"},"content":{"rendered":"

\"directx9c\"<\/a><\/p>\n

Intro :<\/strong><\/p>\n

Dans cette deuxi\u00e8me partie, nous allons utiliser un shader basique pour afficher un triangle et afficher du texte \u00e0 l’\u00e9cran.<\/p>\n

Pr\u00e9requis :<\/strong><\/p>\n

Avoir suivi la premi\u00e8re partie de ce tutoriel.
\nSavoir le fonctionnement d’un shader HLSL : pour cela il faut suivre le tutoriel sur le HLSL.<\/p>\n

Deuxi\u00e8me partie :<\/strong><\/h2>\n

Afficher un triangle et du texte \u00e0 l’\u00e9cran.<\/p>\n

Explications :<\/strong><\/p>\n

Nous allons utiliser ce programme shader nomm\u00e9 Partie2.fx<\/strong> :<\/p>\n

\r\n\r\n\/\/----------------------------------------------------------\r\n\/\/ Partie2.fx\r\n\/\/----------------------------------------------------------\r\n\r\nstruct VS_OUTPUT\r\n{\r\n\u00a0\u00a0\u00a0 float4 Pos : SV_POSITION;\r\n\u00a0\u00a0 \u00a0float4 Color : COLOR0;\r\n};\r\n\r\n\/\/----------------------------------------------------------\r\n\/\/ Vertex Shader\r\n\/\/----------------------------------------------------------\r\nVS_OUTPUT VS( float4 Pos : POSITION, float4 Color : COLOR )\r\n{\r\n\u00a0\u00a0 \u00a0VS_OUTPUT output = (VS_OUTPUT)0;\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0output.Pos = Pos;\r\n\u00a0\u00a0 \u00a0output.Color = Color;\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 return output;\u00a0\u00a0 \u00a0\r\n}\r\n\r\n\/\/----------------------------------------------------------\r\n\/\/ Pixel Shader\r\n\/\/----------------------------------------------------------\r\nfloat4 PS( VS_OUTPUT input ) : SV_Target\r\n{\r\n\u00a0\u00a0\u00a0 return input.Color;\r\n}\r\n\r\n\/\/----------------------------------------------------------\r\ntechnique10 Render\r\n{\r\n\u00a0\u00a0\u00a0 pass P0\r\n\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 SetVertexShader( CompileShader( vs_4_0, VS() ) );\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 SetGeometryShader( NULL );\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 SetPixelShader( CompileShader( ps_4_0, PS() ) );\r\n\u00a0\u00a0\u00a0 }\r\n}\r\n\r\n<\/pre>\n
Si vous ne comprenez ce bout de code, voir l’article sur le HLSL.<\/p>\n
Pensez \u00e0 mettre ce fichier dans le r\u00e9pertoire de votre programme ! Vous aurez une erreur sinon.<\/p>\n
Nous allons afficher un triangle \u00e0 l’\u00e9cran. Pour cela il faut que DirectX comprenne comment
\nsont agenc\u00e9s les vertices dans la m\u00e9moire vid\u00e9o.<\/p>\n
Donc ici on d\u00e9clare que toutes les vertices utilis\u00e9es sont compos\u00e9es d’une variable position et d’une variable couleur. Cette structure suivante est utilis\u00e9e par notre application.<\/p>\n
\r\n\r\nstruct SimpleVertex\r\n{\r\n\u00a0\u00a0\u00a0 D3DXVECTOR3 Pos;\r\n\u00a0\u00a0\u00a0 D3DXVECTOR4 Color;\r\n};\r\n\r\n<\/pre>\n
Et voil\u00e0 un sch\u00e9ma des donn\u00e9es vertices. Cette structure suivante est utilis\u00e9e par DirectX.
\nVoir cet article<\/a> pour mieux comprendre le m\u00e9canisme de cette structure.<\/p>\n
\r\nD3D10_INPUT_ELEMENT_DESC layout[] =\r\n{\r\n\u00a0\u00a0 \u00a0{"POSITION", 0, DXGI_FORMAT_R32G32B32_FLOAT, 0, 0, D3D10_INPUT_PER_VERTEX_DATA, 0},\r\n\u00a0\u00a0 \u00a0{"COLOR", 0, DXGI_FORMAT_R32G32B32A32_FLOAT, 0, 12, D3D10_INPUT_PER_VERTEX_DATA, 0},\r\n};\r\nUINT numElements = sizeof(layout) \/ sizeof(layout[0]);\r\n<\/pre>\n
 <\/p>\n
On rajoute \u00e0 la fonction Initialize du fichier D3D10Renderer.cpp donn\u00e9 dans la partie 1
\ndu tutoriel :<\/p>\n
\r\n\/******************** Partie 2 ********************\/\r\n\r\nDWORD dwShaderFlags = D3D10_SHADER_ENABLE_STRICTNESS;\r\n\r\n#if defined( DEBUG ) || defined( _DEBUG )\r\n\/\/ Permet d'afficher les \u00e9ventuelles erreurs de la compilation d'un shader\r\ndwShaderFlags |= D3D10_SHADER_DEBUG;\r\n#endif\r\n\r\n\/\/ Pour la cr\u00e9ation du shader, on le compile\r\nhr = D3DX10CreateEffectFromFile(L"Partie2.fx", NULL, NULL, "fx_4_0", dwShaderFlags, 0, m_pd3dDevice, NULL,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0NULL, &m_pEffect, NULL, NULL);\r\nif (FAILED(hr))\r\n\u00a0\u00a0 \u00a0return false;\r\n\r\n\/\/ On acquiert la technique du shader HLSL\r\nm_pTechnique = m_pEffect->GetTechniqueByName("Render");\r\n\r\n\/\/ On d\u00e9finit la structure d'un vertex\r\nD3D10_INPUT_ELEMENT_DESC layout[] =\r\n{\r\n\u00a0\u00a0 \u00a0{"POSITION", 0, DXGI_FORMAT_R32G32B32_FLOAT, 0, 0, D3D10_INPUT_PER_VERTEX_DATA, 0},\r\n\u00a0\u00a0 \u00a0{"COLOR", 0, DXGI_FORMAT_R32G32B32A32_FLOAT, 0, 12, D3D10_INPUT_PER_VERTEX_DATA, 0},\r\n};\r\nUINT numElements = sizeof(layout) \/ sizeof(layout[0]);\r\n\r\nD3D10_PASS_DESC PassDesc;\r\nm_pTechnique->GetPassByIndex(0)->GetDesc(&PassDesc);\r\nhr = m_pd3dDevice->CreateInputLayout(layout, numElements, PassDesc.pIAInputSignature,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 PassDesc.IAInputSignatureSize, &m_pVertexLayout);\r\nif(FAILED(hr))\r\n\u00a0\u00a0 \u00a0return false;\r\n\r\nm_pd3dDevice->IASetInputLayout(m_pVertexLayout);\r\n\r\n\/\/ On d\u00e9finit les vertices\r\nSimpleVertex vertices[] =\r\n{\r\n\u00a0\u00a0 \u00a0D3DXVECTOR3( 0.0f, 0.5f, 0.5f ), D3DXVECTOR4( 0.0f, 1.0f, 1.0f, 1.0f ),\r\n\u00a0\u00a0 \u00a0D3DXVECTOR3( 0.5f, -0.5f, 0.5f ), D3DXVECTOR4( 0.0f, 0.0f, 1.0f, 1.0f ),\r\n\u00a0\u00a0 \u00a0D3DXVECTOR3( -0.5f, -0.5f, 0.5f ), D3DXVECTOR4( 1.0f, 0.0f, 1.0f, 1.0f ),\r\n};\r\n\/\/ On impl\u00e9mente le vertex buffer\r\nD3D10_BUFFER_DESC bd;\r\nbd.Usage = D3D10_USAGE_DEFAULT;\r\nbd.ByteWidth = sizeof(SimpleVertex) * 6;\r\nbd.BindFlags = D3D10_BIND_VERTEX_BUFFER;\r\nbd.CPUAccessFlags = 0;\r\nbd.MiscFlags = 0;\r\nD3D10_SUBRESOURCE_DATA InitData;\r\nInitData.pSysMem = vertices;\r\nhr = m_pd3dDevice->CreateBuffer(&bd, &InitData, &m_pVertexBuffer);\r\nif(FAILED(hr))\r\n\u00a0\u00a0 \u00a0return false;\r\n\r\n\/\/ On d\u00e9finit le vertex buffer\r\nUINT stride = sizeof(SimpleVertex);\r\n\/\/ D\u00e9calage des informations du vertex buffer\r\nUINT offset = 0;\r\nm_pd3dDevice->IASetVertexBuffers(0, 1, &m_pVertexBuffer, &stride, &offset);\r\n\r\n\/\/ On d\u00e9finit le type de primitive\r\nm_pd3dDevice->IASetPrimitiveTopology(D3D10_PRIMITIVE_TOPOLOGY_TRIANGLELIST);\r\n\r\n\/******** Font ********\/\r\n\r\nD3DX10CreateSprite(m_pd3dDevice, 0, &m_pSprite);\r\n\r\nD3DX10_FONT_DESC fd;\r\nfd.Height = 30;\r\nfd.Width = 18;\r\nfd.Weight = 0;\r\nfd.MipLevels = 4;\r\nfd.Italic = false;\r\nfd.CharSet = OUT_DEFAULT_PRECIS;\r\nfd.Quality = DEFAULT_QUALITY;\r\nfd.PitchAndFamily = DEFAULT_PITCH | FF_DONTCARE;\r\nwcscpy(fd.FaceName, L"Impact");\r\n\r\nD3DX10CreateFontIndirect(m_pd3dDevice, &fd, &m_pFont);\r\n<\/pre>\n
 <\/p>\n
La fonction de rendu va afficher un triangle et un texte comme convenu :<\/p>\n
\r\nvoid D3D10Renderer::Render()\r\n{\r\n\u00a0\u00a0\u00a0 static float afClearColor[4] = {0.0f, 0.125f, 0.3f, 1.0f}; \r\n\r\n\u00a0\u00a0 \u00a0static D3DXCOLOR color(0.0f, 1.0f, 0.3f, 1.0f);\r\n\u00a0\u00a0 \u00a0static RECT rectangle = {10, 10, 0, 0};\r\n\r\n\u00a0\u00a0\u00a0 \/\/ Efface le backbuffer\r\n\u00a0\u00a0\u00a0 m_pd3dDevice->ClearRenderTargetView(m_pRenderTargetView, afClearColor);\r\n\r\n    \/\/ Commence par afficher du texte\r\n\u00a0\u00a0 \u00a0m_pSprite->Begin(D3DX10_SPRITE_SAVE_STATE);\r\n\u00a0\u00a0 \u00a0m_pFont->DrawText(m_pSprite, L"Hello World!", -1, &rectangle, DT_NOCLIP, color);\r\n\u00a0\u00a0 \u00a0m_pSprite->End();\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 \/\/ Rendu d'un triangle\r\n\u00a0\u00a0\u00a0 D3D10_TECHNIQUE_DESC techDesc;\r\n\u00a0\u00a0\u00a0 m_pTechnique->GetDesc(&techDesc);\r\n\u00a0\u00a0\u00a0 for (unsigned int p = 0; p < techDesc.Passes; ++p)\r\n\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 m_pTechnique->GetPassByIndex(p)->Apply(0);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ On rend 3 vertex\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 m_pd3dDevice->Draw(3, 0);\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 m_pSwapChain->Present(0, 0);\r\n}\r\n<\/pre>\n
N’oubliez pas d’ajouter dans votre fichier System.h :<\/p>\n
\r\nID3DX10Font* m_pFont;\r\nID3DX10Sprite* m_pSprite;\r\n<\/pre>\n
R\u00e9sum\u00e9 :<\/strong><\/p>\n
Au final nous avons affich\u00e9 un triangle multi-coloris\u00e9 et affich\u00e9 un petit texte :<\/p>\n
\"triangle\"<\/a><\/p>\n
Voici l\u2019archive<\/strong> du code complet pour cette partie : DirectX 10 Tutoriel \u2013 Partie 2.zip <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Intro : Dans cette deuxi\u00e8me partie, nous allons utiliser un shader basique pour afficher un triangle et afficher du texte \u00e0 l’\u00e9cran. Pr\u00e9requis : Avoir suivi la premi\u00e8re partie de ce tutoriel. Savoir le fonctionnement d’un shader HLSL : pour cela il faut suivre le tutoriel sur le HLSL. Deuxi\u00e8me partie : Afficher un triangle […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[9],"tags":[],"_links":{"self":[{"href":"https:\/\/www.la-porte-des-nebuleuses.net\/blog-informatique\/index.php?rest_route=\/wp\/v2\/posts\/1030"}],"collection":[{"href":"https:\/\/www.la-porte-des-nebuleuses.net\/blog-informatique\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.la-porte-des-nebuleuses.net\/blog-informatique\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.la-porte-des-nebuleuses.net\/blog-informatique\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.la-porte-des-nebuleuses.net\/blog-informatique\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1030"}],"version-history":[{"count":110,"href":"https:\/\/www.la-porte-des-nebuleuses.net\/blog-informatique\/index.php?rest_route=\/wp\/v2\/posts\/1030\/revisions"}],"predecessor-version":[{"id":1570,"href":"https:\/\/www.la-porte-des-nebuleuses.net\/blog-informatique\/index.php?rest_route=\/wp\/v2\/posts\/1030\/revisions\/1570"}],"wp:attachment":[{"href":"https:\/\/www.la-porte-des-nebuleuses.net\/blog-informatique\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1030"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.la-porte-des-nebuleuses.net\/blog-informatique\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1030"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.la-porte-des-nebuleuses.net\/blog-informatique\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}