片元着色器和抓取通道

第六章 片元着色器和抓取通道 到目前为止,我们都在折腾 表面着色器(Surface Shaders) 。它的设计初衷是简化我们的着色器编码工作,为艺术家提供一个有意义的工具。但是如果想让我们的着色器知识更上一层楼,我们就要前往 顶点(Vertex) 和 片元(Fragment) 着色器的知识岛屿冒险啦。 在这一章节,我们将会学习下面的一些知识点: 理解顶点和片元着色器 使用抓取通道 实现一个玻璃效果的着色器 在2D游戏中实现水效果的着色器 介绍 跟 表面着色器(Surface Shaders) 相比,顶点 和 片元 着色器少了一些诸如,光是如何在物体表面反射的物理属性信息。所谓有失必有得,这样的话顶点和片元着色器就没有了物理规则的限制并且特别适合实现非真实的效果。这个章节将集中讲抓取通道的技术,这些技术可以让着色器来模拟形变效果。 理解顶点和片元着色器 理解顶点和片元着色器最好的方法就是你自己亲自创建一个。在这个知识点我们将展示如何编写一个这样的着色器,该着色器简单的将一张纹理应用到一个模型上并且通过给定的颜色进行乘积运算,效果就如同下图一样: 这里展示的着色器非常的简单,只是作为学习其他顶点和片元着色器基础。 始前准备 对于这个知识点,我们将需要一个新的着色器。我们按照下面的步骤来: 1.创建一个新的着色器。 2.创建一个新的材质并且把着色器应用于该材质。 操作步骤 在前面的所有章节中,我们总是能在 表面着色器(Surface Shaders) 的基础上进行修改。但在这里就不能再那样做了,因为表面着色器和片元着色器在结构上是不一样的。我们需要做如下的修改: 删除着色器上的所有属性,然后用下面的属性替换: Color ("Color", Color) = (1,0,0,1) // Red _MainTex ("Base texture", 2D) = "white" {} 删除 SubShader 块中的所有代码,然后用下面的代码替换: Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag half4 _Color; sampler2D _MainTex; struct vertInput { float4 pos : POSITION; float2 texcoord : TEXCOORD0; }; struct vertOutput { float4 pos : SV_POSITION; float2 texcoord : TEXCOORD0; }; vertOutput vert(vertInput input) { vertOutput o; o.pos = UnityObjectToClipPos(input.pos); o.texcoord = input.texcoord; return o; } half4 frag(vertOutput output) : COLOR { half4 mainColour = tex2D(_MainTex, output.texcoord); return mainColour * _Color; } ENDCG } 后面所有的顶点和片元着色器都会以此为基础。 ...

December 3, 2022 · 2 min · 300 words · Link

XLua框架,Unity3D,WEBGL,报错ArgumentException-Destination-array-was-not-long-enough

Unity使用XLua框架,打WEBGL包,运行时报错:ArgumentException: Destination array was not long enough 具体的错误如下: dangerArgumentException: Destination array was not long enough. Check destIndex and length, and the array's lower bounds {: .prompt-danger } 由于我们UI使用的时FGUI,所以这个错误的具体表现是: 错误表现 在编辑器中运行良好,没有任何问题 打包成WEBGL运行就报这个错,但不是每次都报错, 如果报错,那么UI逻辑是正常的,如果不报错,那么UI逻辑异常,比如按钮的绑定事件错乱 解决办法 我在XLua的Issue中,找到了大佬的解决办法。是XLua在释放资源时的Lock操作引起的。原issue地址。但是大佬的贴的代码,不能直接运行,需要稍加修改才行【大佬可能给的时伪代码】。我在这里把解决步骤归纳一下: 1.添加一个非锁互斥队列【也可以不用添加,就用系统的也行】: using System.Threading; namespace XLua { public class LockFreeQueue<T> { internal class SingleLinkNode<U> where U : T { public SingleLinkNode<U> Next; public U Item; } static private bool CAS<T>(ref T location, T comparand, T newValue) where T : class { return comparand == Interlocked.CompareExchange(ref location, newValue, comparand); } SingleLinkNode<T> head; SingleLinkNode<T> tail; int count; public int Count { get { return count; } } public bool IsEmpty { get { return count <= 0; } } public LockFreeQueue() { head = new SingleLinkNode<T>(); tail = head; count = 0; } public void Enqueue(T item) { SingleLinkNode<T> oldTail = null; SingleLinkNode<T> oldTailNext; SingleLinkNode<T> newNode = new SingleLinkNode<T>(); newNode.Item = item; bool newNodeAdded = false; while (!newNodeAdded) { oldTail = tail; oldTailNext = oldTail.Next; if (tail == oldTail) { if (oldTailNext == null) newNodeAdded = CAS<SingleLinkNode<T>>(ref tail.Next, null, newNode); else CAS<SingleLinkNode<T>>(ref tail, oldTail, oldTailNext); } } CAS<SingleLinkNode<T>>(ref tail, oldTail, newNode); Interlocked.Increment(ref count); } public bool TryDequeue(out T item) { item = default(T); SingleLinkNode<T> oldHead = null; bool haveAdvancedHead = false; while (!haveAdvancedHead) { oldHead = head; SingleLinkNode<T> oldTail = tail; SingleLinkNode<T> oldHeadNext = oldHead.Next; if (oldHead == head) { if (oldHead == oldTail) { if (oldHeadNext == null) { return false; } CAS<SingleLinkNode<T>>(ref tail, oldTail, oldHeadNext); } else { item = oldHeadNext.Item; haveAdvancedHead = CAS<SingleLinkNode<T>>(ref head, oldHead, oldHeadNext); } } } Interlocked.Decrement(ref count); return true; } public T Dequeue() { T result; if (TryDequeue(out result)) return result; return default(T); } public void Clear() { while (Count > 0) { Dequeue(); } } } } 2.修改XLua源码,添加条件编译,让WEBGL在释放引用的时候不加锁 改下面几个地方: ...

