Revit-BIM模型轻量化帧率控制

最近有些忽悠大侠出来，说他的技术利用“视觉残留”欺骗用户的眼睛，以达到性能优化，有多么牛逼，那么今天我们来研究一下所谓视角欺骗是怎么一回事。

第一点：人的眼睛有一种视觉暂留的特性。眼睛的一个重要特性是视觉惰性，即光象一旦在视网膜上形成，视觉将会对这个光象的感觉维持一个有限的时间，这种生理现象叫做视觉暂留性。对于中等亮度的光刺激，视觉暂留时间约为0.1至0.4秒。中国古代的走马灯，就是通过这个特性来实现视觉的动画效果。让我颇为怀念的是20年前跟着我大伯用翻斗车接着十大麻袋的电影胶卷去周边村子播放李连杰的《少林寺》，电影胶卷是静态的，通过一秒24帐的播放却可以给人以连续的画面。

视角欺骗其实就是帧率下降，还不涉及到帧率提升，没有太多的技术含量。Three.js 渲染器的渲染方法.render()每执行一次，WebGL帧缓冲区就得到一帧像素数据，canvas画布就会显示当前渲染的一帧像素数据。通过requestAnimationFrame()可以周期性调用执行渲染方法.render()，帧率就是指渲染方法.render()每秒钟执行次数，比如帧率是 60，可以表示为 60FBS，FBS 对应的英文是 Frame per Second 每秒帧数。每一帧消耗的性能都是很高的，持续渲染，CPU和GPU都会以比较高的负荷工作。其实降到30，人眼直觉感觉不出来，只不过做动画的要注意帧率快慢。

帧率下降，下降还是比较容易的，在循环中间增加休息时间即可。

在一些特定的应用中没有必要保持Threejs渲染频率为60FPS，那么可以通过Threejs渲染时间判断来控制Threejs渲染频率，比如设置为30FPS。

// 创建一个时钟对象Clock
var clock = new THREE.Clock();
// 设置渲染频率为30FBS，也就是每秒调用渲染器render方法大约30次
var FPS = 30;
var renderT = 1 / FPS; //单位秒  间隔多长时间渲染渲染一次
// 声明一个变量表示render()函数被多次调用累积时间
// 如果执行一次renderer.render，timeS重新置0
var timeS = 0;
function render() {requestAnimationFrame(render);//.getDelta()方法获得两帧的时间间隔var T = clock.getDelta();timeS = timeS + T;// requestAnimationFrame默认调用render函数60次，通过时间判断，降低renderer.render执行频率if (timeS > renderT) {// 控制台查看渲染器渲染方法的调用周期，也就是间隔时间是多少console.log(`调用.render时间间隔`,timeS*1000+'毫秒');renderer.render(scene, camera); //执行渲染操作...//renderer.render每执行一次，timeS置0timeS = 0;}
}
render();

帧率的提升却实在太难了，这和眼睛的残留特性并没有什么关系。但是，这才是难点，可以说任何的模型优化手段都用上都不为过。但是我们这次只说几个小手段。

（1）分时加载算法(大数组)。本质上渲染一个模型，可能包含了5万个物体。但是渲染了一部分的时候，用户交互触发，前面一个渲染已经可以被放弃了（可能是相机已经转走了，再渲染已无意义）。这时候要需要中断渲染，如何把优先权让给用户交互呢？这可以引入大数组分断的概率。比如5万个物体，分10次渲染，每次渲染完的间隙时间让给响应鼠标。当鼠标触发新渲染，则中断前一次渲染。此时交互过程的帧率可以调到比较高的水平。timeout是灵魂！调查显示100ms内的响应能让用户感觉非常流畅。50ms是 Nicholas 针对 JavaScript 得出的最佳经验值。

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

//Copyright 2009 Nicholas C. Zakas. All rights reserved.
//MIT Licensedfunction 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);
};

（2）几何合并。

在webgl里面，降低drawcall来的的收益十分巨大。

geometries 为所有几何不重复的，材质相同的物体

