這篇文章根大家分享一些LowPoly動(dòng)態(tài)效果的制作方法，由于使用的是uv采樣方式效率很高，手機(jī)也可以隨意使用，我們先來(lái)看一些效果的參考

本文將在Unity3D中還原這些效果,如果你學(xué)會(huì)后當(dāng)然可以在你喜歡的引擎中實(shí)現(xiàn)~如果一篇太長(zhǎng)有可能會(huì)分多篇，感興趣的可以關(guān)注我~

參考圖

完成效果

以往我們?cè)趯?shí)現(xiàn)多邊形漸變是多是遍歷定頂點(diǎn)修改vertexColor去實(shí)現(xiàn)，本效果將重UV下手

首先需要一個(gè)做一個(gè)特殊的uv，我將用maya舉例（當(dāng)然也可以請(qǐng)美術(shù)的小伙伴幫助制作Mesh）

我們首先需要這樣的一個(gè)面片

我們先以這個(gè)基礎(chǔ)的網(wǎng)格舉例，Windows -> UV Texture Editor 打開(kāi)uv 編輯器

這時(shí)uv是個(gè)樣子，我們需要將uv打斷，并將每個(gè)方格的uv 縮放為一個(gè)點(diǎn)（這就是本篇的重點(diǎn)了）也就是說(shuō)每個(gè)網(wǎng)格mesh上的面uv只有一個(gè)點(diǎn)大小，有很多方法可以實(shí)現(xiàn)，我講的方法不一定是最好的，大家可以大開(kāi)腦洞~

1.選中模型按鼠標(biāo)右鍵切換為點(diǎn)顯示

2.框選所有的點(diǎn)，然后EditMesh->DetachComponent (分離組件)

3.我們?cè)俅吻袚Q為物體模式

4.我們?cè)俅吸c(diǎn)擊菜單 Mesh-> Separate (分離Mesh)

其實(shí)我們上面的主要操作就是為了以線分割mesh將一個(gè)大面片分割成小面片

5.這時(shí)所有的小mesh 的中心點(diǎn)都在一起(也就是原來(lái)大mesh的中心點(diǎn))我們?nèi)x所有被縮小的mesh 進(jìn)行中心點(diǎn)恢復(fù) Modify-> CenterPivot

這時(shí)所有的小mesh的中心點(diǎn)都在自己的位置了，下面我們對(duì)他進(jìn)行縮放

6.在右邊通道欄我們將其縮放到 0.001后，點(diǎn)擊菜單 CreateUVs -> PlanarMapping，我們點(diǎn)擊后面的小方塊打開(kāi)選項(xiàng)設(shè)置，選中y 軸投射UV

這時(shí)uv 就變成點(diǎn)狀了 ，全選所有小mesh在右邊通道欄我們將mesh縮放恢復(fù)回來(lái)

7.現(xiàn)在點(diǎn)擊菜單欄 Mesh->Combine 將所有小mesh 組合到一起 ，這時(shí)點(diǎn)還沒(méi)有合并

8.切換為點(diǎn)模式 全選所有點(diǎn)，點(diǎn)擊菜單 EditMesh-> Merge ，這時(shí)mesh就恢復(fù)為一個(gè)整體了

UV 也已經(jīng)被我們處理為點(diǎn)狀 ，當(dāng)然我們可以使用腳本處理這個(gè)過(guò)程，下面是批處理腳本，選中模型后點(diǎn)擊 CreateUV 將會(huì)創(chuàng)建二套u(yù)v 并命名為lowPoly(需要注意一點(diǎn)，maya 中map1 對(duì)應(yīng)shader中 uv0，lowPoly對(duì)應(yīng) uv1，依次類推)

import sys import maya.cmds as cmd def detachPoly(firstObject,faces):#分離選中Mesh(kft) cmd.polyChipOff (firstObject +'.f[0:%d]'%faces,kft=False,dup=False) cmd.polySeparate (firstObject,rs=True)def centerPivot(allSelected,scaleValue):#恢復(fù)中心點(diǎn)/縮放for i in allSelected:cmd.xform(i, centerPivots=True) cmds.setAttr(i + "." + "scale", scaleValue, scaleValue,scaleValue, type="double3") def CreateUV(*args):selected = cmd.ls( selection=True )firstObject = selected[0]faces = cmd.polyEvaluate(firstObject,f=True)#獲取面數(shù)detachPoly(firstObject,faces)selected = cmd.ls(selection =True)centerPivot(selected,0.001)cmd.selectMode( component=True )for i in selected:cmds.select(i+'.f[0]', add=True ) #選中所有Meshcmd.polyProjection(type='Planar' ,md ='y',uvs ='lowPoly',ibd = True,cm =True) #投影uvcenterPivot(selected,1)cmd.polyUnite(selected,n = firstObject) #合并Meshcmd.polyMergeVertex(d = 0.1) #合并點(diǎn)cmd.DeleteAllHistory()def stripsCreate(*args):windowID = 'PointProcessing'if cmds.window(windowID, exists=1):cmds.deleteUI(windowID)cmds.window(windowID, title='UV PointProcessing', menuBar=1, h=100, w=200)cmds.columnLayout(adjustableColumn=1)cmds.button(label='Create UV', command=partial(CreateUV), h=50,w=100)cmds.columnLayout(adjustableColumn=1)cmds.showWindow(windowID)stripsCreate()

