一些LowPoly动态渐变效果实现

[复制链接]
崔炫俊献 发表于 2022-4-18 09:52:03 | 显示全部楼层 |阅读模式
这篇文章根大家分享一些LowPoly动态效果的制做方案,由于使用的是uv采样方式效率很高,手机也能够随意使用,我们先来看一些效果的参考
本文将在Unity3D中复原这些效果,假如你学会后当然能够在你喜欢的引擎中实现~假如一篇太长有可能会分多篇,感兴趣的能够存眷我~
参考图

一些LowPoly动态渐变效果实现-1.jpg
完成效果

一些LowPoly动态渐变效果实现-2.jpg

一些LowPoly动态渐变效果实现-3.jpg

一些LowPoly动态渐变效果实现-4.jpg
以往我们在实现多边形渐变是多是遍历定顶点修改vertexColor去实现,本效果将重UV下手
首先需要一个做一个特殊的uv,我将用maya举例(当然也能够请美术的小伙伴协助制做Mesh)
我们首先需要这样的一个面片

一些LowPoly动态渐变效果实现-5.jpg
我们先以这个根底的网格举例,Windows -> UV Texture Editor 打开uv 编辑器
这时uv是个样子,我们需要将uv打断,并将每个方格的uv 缩放为一个点(这就是本篇的重点了)也就是说每个网格mesh上的面uv只要一个点大小,有很多方案能够实现,我讲的方案不一定是最好的,大家能够大开脑洞~

一些LowPoly动态渐变效果实现-6.jpg
1.选中模型按鼠标右键切换为点显示

一些LowPoly动态渐变效果实现-7.jpg
2.框选所有的点,然后EditMesh->DetachComponent (分别组件)
3.我们再次切换为物体形式
4.我们再次点击菜单 Mesh-> Separate (分别Mesh)
其实我们上面的重要操做就是为了以线分割mesh将一个大面片分割成小面片

一些LowPoly动态渐变效果实现-8.jpg
5.这时所有的小mesh 的中心点都在一起(也就是原来大mesh的中心点)我们全选所有被缩小的mesh 进行中心点恢复 Modify-> CenterPivot
这时所有的小mesh的中心点都在本人的位置了,下面我们对他进行缩放

一些LowPoly动态渐变效果实现-9.jpg
6.在右边通道栏我们将其缩放到 0.001后,点击菜单 CreateUVs -> PlanarMapping,我们点击后面的小方块打开选项设置,选中y 轴投射UV
这时uv 就酿成点状了 ,全选所有小mesh在右边通道栏我们将mesh缩放恢复回来
7.如今点击菜单栏 Mesh->Combine 将所有小mesh 组合到一起 ,这时点还没有并和
8.切换为点形式 全选所有点,点击菜单 EditMesh-> Merge ,这时mesh就恢复为一个整体了
UV 也已经被我们处置为点状 ,当然我们能够使用脚本处置这个过程,下面是批处置脚本,选中模型后点击 CreateUV 将会创建二套uv 并定名为lowPoly(需要注意一点,maya 中map1 对应shader中 uv0,lowPoly对应 uv1,依次类推)

一些LowPoly动态渐变效果实现-10.jpg
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):#恢复中心点/缩放
  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)#获取面数
    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 ) #选中所有Mesh
    cmd.polyProjection(type='Planar' ,md ='y',uvs ='lowPoly',ibd = True,cm =True) #投影uv
    centerPivot(selected,1)
    cmd.polyUnite(selected,n = firstObject) #并和Mesh
    cmd.polyMergeVertex(d = 0.1) #并和点
    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()
导出之前记得delete所有的构造历史 Edit-> DeleteAllbyType->History
趁便说下maya的默认单元是厘米,Unity是米,假如你想1:1 导出
记得在设置将maya 单元设置为米

一些LowPoly动态渐变效果实现-11.jpg
这时就能够导入到Unity中,shader部门比较简单间接上代码,需要注意的一点就是 由于我们uv是近似的一个点,假如想有平滑的过度效果 Mask图不能压缩 需要设置为RBG 24 ,因为图片分辨率不需要很大所以实际也占不了多少内存

一些LowPoly动态渐变效果实现-12.jpg
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需要四方持续
                float4 texture_var = tex2D(_texture,TRANSFORM_TEX(texUv, _texture));
                float3 emissive = lerp(_Color.rgb, _Color2.rgb,texture_var.r);
                return fixed4(emissive,1);
            }
            ENDCG
        }
    }
}将材质赋予方才导入的面片就是下面的效果
我们先来实现参考图1 的效果 ,实际上我们只需要将上面的视频中的效果增加一些渐变色就能够到达了,新增两个Mask G通道 控制左右分色 B通道控制重中间向两边的压暗区域

一些LowPoly动态渐变效果实现-13.jpg
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里要展uv2
                float texture_B = tex2D(_texture, TRANSFORM_TEX(i.uv1, _texture)).b; //Mask要用正常的uv,mesh里要展uv2

                float3 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);
            }第二个效果只需要改变下B通道 Mask 和颜色就能够了 ~

一些LowPoly动态渐变效果实现-14.png
我们假如把模型做成立体的 ,辅助雾效就能够做出 3 号图的效果

一些LowPoly动态渐变效果实现-15.jpg
我们增加一些颜色控制能够加强颜色的暗示力,也能够增加一些顶点的抖动,我这里还使用原来那张贴图,你能够算一个随机值
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_fog
            uniform 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 才是点状uv,假如你用脚本创建的uv这个要修改下
                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里要展uv2
                float texture_B = tex2D(_texture, TRANSFORM_TEX(i.uv1, _texture)).b; //Mask要用正常的uv,mesh里要展uv2

                float3 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"
}也能够增加线框渲染再 辅助不同mesh 和 mask ,Color 就可组合其他的效果出来~
参考图来自
字体来自
工程下载
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

菜鸟C4D推荐上一条 /9 下一条

菜鸟C4D与你一起从零开始!
菜鸟C4D微信公众号

( 浙ICP备13033195号-2 )Copyright   ©2013-2020  菜鸟C4D  Powered by©Discuz!  技术支持:菜鸟C4D