# 切线 Visualizing tangents and binormals

Visualizing tangents and binormals

Tangent and binormal vectors are used for normal mapping. In Unity only the tangent vector is stored in vertices, and the binormal is derived from the normal and tangent values.

Pass {
CGPROGRAM
#pragma vertex vert
#pragma fragment frag

// vertex input: position, tangent
struct appdata {
float4 vertex : POSITION;
float4 tangent : TANGENT;
};

struct v2f {
float4 pos : SV_POSITION;
fixed4 color : COLOR;
};

v2f vert (appdata v) {
v2f o;
o.pos = mul( UNITY_MATRIX_MVP, v.vertex );
o.color = v.tangent * 0.5 + 0.5; //tangent切线
return o;
}

fixed4 frag (v2f i) : SV_Target { return i.color; }
ENDCG
}
}
}

Bitangents副法线为法线和切线的叉乘，即垂直于法线和切线

{

{
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag

#include "UnityCG.cginc"

struct appdata
{
float4 vertex : POSITION;
float3 normal : NORMAL;
float4 tangent : TANGENT;
};

struct v2f
{
float4 color : TEXCOORD0;
float4 pos : SV_POSITION;
};

v2f vert (appdata v)
{
v2f o;
o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
float3 bitangent = cross(v.normal,v.tangent.xyz) * v.tangent.w;     //副法线为法线和切线的叉乘，即垂直于法线和切线的线
o.color.xyz= bitangent * 0.5 + 0.5 ;
o.color.w =1.0;
return o;
}

fixed4 frag (v2f i) : SV_Target
{
fixed4 col = i.color;
return col;
}
ENDCG
}
}
}

#### 【D3D11游戏编程】学习笔记二十四：切线空间（Tangent Space）

2013-02-28 00:29:33

#### 副法线的来由（binormal）

2012-08-19 20:11:41

#### binormal

2017-01-31 05:37:48

#### 【一步步学OpenGL 26】-《法线贴图》

2017-04-03 17:40:31

#### three.js 源码注释（八十六）extras/geometries/TubeGeometry.js

2015-02-01 17:32:30

#### How to Work with FBX SDK

2014-05-06 19:01:55

#### oFusion发布1.9.86版了

2012-09-03 06:32:14

#### three.js 源码注释（七十四）extras/geometries/ExtrudeGeometry.js

2015-01-30 19:55:45

#### 提取FBX文件中mesh的信息

2017-12-29 23:50:10

#### 切线空间（Tangent Space）法线映射（Normal Mapping）

2017-07-09 11:45:53