高級紋理以及復雜而真實的應用—

——20.9.7

這章主要分成三個部分立方體紋理（cubemap）渲染紋理（RenderTexture，rt）和程式紋理

一、立方體紋理

立方體紋理顧名思義是一種三維的紋理形狀類似于立方體，由六張影像組成，可以用于環境映射，可以模擬物體周圍的環境，模擬金屬感，

與之前的一維二維紋理采樣方式不同，立方體紋理我們采用一個三維的紋理坐標進行取樣，實際上這個三維的坐標就是一個方向矢量，從立方體的中心出發，向外部延伸時與六張紋理之一相交計算得來的，優點：快速方便，效果好，缺點：引入新的光源需要重新生成Cubemap，僅能反射環境不能反射該立方體紋理的物體本身，（不能進行模擬多次反射）簡單的來說立方體紋理的建立就是從一個點向外繪制環境的紋理，所以一旦周圍環境的光源發生改變就需要重新繪制，

天空盒所用的就是立方體紋理，利用立方體紋理映射技術，我們想讓不同的Camera用上不同的天空盒可以給Camera添加Skybox組件來指定天空盒，

創建立方體紋理有三種方法 1.用一些特殊布局的紋理（一張圖，具有立方體展開圖的交叉布局，全景布局等） 2.手動創建Cubemap 3.腳本生成紋理

這里主要講第三種，因為前兩種靠資源，我們要用Camera.RenderToCubemap 從任意的位置觀察到的場景存盤到六張影像中，這里將使用UnityEditor.ScriptableWizard編輯器向導來創建Cubemap創建界面，OnWizardCreate() : 點擊確定按鈕呼叫此事件 OnWizardUpdate() : 當編輯器向導更新時呼叫

private void OnWizardCreate()
{
    GameObject go = new GameObject("CubemapCamera");
    go.AddComponent<Camera>();
    go.transform.position = renderFromPosition.position;
    go.GetComponent<Camera>().RenderToCubemap(cubemap);
    DestroyImmediate(go);
}

　　這里主要的方法是在渲染位置創建一個Cubemap的攝像機然后創建立方體紋理完后洗掉，在編輯器界面創建可以不用開始游戲運行，

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

public class RenderCubemapWizard : ScriptableWizard
{
    public Transform renderFromPosition;
    public Cubemap cubemap;

    private void OnWizardUpdate()
    {
        helpString = "Select transform to render from and cubemap to render into";
        isValid = (renderFromPosition != null) && (cubemap != null);
    }

    private void OnWizardCreate()
    {
        GameObject go = new GameObject("CubemapCamera");
        go.AddComponent<Camera>();
        go.transform.position = renderFromPosition.position;
        go.GetComponent<Camera>().RenderToCubemap(cubemap);
        DestroyImmediate(go);
    }

    [MenuItem("GameObject/Render into Cubemap")]
    static void RenderCubemap()
    {
        ScriptableWizard.DisplayWizard<RenderCubemapWizard>("Render cuebemap", "Render!");
    }
}

　　public static T DisplayWizard<T>(string title, string createButtonName)最后這個是創建的函式，就是對應標題以及按鈕，下面是創建的界面，

　　然后就是怎么對立方體紋理進行對應的應用，我們可以想一想有了周圍的環境的紋理，可以干什么呢？最主要就是環境的反射、折射等，來提升場景中物體的真實性，然后我們就要來寫ShaderLab，我仔細思考了一下我們應該從我們應該設定什么樣的變數，以及存在的定理入手來推匯出需要什么變數，然后怎么運用，直接講里面的代碼可能不是說特別好理解，下面因為使用的上面腳本生成的環境映射所以不是實時的，后面會介紹使用一些實時的方法，

我們先實作對環境的反射，我們可以想一下就是一個金屬的物體才會有對應環境的反射，首先我們有了Cubemap環境映射，我們就需要體現金屬的金屬質感是強還是弱，也就是拋光程度對應反射的強度，所以就有反射強度_ReflectAmount.然后就是原材質的顏色以及反射的顏色比如說環境因為材質反射的顏色不同，就有_Color以及_ReflectColor，然后就是主要代碼，

