{"id":2735,"date":"2015-06-11T09:04:35","date_gmt":"2015-06-11T09:04:35","guid":{"rendered":"http:\/\/anthroponaute.fr\/blog-informatique\/?p=2735"},"modified":"2020-02-04T09:06:51","modified_gmt":"2020-02-04T09:06:51","slug":"calculer-les-tangentes-et-binormales","status":"publish","type":"post","link":"https:\/\/www.la-porte-des-nebuleuses.net\/blog-informatique\/?p=2735","title":{"rendered":"Calculer la tangente et la bitangente d’une face"},"content":{"rendered":"

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

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

Pour certains algorithmes de rendu 3D par shader (comme celui du normal mapping<\/strong>) nous avons besoin, en plus de la normale, de deux vecteurs perpendiculaires<\/strong> \u00e0 celle-ci : ce sont la tangente<\/strong> et la bitangente<\/strong> (ou binormale<\/em>).<\/p>\n

Voici trois m\u00e9thode<\/strong> pour les obtenir<\/strong> et les calculer.<\/p>\n

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

Math\u00e9matiquement, le calcul de ces deux autres composantes<\/strong> autres que la normale s’\u00e9nonce ainsi :<\/p>\n\\vec{Edge1} = \\vec{V}_2 - \\vec{V}_1 \n

 <\/p>\n\\vec{Edge2} = \\vec{V}_3 - \\vec{V}_1 \n

 <\/p>\n\\vec{UVEdge1} = \\vec{UV}_2 - \\vec{UV}_1 \n

 <\/p>\n\\vec{UVEdge2} = \\vec{UV}_3 - \\vec{UV}_1 \n

 <\/p>\np = (\\vec{UVEdge1}_y * \\vec{UVEdge2}_x) - \\newline (\\vec{UVEdge1}_x * \\vec{UVEdge2}_y) \n

 <\/p>\nc = 1 \/ p \n

 <\/p>\n\\vec{Tangent} = [\\enspace (\\vec{Edge1} * -\\vec{UVEdge2}_y) + (\\vec{Edge2} * \\vec{UVEdge1}_y) \\enspace ]\\newline * c \n

 <\/p>\n\\vec{Bitangent} = [\\enspace(\\vec{Edge1} * -\\vec{UVEdge2}_x) + (\\vec{Edge2} * \\vec{UVEdge1}_x)\\enspace] * c \n

 <\/p>\n

Je vous montre une fonction<\/strong> permettant de calculer la tangente<\/em> et la bitangente<\/em>.<\/p>\n

\r\n\/* P1, P2, P3 repr\u00e9sentent les points d'une face donn\u00e9e\r\n   UV1, UV2, UV2 repr\u00e9sentent les coordonn\u00e9es de la texture de cette derni\u00e8re face\r\n*\/\r\nvoid ComputeTangentAndBinormal(const D3DXVECTOR3& P1, const D3DXVECTOR3& P2,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0       const D3DXVECTOR3& P3, const D3DXVECTOR2& UV1,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0       const D3DXVECTOR2& UV2, const D3DXVECTOR2& UV3,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0       D3DXVECTOR3& tangent, D3DXVECTOR3& bitangent)\r\n{\r\n\u00a0\u00a0 D3DXVECTOR3 Edge1 = P2 - P1;\r\n\u00a0\u00a0 D3DXVECTOR3 Edge2 = P3 - P1;\r\n\u00a0\u00a0 D3DXVECTOR2 Edge1uv = UV2 - UV1;\r\n\u00a0\u00a0 D3DXVECTOR2 Edge2uv = UV3 - UV1;\r\n\r\n\u00a0\u00a0 float cp = Edge1uv.y * Edge2uv.x - Edge1uv.x * Edge2uv.y;\r\n\r\n\u00a0\u00a0 if (cp != 0.0f)\r\n\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 float mul = 1.0f \/ cp;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 Tangent\u00a0\u00a0 = (Edge1 * -Edge2uv.y + Edge2 * Edge1uv.y) * mul;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 Bitangent = (Edge1 * -Edge2uv.x + Edge2 * Edge1uv.x) * mul;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 D3DXVEC3Normalize(&Tangent, &Tangent);\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 D3DXVEC3Normalize(&Bitangent, &Bitangent); \u00a0\r\n\u00a0\u00a0 }\r\n}\r\n<\/pre>\n
 <\/p>\n
Un autre algorithme est disponible si vous ne voulez pas calculer<\/strong> les donn\u00e9es face par face<\/strong> !<\/p>\n
\r\n\/* Ceci est la structure d'un vertex en m\u00e9moire vid\u00e9o *\/\r\nstruct PTVertex\r\n{\r\n\u00a0\u00a0 \u00a0D3DXVECTOR3 position;\r\n\u00a0\u00a0 \u00a0D3DXVECTOR2 texture;\r\n}\r\n\r\n\/* Cette fonction prend en param\u00e8tres le tableau des vertices\r\n   d'un mod\u00e8le donn\u00e9.\r\n   Elle prend aussi l'index courant de la face en question\r\n   (premier vertex de celle-ci)\r\n*\/\r\nvoid ComputeTBN_Vectors(PTVertex* vertices,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 uint32 index,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 D3DXVECTOR3& v3Tangent,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 D3DXVECTOR3& v3Binormal,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 D3DXVECTOR3& v3Normal)\r\n{\r\n\u00a0\u00a0 \u00a0if (index < 0 || vertices == nullptr)\r\n\u00a0\u00a0 \u00a0{\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return;\r\n\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0D3DXVECTOR3 edge1;\r\n\u00a0\u00a0 \u00a0D3DXVECTOR3 edge2;\r\n\r\n\u00a0\u00a0 \u00a0D3DXVECTOR2 tuVector;\r\n\u00a0\u00a0 \u00a0D3DXVECTOR2 tvVector;\r\n\r\n\u00a0\u00a0 \u00a0PTVertex vertex1 = &vertices[index];\r\n\u00a0\u00a0 \u00a0index++;\r\n\r\n\u00a0\u00a0 \u00a0PTVertex vertex2 = &vertices[index];\r\n\u00a0\u00a0 \u00a0index++;\r\n\r\n\u00a0\u00a0 \u00a0PTVertex vertex3 = &vertices[index];\r\n\u00a0\u00a0 \u00a0index++;\r\n\r\n\u00a0\u00a0 \u00a0edge1 = vertex2->position - vertex1->position;\r\n\u00a0\u00a0 \u00a0edge2 = vertex3->position - vertex1->position;\r\n\r\n\u00a0\u00a0 \u00a0tuVector.x = vertex2->texture.x - vertex1->texture.x;\r\n\u00a0\u00a0 \u00a0tvVector.x = vertex2->texture.y - vertex1->texture.y;\r\n\r\n\u00a0\u00a0 \u00a0tuVector.y = vertex3->texture.x - vertex1->texture.x;\r\n\u00a0\u00a0 \u00a0tvVector.y = vertex3->texture.y - vertex1->texture.y;\r\n\r\n\u00a0\u00a0 \u00a0float den = 1.0f \/ (tuVector.x * tvVector.y - tuVector.y * tvVector.x);\r\n\r\n\u00a0\u00a0 \u00a0tangent = (edge1 * tvVector.y - edge2 * tvVector.x) * den;\r\n\u00a0\u00a0 \u00a0binormal = (edge2 * tuVector.x - edge1 * tuVector.y) * den;\r\n\r\n\u00a0\u00a0 \u00a0D3DXVec3Normalize(&tangent, &tangent);\r\n\u00a0\u00a0 \u00a0D3DXVec3Normalize(&binormal, &binormal);\r\n\r\n    D3DXVECTOR3 normal;\r\n\u00a0\u00a0 \u00a0D3DXVec3Cross(&normal, &tangent, &binormal);\r\n\u00a0\u00a0 \u00a0D3DXVec3Normalize(&normal, &normal);\r\n\r\n\u00a0\u00a0 \u00a0v3Tangent = tangent;\r\n\u00a0\u00a0 \u00a0v3Binormal = binormal;\r\n    v3Normal = normal;\r\n}\r\n\r\n<\/pre>\n
 <\/p>\n
Voici la troisi\u00e8me<\/strong> fonction (sans doute la meilleure) :<\/p>\n
\r\nvoid ComputeTangentBasis(\r\n\u00a0\u00a0 \u00a0\/\/ Entr\u00e9es\r\n\u00a0\u00a0 \u00a0const std::vector<D3DXVECTOR3>& vertices,\r\n\u00a0\u00a0 \u00a0const std::vector<D3DXVECTOR2>& uvs,\r\n\u00a0\u00a0 \u00a0\/\/ Sorties\r\n\u00a0\u00a0 \u00a0std::vector<D3DXVECTOR3>& tangents,\r\n\u00a0\u00a0 \u00a0std::vector<D3DXVECTOR3>& bitangents\r\n)\r\n{\r\n\u00a0\u00a0\u00a0 for (int i = 0; i < vertices.size(); i += 3)\r\n\u00a0\u00a0 \u00a0{\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Les vertices\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 const D3DXVECTOR3& v0 = vertices[i + 0];\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 const D3DXVECTOR3& v1 = vertices[i + 1];\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0const D3DXVECTOR3& v2 = vertices[i + 2];\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Les coordonn\u00e9es des textures\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 const D3DXVECTOR2& uv0 = uvs[i + 0];\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 const D3DXVECTOR2& uv1 = uvs[i + 1];\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0  const D3DXVECTOR2& uv2 = uvs[i + 2];\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Les c\u00f4t\u00e9s du triangle : "position delta"\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 D3DXVECTOR3 deltaPos1 = v1 - v0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 D3DXVECTOR3 deltaPos2 = v2 - v0;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ UV delta\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 D3DXVECTOR2 deltaUV1 = uv1 - uv0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 D3DXVECTOR2 deltaUV2 = uv2 - uv0;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 float r = 1.0f \/ (deltaUV1.x * deltaUV2.y - deltaUV1.y * deltaUV2.x);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 D3DXVECTOR3 tangent = (deltaPos1 * deltaUV2.y\u00a0\u00a0 - deltaPos2 * deltaUV1.y) * r;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 D3DXVECTOR3 bitangent = (deltaPos2 * deltaUV1.x\u00a0\u00a0 - deltaPos1 * deltaUV2.x) * r;\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ Assigne la m\u00eame tangente pour les trois vertex en question\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 tangents.push_back(tangent);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 tangents.push_back(tangent);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 tangents.push_back(tangent);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Pareil pour les binormales \/ bitangentes\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 bitangents.push_back(bitangent);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 bitangents.push_back(bitangent);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 bitangents.push_back(bitangent);\r\n\u00a0\u00a0 \u00a0}\r\n}\r\n\r\n<\/pre>\n
 <\/p>\n
Voil\u00e0 c’est tout pour les algorithmes !<\/p>\n
Sachez que comme vous l’avez vu, la m\u00e9thode<\/strong> standard indique que la tangente doit \u00eatre orient\u00e9e dans la m\u00eame direction<\/strong> que les coordonn\u00e9es de texture<\/strong> du triangle en question.<\/p>\n
D’autre part ce n’est pas l’objet de cet article, mais je vous apprend que la normale<\/em>, la binormale<\/em> et la tangente<\/em> sont trois vecteurs qui forment une base <\/strong><\/em>permettant de transformer les<\/strong> normales<\/strong> issues (et extraites) d’une image RGB<\/strong> sp\u00e9ciale VERS l’espace \/ coordonn\u00e9es du mod\u00e8le du mesh contenant les triangles (bind space<\/em> ou model space<\/em> en anglais).<\/p>\n
Cette base est repr\u00e9sent\u00e9e math\u00e9matiquement par la matrice suivante :<\/p>\n\\begin{bmatrix} \\textbf{T}_x & \\textbf{B}_x & \\textbf{N}_x \\\\ \\textbf{T}_y & \\textbf{B}_y & \\textbf{N}_y \\\\ \\textbf{T}_z & \\textbf{B}_z & \\textbf{N}_z \\end{bmatrix} \n
 <\/p>\n
\\textbf{T}  repr\u00e9sentant la tangente<\/em>. \\textbf{B}  repr\u00e9sentant la binormale<\/em>. \\textbf{N}  repr\u00e9sentant la normale<\/em>.<\/p>\n
Il ne reste plus qu’\u00e0 multiplier le vecteur normal<\/strong> par cette matrice est le tour est jou\u00e9 !<\/p>\n
 <\/p>\n
R\u00e9sum\u00e9 :<\/strong><\/p>\n
Nous avons pr\u00e9sent\u00e9 l\u2019algorithme permettant de calculer les binormales<\/em> et les bitangentes<\/em> en utilisant les coordonn\u00e9es des textures<\/strong> du mesh<\/em> en question.<\/p>\n
R\u00e9f\u00e9rences :<\/strong><\/p>\n
– http:\/\/www.3dkingdoms.com\/weekly\/weekly.php?a=37<\/p>\n
– http:\/\/www.opengl-tutorial.org\/intermediate-tutorials\/tutorial-13-normal-mapping\/<\/p>\n","protected":false},"excerpt":{"rendered":"
Intro : Pour certains algorithmes de rendu 3D par shader (comme celui du normal mapping) nous avons besoin, en plus de la normale, de deux vecteurs perpendiculaires \u00e0 celle-ci : ce sont la tangente et la bitangente (ou binormale). Voici trois m\u00e9thode pour les obtenir et les calculer. Explications : Math\u00e9matiquement, le calcul de ces […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/www.la-porte-des-nebuleuses.net\/blog-informatique\/index.php?rest_route=\/wp\/v2\/posts\/2735"}],"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=2735"}],"version-history":[{"count":119,"href":"https:\/\/www.la-porte-des-nebuleuses.net\/blog-informatique\/index.php?rest_route=\/wp\/v2\/posts\/2735\/revisions"}],"predecessor-version":[{"id":5887,"href":"https:\/\/www.la-porte-des-nebuleuses.net\/blog-informatique\/index.php?rest_route=\/wp\/v2\/posts\/2735\/revisions\/5887"}],"wp:attachment":[{"href":"https:\/\/www.la-porte-des-nebuleuses.net\/blog-informatique\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2735"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.la-porte-des-nebuleuses.net\/blog-informatique\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2735"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.la-porte-des-nebuleuses.net\/blog-informatique\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2735"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}