three.js 中使用多线程以及性能测试

今天郭先生说一下WebWorker以及WebWorker在three.js中的应用。我们都知道Javascript是单线程的,比如执行js代码的同时UI渲染就会停止,对于多核CPU的点脑,这一点让人难以接受,好在Web Worker的出现多少解决了一些问题。官方说Web Worker指的是一种可由脚本创建的后台任务,任务执行中可以向其创建者收发信息。要创建一个 Worker ,只须调用 Worker(URL) 构造函数,函数参数 URL 为指定的脚本。关于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); }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsxxsz.html