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 相关文章推荐
javascript 当前日期转化为中文的实现代码
May 13 Javascript
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
图解JavaScript中的this关键字
May 28 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
Jan 13 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
vue增删改查的简单操作
Jul 15 Javascript
Vue组件选项props实例详解
Aug 18 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产生随机字符串函数
2006/12/06 PHP
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
使用PHP破解防盗链图片的一个简单方法
2014/06/07 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
js实现图片3D轮播效果
2019/09/21 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
继承行为在 ES5 与 ES6 中的区别详解
2019/12/24 Javascript
python实现360皮肤按钮控件示例
2014/02/21 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
python中对_init_的理解及实例解析
2019/10/11 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
django中related_name的用法说明
2020/05/20 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
AOP的定义以及作用
2013/09/08 面试题
迟到检讨书400字
2014/01/13 职场文书
社区安全检查制度
2014/02/03 职场文书
运动会邀请函范文
2014/02/06 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
政府会议通知范文
2015/04/15 职场文书
十八大观后感
2015/06/12 职场文书
二十年同学聚会致辞
2015/07/28 职场文书