October 31, 2022 · 2 min · 376 words · Link

实现范围体爆炸

实现范围体爆炸 对于实现游戏中的艺术效果,有时候需要在画质和运行效率上进行巧妙的权衡。在实现爆炸效果上尤其如此;因为它是很多游戏的核心效果,但是在它之后的一些物理计算通常都会超过现代计算机的算力。爆炸本质上就是一团温度非常高的火红气体;所以正确模拟它的唯一方式就是在游戏中用流体模拟来模拟它。正如你所想的一样,这在运行时是不可行的,在很多的游戏中都是通过粒子来模拟。当一个物体爆炸的时候,通常会同时产生很多的火花,烟雾和一些散落的碎片,这样可以获得一个比较像的爆炸。不幸的是,这种模拟方法很容易被看破而且可能不是很真实。这里我们会了解一种折中的技术来实现爆炸效果,并且画质更好:范围体爆炸(volumetric explosions) 。这个知识点背后的思考是我们不再把爆炸当作是一系列粒子的模拟;它们现在进阶到3D物体了,而不仅仅是扁平的2D贴图。 始前准备 我们通过下面的几个步骤来讲解这个知识点: 为这个效果创建一个新的着色器 创建一个新的材质,并且关联该着色器 把这个材质关联到一个球体模型上。你可以在编辑器上直接创建一个球体模型,通过菜单 GameObject | 3D Object | Sphere 。 注意 使用标准的Unity球体就可以很好的演示这个知识点,但是如果你想要更大范围的爆炸,那么你可能需要面数更多的球体。事实上,顶点函数只能修改网格的顶点。所有其他的点都可以通过修改相邻顶点的位置的方式来修改它们。顶点数越少,那么爆炸效果的精细度也就越低。 这个知识点中,你需要一个 渐变纹理(ramp texture) ,这个纹理需要有你爆炸的所有颜色梯度。你可以用GIMP或者PhotoShop工具创建一个跟下面类似的纹理: 当你有了这个图片后,把它导入到你的Unity中。然后在 检查器面板(Inspector) 中,确保 Filter Mode 设置为 Bilinear ,然后 Wrap Mode 设置为 Clamp 。这两个设置是为了确保对渐变纹理平滑采样。 最后,你还需要一张 噪音纹理(noisy texture) 。你可以在网上搜索免费的噪音纹理。一般我们都使用 Perlin noise 。【这里我自己找到一个网站http://kitfox.com/projects/perlinNoiseMaker/】 操作步骤 这个效果我们分两步来实现:通过顶点函数改变几何形状,通过表面函数给与正确的颜色。这两个步骤如下: 添加下面的属性到着色器中: _RampTex("Color Ramp", 2D) = "white" {} _RampOffset("Ramp offset", Range(-0.5,0.5))= 0 _NoiseTex("Noise tex", 2D) = "gray" {} _Period("Period", Range(0,1)) = 0.5 _Amount("_Amount", Range(0, 1.0)) = 0.1 _ClipRange("ClipRange", Range(0,1)) = 1 添加相应变量,让着色器的Cg代码可以访问到它们: sampler2D _RampTex; half _RampOffset; sampler2D _NoiseTex; float _Period; half _Amount; half _ClipRange; 修改 输入结构体(Input structure) ,这样可以让它接收渐变纹理的UV数据: struct Input { float2 uv_NoiseTex; }; 添加下面的顶点函数: void vert(inout appdata_full v) { float3 disp = tex2Dlod(_NoiseTex, float4(v.texcoord.xy,0,0)); float time = sin(_Time[3] *_Period + disp.r*10); v.vertex.xyz += v.normal * disp.r * _Amount * time; } 添加下面的的表面函数: void surf(Input IN, inout SurfaceOutput o) { float3 noise = tex2D(_NoiseTex, IN.uv_NoiseTex); float n = saturate(noise.r + _RampOffset); clip(_ClipRange - n); half4 c = tex2D(_RampTex, float2(n,0.5)); o.Albedo = c.rgb; o.Emission = c.rgb*c.a; } 我们直接通过 #pragma 来指定我们要使用的顶点函数,通过添加 nolightmap 参数来阻止Unity添加真实光照到我们的爆炸效果中: #pragma surface surf Lambert vertex:vert nolightmap 最后一步,给我们球体模型选择我们刚刚创建的材质,然后在 检查器面板(Inspector) 中,为我们的材质添加噪音纹理和渐变纹理。这是一个动画材质,也就是说会随着时间变化。你可以观察材质的变化,只要在编辑器的 场景窗口(Scene Window) 中点击 Animated Materials : 原理介绍 在学习这个知识点的时候,如果你了解 表面着色器(Surface Shaders) 和 顶点修饰(vertex modifiers) 的工作原理。这个效果背后的主要思路是以一种混乱的方式修改这个圆球几何图形的表面,然后使它看起来像真正的爆炸。下图所示是在Unity编辑器内这种爆炸看起来的样子。可以看到这个网格已经发生了明显的畸变: ...

