Procedural Grid

如果想让一个对象显示3D模型，需要2个组件，第一个是mesh filter。这个组件持有mesh的索引。第二个是mesh renderer，用来设定mesh如何渲染：用哪些材质，是否阻挡或者接受光线等等。多个材质主要是用于导入类的模型，同一个模型下有多个mesh组

image.png

创建一个点组成的网格

[RequireComponent(typeof(MeshFilter), typeof(MeshRenderer))]
public class Grid : MonoBehaviour {  
 public int xSize, ySize;
 }

创建一个空对象绑上脚本。MeshFilter的Mesh对象留空，宽高设为10，5。给一个带漫反射贴图的默认材质

image.png

先来关注点的位置：点比格子数多一

image.png

private Vector3[] vertices;  
private void Generate () {   
    vertices = new Vector3[(xSize + 1) * (ySize + 1)];  
}

画一个小黑球来标记点的位置，点的坐标必须是世界坐标。在编辑模式下也会跑到这个方法，所以先判断空返回

private void OnDrawGizmos () {   
    if (vertices == null) 
          return;
    Gizmos.color = Color.black;   
    for (int i = 0; i < vertices.Length; i++) 
    {    
        Gizmos.DrawSphere(vertices[i], 0.1f);   
    } 
 }

image.png

为了显示出点的顺序。加个协程。把点赋给Mesh

private Mesh mesh;
private void Awake () {  
 StartCoroutine(Generate());  
}   

private IEnumerator Generate () {  
    WaitForSeconds wait = new WaitForSeconds(0.05f);   
    vertices = new Vector3[(xSize + 1) * (ySize + 1)]; 
    for (int i = 0, y = 0; y <= ySize; y++) {   
         for (int x = 0; x <= xSize; x++, i++) {   
               vertices[i] = new Vector3(x, y);    
               yield return wait;    
         }   
     }  
    mesh.vertices = vertices;
}

顺时针画的三角形是朝前的，逆时针的三角是向后的（下面看不见的）

正面

反面

triangles[0] = 0;   
triangles[3] = triangles[2] = 1;  
 triangles[4] = triangles[1] = xSize + 1;  
 triangles[5] = xSize + 2;

int[] triangles = new int[xSize * 6];   
for (int ti = 0, vi = 0, x = 0; x < xSize; x++, ti += 6, vi++) {  
    triangles[ti] = vi;    
    triangles[ti + 3] = triangles[ti + 2] = vi + 1;    
    triangles[ti + 4] = triangles[ti + 1] = vi + xSize + 1;    
    triangles[ti + 5] = vi + xSize + 2;    
    yield return wait;   
}

private void Awake () {   
    Generate();  
}   

private void Generate () {   
    GetComponent<MeshFilter>().mesh = mesh = new Mesh();   
    mesh.name = "Procedural Grid";    
    vertices = new Vector3[(xSize + 1) * (ySize + 1)];   
    for (int i = 0, y = 0; y <= ySize; y++) {    
        for (int x = 0; x <= xSize; x++, i++) {  
           vertices[i] = new Vector3(x, y);    
        }  
     }  
   mesh.vertices = vertices;    
   int[] triangles = new int[xSize * ySize * 6];  
   for (int ti = 0, vi = 0, y = 0; y < ySize; y++, vi++) {    
       for (int x = 0; x < xSize; x++, ti += 6, vi++) {    
           triangles[ti] = vi;    
           triangles[ti + 3] = triangles[ti + 2] = vi + 1;   
           triangles[ti + 4] = triangles[ti + 1] = vi + xSize + 1;    
           triangles[ti + 5] = vi + xSize + 2;   
        }   
    }  
   mesh.triangles = triangles;
  }

生成额外的点数据
因为三角形总是平的，所以应该不需要分别提供法线信息，但通过这种方法，可以实现一些技巧。现实中顶点没有法线，三角形有。通过附加自定义法线给点然后在三角形之间进行插值，我们可以假装我们有一个平滑弯曲的表面而不是一堆平的三角形。
每点定义一个法线，所以我们来填充另一个向量数组。或者我们可以要求Mesh通过三角面自己解出法线。就这么干吧。

private void Generate () { 
    …  
   mesh.triangles = triangles;   
   mesh.RecalculateNormals(); 
 }

没法线

有法线

接下来处理UV坐标。注意到网格目前已经有了一个标准颜色，即使它已经使用了一个带有漫反射贴图的材质。因为我们没有提供UV。所以值都是0。

vertices = new Vector3[(xSize + 1) * (ySize + 1)];   
Vector2[] uv = new Vector2[vertices.Length];   
    for (int i = 0, y = 0; y <= ySize; y++) {   
        for (int x = 0; x <= xSize; x++, i++) {   
            vertices[i] = new Vector3(x, y);   
            uv[i] = new Vector2((float)x / xSize, (float)y / ySize);   
         } 
    }  
 mesh.vertices = vertices;   mesh.uv = uv;

另一种添加细节的方法是加法线贴图。这种贴图包含了编码成颜色的法线向量。但光给法线贴图没效果，必须先给切线向量

法线贴图

材质

切线的作用
法线贴图是定义在切线空间中的。它是一个随着物体表面起伏的3D空间。这个方法允许我们将不同地方不同朝向的法线应用到同一张贴图中

表面向量代表了空间的上方向，但是应该用哪种方法表示呢？它是通过切线定义的。理想情况下，法线和切线的夹角是90度。它们的叉乘就是定义3D空间所需要的第三个向量。实际上角度通常不是90，但结果也够好了。

所以切线是个3D向量，但UNITY实际用了4D向量。第四个分量通常是-1或者1，用于控制切线空间的第三维的方向，要嘛朝前要嘛朝后。这个促进了法线贴图的镜像，通常用于3D模型中的对称性，比如人。Unity shader实现这个计算就需要我们使用-1.

由于我们用的是平面，所以所有切线简单的指向右。

vertices = new Vector3[(xSize + 1) * (ySize + 1)]; 
Vector2[] uv = new Vector2[vertices.Length];  
Vector4[] tangents = new Vector4[vertices.Length];  
Vector4 tangent = new Vector4(1f, 0f, 0f, -1f); 
for (int i = 0, y = 0; y <= ySize; y++) {    
    for (int x = 0; x <= xSize; x++, i++) {     
        vertices[i] = new Vector3(x, y);     
        uv[i] = new Vector2((float)x / xSize, (float)y / ySize);    
        tangents[i] = tangent;    
    }  
 }  
mesh.vertices = vertices;   
mesh.uv = uv;   
mesh.tangents = tangents;

Mesh需要点坐标和三角索引，通常也要UV坐标，最多4组，还有切线。我们也可以添加顶点颜色，虽然标准SHADER没有用它。我们可以自定义使用它的SHADER。