o.worldRefl = reflect(-o.worldViewDir, o.worldNormal); //vert
fixed3 reflection = texCUBE(_Cubemap, i.worldRefl).rgb * _ReflectionColor.rgb; //frag
fixed3 color = ambient + lerp(diffuse, reflection, _ReflectionAmount) * atten; //frag

　　第一個是reflect函式這是在Cp6里面用到的函式，當時所要解決的問題Phong光照模型需要反射角度，reflect(float3 i, float3 n) 對應的i是入射角度n是法線，回傳反射方向，可以想象我們人眼是接受光線的地方，所以入射方向應該相反，也就是從環境的光發射到物體表面，根據物理我們知道入射光和反射光角度一致，我們其實是在計算這個光路的程序，與我們的人眼看的方向是逆方向，所以在前面加一個負號，兩個方向都是向外的！！！第二個是Cubemap的采樣結果，我們沒有對其歸一化是因為是方向沒有必要，而我們把反射的計算放在頂點著色器的原因是雖然片元著色器可以讓畫面更細膩但人眼以及分辨不出，節約性能，最后一個就是我們使用lerp函式混合漫反射顏色以及反射顏色，并且乘以衰減值（點光源），

// Upgrade NOTE: replaced '_Object2World' with 'unity_ObjectToWorld'

Shader "Unlit/10-1Reflection"
{
    Properties
    {
		_Color ("Color", Color) = (1,1,1,1)
		_ReflectionColor ("ReflectionColor", Color) = (1,1,1,1)
		_ReflectionAmount ("_ReflectionAmount", Range(0,1)) = 1
		_Cubemap ("Cubemap", Cube) = "_Skybox"{}
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" "Queue"="Geometry"}
        Pass
        {
			Tags { "LightMode"="ForwardBase" }
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
			#pragma multi_compile_fwdbase
            #include "UnityCG.cginc"
			#include "Lighting.cginc"
			#include "AutoLight.cginc"

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

            struct v2f
            {
                float4 pos : SV_POSITION;
				float3 worldNormal : TEXCOORD1;
				float3 worldPos : TEXCOORD0;
				float3 worldViewDir : TEXCOORD2;
				float3 worldRefl : TEXCOORD3;
				SHADOW_COORDS(4)
            };

            fixed4 _Color;
			fixed4 _ReflectionColor;
			float _ReflectionAmount;
			samplerCUBE _Cubemap;

            v2f vert (appdata v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.worldNormal = UnityObjectToWorldNormal(v.normal);
				o.worldPos = mul(unity_ObjectToWorld, v.vertex);
				o.worldViewDir = UnityWorldSpaceViewDir(o.worldPos);
				o.worldRefl = reflect(-o.worldViewDir, o.worldNormal);
				TRANSFER_SHADOW(o);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
				fixed3 worldNormal = normalize(i.worldNormal);
				fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));
				fixed3 worldViewDir = normalize(i.worldViewDir);
				fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz;

				UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos);

				fixed3 reflection = texCUBE(_Cubemap, i.worldRefl).rgb * _ReflectionColor.rgb;
				fixed3 diffuse = _LightColor0.rgb * _Color.rgb * saturate(dot(worldNormal, worldLightDir));
				fixed3 color = ambient + lerp(diffuse, reflection, _ReflectionAmount) * atten;
				return fixed4(color, 1.0);
            }
            ENDCG
        }
    }FallBack "Reflective/VertexLit"
}

　　然后添加上從茶壺渲染的Cubemap，這就是對應的效果，

然后我們來到了折射，有點像杯子（圓柱形）里面有水，在杯子后面有一支筆，那透過水看到的筆會是什么樣的呢？可以先試一試可以發現是鏡像的而且在中間發生比較大彎折，

我們這里要引出一個定理就是斯涅爾定理來計算折射角，

定律中的角度分別是入射角以及折射角，對應的n1、n2是對應介質的折射率，所以當我們有了公式那么我們需要什么呢，就是n1/n2即_RefractRatio來表示折射率之比，還有就是折射強度_RefractAmount，以及對應的顏色_Color以及_RefractColor，以及我們的環境映射_Cubemap，