geometries 为所有几何不重复的，材质相同的物体，重要的事情说三遍。几何相同的，请用instance复用。利用的收益比合并更巨大。材质不相同的物体，合并了也没有用。别看那些误导人的，说通过索引能够把材质不同的也进行合并，合是能合，合起来没鸟用，drawcall不会降低，还失去了独立控制权。

//geometries 为所有几何不重复的，材质相同的物体var myOne = THREE.BufferGeometryUtils.mergeBufferGeometries(geometries, useGroup)var xmesh = new THREE.InstancedMesh(myOne, myMtrs, 1);

合并前的

合并后的

有些手段如果说得不够详细，还请大家多多包涵。都已经21节了，大家自研的引擎应该差不多做出来了吧？做不出来就别做了，费事费力，不如直接用我们的。再做个广告吧。

自研引擎产品试用，demo下载：

QModel-BIM模型浏览器

Revit-BIM模型轻量化帧率控制相关推荐

bim 模型web页面展示_HTML5/WebGL技术BIM模型轻量化Web浏览解决方案
原标题:HTML5/WebGL技术BIM模型轻量化Web浏览解决方案互联网技术的兴起极大地改变了我们的娱乐.生活和生产方式.尤其是HTML5/WebGL技术的发展更是在各个行业内引起颠覆性的变化,大 ...
BIM研究-基于HTML5/WebGL技术的BIM模型轻量化Web浏览解决方案
内容来源:http://developer.51cto.com/art/201601/504553.htm 根据运维系统的特点,运维人员可能并不熟悉建筑建模软件的使用,同时让运维人员使用建模软件来做运 ...
bim 模型web页面展示_基于HTML5/WebGL技术的BIM模型轻量化Web浏览解决方案
互联网技术的兴起极大得改变了我们的娱乐.生活和生产方式.尤其是HTML5/WebGL技术的发展更是在各个行业内引起颠覆性的变化,大家感受最深刻的可能是游戏.电商.O2O等和我们生活息息相关的行业,但这 ...
Three.js BIM模型轻量化 FPS渲染速率优化多实例渲染[Instance]+顶点合并[Merge]
BIM模型不经过处理,直接加载到Three.js 创建的场景中,很大可能会很使fps帧率下降,原因在于模型的个数太多,有的模型是多材质的话还需要在Three.js中绘制两次,这样会导致drawcall ...
BIMFACE工程师现身说法，带你了解BIM模型轻量化技术细节
伴随着互联网的发展,越来越多的BIM用户希望在Web端直接浏览三维模型.传统的BIM应用程序都基于桌面客户端,且需要较高的计算机配置:高频CPU.大内存.独立显卡.在从桌面端走向Web端.移动端的过程 ...
BIM模型轻量化的方法总结
目录 1 .BIM轻量化方法概述 2.BIM轻量化内容 2.1 构件信息提取 2.2 BIM模型合并 2.3 BIM模型分级
BIM模型轻量化-SSAO效果-自然光漫反射阴影
hello,我又来做知识的搬运工了.今天的主题是,如何让模型看起来呈现自然光的漫反射出现的阴影轮廓呢? 首先,推出threejs官方的一个后处理通道效果,先看demo,在轮廓的边缘出现阴影.示例: t ...
bim webgl 模型轻量化_数字化交付模型轻量化技术研究
研究背景随着BIM应用的越来越深入,无论是在民建领域还是在基建领域,BIM模型越来越精细.越来越大已经成为一种现实与趋势,而建筑业全面推行数字化交付,模型轻量化技术与数据存储技术必将成为其中的关键. ...
cad模型轻量化_BIM模型轻量化到底有啥用？三种解决方案按需挑选！
假如你是一个建筑设计师,你将会接触Archicad,Bentley,Revit,su等: 假如你是一个结构设计师,你将会接触PKPM,Tekla,YJK,Revit等: 假如你是一个机电设计师,你将会 ...

Revit-BIM模型轻量化帧率控制

Revit-BIM模型轻量化帧率控制相关推荐

最新文章

热门文章

Revit-BIM模型轻量化 帧率控制

Revit-BIM模型轻量化 帧率控制相关推荐

最新文章

热门文章

Revit-BIM模型轻量化帧率控制

Revit-BIM模型轻量化帧率控制相关推荐