Rounded Cube 4

接上回 Rounded Cube 3.本章主题如下:

• Create a custom shader. 使用自定义shader

此为本人阅读笔记不作为转载处理,详细还请参看原文. 原文地址

虽然我们现在可以区分面，但我们仍然没有纹理坐标。 假设我们想在整个立方体上显示一个网格模式，以便我们可以看到单个四边形。 我们怎样才能做到这一点？

我们可以使用自定义着色器来找出如何应用纹理，而不是将UV坐标存储在网格中。 这是一个刚创建的着色器。

Shader "Custom/Rounded Cube Grid" {
	Properties {
		_Color ("Color", Color) = (1,1,1,1)
		_MainTex ("Albedo (RGB)", 2D) = "white" {}
		_Glossiness ("Smoothness", Range(0,1)) = 0.5
		_Metallic ("Metallic", Range(0,1)) = 0.0
	}
	SubShader {
		Tags { "RenderType"="Opaque" }
		LOD 200
		
		CGPROGRAM
		#pragma surface surf Standard fullforwardshadows
		#pragma target 3.0

		sampler2D _MainTex;

		struct Input {
			float2 uv_MainTex;
		};

		half _Glossiness;
		half _Metallic;
		fixed4 _Color;

		void surf (Input IN, inout SurfaceOutputStandard o) {
			fixed4 c = tex2D(_MainTex, IN.uv_MainTex) * _Color;
			o.Albedo = c.rgb;
			o.Metallic = _Metallic;
			o.Smoothness = _Glossiness;
			o.Alpha = c.a;
		}
		ENDCG
	} 
	FallBack "Diffuse"
}

这是默认的表面着色器。 重要的是它定义了一个输入结构，它要求主纹理的坐标。 这些坐标在surf函数中使用，为每个渲染片段调用。 由于我们没有这样的坐标，我们必须用其他的东西替换uv_MainTex。– Google这段翻译的真好

struct Input {
        float2 cubeUV;
    };

    …

    void surf (Input IN, inout SurfaceOutputStandard o) {
        fixed4 c = tex2D(_MainTex, IN.cubeUV) * _Color;
        o.Albedo = c.rgb;
        o.Metallic = _Metallic;
        o.Smoothness = _Glossiness;
        o.Alpha = c.a;
    }
}

由于每个顶点定义了UV，所以我们必须添加一个每个顶点调用的函数。

CGPROGRAM
    #pragma surface surf Standard fullforwardshadows vertex:vert
    #pragma target 3.0

    sampler2D _MainTex;

    struct Input {
        float2 cubeUV;
    };

    half _Glossiness;
    half _Metallic;
    fixed4 _Color;
    
    void vert (inout appdata_full v, out Input o) {
        UNITY_INITIALIZE_OUTPUT(Input, o);
    }

    void surf (Input IN, inout SurfaceOutputStandard o) {
        fixed4 c = tex2D(_MainTex, IN.cubeUV) * _Color;
        o.Albedo = c.rgb;
        o.Metallic = _Metallic;
        o.Smoothness = _Glossiness;
        o.Alpha = c.a;
    }
ENDCG

为了检查我们的着色器是否工作，直接使用顶点位置的XY坐标作为UV。

void vert (inout appdata_full v, out Input o) {
        UNITY_INITIALIZE_OUTPUT(Input, o);
        o.cubeUV = v.vertex.xy;
    }

这对于Z面来说是合理的，但其他的却是一团糟。 我们需要为它们使用不同的顶点坐标。 所以我们有一个选择，我们可以通过添加关键字枚举着色器属性来支持。

这里划重点了 使用关键枚举来决定渲染不同的面，背后的工作原理是：枚举对应的宏定义

Properties {
    _Color ("Color", Color) = (1,1,1,1)
    _MainTex ("Albedo (RGB)", 2D) = "white" {}
    _Glossiness ("Smoothness", Range(0,1)) = 0.5
    _Metallic ("Metallic", Range(0,1)) = 0.0
    [KeywordEnum(X, Y, Z)] _Faces ("Faces", Float) = 0
}

可以通过定义关键字义，使我们能够为每个选项编写不同的代码。

void vert (inout appdata_full v, out Input o) {
			UNITY_INITIALIZE_OUTPUT(Input, o);
			#if defined(_FACES_X)
				o.cubeUV = v.vertex.yz;
			#elif defined(_FACES_Y)
				o.cubeUV = v.vertex.xz;
			#elif defined(_FACES_Z)
				o.cubeUV = v.vertex.xy;
			#endif
		}

刚开始看起来不错，但网格线不适合实际四边形。 更糟糕的是，当我们使用世界空间顶点位置时，移动或旋转立方体时会变得很奇怪。

在四舍五入之前，我们需要原始立方体的顶点位置。 如果我们可以将它们存储在网格中，我们可以将它们传递给着色器。 由于我们不使用顶点颜色，因此我们可以使用顶点颜色通道来达到此目的。

private Color32[] cubeUV;

private void CreateVertices () {
    int cornerVertices = 8;
    int edgeVertices = (xSize + ySize + zSize - 3) * 4;
    int faceVertices = (
        (xSize - 1) * (ySize - 1) +
        (xSize - 1) * (zSize - 1) +
        (ySize - 1) * (zSize - 1)) * 2;
    vertices = new Vector3[cornerVertices + edgeVertices + faceVertices];
    normals = new Vector3[vertices.Length];
    cubeUV = new Color32[vertices.Length];

    …

    mesh.vertices = vertices;
    mesh.normals = normals;
    mesh.colors32 = cubeUV;
}

private void SetVertex (int i, int x, int y, int z) {
    …

    normals[i] = (vertices[i] - inner).normalized;
    vertices[i] = inner + normals[i] * roundness;
    cubeUV[i] = new Color32((byte)x, (byte)y, (byte)z, 0);
}

这里我们必须使用Color32来代替通常的Color类型，因为顶点颜色组件被存储为单个字节。 整个颜色是四个字节，与单个浮点大小相同。

如果我们使用常规颜色，那么Unity将从0-1浮点数转换为0-255字节，截断该范围之外的所有内容。 通过直接转换为字节，我们可以处理多达255的多维数据集，这应该是足够的。

在着色器方面，我们现在可以使用顶点颜色而不是其位置。 当着色器将顶点颜色通道解释为0-1范围内的值时，我们必须通过乘以255来撤消此转换。

void vert (inout appdata_full v, out Input o) {
    UNITY_INITIALIZE_OUTPUT(Input, o);
    #if defined(_FACES_X)
        o.cubeUV = v.color.yz * 255;
    #elif defined(_FACES_Y)
        o.cubeUV = v.color.xz * 255;
    #elif defined(_FACES_Z)
        o.cubeUV = v.color.xy * 255;
    #endif
}

我们终于有了一个功能性的网格纹理。 请注意，每对面之一的UV坐标是镜像的，但这不是重点，因为我们使用的是对称纹理。