three.js中多线程的使用及性能测试详解
前言
今天郭先生说一下WebWorker以及WebWorker在three.js中的应用。我们都知道Javascript是单线程的，比如执行js代码的同时UI渲染就会停止，对于多核CPU的点脑，这一点让人难以接受，好在Web Worker的出现多少解决了一些问题。官方说Web Worker指的是一种可由脚本创建的后台任务，任务执行中可以向其创建者收发信息。要创建一个 Worker ，只须调用 Worker(URL) 构造函数，函数参数 URL 为指定的脚本。关于Web Worker的更多知识请阅读Web Worker。线案例请点击web-worker,
1. 在three.js中使用多线程
在three.js中使用Web Worker经常发生在大量计算造成CUP阻塞的情况下，我们举一个例子，比如说我们制作了1000个Mesh，
让他们简单的动起来，CPU几乎没有什么压力，FPS会在60左右，但是如果让这1000个Mesh的位置都需要大量计算才能得到，那么FPS就会很低（和计算量成负相关），下面是一段代码
for(let i=0; i<num; i++) {
let angle = positions[i].y / (1000 / (Math.PI * 10));
positions[i].x = positions[i].x + Math.sin(angle);
positions[i].z = positions[i].z + Math.cos(angle);
positions[i].y = positions[i].y + 1;
//上面就是简单的位置变化，下面的代码模拟复杂的变化，累加100000次（这是非常占用线程的情况）
for(let j=1, total=1; j<=100000; j++) {
total += j;
}
if(positions[i].y > 500) {
positions[i].y = positions[i].y - 1000;
}
}
for(var i=0; i<num; i++) {
group.children[i].position.set(positions[i].x, positions[i].y, positions[i].z);
}
positions是储存1000个Mesh位置信息的数组，group里面储存了所有的Mesh,每次渲染都更改positions的位置信息，然后给Group的每一个Mesh设置新值，这种情况下FPS会低至7FPS，转动场景可以很明显的感觉到卡顿。接下来我们使用Web Worker处理这个问题，主线程代码如下
myWorker = new Worker('/static/js/worker.js');
myWorker.postMessage(positions);
myWorker.onmessage = e => {
let positions = e.data;
for(var i=0; i<num; i++) {
group.children[i].position.set(positions[i].x, positions[i].y, positions[i].z);
}
}
脚本代码如下
onmessage = function(e) {
let num = 1000;
let positions = e.data;
setInterval(e => {
for(let i=0; i<num; i++) {
let angle = positions[i].y / (1000 / (Math.PI * 10));
positions[i].x = positions[i].x + Math.sin(angle);
positions[i].z = positions[i].z + Math.cos(angle);
positions[i].y = positions[i].y + 1;
for(let j=1, total=1; j<=100000; j++) {
total += j;
}
if(positions[i].y > 500) {
positions[i].y = positions[i].y - 1000;
}
}
postMessage(positions);
}, 1000 / 60)
};
主要代码和未使用Web Worker几乎一样，只不过是将处理位置的代码放在新的线程中完成，setInterval定时器每一次完成位置计算都会通过postMessage(positions)将位置信息返回给主线程，主线程通过onmessage接受信息，返回对象的data属性就是新的positions。这样一来FPS可以达到60左右，转动场景感觉的到卡顿。这是十分让人欣喜的。
2. 性能分析
前面已经说了在每一次位置计算中做10万次累加，未使用Web Worker的情况下FPS降到了7，下面是更多的数据（数据仅做对比，和当前使用情况以及配合有关）。
| 累加次数（万次） | 使用Web Worker | 未使用Web Worker |
|---|---|---|
| 1 | 60 | 60 |
| 3 | 60 | 39 |
| 5 | 60 | 26 |
| 7 | 60 | 11 |
| 9 | 60 | 8 |
| 11 | 60 | 6 |
这里面可以看出，不管是多么大量的计算，使用Web Worker都不会影响主线程，但是对于未使用Web Worker影响是十分严重的，下面展示一下两种情况下电脑性能的对比
（未使用Web Worker）
（使用Web Worker）
这里可以看出使用更多的线程可以很明显的提升CPU使用率。小伙伴们不妨打开线上案例亲自测试一下。
总结
到此这篇关于three.js中多线程的使用及性能测试的文章就介绍到这了,更多相关three.js多线程使用及性能测试内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
版权声明：本文为郭志强的原创文章，转载请附上原文出处链接及本声明。原文链接：https://www.mrguo.link
相关文章
JavaScript中操作字符串是一个很重要的话题,下面这篇文章主要给大家介绍了关于javascript中字符串处理常用的方法,文中通过图文以及代码示例介绍的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了JavaScript中数组成员的添加、删除介绍,本文主要讲解push()、unshift()、pop()、shift()等函数的应用,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了ES6 新增的创建数组的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
下面小编就为大家带来一篇javascript中获取class的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
js验证用户身份，登录成功之后等待一定秒数，跳转到操作页面。使用window函数。代码如下2013-11-11
这篇文章主要为大家详细介绍了JavaScript中实现下载超大文件的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
JS使用oumousemove和oumouseout动态改变图片显示的方法
这篇文章主要介绍了JS使用oumousemove和oumouseout动态改变图片显示的方法,涉及javascript鼠标事件及图片操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03![[js高手之路]HTML标签解释成DOM节点的实现方法](//img.jbzj.com/images/xgimg/bcimg7.png)
下面小编就为大家带来一篇[js高手之路]HTML标签解释成DOM节点的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
下面小编就为大家带来一篇使用SVG基本操作API的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要为大家详细汇总了常用原生JS兼容性写法，感兴趣的小伙伴们可以参考一下2016-04-04
![[js高手之路]HTML标签解释成DOM节点的实现方法](http://img.jbzj.com/images/xgimg/bcimg7.png)
最新评论