[关闭]
@yangyc 2017-08-23T12:59:15.000000Z 字数 1435 阅读 1025

Wonder.js性能报告

Wonder.js benchmark


多线程渲染测试

chrome v61

benchmark_basic_boxes.html:
当boxes过多时(如>2000),会有严重的闪烁问题(之前的chrome版本都没有这个问题!)

firefox developer edition v56

不支持webgl2

性能benchmark比较

渲染时间(ms)

与threejs的比较分析

(正值说明Wonder.js快,负值说明Three.js快)

Wonder.js(v1.0.0-alpha.5)是Three.js的性能倍数 basic render front render basic render->创建与销毁 front render->创建与销毁 设置transform 设置parent, children
+2.7 +1.33 +2.2 +4.3 -2.3 -1.27

结论

1.Wonder.js 渲染 更快

2.Wonder.js 创建与销毁 要快得多

3.Three.js 设置transform 和 设置parent,children 更快

4.Wonder.js->front render、设置transform、设置parent,children 还需要优化!

Test in chrome(v60)

basic render + basic material box

引擎 3000个box 5000个box+设置transform 5000个box+设置parent,children 500个box创建与销毁
Three.js(v0.85.2) 13.5 27.5 38.4 45.5
Wonder.js(v0.9.0) 66 110 125 220
Wonder.js(v1.0.0-alpha.2) 9.5 26.3 43.5 16
Wonder.js(v1.0.0-alpha.5)->webgl1 6.5 22.5 20.5 20.5
Wonder.js(v1.0.0-alpha.5)->webgl2 5 20.5 20 20

front render + light material box + diffuse map + 1 ambient light + 4 direction lights + 4 point lights(dynamic point lights:2, static point lights: 2)

引擎 3000个box 500个box创建与销毁
Three.js(v0.85.2) 24 100
Wonder.js(v1.0.0-alpha.4) 33 17.5
Wonder.js(v1.0.0-alpha.5)->webgl1 18 23.2

defer render + light material box + diffuse map + 1 ambient light + 10 direction lights + 300 point lights(range:200, dynamic point lights:100, static point lights:200)

引擎 3000个box 500个box创建与销毁
Wonder.js(v1.0.0-alpha.5)->webgl2 28.6 40

内存(MB)

Test in chrome(v59)

引擎 3000个box 3000个box+设置transform 3000个box+设置parent,children 500个box创建与销毁
Three.js(v0.85.2) 37 37 37 16
Wonder.js(v0.9.0) 109 108 108 94.5
Wonder.js(v1.0.0-alpha.2) 19.5 19 19 15
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注