October 23, 2022 · 2 min · 287 words · Link

实现下雪效果着色器

实现下雪效果着色器 在游戏中模拟下雪效果一直都是一件有挑战的事情。大部分的游戏都会简单的直接在模型的纹理上包含雪,让这些模型看起来雪白。然而要是其中某个模型开始旋转了呢?雪并不是敷衍了事的表面工作;它应该被当做是一些材料的合理的堆积【意思是物体表面 的雪是雪花一点一点堆积起来的,而不是简简单单的给它一张白色的贴图】。在这个知识点中将会向你展示如何用一个着色器让你的模型看起来有种下雪的样子。 要完成这个效果有两个步骤。首先,对于朝向天空的三角面我们给它白色。其次,通过挤压顶点来模拟雪的堆积效果。你可以从下图看到最终的效果: 注意 本知识点并无意去创建那种超真实的下雪效果。它只是抛砖引玉,但在你的游戏当中,最终的效果定位,还是取决于你们的艺术家们,通过他们设置正确的纹理和参数来达到你的要求。 始前准备 这个效果完全基于着色器来实现,所以请按照下面的步骤操作: 1.为雪的效果创建一个新的着色器。 2.为这个着色器创建一个新的材质。 3.把这个材质添加到你想表现雪的效果的模型上去。 操作步骤 为了创建下雪的效果,请打开你的着色器,然后做以下的修改: 1.把下面的属性块替换掉你原来的着色器属性块: _MainColor("Main Color", Color) = (1.0,1.0,1.0,1.0) _MainTex("Base (RGB)", 2D) = "white" {} _Bump("Bump", 2D) = "bump" {} _Snow("Level of snow", Range(1, -1)) = 1 _SnowColor("Color of snow", Color) = (1.0,1.0,1.0,1.0) _SnowDirection("Direction of snow", Vector) = (0,1,0) _SnowDepth("Depth of snow", Range(0,1)) = 0 2.添加与属性块对应的变量: sampler2D _MainTex; sampler2D _Bump; float _Snow; float4 _SnowColor; float4 _MainColor; float4 _SnowDirection; float _SnowDepth; 3.用下面的代码替换掉原来的 输入结构体(Input structure) struct Input { float2 uv_MainTex; float2 uv_Bump; float3 worldNormal; INTERNAL_DATA }; 4.用下面的表面函数替换掉原有的表面函数。它会让模型着雪的部分变成白色: void surf(Input IN, inout SurfaceOutputStandard o) { half4 c = tex2D(_MainTex, IN.uv_MainTex); o.Normal = UnpackNormal(tex2D(_Bump, IN.uv_Bump)); if (dot(WorldNormalVector(IN, o.Normal), _SnowDirection.xyz) >= _Snow) o.Albedo = _SnowColor.rgb; else o.Albedo = c.rgb * _MainColor; o.Alpha = 1; } 5.配置 #pragma 预编译指令,让我们可以使用顶点修饰: #pragma surface surf Standard vertex:vert 6.添加下面的顶点修饰,这样就可以对被雪覆盖部分的顶点进行挤压: void vert(inout appdata_full v) { float4 sn = mul(UNITY_MATRIX_IT_MV, _SnowDirection); if (dot(v.normal, sn.xyz) >= _Snow) v.vertex.xyz += (sn.xyz + v.normal) * _SnowDepth * _Snow; } 现在你可以去你的模型材质 检查器面板(Inspector tab) 查看,然后通过调节上面的参数,你可以调节雪的覆盖面积和厚度。 ...

