首页 > 其他分享 >three.js优化

three.js优化

时间:2023-02-14 21:56:49浏览次数:38  
标签:鼠标 render 渲染 three js InstancedMesh 执行 优化

Three js 开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。

three.js 性能优化方面,整理一下常用的优化方法或者方向,供大家一个优化思考的方向

尽量重用Material和Geometry

分时加载

分时加载算法(大数组)

调查显示100ms内的响应能让用户感觉非常流畅。50ms是 Nicholas 针对 JavaScript 得出的最佳经验值。

setTimeout 延时25ms,25ms 保证主流浏览器都顺畅。

可以使用类似的方法来优化three.js程序。

    function timedChunk(items, process, context, callback){
    
        var todo = items.concat();   
    
        setTimeout(function(){
        
            var start = +new Date();
        
            do {
                 process.call(context, todo.shift());
            } while (todo.length > 0 && (+new Date() - start < 50));
 
            if (todo.length > 0){
                setTimeout(arguments.callee, 25);
            } else {
                callback(items);
            }
        }, 25);
    };
 

 物体的清理

不销毁模型和材质只是单纯的remove的话还是会内存泄漏的.

    scene.remove(cube)
    cube.geometry.dispose()
    cube.matertial.diapose()

合理执行渲染方法.render()

.render()方法每次执行都需要调用大量的CPU、GPU等硬件资源,所以为了提高渲染性能,可以考虑尽量减少.render()的执行次数。

如果场景默认是静态的,没有动画,比如展示一个产品、建筑或机械零件的三维模型,只需要在鼠标旋转缩放三维模型,触发.render()执行即可,在没有发生鼠标事件的时候,可以不执行.render()

对一些有动画的场景,可以适当控制requestAnimationFrame()函数周期

性执行渲染的次数,比如把默认60FBS设置为30FBS。

渲染帧率的优化,其实就是合理调用 render

帧率优化的思路主要是需要时才渲染,无操作时不调用render()。什么时候需要调用渲染呢?主要包含以下情况:

scene中object的增、删、改
object被选中、反选
相机位置、观察点变化
渲染区域大小变化

于是我们需要注意哪些操作会触发这些变化,主要有以下操作:

scene.add/remove方法被调用 (当模型被加载、移除等)
object material的变化,位置、缩放、旋转、透明度等变化
OrbitControls的的变化
camera的 'change'事件
鼠标的 mousedown/mouseup/mousemove等事件
键盘的w/a/s/d/up/down/left/right arrow等

对于大多数一般处于静态的三维场景,可以不一直周期性执行threejs渲染器方法.render(),根据需要执行.render(),比如通过鼠标旋转模型,就通过鼠标事件触发.render()执行,或者在某个时间段出现动画,就在这个时间段周期性执行.render(),过了这个时间段,就恢复原来状态。

比如鼠标控件OrbitControls,当通过OrbitControls控件旋转缩放三维模型的时候,触发渲染器进行渲染。

    // 渲染函数
    function render() {
      renderer.render(scene, camera);
    }
    render();
    var controls = new THREE.OrbitControls(camera);
    //监听鼠标事件,触发渲染函数,更新canvas画布渲染效果
    controls.addEventListener('change', render);

减少没必要执行的代码在周期性渲染函数中的执行

threejs会通过requestAnimationFrame()周期性执行一个渲染函数render(),在渲染函数中除了渲染器.render()方法,其它的尽量放在渲染函数外面,如果必须放在里面的,可以加上if判断尽量加上,不要每次执行render函数的时候,每次都执行没必要执行的代码。

InstancedMesh

在新的threejs版本中,新增加了几个很有意思的Instance类,这里重点挑InstancedMesh来说。InstancedMesh与使用一个geometry共享创建出Mesh是不一样的,InstancedMesh最终达到的效果是一次Drawcall,而共享geometry创建出来的Mesh并无此效果,效率跟不共享创建Mesh渲染性能上没有太大区别,只是可能会省点内存。

InstancedMesh是R110之后出现,有兴趣的可以试试

 

待更。。。

标签:鼠标,render,渲染,three,js,InstancedMesh,执行,优化
From: https://www.cnblogs.com/Wei-notes/p/17120996.html

相关文章

  • 探索JS混淆加解密技术
    JavaScript混淆是保护您的代码免受未经授权的访问的有效方法。然而,当您需要修改或扩展混淆代码时,混淆可以使代码难以理解和修改。解决这个问题的方法是使用JS混淆解密技术。......
  • ABP VNext DateTime Json处理
    前言api接口返回DateTime默认是yyyy-MM-ddTHH:mm:ss格式,需要转成yyyy-MM-ddHH:mm:ss解决方法Module文件添加context.Services.Configure<AbpJsonOptions>(options=......
  • jsp的九大内置对象定义及其作用
    1.什么叫做内置对象?答:在jsp中,有一些对象即开发者不需要自己去创建对象(全部由系统创建好),就可以直接使用对象调用相应的方法,这些由系统创建的对象称为内置对象。2.九大内置......
  • 干货!!!mysql如何进行优化,mysql优化环节
    MySQL优化环节有很多,我个人经验从硬件优化、软件优化、表结构设计、查询语句四个方面来考虑。硬件优化:MySQL软件本身是运行在硬件服务器之上,数据是存储在磁盘的。如果能......
  • 转换率优化教程_编程入门自学教程_菜鸟教程-免费教程分享
    教程简介转换率优化定义-从定义,基础知识,了解客户,目标设置,误区,优化计划,用户体验和漏斗优化,目标网页优化,降低退回和退出率,测试和优化,测量结果,学习转换率优化优化技巧,结论。......
  • m基于ACO蚁群优化的货车运输路线规划matlab仿真,考虑车辆载重,单位运输成本等因素
    1.算法描述蚁群算法是通过对自然界中真实蚂蚁的集体行为的观察,模拟而得到一种仿生优化算法,它具有很好的并行性,分布性.根据蚂蚁群体不同的集体行为特征,蚁群算法可分为受......
  • m基于ACO蚁群优化的货车运输路线规划matlab仿真,考虑车辆载重,单位运输成本等因素
    1.算法描述      蚁群算法是通过对自然界中真实蚂蚁的集体行为的观察,模拟而得到一种仿生优化算法,它具有很好的并行性,分布性.根据蚂蚁群体不同的集体行为特征,蚁......
  • json查询
    json查询procedureTFunc1549.select(req,res:TSerialize);vardb:tdb;pool:tdbpool;jo:variant;begintrytrypool:=GetDBPool('1');......
  • Svelte框架结合SpreadJS实现表格协同文档
    SpreadJS是葡萄城结合40余年专业控件技术和在电子表格应用领域的经验而推出的纯前端表格控件。作为一个类Excel控件,SpreadJS如何实现当前比较流行的表格协同呢?本篇文章将......
  • JSP上传大文件的三种解决方案
    ​ 在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现。先说下要求:PC端全平台支持,要求支持Windows,Mac,Linux......