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 相关文章推荐
用roll.js实现的图片自动滚动+鼠标触动的特效
Mar 18 Javascript
javascript下过滤数组重复值的代码
Sep 10 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
教你使用javascript简单写一个页面模板引擎
May 05 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
webpack配置之后端渲染详解
Oct 26 Javascript
JS实现碰撞检测的方法分析
Jan 19 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
咖啡知识大全
2021/03/03 新手入门
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
BootStrapTable服务器分页实例解析
2016/12/20 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
python数组复制拷贝的实现方法
2015/06/09 Python
Python多线程下载文件的方法
2015/07/10 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
学雷锋献爱心倡议书
2015/04/27 职场文书
2015年环保局工作总结
2015/05/22 职场文书
python开发的自动化运维工具ansible详解
2021/08/07 Python
Win11更新失败并提示0xc1900101
2022/04/19 数码科技