July 17, 2022 · 2 min · 233 words · Link

模型挤压

模型挤压 重复是游戏当中最要命的一个问题之一。在游戏中创建新内容是一项费时的任务,当你要创建成千上万的敌人时,那么有很大的可能这些敌人有可能会看起来一样。这个时候利用着色器修改模型的基本几何图形,从而让模型产生不同的变化,可以说是一种 相对来说性能较好的方法。这个知识点中我们会给你演示一种叫做 法线挤压(normal extrusion) 的技术,可以用来创建胖的或者瘦的模型,就比如下图所示的来自Unity的demo中的士兵: 始前准备 在这个知识点中,我们需要获取要挤压的模型的着色器。获得该着色器后,复制它,因为这样能安全的编辑拷贝的着色器。我们可以按照下面的步骤进行: 1.找到模型使用的着色器[原着色器就是一个标准的着色器,没有找到就自己新建一个也行],通过快捷键 Ctrl + D 复制它。 2.复制模型原有的材质,并且将之前复制的着色器添加给它。 3.把这个新的材质添加到模型上,并且开始编辑它。 为了达到效果,你的模型还要有 法线(normals) 。 操作步骤 为了创建这个效果,我们先来编辑刚刚复制的着色器: 1.首先给我们的着色器添加一个属性,用于调整压缩效果。我们这里的调节范围是从 -0.00005 到 0.00005 【书上是-1到1,但实际上书上的范围太大了,各位可以自己试试】,当然你可以根据自己的需要调节这个范围【 _MainTex 是需要的,因为人物是需要贴图的。】: _MainTex("Texture", 2D) = "white" {} _Amount ("Extrusion Amount", Range(-0.00005, 0.00005)) = 0 2.我们的属性和变量是成对出现的,在着色器中定义下面的变量: float _Amount; 3.修改 pragma 预编译指令让Unity知道我们要使用 顶点修饰(vertex modifier) 。然后在它后面添加 vertex:function_name ,function_name就是你自定义的方法名,当我我们这里叫 vert: #pragma surface surf Lambert vertex:vert 4.添加下面的顶点修改代码: void vert (inout appdata_full v) { v.vertex.xyz += v.normal * _Amount; } 5.这样着色器就写好了;这样你就可以在 检查器面板(Inspactor) 中通过修改材质上的 Amount 参数来控制士兵的胖瘦了。【书本写的不清楚,其实还有贴图的代码,作者没有交代,所以完整的代码如下:】 Shader "Custom/Normal Extrusion" { Properties { _MainTex ("Albedo (RGB)", 2D) = "white" {} _Amount ("Extrusion Amount", Range(-0.00005, 0.00005)) = 0 } SubShader { Tags { "RenderType"="Opaque" } LOD 200 CGPROGRAM // Physically based Standard lighting model, and enable shadows on all light types #pragma surface surf Lambert vertex:vert // Use shader model 3.0 target, to get nicer looking lighting #pragma target 3.0 sampler2D _MainTex; struct Input { float2 uv_MainTex; }; float _Amount; // Add instancing support for this shader. You need to check 'Enable Instancing' on materials that use the shader. // See https://docs.unity3d.com/Manual/GPUInstancing.html for more information about instancing. // #pragma instancing_options assumeuniformscaling UNITY_INSTANCING_CBUFFER_START(Props) // put more per-instance properties here UNITY_INSTANCING_CBUFFER_END void vert (inout appdata_full v) { v.vertex.xyz += v.normal * _Amount; } void surf (Input IN, inout SurfaceOutput o) { // Albedo comes from a texture tinted by color o.Albedo = tex2D(_MainTex, IN.uv_MainTex).rgb; } ENDCG } FallBack "Diffuse" } 原理介绍 表面着色器(Surface shader) 分两步来工作。在前面的章节中,我们只是探索了它最后一个步骤:表面函数(surface function。这里我们接触了另一种函数:顶点修饰(vertex modifier) 。它接收一个顶点的数据结构 (通常这个数据结构叫做 appdata_full )并且对它进行转变。它让我们对于模型的几何图形做各种视觉效果给与很大的自由度。我们通过在表面着色器的预编译指令 #pragma 那里添加 vertex:vert 来告知GPU 我们添加了 自己的顶点函数。你可以查看 第六章,片元着色器和抓取通道 来学习怎么在顶点着色器和片元着色器中定义顶点修饰。 ...

