【CocosCreator 3.x box2d C++ to WebAssembly 优化方案】

上期分享的技术方案更侧重于如何使用 CocosCreator 实现功能。这篇分享会更侧重关于性能优化,希望对大家有帮助。
分享来源自论坛、github 开源仓库、热心开发者、Cocos 引擎开发团队、cocos 技术支持团队。

上期分享传送门:【CocosCreator 3.x 技术方案分享】第一期


本次方案由 Cocos 技术支持团队提供,目前此方案仅在 3.3.2 版本通过测试,其它版本如果有问题暂时没有精力处理,目前我们正在准备将方案升级到 3.4.1 版本:

优化目标

提升 box2d 在

  • web-pc :heavy_check_mark:
  • web-mobile :heavy_check_mark:
  • wecat-game :heavy_check_mark:
  • android(preparing)
  • ios(preparing)
  • windows(preparing)
  • mac(preparing)
    等平台的性能

采用的优化方案

  • 将 box2d 的 C++ 版本编译成 wasm
  • 参考 WebAssembly 教程文档:开发者引导 - WebAssembly 中文网|Wasm 中文文档
  • 以及对 CocosCreator 3.x 引擎源码的 box2d 模块做修改,让我们编译的 box2d.js wasm 版本能正确运行
  • 先完成 web & 小游戏端的优化,后续进行原生平台的优化

优化前的性能


优化后的性能


如何使用

  • 下载并解压此压缩包 box2d.zip (25.7 KB) ,替换掉你引擎的源码路径下的 box2d 文件夹。
  • 引擎文件夹路径参考:
D:\CocosDashboard_1.0.10\resources\.editors\Creator\3.3.2\resources\resources\3d\engine\cocos\physics-2d
  • 下载并解压此压缩包 index.zip (689 字节) ,替换掉你引擎的源码路径下的 index.js 脚本。
  • 脚本路径参考:
D:\CocosDashboard_1.0.10\resources\.editors\Creator\3.3.2\resources\resources\3d\engine\node_modules\@cocos\box2d\index.js
  • 下载并解压此压缩包 build-templates.zip (208.7 KB) ,拷贝 build-templates 文件夹到你的项目文件夹下。
  • 打开定制引擎 参考文档 学习使用命令行编译引擎源码
  • 编译引擎源码完成之后,打开编辑器构建项目即可

Demo 链接

请确保你已经完成引擎定制
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_2D_Box2DJS_WebAssembly

构建发布后的测试包(微信小游戏包需要自行改 appid):
wasm-test.zip (3.4 MB)


测试设备信息

  • windows 设备
    cpu: i5-9500 6 核 3.00 GHZ
    ram: 16G
    os: windows 10 21H1
    chrome: 92.0.4515.159(x 64 正式版)
  • mac 设备
    cpu: i7 双核 3.1 GHZ
    ram: 16G
    os: macos big sur 11.6
  • android 设备
    小米 11、chrome 95.0.4638.50、微信版本:8.0.16
  • ios 设备
    iphone xr、ios 14.8、微信版本:8.0.16
17赞

视频链接太多了,刚才有几个放错了,已修正。

有box2d-wasm的编译工程放出来吗?我尝试编译了以后,编译出来的api和ts版本的都不一样,这个中间的转换是怎么处理的

能提一下 PR,合并到引擎中吗?

1赞

嗯嗯,我们下周提个 pr

好东西直接合并到引擎才对

1赞

我观察论坛好久,发现每个帖子都有你的回复

好的,感谢建议

iOS 能有5百的提升以后做 物理游戏有希望了

你可以看下我的测试视频,ios 微信小游戏是个神奇的平台,刚体一旦超过一定的量之后就很掉帧的很厉害。所以在一定的刚体数量之内,性能是有极大提升的。
后面我们的精力会放在给大家提供原生层的性能优化上。

先保证稳定性 稳中求胜 ts 转cpp 的方案还有后续吗 还有原生发热很吓人 把帧率调到30都还是很烫 还有就是原生上的jsb 会不会消耗太多了

能把原生这块做好 你们就是中国引擎组的大佬了 以后也不用看u3d的脸色了

一直在等官方出box2d的wasm版本,可惜3.4也没见到。这下等到了。请问下c++版本是基于最新的2.4吗?能放出编译环境吗?因为我自己的box2d版本添加了官方没有的特性,需要自行编译wasm版本,非常感谢楼主!

看了优化方案解决同屏大于50个刚体卡顿问题,想问一下是否已经合入编辑器中了

目前计划安排在 3.6 版本合并进这个方案,3.6 版本预计会在今年 5 月 ~ 6 月会出现

2赞

好东西,给 Web 性能优化提供了个新思路

大佬
抽个时间写一下 roadmap 吧
披露一下版本内容 :sob:

2.x按这个改了后用不了…不知道少了哪一步 :cry:

这个方案暂不支持 2.x 版本。