引言
哈喽大家好，我是亿元程序员，一位止步 8 年游戏行业经验的主程。
不知道小伙伴是否还记得在 2D 项目里做 3D 音乐球球的那期文章，项目经理强行要在 2D 项目里实现 3D 的游戏效果。
俗话说得好，很多事情只有 0 次和无数次，项目经理要求在 2D 项目里做 3D 效果也不例外。
项目经理 ：能不能在我们 2D 项目模拟实现一下 3D 欢乐球球的游戏效果？
我 : …
可能有很多小伙伴未见过欢乐球球这个游戏，就是通过旋转平台，让在平台上不停跳跃的小球从缺口下落得分的游戏。
避免限流，就不发游戏视频了，重点就是让一张圆环图片模拟出 3D 的旋转效果：
言归正传，本期跟随笔者来看看，如何用Shader让图片中的 3D 圆环转起来！
本文示例工程在文末获取，小伙伴们自行前往。
资源准备
首先我们找搭子帮忙生成一张圆环，有条件的小伙伴可以找美术妹子帮忙。
然后创建一个名叫ring的 2D 工程，为了避免小伙伴说是 3D 的，我截了一个图：
接着把图片放到项目里，然后拖到场景中即可完成资源的准备：
接下来就可以让圆环转起来了
初见端倪
看到这里可能有小伙伴就跃跃欲试了：
旋转？ 这个我会，一个
tween的事情！
于是开始奋笔疾书：
运行一看：
虽然转是转起来了，就是转的是图片，没有转圆环。
我是这样转的
1.给点颜色瞧瞧
因为圆环是纯白色的，如果正常转起来，看不出变化，因此我们先通过Shader给圆环加点颜色。
首先我们还是复制一个builtin-sprite到我们项目的assets目录，并且改个自己喜欢的名字：
想要通过shader改变颜色，只需要在片元着色器中简单修改即可：
然后新建个材质球，选择自定义的shader：
最后修改下图片的材质即可看到红色的圆环了：
全红？那这和白色有什么区别…
2.圆环部分红色
首先在Shader中添加几个参数：
其中：
-
rotation：红色弧段所在的角度。 -
segmentWidth：红色弧段的长度。 -
edgeSoftness：弧段边缘的柔和程度。
接着在片元着色器中声明这些参数：
如果直接通过图片 UV 计算角度，得到的只是一块平面扇形，无法处理圆环的前后遮挡。
因此，项目中使用一个数学圆环，并通过 traceRing 找到当前像素对应的圆环表面位置：
**这是球面追踪（SDF 光线步进）**渲染圆环。
屏幕每个像素发射一条射线，去找圆环的交点，自动处理圆环前后遮挡。
由于篇幅问题就不作深入讲解，感兴趣的小伙伴可以深入研究。
然后计算这个位置在圆环上的角度：
再计算它与红色弧段中心的距离：
当角度差小于弧段宽度时，就把当前像素标记为红色区域：
最后使用 mix 混合原图和红色：
再次回到编辑器即可看到效果：
红色部分已经准备好了，接下来只要不断修改 rotation，就可以让它沿着圆环转起来。
3.脚本控制旋转
红色部分已经准备好了，接下来通过脚本修改Shader中的 rotation 参数，让红色弧段跟随鼠标移动。
首先获取当前Sprite使用的材质实例：
然后监听鼠标和触摸事件：
拖动时，将横向移动距离转换成旋转角度：
鼠标移动时调用旋转方法：
回到编辑器运行一下：
以上就是我和搭子用Shader让图片中的 3D 圆环转起来的全部内容，如有不对，还请指出。
结语
项目经理：我就知道你可以的！
**不知道小伙伴们还有没有更简单的实现方式？**欢迎在评论区分享你的思路。
本文实例工程可通过私信发送“圆环”获取。
更多实战完整源码包含编辑器已集成到亿元Cocos小游戏实战合集(已完结)，感谢小伙伴们对创作的支持。
我是"亿元程序员"，一位有着8年游戏行业经验的主程。在游戏开发中，希望能给到您帮助，也希望通过您能帮助到大家。
实不相瞒，想要个赞和爱心！请把该文章分享给你觉得有需要的其他小伙伴。谢谢！
推荐文章：