炫酷的汽车展示效果.docx

点击车体可以换颜色，点击右边的按钮可以查看发动机、开关车灯，特效绝对酷炫。第三方插件只用了DOTween，Shader基本上全部自制，使用unity5。针对移动端做了优化，反锯齿开到8x，我的酷派大神f1手机跑起来毫无压力。车体的换颜色效果参考NissanJuke汽车展示/这是flash的away3d引擎制作的，需要flashplayer11.0以上的版。本文的内容只会把原理和主要的代码发上来，其他一般般的大家可以自己研究。本文主要有Shader、UGUI、DOTween、Mesh、相机绑定五个部分一、Shader1、车体的换颜色特效原理就是点击车体某一点获取位置，在shader里面计算顶点离这一点的距离，再用三角函数构建一个波形，把顶点沿着自身法线方向平移，在c#代码里设置偏移量。主要的Shader代码：C#纯文本查看复制代码?001002003004005006007008009010011012013014015016017018019020021022023024025026027028029030031032033034035036037038039040041042043044045046047048049050051052053054055056057058059060061062063064065066067068069070071072073074075076077078079080081082083084085086087088089090091092093094095096097098099100101102103104105Shader LexLiu/VertexColorTransform /顶点颜色变换Properties _MainColor(Main Color, Color) = (1,1,1,1)/_CubeMap(Cube Map, CUBE) = _ReflectAmount(Reflect Amount, Float) = 1_RimColorMultiply(Rim Color Multiply, Float) = 0_RimPower(Rim Power, Float) = 1_ReflFresnelPower(Reflect Fresnel Power, Float) = 1_ReflFresnelOffset(Reflect Fresnel Offset, Float) = 0_WaveLength(Wave Length, Float) = 1_WaveStrenth(Wave Strenth, Float) = 1_WaveOffset(Wave Offset, Float) = 0_StartPos(Start Position, Vector) = (0,0,0,0)_TargetColor(Target Color, Color) = (1,1,1,1)_OcclusionStrength(DarkColor Strength, Float) = 1_OcclusionOffset(DarkColor Offset, Float) = 0_FinalColorAdjust(FinalColorAdjust, Float) = 1.3SubShader Tags RenderType=Opaque IgnoreProjector=TrueCGINCLUDE#pragma vertex vert#pragma fragment frag#pragma fragmentoption ARB_precision_hint_fastest#pragma exclude_renderers xbox360 ps3 flash d3d11_9xfixed4 _MainColor;samplerCUBE _CubeMap;fixed _ReflectAmount;half _ReflFresnelPower;half _ReflFresnelOffset;half _RimColorMultiply;half _RimPower;half _WaveLength;half _WaveStrenth;half _WaveOffset;float4 _StartPos;fixed4 _TargetColor;fixed _OcclusionStrength;float _OcclusionOffset;float _FinalColorAdjust;fixed4 _LightColor0;struct VertexInputfloat4 vertex:POSITION;fixed3 normal:NORMAL;struct VertexOutputfloat4 pos:SV_POSITION;fixed4 reflectDir:TEXCOORD0;fixed3 lightColor:TEXCOORD1;fixed rimMultiply:TEXCOORD2;fixed3 transColor:TEXCOORD3;float4 worldPos:TEXCOORD4;VertexOutput vert(VertexInput v)VertexOutput output;/vertex offsetfixed pi = 3.1415926535898;half dist = distance(_StartPos.xyz, mul(_Object2World, v.vertex).xyz);half x = (_WaveOffset - dist) * _WaveLength;half normalOffset = (sin(x + pi*0.5) + 1) * _WaveStrenth;normalOffset = (x -pi & x pi) ? normalOffset : 0;float4 worldPos = mul(_Object2World, v.vertex);worldPos.xyz += float3(mul(_Object2World, fixed4(v.normal,0).xyz) * normalOffset;output.pos = mul(UNITY_MATRIX_VP, worldPos);x = saturate(x*0.25+0.5);output.transColor = lerp(_MainColor.rgb, _TargetColor.rgb, x);output.worldPos = worldPos;/light & colorfixed3 lightDir = normalize(_WorldSpaceLightPos0.xyz);fixed3 normalDir = normalize(mul(_Object2World, float4(v.normal, 0).xyz);output.lightColor = _LightColor0.rgb * (dot(lightDir, normalDir) * 0.5 + 0.5) + UNITY_LIGHTMODEL_AMBIENT.rgb;fixed3 viewDir = normalize(float3(_WorldSpaceCameraPos - mul(_Object2World, v.vertex).xyz);fixed NdotV = dot(normalDir, viewDir);output.reflectDir.xyz = reflect(-viewDir, normalDir);output.reflectDir.w = _ReflectAmount * pow(1-NdotV, _ReflFresnelPower) + _ReflFresnelOffset;output.rimMultiply = pow(1-NdotV, _RimPower) * _RimColorMultiply;return output;fixed4 frag(VertexOutput i):COLORfixed4 c = fixed4(0,0,0,1);fixed3 cubeColor = texCUBE(_CubeMap, i.reflectDir.xyz).rgb * i.reflectDir.w;c.rgb = (i.transColor.rgb + cubeColor + i.transColor.rgb * i.rimMultiply) * i.lightColor;/final colorc.rgb = c.rgb * saturate(i.worldPos.y + _OcclusionOffset) * _OcclusionStrength) * _FinalColorAdjust;return c;ENDCGPassTagsLightMode=ForwardBaseCGPROGRAM#define UNITY_PASS_FORWARDBASE#define multi_compile_fwdbase_fullshadowsENDCG 2、车体反射汽车展示的反射对整体效果非常重要，我这里的反射环境是在3dsmax里面用vray渲染的，渲染面板的CameraType有一些选项有多种方式都可以渲染出支持Unity的CubeMap，我一般选择Box类型。反射场景是从网上找的场景模型稍微做做修改，灯光一定要仔细调，用作车体反射要亮和暗的地方对比度大些，要有亮色块作反射的高亮部分。车体反射效果参考Unity官方宣传片中的一个案例，可以去Google搜索ZeroLight Technology 2.0 TVR Demonstration。车体的边缘用菲涅尔把亮度和颜色降低，另外在车体靠近地面的地方要暗一些。二、UGUIUnity官方是给出了UGUI的源码，有啥不好解决的翻翻源码，另外从官方源码里也可以学到很多知识。EventSystem挺强大的，场景里面的车体的点击事件也可以用EventSystem和PhysicsRaycaster来实现。具体做法就是把PhysicsRaycaster加到场景相机上，在需要碰撞的物体上加上MeshCollider，最好再加个Selectable，因为EventSystem.curren.currentSelectedGameObject只对Selectable物体有反应。选颜色的色轮，因为是不规则形状，所以是在3dsmax里面建模贴好UV，用一个材质一张贴图就行了。在Unity里放到UI层，加上MeshCollider和Selectable，就跟UGUI使用起来一样了。三、DOTweenDOTween是Unity的补间动画引擎，免费开源效率高，超方便超好用，官方网址：/用DOTween做UGUI的补间动画也很方便，直接就xxx.DOFad，xxx.DOColor就可以;从DOTween的源码里了解到C#的一个很方便的功能Extension，可以自己扩展Unity官方的类和结构体，具体可以去搜索C# Extension。四、Mesh 按钮UI和地面上的线条、圆弧都是用代码动态生成出来的，生成网格其实不难，主要是要了解网格的基本原理这里给出直线的代码，其实就是矩形C#纯文本查看复制代码?001002003004005006007008009010011012013014015016017018019020021022023024025026027028029030031032033034035036037038039040041042043044045046047048049050051052053054055056057058059060061062063064065066067068069070071072073074075076077078079080081082083084085086087088089090091092093094095096097098099100101102103104105106107108109110111112113114115116117118119120121122123124using UnityEngine;using DG.Tweening;public class RectMesh : PrimitiveBase SerializeFieldprivate float m_Width;SerializeFieldprivate float m_Length;public enum PivotAlign Left, Center, Right public PivotAlign widthAlign = PivotAlign.Center;/宽度方向的中心点public PivotAlign lengthAlign = PivotAlign.Center;/长度方向的中心点/ / 宽度/ public float widthget return m_Width; set m_Width = value; UpdateShape(); / / 长度/ public float lengthget return m_Length; set m_Length = value; UpdateShape(); / / x方向的偏移/ public float offsetXget return offset.x; set offset.x = value; UpdateShape(); protected override void UpdateShape()if (cacheTransform = null | meshFilter = null)Init();Vector3 localPos = offset;float w2 = m_Width * 0.5f;float l2 = m_Length * 0.5f;vertices = new Vector34;float x0, z0, x1, z1, x2, z2, x3, z3;x0 = z0 = x1 = z1 = x2 = z2 = x3 = z3 = 0;switch (widthAlign)case PivotAlign.Center:x0 = -w2;x1 = w2;x2 = -w2;x3 = w2;break;case PivotAlign.Left:x0 = 0f;x1 = m_Width; x2 = 0f;x3 = m_Width; break;case PivotAlign.Right:x0 = -m_Width;x1 = 0f;x2 = -m_Width;x3 = 0f; break;switch(lengthAlign)case PivotAlign.Center:z0 = -l2;z1 = -l2;z2=l2;z3 = l2;break;case PivotAlign.Left:z0 = 0f;z1 = 0;z2 = m_Length;z3 = m_Length;break;case PivotAlign.Right:z0 = -m_Length;z1 = -m_Length;z2 = 0f;z3 = 0f;break;vertices0.x = localPos.x + x0;vertices0.y = localPos.y;vertices0.z = localPos.z + z0;vertices1.x = localPos.x + x1;vertices1.y = localPos.y;vertices1.z = localPos.z + z1;vertices2.x = localPos.x + x2;vertices2.y = localPos.y;vertices2.z = localPos.z + z2;vertices3.x = localPos.x + x3;vertices3.y = localPos.y;vertices3.z = localPos.z + z3;UpdateMesh();protected override void InitMesh()if (cacheTransform = null | meshFilter = null)Init();triangles = new int 0, 2, 3, 0, 3, 1 ;uvs = new Vector24;uvs0.x = 0; uvs0.y = 0;uvs1.x = 1; uvs1.y = 0;uvs2.x = 0; uvs2.y = 1;uvs3.x = 1; uvs3.y = 1;normals = new Vector34;normals0.y = normals1.y = normals2.y = normals3.y = 1;UpdateShape();public Tweener DoLength(float endValue, float duration, float delay)return DOTween.To() = length, x = length = x, endValue, duration).SetDelay(delay);public Tween DoWidth(float endValue, float duration, float delay)return DOTween.To() = width, x = width = x, endValue, duration).SetDelay(delay);RectMesh类继承自PrimitiveBaseC#纯文本查看复制代码?01020304050607080910111213141516171819202122232425262728293031323334353637383940414243444546474849using UnityEngine;RequireComponent(typeof(MeshFilter), typeof(MeshRenderer)ExecuteInEditModepublic class PrimitiveBase : MonoBehaviour / / 偏移/ public Vector3 offset;protected MeshFilter meshFilter;public Transform cacheTransform;void Awake()Init();InitMesh();protected void I