小玩意系列之2d渲染3d台球

之前搞v7投稿,好久没有更新我的小玩意系列了。今天那个投稿作品cocos store审核终于过了,发个小玩意庆祝一下!

效果

billiards2d.gif

链接

和以前的小玩意一样都在小玩意合集里:
https://gitee.com/ruanwujing/green-pack-cocos
resources/scenes/billiards场景中可以查看这个示意效果

原理

  • 首先在正面渲染一个圆形,正面中心渲染采样一个数字图,空白部分、球体、数字部分,用smoothstep过渡这就不提了。这里我用的是一个图集,数字图4行4列排列,所以坐标用了晶格化换算了一下:
    image
    image
  • 然后给一个旋转矩阵,准确地说传递过去的是一个逆矩阵。用当前的xy算出球面上的z,用3d坐标乘以逆矩阵,倒推出当前点在正面视角下的xy坐标
    image
  • cocos creator的shader中参数只能用4x4矩阵,实际上这里由于我们缩放值恒定为1,所以其实只需要3x3矩阵即可。
    image
  • 在脚本中定义一个矩阵,旋转轴,旋转速度
    image
  • 由于cocos creator的矩阵中我一时间没有找到绕某个轴旋转的计算方法,所以这里,我用了一个mat数组当3x3矩阵,然后自己算了旋转:
    image
  • 大数字球中间有色部分是一条带状,我们可以简单点,将它视作“南极” “北极” 两端各有一个白色的圆:
    image
    image
  • 定义一个光源,给个简单的光照模型
    image
    image
  • 最后用脚本设置好旋转轴和转速,在update中持续修改传过去的矩阵值,大功告成!
    image

ps

使用图集的时候,需要将图集打开,里面单张图的packable设置为false,只设置图集大图不对!会因为uv的错误导致一些shader的显示异常。
https://forum.cocos.org/t/topic/157284

27赞

收藏夹吃灰

:+1:6

mark一下

:cow:

很牛比~~~

有点过于6了,高端的料理玩玩需要高端的石材,啃不动啊

我滴龟龟,:ox::beer:

nb啊 这思路真可以

吊爆了!!!

碉堡了~~~~~

你虽然很强,但现在它是我的了 :smirk:

强大啊!前段时间刚做了下台球游戏