o.worldRefr = refract(-normalize(o.worldViewDir), normalize(o.worldNormal), _RefractRatio); //vert
fixed3 refraction = texCUBE(_Cubemap, i.worldRefr).rgb * _RefractionColor.rgb; //frag
fixed3 color = ambient + lerp(diffuse, refraction, _RefractAmount) * atten; //frag

　　其中重要的就是refract(float3 i, float3 n, float _RefractRatio) 對應的就是入射角、法線、以及入射介質折射率/折射介質折射率的比值，注意前面兩個變數需要歸一化，回傳折射方向，第二個就是對應的texCube環境映射取樣，

// Upgrade NOTE: replaced '_Object2World' with 'unity_ObjectToWorld'

Shader "Unlit/10-2Refraction"
{
    Properties
    {
        _Color ("Color", Color) = (1,1,1,1)
		_RefractionColor ("RefractionColor", Color) = (1,1,1,1)
		_RefractAmount ("RefractAmount", Range(0,1)) = 1
		_RefractRatio ("RefractRatio", Range(0.1,1)) = 0.5
		_Cubemap ("Cubemap", Cube) = "_Skybox" {}
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" "Queue"="Geometry" }

        Pass
        {
			Tags { "LightMode"="ForwardBase" }
            CGPROGRAM
			#pragma multi_compile_fwdbase
            #pragma vertex vert
            #pragma fragment frag
            #include "Lighting.cginc"
			#include "AutoLight.cginc"
            #include "UnityCG.cginc"

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

            struct v2f
            {
                float4 pos : SV_POSITION;
				float3 worldPos : TEXCOORD0;
				float3 worldNormal : TEXCOORD1;
				float3 worldViewDir : TEXCOORD2;
				float3 worldRefr : TEXCOORD3;
				SHADOW_COORDS(4)
            };

            fixed4 _Color;
			fixed4 _RefractionColor;
			float _RefractAmount;
			float _RefractRatio;
			samplerCUBE _Cubemap;

            v2f vert (appdata v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.worldNormal = UnityObjectToWorldNormal(v.normal);
				o.worldPos = mul(unity_ObjectToWorld, v.vertex);
				o.worldViewDir = UnityWorldSpaceViewDir(o.worldPos);
				o.worldRefr = refract(-normalize(o.worldViewDir), normalize(o.worldNormal), _RefractRatio);
				TRANSFER_SHADOW(o);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                fixed3 worldNormal = normalize(i.worldNormal);
				fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));
				fixed3 worldViewDir = normalize(i.worldViewDir);

				fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz;
				fixed3 diffuse = _LightColor0.rgb * _Color.rgb * saturate(dot(worldNormal, worldLightDir));
				fixed3 refraction = texCUBE(_Cubemap, i.worldRefr).rgb * _RefractionColor.rgb;
				UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos);
				fixed3 color = ambient + lerp(diffuse, refraction, _RefractAmount) * atten;
				return fixed4(color, 1.0);
            }
            ENDCG
        }
    }FallBack "Reflective/VertexLit"
}

　　調整_RefractRatio到0.67就是水的折射率，效果如下，

接下來就是最后一個應用——菲涅耳反射（Fresnel），非常常用的反射并且應用相當廣泛，根據視角方向控制反射程度，實際上在描述一種光學現象就是，當光線照射到物體上面，一部分光線會發生反射，一部分進入物體內部發生折射或是散射，被反射的光與入射光之間存在一定的比率關系，這個比率關系可以通過菲涅耳進行計算，現實中的例子比如站在湖邊（海邊水可能不是很清澈）湖邊的水是可以清澈見底的但是往湖中心看去卻看不見底，于是我們就要引入公式，但因為菲涅耳等式是十分復雜的，于是我們就用近似等式來代替，Schlick菲涅耳近似等式，

F_Schlick(v, n) = F₀ + (1 - F₀)(1 - dot(v, n))⁵

對應的F0是強度、v是視角方向、n是法線方向，還有一個是Empricial 菲涅耳近似等式，

F_Empricial(v, n) = max(0, min(1, bias + scale * (1- dot(v, n)^power)))

然后我們主要用第一個公式，我們需要強度_FresnelScale，以及_Color,和環境映射_Cubemap，

