之前搞v7投稿,好久没有更新我的小玩意系列了。今天那个投稿作品cocos store审核终于过了,发个小玩意庆祝一下!
效果
链接
和以前的小玩意一样都在小玩意合集里:
https://gitee.com/ruanwujing/green-pack-cocos
在resources/scenes/billiards场景中可以查看这个示意效果
原理
- 首先在正面渲染一个圆形,正面中心渲染采样一个数字图,空白部分、球体、数字部分,用smoothstep过渡这就不提了。这里我用的是一个图集,数字图4行4列排列,所以坐标用了晶格化换算了一下:
- 然后给一个旋转矩阵,准确地说传递过去的是一个逆矩阵。用当前的xy算出球面上的z,用3d坐标乘以逆矩阵,倒推出当前点在正面视角下的xy坐标
- cocos creator的shader中参数只能用4x4矩阵,实际上这里由于我们缩放值恒定为1,所以其实只需要3x3矩阵即可。
- 在脚本中定义一个矩阵,旋转轴,旋转速度
- 由于cocos creator的矩阵中我一时间没有找到绕某个轴旋转的计算方法,所以这里,我用了一个mat数组当3x3矩阵,然后自己算了旋转:
- 大数字球中间有色部分是一条带状,我们可以简单点,将它视作“南极” “北极” 两端各有一个白色的圆:
- 定义一个光源,给个简单的光照模型
- 最后用脚本设置好旋转轴和转速,在update中持续修改传过去的矩阵值,大功告成!
ps
使用图集的时候,需要将图集打开,里面单张图的packable设置为false,只设置图集大图不对!会因为uv的错误导致一些shader的显示异常。
https://forum.cocos.org/t/topic/157284