three.js中多线程的使用及性能测试详解


Posted in Javascript onJanuary 07, 2021

前言

今天郭先生说一下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,

three.js中多线程的使用及性能测试详解

让他们简单的动起来,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)

three.js中多线程的使用及性能测试详解

(使用Web Worker)

three.js中多线程的使用及性能测试详解

这里可以看出使用更多的线程可以很明显的提升CPU使用率。小伙伴们不妨打开线上案例亲自测试一下。

总结

到此这篇关于three.js中多线程的使用及性能测试的文章就介绍到这了,更多相关three.js多线程使用及性能测试内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

版权声明:本文为郭志强的原创文章,转载请附上原文出处链接及本声明。原文链接:https://www.mrguo.link

Javascript 相关文章推荐
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
js里的prototype使用示例
Nov 19 Javascript
JS常用正则表达式总结
Nov 12 Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
JavaScript数据类型详解
Apr 01 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
JavaScript中的编码和解码函数
Feb 15 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
ES5新增数组的实现方法
May 12 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 #Vue.js
vuex的使用和简易实现
Jan 07 #Vue.js
vue watch监控对象的简单方法示例
Jan 07 #Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 #Vue.js
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 #Javascript
通过vue.extend实现消息提示弹框的方法记录
Jan 07 #Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 #Vue.js
You might like
PHP,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
jquery之empty()与remove()区别说明
2010/09/10 Javascript
GreyBox技术总结(转)
2010/11/23 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
JavaScript中document.forms[0]与getElementByName区别
2015/01/21 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
使用AngularJS来实现HTML页面嵌套的方法
2015/06/17 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
[01:21]辉夜杯战队访谈宣传片—CDEC
2015/12/25 DOTA
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
奇怪的鱼:Weird Fish
2018/03/18 全球购物
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
UNIX文件类型
2013/08/29 面试题
2014年“四风”问题个人整改措施
2014/09/17 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
MySql开发之自动同步表结构
2021/05/28 MySQL