{"id":5523,"date":"2016-08-29T06:53:24","date_gmt":"2016-08-29T06:53:24","guid":{"rendered":"http:\/\/anthroponaute.fr\/blog-informatique\/?p=5523"},"modified":"2016-08-31T07:25:46","modified_gmt":"2016-08-31T07:25:46","slug":"comment-calculer-la-matrice-dun-billboard","status":"publish","type":"post","link":"https:\/\/www.la-porte-des-nebuleuses.net\/blog-informatique\/?p=5523","title":{"rendered":"Comment calculer la matrice de rotation d’un Billboard"},"content":{"rendered":"

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

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

Qu’est-ce<\/strong> un billboard ? Un billboard<\/strong> est un objet 3D (en g\u00e9n\u00e9ral d’apparence 2D) qui fait toujours face \u00e0 la cam\u00e9ra.<\/p>\n

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

– Savoir ce qu’est une matrice<\/em><\/p>\n

– Savoir lire une matrice<\/em><\/p>\n

– Savoir en quoi consiste la matrice de vue<\/em><\/p>\n

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

Rappelez<\/strong> vous que la matrice de vue (celle de la cam\u00e9ra) est d\u00e9finie<\/strong> ainsi<\/strong> :<\/p>\n

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

En effet, cette matrice est construite \u00e0 partir de trois vecteurs<\/strong> :<\/p>\n

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

Avec une origine<\/strong> (ainsi nomm\u00e9e \u00ab\u00a0Cam\u00e9ra\u00a0\u00bb) repr\u00e9sentant la position de celle-ci<\/strong> par rapport au rep\u00e8re commun \u00e0 tous les n\u0153uds de la sc\u00e8ne, cette derni\u00e8re concerne la matrice World<\/strong> (matrice de monde<\/em>)<\/p>\n

Une fois construite, la matrice de vue<\/em> est une matrice qui doit \u00eatre mise \u00e0 jour constamment<\/strong> dans la boucle de rendu.<\/p>\n

D\u00e9composition de la matrice View :<\/strong><\/h3>\n

\\vec{LookAt}_x = \\textbf{View}_{02}
\n\\vec{LookAt}_y = \\textbf{View}_{12}
\n\\vec{LookAt}_y = \\textbf{View}_{22} <\/p>\n

\\vec{Right}_x = \\textbf{View}_{00}
\n\\vec{Right}_y = \\textbf{View}_{10}
\n\\vec{Right}_y = \\textbf{View}_{20} <\/p>\n

\\vec{Up}_x = \\textbf{View}_{01}
\n\\vec{Up}_y = \\textbf{View}_{11}
\n\\vec{Up}_y = \\textbf{View}_{21} <\/p>\n

 <\/p>\n

On normalise<\/strong> ensuite ces trois derniers vecteurs :<\/p>\n

{\\vec{LookAt}}_{norm}=\\frac{{\\vec{LookAt}}}{\\|{\\vec{LookAt}}\\|}
\n{\\vec{Right}}_{norm}=\\frac{{\\vec{Right}}}{\\|{\\vec{Right}}\\|}
\n{\\vec{Up}}_{norm}=\\frac{{\\vec{Up}}}{\\|{\\vec{Up}}\\|} <\/p>\n

 <\/p>\n

A noter que l’on peut retrouver un<\/strong> vecteur connaissant<\/strong> les deux<\/strong> autres. Par exemple, l’on veut retrouver le vecteur {\\vec{Up}} connaissant {\\vec{Right}} et {\\vec{LookAt}} . On proc\u00e8de<\/strong> ainsi\u00a0 :<\/p>\n{\\vec{Up}} = {\\vec{LookAt}}\\times{\\vec{Right}} \n

 <\/p>\n

Maintenant pour construire<\/strong> notre Billboard<\/em> il nous faudra cr\u00e9er une matrice de rotation \\textbf{R} . <\/em>C’est avec cette matrice de rotation que seront multipli\u00e9s toutes les vertices du Billboard <\/em>de fa\u00e7on \u00e0 ce qu’ils soient toujours en face<\/strong> de la cam\u00e9ra !
\n<\/em><\/p>\n

On calcule la matrice \\textbf{R} <\/em> de la fa\u00e7on suivante :<\/p>\n

\\textbf{R}_{0*} = {\\vec{Right}}
\n\\textbf{R}_{1*} = {\\vec{Up}}
\n\\textbf{R}_{2*} = {\\vec{LookAt}} <\/p>\n

 <\/p>\n

C’est-\u00e0-dire de mani\u00e8re plus d\u00e9taill\u00e9e :<\/p>\n

\\textbf{R}_{01} = \\vec{Right_x}
\n\\textbf{R}_{02} = \\vec{Right_y}
\n\\textbf{R}_{03} = \\vec{Right_z} <\/p>\n

\\textbf{R}_{11} = \\vec{Up_x}
\n\\textbf{R}_{12} = \\vec{Up_y}
\n\\textbf{R}_{13} = \\vec{Up_z} <\/p>\n

\\textbf{R}_{21} = \\vec{LookAt_x}
\n\\textbf{R}_{22} = \\vec{LookAt_y}
\n\\textbf{R}_{23} = \\vec{LookAt_z} <\/p>\n

 <\/p>\n

Voici le Vertex Shader<\/strong> qui applique le calcul<\/strong> en question :<\/p>\n

\r\nPS_INPUT VS(VS_INPUT input)\r\n{\r\n\u00a0\u00a0\u00a0 PS_INPUT output = (PS_INPUT)0;\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\/\/ Extraction du LookAt vector\r\n\u00a0\u00a0 \u00a0float3 look;\r\n\u00a0\u00a0 \u00a0look.x = View[0][2];\r\n\u00a0\u00a0 \u00a0look.y = View[1][2];\r\n\u00a0\u00a0 \u00a0look.z = View[2][2];\r\n\u00a0\u00a0 \u00a0look = normalize(look);\u00a0\u00a0 \u00a0\r\n\r\n\u00a0\u00a0 \u00a0\/\/ Extraction du Right vector\r\n\u00a0\u00a0 \u00a0float3 right;\r\n\u00a0\u00a0 \u00a0right.x = View[0][0];\r\n\u00a0\u00a0 \u00a0right.y = View[1][0];\r\n\u00a0\u00a0 \u00a0right.z = View[2][0];\r\n\u00a0\u00a0 \u00a0right = normalize(right);\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\/\/ D\u00e9termination du Up vector\r\n\u00a0\u00a0 \u00a0float3 up = cross(look, right);\r\n\u00a0\u00a0 \u00a0up = normalize(up);\r\n\r\n\u00a0\u00a0 \u00a0\/\/ Matrice de rotation qui fait face \u00e0 la cam\u00e9ra\r\n\u00a0\u00a0 \u00a0float3x3 R;\r\n\u00a0\u00a0 \u00a0R[0] = right;\r\n\u00a0\u00a0 \u00a0R[1] = up;\r\n\u00a0\u00a0 \u00a0R[2] = look;\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0float3 posW = mul(input.Pos, R);\r\n\r\n\u00a0\u00a0 \u00a0output.Pos = mul( float4(posW, 1.0f), World );\r\n\u00a0\u00a0 \u00a0output.Pos = mul( output.Pos, View );\r\n\u00a0\u00a0 \u00a0output.Pos = mul( output.Pos, Projection );\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0output.Color = input.Color;\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 output.Page = input.Page;\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 output.Tex = input.Tex;\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 return output;\r\n}\r\n<\/pre>\n
 <\/p>\n
Voici un Billboard<\/em> <\/strong>affich\u00e9 qui repr\u00e9sente une qu\u00eate disponible :<\/p>\n
 <\/p>\n
\"billboard\"<\/a><\/p>\n
 <\/p>\n
R\u00e9sum\u00e9 :<\/strong><\/p>\n
Nous avons expliqu\u00e9 comment cr\u00e9er un Billboard<\/em> en construisant une matrice de rotation sp\u00e9ciale qui tourne et qui fait toujours face \u00e0 la cam\u00e9ra.<\/p>\n
R\u00e9f\u00e9rences :<\/strong><\/p>\n
– Des sujets issus de quelques forums Internet comme celui de www.gamedev.net<\/p>\n","protected":false},"excerpt":{"rendered":"
Intro : Qu’est-ce un billboard ? Un billboard est un objet 3D (en g\u00e9n\u00e9ral d’apparence 2D) qui fait toujours face \u00e0 la cam\u00e9ra. Pr\u00e9requis : – Savoir ce qu’est une matrice – Savoir lire une matrice – Savoir en quoi consiste la matrice de vue Explications : Rappelez vous que la matrice de vue (celle […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[19],"tags":[],"_links":{"self":[{"href":"https:\/\/www.la-porte-des-nebuleuses.net\/blog-informatique\/index.php?rest_route=\/wp\/v2\/posts\/5523"}],"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=5523"}],"version-history":[{"count":75,"href":"https:\/\/www.la-porte-des-nebuleuses.net\/blog-informatique\/index.php?rest_route=\/wp\/v2\/posts\/5523\/revisions"}],"predecessor-version":[{"id":5678,"href":"https:\/\/www.la-porte-des-nebuleuses.net\/blog-informatique\/index.php?rest_route=\/wp\/v2\/posts\/5523\/revisions\/5678"}],"wp:attachment":[{"href":"https:\/\/www.la-porte-des-nebuleuses.net\/blog-informatique\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.la-porte-des-nebuleuses.net\/blog-informatique\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.la-porte-des-nebuleuses.net\/blog-informatique\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}