|
|
X-WeaponTrail是一个很古老的程序化刀光插件，很早以前买了一直放在仓库没用上。最近不知道特效同学抽什么疯，突然不肯自己做刀光特效了，所以就把这个插件丢给他了。
image
<hr>用法
该插件的用法很简单，找到你的武器，把X-WeaponTrail预设拖到武器节点下，调整StartPoint和EndPoint，使其和武器对齐即可。
image
image
image
查看X Weapon Trail脚本，参数都比较直观，不过美术比较难理解的是Max Frame，Granularity这2个参数，作者在他的主页给了如下说明：
image
MaxFrame可以理解为刀光拖尾的生命周期（长度），MaxFrame越大，拖尾越长。
Granularity可以理解为拖尾Mesh的顶点粒度，Granularity越大，顶点数越多，越平滑。
<hr>实现细节
趁着给美术介绍参数，我把这个刀光的实现代码看了一遍，有一些地方还是值得说一下。
首先，作者维护了一个队列mSnapshotList，用来保存刀光拖尾的位置信息。队列的index越小，则越接近当前武器的位置，index越大则越接近刀光的尾部，队列的长度由MaxFrame决定。
void RecordCurElem() { //TODO: use element pool to avoid gc alloc. //Element elem = new Element(PointStart.position, PointEnd.position); Element elem = mElemPool.Get(); elem.PointStart = PointStart.position; elem.PointEnd = PointEnd.position; if (mSnapshotList.Count < MaxFrame) { mSnapshotList.Insert(1, elem); } else { mElemPool.Release(mSnapshotList[mSnapshotList.Count - 1]); mSnapshotList.RemoveAt(mSnapshotList.Count - 1); mSnapshotList.Insert(1, elem); } }
上面代码中的Element记录了一帧的位置信息，包括一开始我们设置的StartPoint和EndPoint，以及中间位置Pos。
public class Element { public Vector3 PointStart; public Vector3 PointEnd; public Vector3 Pos { get { return (PointStart + PointEnd) / 2f; } } public Element(Vector3 start, Vector3 end) { PointStart = start; PointEnd = end; } public Element() { } }
有了MaxFrame帧的位置信息后，我们就可以生成Mesh了。假设我们没有做任何平滑处理，只是简单的根据每一帧的位置（StartPoint，Pos，EndPoint）补充顶点，已经可以生成刀光的Mesh了，但是会出现明显的折痕：
image
这个时候，插值平滑就非常必要了。作者采用的插值方式是CatmullRom，关于CatmullRom的说明，网上很多，这里直接贴代码：
public static Vector3 CatmulRom(Vector3 T0, Vector3 P0, Vector3 P1, Vector3 T1, float f) { double DT1 = -0.5; double DT2 = 1.5; double DT3 = -1.5; double DT4 = 0.5; double DE2 = -2.5; double DE3 = 2; double DE4 = -0.5; double DV1 = -0.5; double DV3 = 0.5; double FAX = DT1 * T0.x + DT2 * P0.x + DT3 * P1.x + DT4 * T1.x; double FBX = T0.x + DE2 * P0.x + DE3 * P1.x + DE4 * T1.x; double FCX = DV1 * T0.x + DV3 * P1.x; double FDX = P0.x; double FAY = DT1 * T0.y + DT2 * P0.y + DT3 * P1.y + DT4 * T1.y; double FBY = T0.y + DE2 * P0.y + DE3 * P1.y + DE4 * T1.y; double FCY = DV1 * T0.y + DV3 * P1.y; double FDY = P0.y; double FAZ = DT1 * T0.z + DT2 * P0.z + DT3 * P1.z + DT4 * T1.z; double FBZ = T0.z + DE2 * P0.z + DE3 * P1.z + DE4 * T1.z; double FCZ = DV1 * T0.z + DV3 * P1.z; double FDZ = P0.z; float FX = (float)(((FAX * f + FBX) * f + FCX) * f + FDX); float FY = (float)(((FAY * f + FBY) * f + FCY) * f + FDY); float FZ = (float)(((FAZ * f + FBZ) * f + FCZ) * f + FDZ); return new Vector3(FX, FY, FZ); }
调大Granularity后，之前的折痕平滑了很多。
image
<hr>关于顶点的UV映射
最后想再说一下顶点的UV映射问题。如果不考虑特效贴图，单纯的看顶点生成，效果如下：
image
image
注意上图的红色射线，射线的原点即StartPoint和EndPoint的中间点Pos，射线方向从StartPoint指向EndPoint。
查看顶点更新的代码，我们发现顶点的UV设定如下：StartPoint的U是1，EndPoint的U是0，Pos的U是0.5。越接近刀光尾部的顶点，V越接近1。
Vector3 pos = mSpline.InterpolateByLen(fadeT); Vector3 up = mSpline.InterpolateNormalByLen(fadeT); Vector3 pos0 = pos + (up.normalized * mTrailWidth * 0.5f); Vector3 pos1 = pos - (up.normalized * mTrailWidth * 0.5f); Debug.DrawRay(pos, up * 3, Color.red); // pos0 pool.Vertices[baseIdx] = pos0; pool.Colors[baseIdx] = MyColor; uvCoord.x = 0f; uvCoord.y = uvSegment; pool.UVs[baseIdx] = uvCoord; //pos pool.Vertices[baseIdx + 1] = pos; pool.Colors[baseIdx + 1] = MyColor; uvCoord.x = 0.5f; uvCoord.y = uvSegment; pool.UVs[baseIdx + 1] = uvCoord; //pos1 pool.Vertices[baseIdx + 2] = pos1; pool.Colors[baseIdx + 2] = MyColor; uvCoord.x = 1f; uvCoord.y = uvSegment; pool.UVs[baseIdx + 2] = uvCoord;
结合特效贴图
image
越接近刀光头部（武器）的顶点，其UV映射的区域越接近贴图的底部：
image
越接近刀光尾部的顶点，其UV映射的区域越接近贴图的上部：
image
结合实际效果查看刀光的强弱，就更清晰了：
image
<hr> |
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？立即注册
×
|
窥视卡
雷达卡
发表于 2022-5-17 17:51
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