fixed fresnel = _FresnelScale + (1 - _FresnelScale) * pow(1 - dot(worldNormal, worldViewDir), 5); //frag
fixed3 color = ambient + lerp(diffuse, reflection, saturate(fresnel)) * atten; //frag

　　這里就要用近似公式計算反射的光（采用環境映射_Cubemap采樣結果的顏色）與入射光(漫反射光)的比例，然后用lerp來確定程度，

// Upgrade NOTE: replaced '_Object2World' with 'unity_ObjectToWorld'

Shader "Unlit/10-3Fresnel"
{
    Properties
    {
        _Color ("Color", Color) = (1,1,1,1)
		_FresnelScale ("FresnelScale", Range(0,1)) = 0.5
		_Cubemap ("Cubemap", Cube) = "_Skybox" {}
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" "Queue"="Geometry" }
        Pass
        {
			Tags { "LightMode"="ForwardBase" }
            CGPROGRAM

			#pragma multi_compile_fwdbase
            #pragma vertex vert
            #pragma fragment frag
			#include "Lighting.cginc"
			#include "AutoLight.cginc"
            #include "UnityCG.cginc"

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

            struct v2f
            {
                float4 pos : SV_POSITION;
				float3 worldPos : TEXCOORD0;
				float3 worldNormal : TEXCOORD1;
				float3 worldViewDir : TEXCOORD2;
				float3 worldRefl : TEXCOORD3;
				SHADOW_COORDS(4)
            };

            fixed4 _Color;
			float _FresnelScale;
			samplerCUBE _Cubemap;

            v2f vert (appdata v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.worldNormal = UnityObjectToWorldNormal(v.normal);
				o.worldPos = mul(unity_ObjectToWorld, v.vertex);
				o.worldViewDir = UnityWorldSpaceViewDir(o.worldPos);
				o.worldRefl = reflect(-o.worldViewDir, o.worldNormal);
				TRANSFER_SHADOW(o);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                fixed3 worldNormal = normalize(i.worldNormal);
				fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));
				fixed3 worldViewDir = normalize(i.worldViewDir);

				fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz;

				UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos);

				fixed3 reflection = texCUBE(_Cubemap, i.worldRefl).rgb;
				fixed fresnel = _FresnelScale + (1 - _FresnelScale) * pow(1 - dot(worldNormal, worldViewDir), 5);
				fixed3 diffuse = _LightColor0.rgb * _Color.rgb * saturate(dot(worldNormal, worldLightDir));
				fixed3 color = ambient + lerp(diffuse, reflection, saturate(fresnel)) * atten;
				return fixed4(color, 1.0);
            }
            ENDCG
        }
    }FallBack "Reflective/VertexLit"
}

　　當_FresnelScale等于1的時候，是一個全反射的物體，當_FresnelScale等于0的時候是一個具有邊緣光照效果的漫反射物體，我們可以想象一下就是邊緣與視角的點乘結果，因為兩個方向近乎垂直，所以fresnel的值為1也就是邊緣還是全反射狀態（？單純自己運算想象），后面一些有趣的邊緣操作就從這里開始，

二、渲染紋理

渲染目標紋理，把整個三維場景渲染到一個中間緩沖中（不是幀緩沖/后備緩沖），與之相關的是多重渲染目標，場景同時渲染到多個渲染目標紋理中，延遲渲染就是其中一種，

通常使用渲染紋理的兩個方法，1.Camera的Target Texture，rt將會實時的更新 2.GrabPass/OnRenderImage 獲取當前螢屏影像，與當前螢屏解析度相同，

概念有點多，有點沒有辦法理解，但下面這兩個效果我之前都有涉及過，第一個就是鏡子的效果，幾個要點就是這里的鏡子效果十分的苛刻，（？后面我自己來研究研究這個）首先就是因為是鏡子也就是從里面相對的位置有一個攝像機，把攝像機的內容傳到平面上，所以要新建一個攝像機在里面，然后給他添加rt，然后我之前是把攝像機放在鏡子前面，然后就出現了下面這種無限套娃的情況，問題出現在把鏡子也給渲染進去，有兩個解決方法，1.改變新攝像頭的ClippingPlanes讓它不渲染螢屏 2.設定鏡子的layer 并在新攝像機的CullingMask設定不渲染該層，但有沒有發現就是下面這個還是錯的，因為水壺在左邊，但鏡子的在右邊，所以應該從鏡子背后去放置新的攝像機/這樣才能照到背后的影像，

