{"id":469,"date":"2022-02-03T22:02:22","date_gmt":"2022-02-03T14:02:22","guid":{"rendered":"http:\/\/liyanliang.net\/?p=469"},"modified":"2022-02-03T22:41:47","modified_gmt":"2022-02-03T14:41:47","slug":"normal-mapping","status":"publish","type":"post","link":"http:\/\/liyanliang.net\/index.php\/2022\/02\/03\/normal-mapping\/","title":{"rendered":"OpenGL-\u6cd5\u7ebf\u8d34\u56fe(Normal Mapping)"},"content":{"rendered":"\n

\u80cc\u666f<\/strong><\/p>\n\n\n\n

\u5728\u4e00\u4e2a\u5e73\u9762\u4e0a\u5982\u679c\u53ea\u6709\u4e00\u4e2a\u6cd5\u7ebf\uff0c\u6574\u4e2a\u9762\u7684\u5149\u7167\u5f3a\u5ea6\u90fd\u662f\u76f8\u540c\u7684\uff0c\u5982\u679c\u662f\u51f9\u51f8\u7684\u8868\u9762\uff0c\u65e0\u6cd5\u8868\u73b0\u8868\u9762\u7684\u771f\u662f\u5149\u7167\u6548\u679c\uff0c\u6240\u4ee5\u5f15\u5165\u4e86\u6cd5\u7ebf\u8d34\u56fe\u3002\u5e73\u9762\u5185\u7684\u6bcf\u4e00\u4e2afragment\u90fd\u5b58\u50a8\u4e00\u4e2a\u6cd5\u7ebf\u5411\u91cf\uff0c\u901a\u8fc7\u6cd5\u7ebf\u5411\u91cf\u8ba1\u7b97\u5207\u7ebf\u5411\u91cf\u548c\u526f\u5207\u5411\u5411\u91cf\u3002<\/p>\n\n\n\n

\u5df2\u77e5\u4e0a\u5411\u91cf\u662f\u8868\u9762\u7684\u6cd5\u7ebf\u5411\u91cf\u3002\u53f3\u548c\u524d\u5411\u91cf\u662f\u5207\u7ebf(Tagent)\u548c\u526f\u5207\u7ebf(Bitangent)\u5411\u91cf\u3002\u4e0b\u9762\u7684\u56fe\u7247\u5c55\u793a\u4e86\u4e00\u4e2a\u8868\u9762\u7684\u4e09\u4e2a\u5411\u91cf\uff1a<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

\u8ba1\u7b97\u539f\u7406<\/strong><\/p>\n\n\n\n

\u8ba1\u7b97\u6bcf\u4e2a\u8868\u9762\u7684\u5207\u7ebf\u548c\u526f\u5207\u7ebf\u53ef\u4ee5\u53c2\u7167https:\/\/learnopengl-cn.github.io\/<\/a>\uff0c\u4e3b\u8981\u8ba1\u7b97\u8fc7\u7a0b\u5982\u4e0b\uff1a<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

\u9876\u70b9\uff1a<\/strong><\/p>\n\n\n\n

         V3N3UV2  verts[] =
          {
              { 0.5f, -0.5f,  0.5f ,  1.0, 0.0, 0.0, 0.0f, 0.0f  },
              { 0.5f, -0.5f, -0.5f ,  1.0, 0.0, 0.0, 1.0f, 0.0f  },
              { 0.5f,  0.5f, -0.5f ,  1.0, 0.0, 0.0, 1.0f, 1.0f  },
                                                                 
              { 0.5f,  0.5f, -0.5f ,  1.0, 0.0, 0.0, 1.0f, 1.0f  },
              { 0.5f,  0.5f,  0.5f ,  1.0, 0.0, 0.0, 0.0f, 1.0f  },
              { 0.5f, -0.5f,  0.5f ,  1.0, 0.0, 0.0, 0.0f, 0.0f  },
                                                                 
              {-0.5f, -0.5f, -0.5f ,  -1.0, 0.0,0.0, 0.0f, 0.0f  },
              {-0.5f, -0.5f,  0.5f ,  -1.0, 0.0,0.0, 1.0f, 0.0f  },
              {-0.5f,  0.5f,  0.5f ,  -1.0, 0.0,0.0, 1.0f, 1.0f  },
                                                                 
              {-0.5f,  0.5f,  0.5f ,  -1.0, 0.0,0.0, 1.0f, 1.0f  },
              {-0.5f,  0.5f, -0.5f ,  -1.0, 0.0,0.0, 0.0f, 1.0f  },
              {-0.5f, -0.5f, -0.5f ,  -1.0, 0.0,0.0, 0.0f, 0.0f  },
                                                                 
              {-0.5f,  0.5f,  0.5f ,  -0.0, 1.0,0.0, 1.0f, 0.0f  },
              { 0.5f,  0.5f,  0.5f ,  -0.0, 1.0,0.0, 0.0f, 0.0f  },
              { 0.5f,  0.5f, -0.5f ,  -0.0, 1.0,0.0, 0.0f, 1.0f  },
  \u200b
              { 0.5f,  0.5f, -0.5f ,  0.0, 1.0,0.0, 0.0f, 1.0f   },
              {-0.5f,  0.5f, -0.5f ,  0.0, 1.0,0.0, 1.0f, 1.0f   },
              {-0.5f,  0.5f,  0.5f ,  0.0, 1.0,0.0, 1.0f, 0.0f   },
  \u200b
              {-0.5f, -0.5f, -0.5f ,  0.0, -1.0,0.0, 1.0f, 0.0f  },
              { 0.5f, -0.5f, -0.5f ,  0.0, -1.0,0.0, 0.0f, 0.0f  },
              { 0.5f, -0.5f,  0.5f ,  0.0, -1.0,0.0, 0.0f, 1.0f  },
                                                                
              { 0.5f, -0.5f,  0.5f ,  0.0, -1.0,0.0, 0.0f, 1.0f  },
              {-0.5f, -0.5f,  0.5f ,  0.0, -1.0,0.0, 1.0f, 1.0f  },
              {-0.5f, -0.5f, -0.5f ,  0.0, -1.0,0.0, 1.0f, 0.0f  },
  \u200b
              {-0.5f, -0.5f,  0.5f,   0.0, 0.0, 1.0,  0.0f, 0.0f },
              { 0.5f, -0.5f,  0.5f,   0.0, 0.0, 1.0,  1.0f, 0.0f },
              { 0.5f,  0.5f,  0.5f,   0.0, 0.0, 1.0,  1.0f, 1.0f },
                                                                 
              { 0.5f,  0.5f,  0.5f,   0.0, 0.0, 1.0,  1.0f, 1.0f },
              {-0.5f,  0.5f,  0.5f,   0.0, 0.0, 1.0,  0.0f, 1.0f },
              {-0.5f, -0.5f,  0.5f,   0.0, 0.0, 1.0,  0.0f, 0.0f },
                                                                 
              { 0.5f, -0.5f, -0.5f,   0.0, 0.0,-1.0,  0.0f, 0.0f },
              {-0.5f, -0.5f, -0.5f,   0.0, 0.0,-1.0,  1.0f, 0.0f },
              {-0.5f,  0.5f, -0.5f,   0.0, 0.0,-1.0,  1.0f, 1.0f },
                                                                 
              {-0.5f,  0.5f, -0.5f,   0.0, 0.0,-1.0,  1.0f, 1.0  },
              { 0.5f,  0.5f, -0.5f,   0.0, 0.0,-1.0,  0.0f, 1.0  },
              { 0.5f, -0.5f, -0.5f,   0.0, 0.0,-1.0,  0.0f, 0.0  },
          };<\/pre>\n\n\n\n
\u5207\u7ebf\u4e0e\u526f\u5207\u7ebf\u8ba1\u7b97<\/strong>\uff1a<\/p>\n\n\n\n
     void convertTBN(V3N3UV2* vertices,NORMALMAP* nmVerts)
      {
          for (size_t i = 0; i <36; i += 3) 
          {
              nmVerts[i + 0].x = vertices[i + 0].x;
              nmVerts[i + 0].y = vertices[i + 0].y;
              nmVerts[i + 0].z = vertices[i + 0].z;
  \u200b
              nmVerts[i + 1].x = vertices[i + 1].x;
              nmVerts[i + 1].y = vertices[i + 1].y;
              nmVerts[i + 1].z = vertices[i + 1].z;
  \u200b
              nmVerts[i + 2].x = vertices[i + 2].x;
              nmVerts[i + 2].y = vertices[i + 2].y;
              nmVerts[i + 2].z = vertices[i + 2].z;
  \u200b
              nmVerts[i + 0].nx = vertices[i + 0].nx;
              nmVerts[i + 0].ny = vertices[i + 0].ny;
              nmVerts[i + 0].nz = vertices[i + 0].nz;
  \u200b
              nmVerts[i + 1].nx = vertices[i + 1].nx;
              nmVerts[i + 1].ny = vertices[i + 1].ny;
              nmVerts[i + 1].nz = vertices[i + 1].nz;
  \u200b
              nmVerts[i + 2].nx = vertices[i + 2].nx;
              nmVerts[i + 2].ny = vertices[i + 2].ny;
              nmVerts[i + 2].nz = vertices[i + 2].nz;
  \u200b
              nmVerts[i + 0].u = vertices[i + 0].u;
              nmVerts[i + 0].v = vertices[i + 0].v;
  \u200b
              nmVerts[i + 1].u = vertices[i + 1].u;
              nmVerts[i + 1].v = vertices[i + 1].v;
  \u200b
              nmVerts[i + 2].u = vertices[i + 2].u;
              nmVerts[i + 2].v = vertices[i + 2].v;
  \u200b
  \u200b
              \/\/ Shortcuts for vertices
              float3  v0  =   float3(vertices[i + 0].x,vertices[i + 0].y,vertices[i + 0].z);
              float3  v1  =   float3(vertices[i + 1].x,vertices[i + 1].y,vertices[i + 1].z);
              float3  v2  =   float3(vertices[i + 2].x,vertices[i + 2].y,vertices[i + 2].z);
  \u200b
              float2  uv0 =   float2(vertices[i + 0].u, vertices[i + 0].v);
              float2  uv1 =   float2(vertices[i + 1].u, vertices[i + 1].v);
              float2  uv2 =   float2(vertices[i + 2].u, vertices[i + 2].v);
              
              \/\/ Edges of the triangle : postion delta
              float3  deltaPos1   =   v1 - v0;
              float3  deltaPos2   =   v2 - v0;
              \/\/ UV delta
              float2 deltaUV1     =   uv1 - uv0;
              float2 deltaUV2     =   uv2 - uv0;
  \u200b
              float   r           =   1.0f \/ (deltaUV1.x * deltaUV2.y - deltaUV1.y * deltaUV2.x);
              float3 tangent      =   (deltaPos1 * deltaUV2.y - deltaPos2 * deltaUV1.y)*r;
              float3 binormal     =   (deltaPos2 * deltaUV1.x - deltaPos1 * deltaUV2.x)*r;
  \u200b
              nmVerts[i + 0].tx = tangent.x;  nmVerts[i + 1].tx = tangent.x;  nmVerts[i + 2].tx = tangent.x;
              nmVerts[i + 0].ty = tangent.y;  nmVerts[i + 1].ty = tangent.y;  nmVerts[i + 2].ty = tangent.y;
              nmVerts[i + 0].tz = tangent.z;  nmVerts[i + 1].tz = tangent.z;  nmVerts[i + 2].tz = tangent.z;
  \u200b
              nmVerts[i + 0].bx = binormal.x; nmVerts[i + 1].bx = binormal.x; nmVerts[i + 2].bx = binormal.x;
              nmVerts[i + 0].by = binormal.y; nmVerts[i + 1].by = binormal.y; nmVerts[i + 2].by = binormal.y;
              nmVerts[i + 0].bz = binormal.z; nmVerts[i + 1].bz = binormal.z; nmVerts[i + 2].bz = binormal.z;
          }
      }<\/pre>\n\n\n\n
\u9876\u70b9\u7740\u8272\u5668\uff1a<\/strong><\/p>\n\n\n\n
         const char* vs  =   \"#version 330 \\n\\
                              in      vec3    _position;\\n\\
                              in      vec3    _normal;\\n\\
                              in      vec2    _uv;\\n\\
                              in      vec3    _tagent;\\n\\
                              in      vec3    _biTagent;\\n\\
                              out     vec2    _outUV;\\n\\
                              out     vec3    _outPos;\\n\\
                              out     mat3    _TBN;\\n\\
                              uniform mat4    _mvp;\\n\\
                              uniform mat4    _matWorld;\\n\\
                              uniform mat3    _normalMatrix;; \\n\\
                              uniform vec3    _lightPos;\\n\\
                              uniform vec3    _cameraPos;\\n\\
                              void main()\\n\\
                              {\\n\\
                                  _outUV          =   _uv;\\n\\
                                  vec4    pos     =   _matWorld*vec4(_position,1);\\n\\
                                  mat3    norMapT =   _normalMatrix;\\n\\
                                  _outPos         =   pos.xyz;\\n\\
                                  vec3    normal      =   normalize(norMapT * _normal);\\n\\
                                  vec3    tagent      =   normalize(norMapT * _tagent);\\n\\
                                  vec3    biTagent    =   normalize(norMapT * _biTagent);\\n\\
                                  _TBN                =   mat3x3(tagent,biTagent,normal);\\n\\
                                  gl_Position         =   _mvp * vec4(_position,1.0);\\n\\
                              }\";<\/pre>\n\n\n\n
\u7247\u6bb5\u7740\u8272\u5668\uff1a<\/p>\n\n\n\n
      const char* ps =    \"#version 330 \\n\\
                              in      vec2        _outUV;\\n\\
                              in      vec3        _outPos;\\n\\
                              in      mat3        _TBN;\\n\\
                              uniform sampler2D   _texture;\\n\\
                              uniform sampler2D   _texNormal;\\n\\
                              uniform vec3        _lightPos;\\n\\
                              uniform vec3        _cameraPos;\\n\\
                              void main()\\n\\
                              {\\n\\
                                  gl_FragColor.rgb    =   texture2D(_texture, _outUV).rgb;\\n\\
                                  vec3    normal      =   normalize((_TBN * (texture2D(_texNormal, _outUV).rgb * 2.0 - 1.0)));\\n\\
                                  vec3    lightDir    =   normalize(_lightPos - _outPos);\\n\\
                                  vec3    cameraDir   =   normalize(_cameraPos - _outPos);\\n\\
                                  float   NdotLD      =   max(dot(normal, lightDir), 0.0);\\n\\
                                  gl_FragColor.rgb    *=  0.2 + 0.8 * NdotLD;\\n\\
                                  vec3    lightDirRef =   reflect(-lightDir, normal);\\n\\
                                  float   CDdotLDR    =   max(dot(cameraDir, lightDirRef), 0.0);\\n\\
                                  gl_FragColor.rgb    +=  pow(CDdotLDR, 64.0);\\n\\
                              }\";<\/pre>\n\n\n\n
\u5b8c\u6574\u9879\u76ee\u4ee3\u7801\uff1a<\/strong><\/p>\n\n\n\n
https:\/\/github.com\/mc-liyanliang\/OpenGL-Shader\/tree\/master<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\u80cc\u666f \u5728\u4e00\u4e2a\u5e73\u9762\u4e0a\u5982\u679c\u53ea\u6709\u4e00\u4e2a\u6cd5\u7ebf\uff0c\u6574\u4e2a\u9762\u7684\u5149\u7167\u5f3a\u5ea6\u90fd\u662f\u76f8\u540c\u7684\uff0c\u5982\u679c\u662f\u51f9\u51f8\u7684\u8868\u9762\uff0c\u65e0\u6cd5\u8868\u73b0\u8868\u9762\u7684\u771f\u662f\u5149\u7167\u6548\u679c\uff0c\u6240\u4ee5\u5f15\u5165\u4e86\u6cd5\u7ebf\u8d34\u56fe\u3002\u5e73\u9762\u5185\u7684\u6bcf\u4e00\u4e2afragment\u90fd\u5b58\u50a8\u4e00\u4e2a\u6cd5\u7ebf\u5411\u91cf\uff0c\u901a\u8fc7\u6cd5\u7ebf\u5411\u91cf\u8ba1\u7b97\u5207\u7ebf\u5411\u91cf\u548c\u526f\u5207\u5411\u5411\u91cf\u3002 \u5df2\u77e5\u4e0a\u5411\u91cf\u662f\u8868\u9762\u7684\u6cd5\u7ebf\u5411\u91cf\u3002\u53f3\u548c\u524d\u5411\u91cf\u662f\u5207\u7ebf(Tagent)\u548c\u526f\u5207\u7ebf(Bitangent)\u5411\u91cf\u3002\u4e0b\u9762\u7684\u56fe\u7247\u5c55\u793a\u4e86\u4e00\u4e2a\u8868\u9762\u7684\u4e09\u4e2a\u5411\u91cf\uff1a \u8ba1\u7b97\u539f\u7406 \u8ba1\u7b97\u6bcf\u4e2a\u8868\u9762\u7684\u5207\u7ebf\u548c\u526f\u5207\u7ebf\u53ef\u4ee5\u53c2\u7167https:\/\/learnopengl-cn.github.io\/\uff0c\u4e3b\u8981\u8ba1\u7b97\u8fc7\u7a0b\u5982\u4e0b\uff1a \u9876\u70b9\uff1a       V3N3UV2  verts[] =       {           { 0.5f, -0.5f,  0.5f ,  1.0, 0.0, 0.0, 0.0f, 0.0f },           { 0.5f, -0.5f, -0.5f ,  1.0, 0.0, 0.0, 1.0f, 0….<\/p>\n
 Read More  Read More<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":470,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[51],"class_list":["post-469","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-opengl","tag-normalmapping"],"_links":{"self":[{"href":"http:\/\/liyanliang.net\/index.php\/wp-json\/wp\/v2\/posts\/469","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/liyanliang.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/liyanliang.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/liyanliang.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/liyanliang.net\/index.php\/wp-json\/wp\/v2\/comments?post=469"}],"version-history":[{"count":2,"href":"http:\/\/liyanliang.net\/index.php\/wp-json\/wp\/v2\/posts\/469\/revisions"}],"predecessor-version":[{"id":472,"href":"http:\/\/liyanliang.net\/index.php\/wp-json\/wp\/v2\/posts\/469\/revisions\/472"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/liyanliang.net\/index.php\/wp-json\/wp\/v2\/media\/470"}],"wp:attachment":[{"href":"http:\/\/liyanliang.net\/index.php\/wp-json\/wp\/v2\/media?parent=469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/liyanliang.net\/index.php\/wp-json\/wp\/v2\/categories?post=469"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/liyanliang.net\/index.php\/wp-json\/wp\/v2\/tags?post=469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}