卜若的代码笔记-unityshader系列-第十三章：第八章绘制顺序错误带来的问题及其分析(顶点偏移带来的三角面缺失)

在第八章中，我们绘制了一个100*100 的面片，看起来没有什么问题，并且我们所使用的绘制顺序是这样的

然后显示的平面效果是这样的：

 

看起来没啥问题是吧？

我现在在顶点着色器通过采样一张噪点图：

 

 

得到一个随机值rd

然后通过vertex偏移->

 得到了一个奇葩的效果：

一种破破烂烂的效果。这个叫做三角面缺失。我搜索了一下各种问题，但是目前提到三角面缺失的主流原因是以下链接这种：

https://gameinstitute.qq.com/community/detail/125812

 但是，显然不是，我换了n多姿势，都没对。嗯。

然后我开始怀疑是否是因为绘制顺序的问题。

因为写第八章的时候我也没考虑太多，然后就这样写了...但是，我们现在使用了标准的创建顺序：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Mesh5 : ComplexMesh {
   public int sc = 100;
   public int sr = 100;
    public override Mesh createMesh()
    {
        Mesh mesh = new Mesh();
        

        //每四个点可以构成一个矩形面片
        //本教程是构建一排矩形面片
        Vector3[] v3s = new Vector3[sc * 4*sr];

        //绘制一个矩形面片需要指定6个绘制顺序
        int[] index = new int[6 * sc*sr];
        Vector2[] uvs = new Vector2[4 * sc*sr];

        /**
         * 定义一个面片，然后让面片偏移，坐标分配是
         * (0+i,1+j)-----(1+i,1+j)
         *  |                |
         *  |                |
         *  |                |
         *  |                |
         *  |                |
         * (0+i,0+j)-----(1+i,0+j)
         */
        for (int i = 0; i < sc; i++)
        {

            for (int j = 0; j < sr; j++)
            {
                v3s[(i * sr + j) * 4 + 0] = new Vector3(i, 0, j);
                v3s[(i * sr + j) * 4 + 1] = new Vector3(i, 0, 1 + j);
                v3s[(i * sr + j) * 4 + 2] = new Vector3(i + 1, 0, j+1);
                v3s[(i * sr + j) * 4 + 3] = new Vector3(1+i, 0, j );

                uvs[(i * sr + j) * 4 + 0] =new Vector2(i,  j)/sc;
                uvs[(i * sr + j) * 4 + 1] =new Vector2(i,  1 + j) / sc;
                uvs[(i * sr + j) * 4 + 2] =new Vector2(i + 1,  j+1) / sc;
                uvs[(i * sr + j) * 4 + 3] = new Vector2(1 + i,  j) / sc;

                //Debug.Log(uvs[(i * sr + j) * 4 + 0].x);
                //Debug.Log(uvs[(i * sr + j) * 4 + 1]);
                //Debug.Log(uvs[(i * sr + j) * 4 + 2]);
                //Debug.Log(uvs[(i * sr + j) * 4 + 3]);
            }                   
            
        }

        for (int i = 0; i < sc*sr; i++)
        {
            /**
         * 绘制第一个三角，顺时针
         * (0+i,1+j)(1)-----(1+i,1+j)(2)
         *  |                |
         *  |                |
         *  |                |
         *  |                |
         *  |                |
         * (0+i,0+j)(0)-----(1+i,0+j)
         */
            index[i * 6 + 0] = i * 4;
            index[i * 6 + 1] = i * 4 + 1;
            index[i * 6 + 2] = i * 4 + 2;

            /**
            * 绘制第二个三角，顺时针
            * (0+i,1+j)-----(1+i,1+j)(2)
            *  |                |
            *  |                |
            *  |                |
            *  |                |
            *  |                |
            * (0+i,0+j)(0)-----(1+i,0+j)(3)
            */
            index[i * 6 + 3] = i * 4 + 0;
            index[i * 6 + 4] = i * 4 + 2;
            index[i * 6 + 5] = i * 4 + 3;
        }


        mesh.vertices = v3s;
        mesh.triangles = index;
        mesh.uv = uvs;
        mesh.RecalculateBounds();
        mesh.RecalculateNormals();
        mesh.RecalculateTangents();
        return mesh;
    }
}

这个时候，我们再度的引入随机噪点

你看，它就好了，卧槽！流弊！

关于随机噪点数据(r,g,b,a随机数)怎么在顶点着色器中获得会在下一章介绍