July 11, 2022 · 2 min · 358 words · Link

对表面着色器中的顶点使用动画

对表面着色器中的顶点使用动画 我们现在知道了如何访问每个顶点数据的一些基础知识,这次让我们更进一步的了解一些其他类型的数据和顶点的位置。 使用顶点函数,我们可以访问网格中每个顶点位置。具体来说就是可以在着色器处理渲染的过程中,这些函数可以让我们单独对每一个顶点进行修改。 这个知识点当中,我们会创建一个着色器,并且用三角函数的正弦函数( sine wave )来修改网格当中的每一个顶点。该技术可以用来创建旗子飘动或者海浪等物体动画。 始前准备 我们把资源都放一块儿,这样方便我们为顶点着色器( Vertex Shader )编写代码: 1.创建一个新的场景,并且创建一个平面网格( plane mesh ),把它放在场景正中央,位置归零。 2.然后创建一个新的材质和着色器。 3.最后,把着色器挂到材质上,在把材质挂到平面网格上。 最终,你的场景看起来应该跟下图一样: 操作步骤 场景创建好后,鼠标双击打开刚刚我们创建的着色器: 1.让我们给着色器的属性块下面的预设值: Properties { _MainTex ("Base (RGB)", 2D) = "white" {} _tintAmount ("Tint Amount", Range(0,1)) = 0.5 _ColorA ("Color A", Color) = (1,1,1,1) _ColorB ("Color B", Color) = (1,1,1,1) _Speed ("Wave Speed", Range(0.1, 80)) = 5 _Frequency ("Wave Frequency", Range(0, 5)) = 2 _Amplitude ("Wave Amplitude", Range(-1, 1)) = 1 } 2.接下来我们通过下面的声明告诉Unity,我们需要使用顶点函数了,添加声明的位置在: #pragma statement: CGPROGRAM #pragma surface surf Lambert vertex:vert 3.为了访问属性块中的值,我们还要在 CGPROGRAM 块中声明与之对应的变量: sampler2D _MainTex; float4 _ColorA; float4 _ColorB; float _tintAmount; float _Speed; float _Frequency; float _Amplitude; float _OffsetVal; 4.我们也将使用顶点位置的变化作为 vert 颜色。因为这样我们可以顺便修改物体的颜色了: struct Input { float2 uv_MainTex; float3 vertColor; } 5.此时,我们要修改顶点的表现了,我们要使用到下面的正选函数和顶点函数,在我们的 Input Struct 后面添加如下代码: void vert(inout appdata_full v, out Input o) { float time = _Time * _Speed; float waveValueA = sin(time + v.vertex.x * _Frequency) * _Amplitude; v.vertex.xyz = float3(v.vertex.x, v.vertex.y + waveValueA, v.vertex.z); v.normal = normalize(float3(v.normal.x + waveValueA, v.normal.y,v.normal.z)); o.vertColor = float3(waveValueA,waveValueA,waveValueA); } 6.最后,我们要使用一个 lerp() 函数对两个颜色进行一个插值,这样我们就可以对新网格的波峰和波谷应用不同的颜色,为了获得这种表现,添加下面的代码让顶点函数起作用: void surf (Input IN, inout SurfaceOutput o) { half4 c = tex2D (_MainTex, IN.uv_MainTex); float3 tintColor = lerp(_ColorA, _ColorB, IN.vertColor).rgb; o.Albedo = c.rgb * (tintColor * _tintAmount); o.Alpha = c.a; } 当你完成了着色器的编写后,回到Unity并且等待着色器编译完成。当编译完成后,你就会看到如下图所示的情形: ...

July 9, 2022 · 1 min · 206 words · Link

顶点函数