Shader "Unlit/10-4Mirror"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" "Queue"="Geometry" }

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            // make fog work
            #pragma multi_compile_fog

            #include "UnityCG.cginc"
			#include "Lighting.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float3 texcoord : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 pos : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;

            v2f vert (appdata v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv = v.texcoord;
                o.uv.x = 1 - o.uv.x;
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                return tex2D(_MainTex, i.uv);
            }
            ENDCG
        }
    }FallBack Off
}

　　上面的shader主要就是水平翻轉影像，

然后就是玻璃效果，采用了GrabPass，在URP里面不適用，在使用GrabPass的時候要小心渲染佇列，GrabPass通常渲染透明物體，雖然沒有混合操作，但也要把佇列設成Transparent，RenderType設成Opaque是為了在使用著色器替換時能被正確渲染，

我們一樣先從我們需要什么開始，首先是玻璃可能有對應的顏色，有色玻璃，那么可能需要圖或者是色彩，我們這里用的是圖_MainTex，然后最重要的就是玻璃表面的凹凸感，凹凸感在前面Cp7里面有說到就需要法線貼圖_BumpMap，以及變形強度_Distortion，最后還有就是透過玻璃的折射以及反射的比例_RefractAmount，

GrabPass { "_RefractionTex" } 
sampler2D _RefractionTex;
float4 _RefractionTex_TexelSize;
o.scrPos = ComputeGrabScreenPos(o.pos); //vert
//frag
float2 offset = bump.xy * _Distortion * _RefractionTex_TexelSize.xy;
i.scrPos.xy = offset + i.scrPos.xy;
fixed3 refrCol = tex2D(_RefractionTex, i.scrPos.xy/i.scrPos.w).rgb;
bump = normalize(half3(dot(i.TtoW0.xyz, bump), dot(i.TtoW1.xyz, bump), dot(i.TtoW2.xyz, bump)));
fixed3 reflDir = reflect(-worldViewDir, bump);
fixed3 finalColor = reflCol * (1 - _RefractAmount) + refrCol * _RefractAmount;

　　然后上面第一行就是GrabPass的宣告把螢屏截圖放到_RefractionTex里面，然后一樣需要為這個貼圖宣告變數，ComputeGrabScreenPos（留一個？我也不是很懂ComputeScreenPos以及它的區別）書上說是截取應被抓取的螢屏采樣坐標，類似于確定螢屏位置？然后下面就是_Distortion變形強度越大背后物體變形程度越大，_RefractionTex_TexelSize.xy是用來對螢屏坐標進行偏移，然后我們要把切線空間下的切線通過轉移矩陣轉移到世界空間，用于對_Cubemap采樣，最后就是反射以及折射的顏色比例，

效果也是相當真實了，然后就是要不要宣告GrabPass，1.如果直接使用就會存在_GrabTexture，當場景中有多個物體使用GrabPass就會得到不同的圖形，取決于他們的渲染佇列 2.宣告了就可以一起用，而且只用抓取一次

GrabPass以及Rt兩者相比rt的效率高，而且GrabPass很多情況下不適用因為需要直接讀取Cpu后備緩沖，就破壞了Cpu和Gpu的并行性，就是順序是Cpu然后是Gpu，GrabPass是在Gpu的步驟，（？是這樣吧）所以接下來就是CommandBuffers的使用，（這里留一個拓展研究？后面會另外寫一個來研究這個，因為這個是在腳本里面直接獲取的正確方式）

三、程式紋理

就是計算機生成影像，這里我沒有什么理解就不寫了，有興趣的可以繼續研究，但書里的實在是不感興趣，

感謝你讀到這里，又留下了很多坑，Cheers！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/564.html

標籤：其他

上一篇：three.js中的矩陣計算

下一篇：Django 原始碼閱讀筆記（詳細視圖）

高級紋理以及復雜而真實的應用——ShaderCp10