導(dǎo)出之前記得刪除所有的構(gòu)造歷史 Edit-> DeleteAllbyType->History

順便說(shuō)下maya的默認(rèn)單位是厘米，Unity是米，如果你想1：1 導(dǎo)出

記得在設(shè)置將maya 單位設(shè)置為米

這時(shí)就可以導(dǎo)入到Unity中，shader部分比較簡(jiǎn)單直接上代碼，需要注意的一點(diǎn)就是 由于我們uv是近似的一個(gè)點(diǎn)，如果想有平滑的過(guò)度效果 Mask圖不能壓縮 需要設(shè)置為RBG 24 ，因?yàn)閳D片分辨率不需要很大所以實(shí)際也占不了多少內(nèi)存

Shader "lowPolygon" {Properties {_Color ("Color", Color) = (0,0.1721497,3301887,1)_Color2("Color2", Color) = (0.2783019,0.6024179,1,1)_texture ("texture", 2D) = "white" {}_speed ("speed", Float ) = 5_tiling("tiling", Float) = 0.01}SubShader {Tags {"RenderType"="Opaque"}Pass {Name "FORWARD"Tags {"LightMode"="ForwardBase"}CGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"uniform float4 _TimeEditor;uniform float4 _Color, _Color2;uniform sampler2D _texture; uniform float4 _texture_ST;uniform float _speed, _tiling;struct VertexInput {float4 vertex : POSITION;float2 texcoord0 : TEXCOORD0;};struct VertexOutput {float4 pos : SV_POSITION;float2 uv0 : TEXCOORD0;};VertexOutput vert (VertexInput v) {VertexOutput o = (VertexOutput)0;o.uv0 = v.texcoord0;o.pos = UnityObjectToClipPos(v.vertex );return o;}float4 frag(VertexOutput i) : COLOR {float4 materialTime = _Time + _TimeEditor;float2 texUv = i.uv0+(materialTime.g *_speed)* _tiling;//mask需要四方連續(xù)float4 texture_var = tex2D(_texture,TRANSFORM_TEX(texUv, _texture));float3 emissive = lerp(_Color.rgb, _Color2.rgb,texture_var.r);return fixed4(emissive,1);}ENDCG}} }

將材質(zhì)賦予剛才導(dǎo)入的面片就是下面的效果

知乎視頻?www.zhihu.com

我們先來(lái)實(shí)現(xiàn)參考圖1 的效果 ，實(shí)際上我們只需要將上面的視頻中的效果增加一些漸變色就可以達(dá)到了，新增兩個(gè)Mask G通道 控制左右分色 B通道控制重中間向兩邊的壓暗區(qū)域

struct VertexInput {float4 vertex : POSITION;float2 texcoord0 : TEXCOORD0;float2 texcoord1 : TEXCOORD1;};struct VertexOutput {float4 pos : SV_POSITION;float2 uv0 : TEXCOORD0;float2 uv1 : TEXCOORD1;};VertexOutput vert (VertexInput v) {VertexOutput o = (VertexOutput)0;o.pos = UnityObjectToClipPos(v.vertex );o.uv0 = v.texcoord0;o.uv1 = v.texcoord1;return o;}float4 frag(VertexOutput i) : COLOR {float4 materialTime = _Time + _TimeEditor;float2 texUv = i.uv0+(materialTime.g *_speed)* _tiling;float texture_R = tex2D(_texture,TRANSFORM_TEX(texUv, _texture)).r;float texture_G = tex2D(_texture, TRANSFORM_TEX(i.uv1, _texture)).g; //Mask要用正常的uv，mesh里要展uv2float texture_B = tex2D(_texture, TRANSFORM_TEX(i.uv1, _texture)).b; //Mask要用正常的uv，mesh里要展uv2float3 color_L = lerp(_ColorL_1.rgb, _ColorL_2.rgb, texture_R);float3 color_R = lerp(_ColorR_1.rgb, _ColorR_2.rgb, texture_R );float3 colorlerp = lerp(color_L, color_R, texture_G) * (texture_B + _Dark);return fixed4(colorlerp,1);}知乎視頻?www.zhihu.com

第二個(gè)效果只需要改變下B通道 Mask 和顏色就可以了 ~

知乎視頻?www.zhihu.com

我們?nèi)绻涯Ｐ妥龀闪Ⅲw的 ，配合霧效就可以做出 3 號(hào)圖的效果

我們?cè)黾右恍╊伾刂瓶梢栽鰪?qiáng)顏色的表現(xiàn)力，也可以增加一些頂點(diǎn)的抖動(dòng)，我這里還使用原來(lái)那張貼圖，你可以算一個(gè)隨機(jī)值

Shader "lowPolygon_2" {Properties {_ColorL_1("ColorL_1", Color) = (0,0.1721497,3301887,1)_ColorL_2("ColorL_2", Color) = (0.2783019,0.6024179,1,1)_ColorL_3("ColorL_3", Color) = (0.2783019,0.6024179,1,1)_ColorL_Offset_1("ColorL_Offset_1", Float) = 1_ColorL_Offset_2("ColorL_Offset_2", Float) = 1_ColorR_1("ColorR_1", Color) = (0,0.1721497,3301887,1)_ColorR_2("ColorR_2", Color) = (0.2783019,0.6024179,1,1)_ColorR_3("ColorR_3", Color) = (0.2783019,0.6024179,1,1)_ColorR_Offset_1("ColorR_Offset_1", Float) = 1_ColorR_Offset_2("ColorR_Offset_2", Float) = 1_Dark("Dark", Float) = 1_texture ("texture", 2D) = "white" {}_speed ("speed", Float ) = 5_tiling("tiling", Float) = 0.01_vertexHeight("vertexHeight",Float) = 1}SubShader {Tags {"RenderType"="Opaque"}Pass {Name "FORWARD"Tags {"LightMode"="ForwardBase"}CGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"#pragma multi_compile_foguniform float4 _TimeEditor;uniform float4 _ColorL_1, _ColorL_2, _ColorL_3, _ColorR_1, _ColorR_2, _ColorR_3;uniform sampler2D _texture; uniform float4 _texture_ST;uniform float _speed, _tiling, _Dark , _vertexHeight, _ColorL_Offset_1, _ColorL_Offset_2, _ColorR_Offset_1, _ColorR_Offset_2;struct VertexInput {float4 vertex : POSITION;float2 texcoord0 : TEXCOORD0;float2 texcoord1 : TEXCOORD1;};struct VertexOutput {float4 pos : SV_POSITION;//float2 uv0 : TEXCOORD0;float2 uv1 : TEXCOORD1;float2 timeUv : TEXCOORD2;UNITY_FOG_COORDS(4)};VertexOutput vert (VertexInput v) {VertexOutput o = (VertexOutput)0;float4 materialTime = _Time + _TimeEditor;float2 texUv0 = v.texcoord0 + (materialTime.g * _speed) * _tiling;float2 texUv1 = v.texcoord1 + (materialTime.g * _speed) * _tiling;o.timeUv = texUv0; //注意下哦 我這里uv0 才是點(diǎn)狀uv，如果你用腳本創(chuàng)建的uv這個(gè)要修改下float4 offset_var = tex2Dlod(_texture, float4(TRANSFORM_TEX(texUv1, _texture), 0.0, 0));v.vertex.xyz += offset_var.r * _vertexHeight;o.pos = UnityObjectToClipPos(v.vertex );UNITY_TRANSFER_FOG(o, o.pos);//o.uv0 = v.texcoord0;o.uv1 = v.texcoord1;return o;}float4 frag(VertexOutput i) : COLOR {float texture_R = tex2D(_texture,TRANSFORM_TEX(i.timeUv, _texture)).r;float texture_G = tex2D(_texture, TRANSFORM_TEX(i.uv1, _texture)).g; //Mask要用正常的uv，mesh里要展uv2float texture_B = tex2D(_texture, TRANSFORM_TEX(i.uv1, _texture)).b; //Mask要用正常的uv，mesh里要展uv2float3 color_L = lerp(_ColorL_1.rgb, _ColorL_2.rgb, texture_R * _ColorL_Offset_1);float3 color_L2 = lerp(color_L, _ColorL_3, saturate(pow(texture_R * _ColorL_Offset_2, 3)));float3 color_R = lerp(_ColorR_1.rgb, _ColorR_2.rgb, texture_R * _ColorR_Offset_1);float3 color_R2 = lerp(color_R, _ColorR_3, saturate(pow(texture_R * _ColorR_Offset_2, 3)));float3 colorlerp = lerp(color_L2, color_R2, texture_G) * (texture_B + _Dark);float4 finalColor = float4(colorlerp, 1);UNITY_APPLY_FOG(i.fogCoord, finalColor);return finalColor;}ENDCG}}FallBack "Diffuse" }知乎視頻?www.zhihu.com

也可以增加線框渲染再 配合不同mesh 和 mask ，Color 就可組合其他的效果出來(lái)~

參考圖來(lái)自

Download Abstract Blue Triangle Geometric Pattern Banner Design for free?www.freepik.com

字體來(lái)自

創(chuàng)意字體--商用字體_免費(fèi)字體_字體下載_三極字庫(kù)官網(wǎng)?sjtype.com

工程下載

ShaderFallback/LowPolyShader?github.com

總結(jié)

以上是生活随笔為你收集整理的thymeleaf动态选中select_一些LowPoly动态渐变效果实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。