第五章 顶点函数 着色器(shader) 这个术语最开始源于Cg领域,它主要用于模拟现实中的光照(阴影)在3D模型中的表现。而如今,着色器的用途远不止上面这些。它不仅可以定义物体的外观表现方式,还可以完全重新定义它们的形状。 如果你想学习如何通过着色器来修改3D模型的几何形状,这一章的内容非常适合你。 在这一章,你将会学习下面这些知识点: 在表面着色器(Surface Shader)中访问顶点颜色 对表面着色器中的顶点使用动画 模型挤压 实现下雪效果着色器 实现范围体爆炸 介绍 在第一章,创建你的第一个着色器 中,我们 解释了3D模型不仅仅是一些三角形的集合。每一个顶点都包含了要正确渲染这个模型所必须的一些数据。这一章,为了在着色中能使用这些数据,我们将探索如何访问这些信息。而且我们还将探索如何使用Cg代码对物体进行形变的具体细节。 在表面着色器中访问顶点颜色 在这个章节,让我们来看看如何在着色器中用顶点函数来访问这些模型的顶点信息。这些知识旨在让我利用模型顶点包含的信息元素来创造一些真正实用的和引人入胜的视觉效果。 顶点函数中的顶点能返回一些我们想要的信息。你可以用 float3 这类值来获得顶点的法线方向信息,顶点的位置信息。你甚至可以将颜色值保存在每个顶点中,并且用 float4 这类值来返回该颜色。这些将是这个知识点我们将要讲的东西。 我们需要理解在 表面着色器(Surface Shader) 中,如何将颜色信息保存到顶点中以及如何获取这些颜色信息。 始前准备 为了编写这个着色器,我们需要准备一些资源。下面这些步骤是我们创建这个顶点着色器(Vertex Shader)的准备和设置: 1.为了能够看见顶点颜色,我们需要一个顶点设置了颜色的模型。当然你可以用Unity来添加这些颜色,这样的话你不得不编写一个工具来单独的应用这些颜色,或者编写一些脚本来获取刚刚添加的颜色。但是在这里,我们简单的利用 Maya 来把颜色应用到我们的模型顶点上。但是现在这个模型你可以在这本书的支持页面获得https://www.packtpub.com/books/content/support【实际上这个地址根本没有这个模型,这本书的代码我放在这里了 本书的代码包 】 2.创建一个新的场景,并且把导入的模型放到场景中。 3.创建一个新的着色器和一个新的材质。完成创建后,把着色器添加到材质上,然后把材质添加到模型上。 你的场景看起来应该跟下面的屏幕截图一样: 操作步骤 随着我们的场景,着色器,材质这些创建好后,我们就可以开始为我们的着色器编写代码了。我们在编辑器的 Project 面板中双击我们创建的Shader打开它。然后跟着下面的步骤走: 1.因为我们创建的着色器很简单,所以在着色器的 属性(Properties) 块中没有必要包含任何属性。但我们仍然需要有一个全局的tint颜色,仅仅是为了跟书中的其他着色器形式上保持一致而已。在着色器的属性块中写入以下代码: Properties { _MainTint("Global Color Tint", Color) = (1,1,1,1) } 2.下面这一步中, 是告诉Unity我们将在着色器中包含一个顶点函数: CGPROGRAM #pragma surface surf Lambert vertex:vert 3.跟往常一样,如果我们在属性块中包含了属性,那么我们要确保在 CGPROGRAM 声明中定义与之对应的变量才行。我们在 #pragma 声明的正下方输入下面的代码: float4 _MainTint; 4.接下来我们要关注 输入结构体(Input struct) 。我们还要再定义一个新的变量,主要是给我们的 surf() 方法用,用来接收从 vert() 这个函数中返回的数据: ...

June 26, 2022 · 1 min · 205 words · Link

烘培场景中的光

