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 相关文章推荐
jquery.jstree 增加节点的双击事件代码
Jul 27 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
Feb 23 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 Javascript
vue2.x 对象劫持的原理实现
Apr 19 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 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文件上传表单摘自drupal的代码
2011/02/15 PHP
php判断表是否存在的方法
2015/06/18 PHP
php获取图片信息的方法详解
2015/12/10 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
python绘制立方体的方法
2018/07/02 Python
python如何查看微信消息撤回
2018/11/27 Python
使用python画社交网络图实例代码
2019/07/10 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
html5唤醒APP小记
2019/03/27 HTML / CSS
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
水电工岗位职责
2014/02/12 职场文书
社区交通安全实施方案
2014/03/22 职场文书
目标责任书格式
2014/07/28 职场文书
2015年安全月活动总结
2015/03/26 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
烈士陵园扫墓感想
2015/08/07 职场文书
JavaScript异步操作中串行和并行
2021/11/20 Javascript
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js
JavaScript获取URL参数的方法分享
2022/04/07 Javascript