烘培场景中的光 渲染光照的过程是非常消耗新能的。即使是目前最好的[state-of-the-art]1GPU,要准确的计算 光的运动(light transport) [是指光在物体表面之间反射]也要花好些小时。 为了在游戏中让这个过程可行,光的实时渲染是必须要有的。如今的游戏引擎会在画面和效率上采取一个合理的折中方案;大部分的计算都在一个叫 光烘焙(light baking) 过程中事先计算好了。这一个知识点将会讲解光烘焙是如何工作的并且你该如何充分的利用它。 始前准备 光的烘焙需要你先准备一个场景。里面要有一些几何体,当然光也一定要有。这个知识点我们会基于Unity的标准特性,所以没有必要创建新的着色器或者材质。为了更好的控制这个过程,你可能需要访问 Lighting 窗口。如果你没有看见这个窗口,可以通过菜单 Window | Lighting 打开,并且停靠到一个你方便使用的位置。 操作步骤 光的烘培需要一些自定义的配置。你需要做三个必要的独立步骤。 场景中静态几何体的配置 配置的时候必须按照下面的步骤: 确认好你的场景中所有不会改变位置,大小和材质的游戏物体。一般可能的是建筑物,墙,地形,道具,树木等等。 在场景中选择这些类型的游戏对象,并且在 检查器面板(Inspector tab) 中勾选 Static 这个勾选框,就如下图所示。如果任何一个被选择的对象有子对象,Unity编辑器会询问是否想把这些子对象也作为静态对象。如果它们也满足(固定的位置,大小和材质),则在弹出的对话框中选择 是,子对象也变为静态(Yes change children) : 如果想让光照即影响静态游戏对象又影响非静态游戏对象,请确认把 Baking 属性设置为 Mixed 。如果只希望影响到静态游戏对象,那么把它设置为 Baked 。 光探针的设置 在你的游戏场景中有些游戏对象是会移动的,比如主角,敌人和 NPC(non-playable characters) 。如果它们进入了一个被照亮的静态区域,那么你也许想要放置一些光照探针在他们的周围。为了做到这些,请按下面的操作步骤走: 在编辑器菜单中,依次选择 GameObject | Light | Light Probe Group 。一个名为 光探针组(Light Probe Group) 的新游戏对象就出现在 检查器面板(Inspector tab) 中了。 一旦你选中这个光探针组,八个相互链接球体会出现。点击选中它,并且在场景中移动它,让它尽可能把你的角色会进入的静态区域围起来。 下图展示的就是如何用光照探针把静态的办公区域空间给围起来的例子: 3. 选择会进入光照探针区域的移动游戏对象。 4. 在 检查面板(Inspector tab) 中,展开 渲染组件(renderer component) [通常是 网格渲染器(Mesh Renderer) ] 并且确认 Use Light Probes 这个选项被勾选了(如下图所示): ...

May 21, 2021 · 1 min · 133 words · Link

创建镜子和反射面

创建镜子和反射面 当我们从一定的角度看高光材质物体时,物体会反射光。然而可惜的是,即使是最精确的光照模型之一: 菲涅尔反射Fresnel reflection ,也不能完全准确的反射来自周围物体的光。前一个章节验证过的光照模型只考虑了一些光源,但是却忽略了来自其他表面的反射光。很显然,用目前我们学的关于着色的知识,来创建一面镜子是不可能的。但是 全局光照Global illumination 技术提供了这种可能性,这需要提供包含了周围光照信息的PBR着色器。 这就要求物体不仅需要有高光部分,还需要有依赖周围其他物体的真实的反射部分。实时的反射非常消耗性能并且需要一些自定义的设置和调整才能工作,它们可以用来创建类似高光的效果,就如下图所示: 始前准备 这个知识点中不会涉及新的着色器。恰恰相反,大部分的工作都可以直接在编辑器上完成。就像下面的步骤展示的那样: 创建一个新场景 然后在场景中创建一个 quad ,这个quad会用来作为镜子。 创建一个新的材质并且把它跟这个镜子关联起来。 把这个quad放在另一个游戏对象前面。 在Unity菜单中通过 GameObject | Light | Reflection Probe 的步骤创建一个 反射探针reflection probe 并且把它放在quad的前面。 操作步骤 如果正确的按照前面的步骤操作,那么在你的场景中间会有一个quad,靠近它还有一个反射探针。为了让它出现在镜子中,还需要做西面的这些改变: 把材质的着色器类型改成 Standard 并且把 Rendering Mode 设置成 Opaque 。【这里的属性英文不翻译把,因为Unity大部分人都是用的英文,我担心找不到】 把 Metallic 和 Smoothness 这两个的属性设置为1。你可以看到材质会很清晰的反射天空盒。 选择反射探针并且修改 Size 和 Probe Origin 直到它刚好在quad的前面,并且让探针包含你想反射的物体。 最后把 Type 改成 Realtime 。确定 Culling Mask 设置的是 Everything 。 这样的话,你的反射探针就设置好了,看起来就跟下图一样: 如果你的探针是用来做真正的镜子,那么你应该勾选 Box Projection 这个选项。如果你是用来做一些类似于亮晶晶的小金属碎片或者玻璃桌子,那么你就不应该勾选这个选项。 原理介绍 当着色器想要周围环境信息的时候,它自己提供了一个叫做 cube maps 的数据结构。它在第一章, 创建你的第一个着色器 简短的提及过,跟 Color ,2D ,Float 和 Vector 这些结构一样,都是Cg语言中的一种数据结构。笼统一点来说,cube maps 就是2D纹理的3D数据结构。它们表示从中心点看过来的360度的世界视角。 Unity5可以通过特殊的投影预览 cube maps ,如下图所示: ...

May 17, 2021 · 1 min · 117 words · Link

Unity 5中基于物理原理的渲染

第四章 Unity 5中基于物理原理的渲染 基于物理原理的渲染physically-based rendering 是Unity5中加入的最大的变化之一,也就是我们常说的 PBR 。前面的一些章节重复提到过它但是没有却没向大家过多的展现。如果你不仅想知道PBR的工作原理,还想搞明白如何构建它们,那么这一张正是你需要阅读的。 在这一章,你将会学习下面的几个知识点: 理解金属质感的设置 向PBR中添加透明度 创建镜子和反射面 烘培场景中的光 介绍 我们在 第三章 , 理解光照模型 中介绍了所有的光照模型,简单的讨论了一下光是如何表现的。在编写它们的时候 效率efficiency 是最重要的方面。实时渲染的开销是很大的,类似于 Lambertian 和 BlinnPhong 这样的光照模型技术,也仅仅是在模拟现实和性能开销中的折中方案。拥有了更加强劲的 GPU(graphics processing unit) 后,我们就可以编写更加精细的光照模型和渲染引擎,目的就是为了模拟光的真实行为。简单概括前面的来说,这就是PBR后面的哲学。正如它的名字所表达的那样, 它是尽可能的去接近真实的物理,来处理每一个不同材质,让他们看起来都不一样。不仅如此,PBR这个术语被广泛的用于市场营销,它更像是 艺术级的渲染(state-of-the-art rendering) ,而不是一个简单的技术。Unity5通过引入两个重要的改变,实现了PBR。首先是一个全新的光照模型(叫 Standard )。表面着色器允许开发人员指定材质的物理属性,但是他们却没有对它们应用任何的物理原理限制。PBR用新的光照模型来弥补了这个差距,应用了一些物理原理,比如 能量守恒(energy conservation) [一个物体反射的光线不可能多于接收的光线], 微表面散射(microsurface scattering) [粗糙表面比光滑表面的反射更没有规律], 菲涅尔反射(Fresnel reflectance) [高光反射出现在掠射角内],和 表面阻塞(surface occlusion) [一些角落的暗部和一些几何体很难照亮]。所有说的这方面,还有一些其他的,都被用来计算标准光照模型。第二方面让PBR开起来如此真实技术叫 全局光照(Global Illumination [GI]) ,它是对基于物理原理的光线传输的模拟。也就是说,如果这些物体是独立的实体,那么它们不会被绘制[不会反光只吸收光的的物体,这种绝对黑体是看不见的]。它们会影响最终的渲染效果,因为光线在碰到其他物体前首先会从它们身上反射。虽然在着色器中不会自动提及这方面,但是对于了解渲染引擎是如何工作来说是很重要的部分。然而令人难过的是,实时的精确模拟光线在物体表面到底是如何反弹,这已经超出了现代GPU的能力范围。Unity5做了一些很聪明的优化,即保持了视觉质量有没有牺牲性能。然而大部分的一些进阶技术(比如反射) 需要用户的输入。上面说的这些方面都会在本章介绍。 不过希望各位留意的是,即使是PBR或者GI这些技术也不能保证你的游戏可以获得照片级的画质。要获得照片级的画面是一项很有挑战性的工作,跟每一门艺术一样,需要非常专业和杰出的技巧。 理解金属质感的设置 Unity5提供了两种不同类型的PBR着色器; 它们指的是材质的 检查器面板(Inspector) 中的下拉列表中的 Standard 着色器和 Standard (Specular setup) 着色器。两者的主要区别在于前者为我们暴露了 Metallic 这个属性,而后者没有 Metallic ,但暴露了 Specular 这个属性。metallic 属性和specular 属性代表了初始化PBR材质不同方式。推动PBR的概念之一是提供给开发人员和艺术家一种有目的性的,基于物理相关的一些属性,让他们可以调整和把玩它们。 有些材质的属性更容易用来表示它们的质金属质感强度指标,而其他的另一些属性则直接于定义了光是如何反射的,也很重要。如果你过去使用过Unity4,那么对于 Standard (Specular setup) 着色器应该看起来更熟悉。这个知识点会教你如何有效的使用 金属质感设置(metallic setup) 。有个重点需要各位注意,金属质感的工作流不仅仅用于金属材质;它是根据表面的金属质感或者非金属质感来定义材质的视觉效果的一种方式。尽管呈现的是两种不同的类型的着色器,但这 金属(Metallic ) 和 高光(Specular) 这两种方案通常来说是相等的表示。 就像Unity文档中所展示的:http://docs.unity3d.com/Manual/StandardShaderMetallicVsSpecular.html,这两种设置都可以创建同样的材质(如下图所示): ...

March 15, 2021 · 1 min · 168 words · Link