通用3D-主组件

当前有一类组件是通用化的3D组件,它们的功能在设计时就是尽可能通用的,就是把能保持一致的功能都保持一致,也进一步减少用户的学习和使用成本,这类组件当前包括:

  • 倾斜摄影
  • 3D边界地图
  • 3D园区

这类组件因为功能高度相似,所以也有很多通用的配置项,所以这篇文章里介绍的都是通用化的3D组件中通用的那些功能和配置项。

镜头控制操作

通用化的3D组件的镜头控制操作都是相同的,也是成为定点控制器的控制模式,它主要是围绕这场景中某一个点在旋转。主要支持的设置是鼠标,触摸板也定有一定程度的支持,移动端触屏暂时不能支持。

鼠标操作

  • 左键拖拽:旋转镜头
  • 右键拖拽:平移镜头
  • 鼠标滚轮:镜头缩放

触摸板

具体取决于设备的触摸板手势与鼠标操作的映射关系,可以查阅相应设备的手势相关的资料。

键盘操作

可以使用键盘上按键控制镜头的移动,按键和作用如下:

W:控制镜头向前

S:控制镜头向后

A:控制镜头向左

D:控制镜头向右

Q:控制镜头向下(地图组件下无效)

E:控制镜头向上(地图组件下无效)

移动端触摸屏

在移动端的触摸屏上暂未做支持。

灵敏度控制

按住Shift键做镜头缩放和镜头平移时灵敏度加速10倍,用来做快速操作。按住Alt键做镜头缩放和镜头平移时灵敏度减速10倍,用来做细微操作。

配置项

通用设置

设备像素比

改变这个配置项会影响显示画面的清晰程度,并且极大地影响性能。

数值越大,渲染的像素越多,一般画面越清晰,但消耗更多性能;数值越小,渲染的像素越少,画面越模糊,消耗的性能更少。而数值超过显示器需要的设备像素比时,虽然渲染的像素更多了,但肉眼无法分辨出来,那就是浪费性能了。

当你的显示器的像素密度较高的时候,较低的设备像素比会让画面变得模糊不清晰。一般的Mac笔记本的需要的设备像素比大于1,而一般的Windows台式机的显示器需要的设备像素比是1。一般的大屏使用的显示器的需要的设备像素比是1(甚至低于1)。

数值1表示,组件设置的尺寸与实际3D画面渲染的尺寸是1比1的关系,就是完全一致,这个是最常用的设置。此时消耗1个倍数性能,也就是正常的性能消耗。

数值2表示,实际3D画面渲染的尺寸是组件设置的尺寸两倍,比如组件上设置的宽高是1920*1080,这样实际渲染的尺寸是3840*2160(4K分辨率)。理论上的性能消耗大约是设备像素比为1时的4倍(实际上性能还受很多因素的影响)。

所以实际在大屏上显示时,一般只要设置设备像素比为1就够用了;但在开发阶段使用Mac笔记本时可能会发现画面比较模糊,可以临时调高这个配置项,在开发阶段结束时改回1,以节约性能。或者在画面明显掉帧是,适当调低这个配置项,以缓解性能压力。

单位分辨率

单位分辨率是为了确定物体属性的UI元素的世界尺寸。例如3D地图的区域名称的文字大小,在使用字号确定的3D文字的情况下,需要一个表示解析度的系数。

从感性上来说,它是调整在一定的观察距离下,3D文字的清晰程度,数值越大,越清晰。

原理上说,它规定了世界坐标系的一个世界单位对应的像素的个数。一般的UI如果是平面的,例如始终面向相机的UI,它不会随着镜头远近而缩放,也不会随着观察角度变化而旋转,那就没有任何问题,直接渲染到屏幕中即可。但现在如果想要把UI当成3D物体,放到3D场景中,随着镜头的缩放而缩放,随着观察的角度旋转,那就需要确定这UI在3D世界中的大小。而确定3D世界的大小必须使用世界坐标系,然后才能走渲染流程最终栅格化成像素。

如下图所示,假如当前单位分辨率是4,需要显示的图片的宽高都是8像素,经过计算后这张图片在3D场景中的尺寸就是2。

那么3D场景中尺寸为2的图片最终渲染出来到底有多大呢?这个就是相机距离图片的远近有关系了,按照透视原理,近大远小,离得近了自然图片大,离得远了自然图片小。离得近了,图片大了,就会变模糊,甚至变成马赛克,就需要更多的像素才能更清晰,所以需要提高单位分辨率。

而单位分辨率也不能随意地提升,因为更高的分辨率会对性能造成更大的压力,所以一定是“够用就行”。怎么判断够用呢?一般场景在设计搭建时都会考虑一个最近的观察距离,因为无限近的观察距离是没有意义的(无限近就变成显微镜了,那必不可能)。这个最近的观察距离下,我们看所有的物体都是足够清晰(或者说能勉强满足我们对清晰度的需求)。确定了这个最近的观察距离之后,我们就可以尝试在这个距离下观察我们的世界场景的UI是否足够清晰,如果模糊就增加,直到清晰为止;如果已经清晰了,可以尝试适当减小是否还是清晰,这样就是尽可能减小这个数值,来节约性能。

相机

对相机的进行一些设置。

相机的理论知识可以参考《3D知识-入门篇》中的相机部分

近平面

场景中的物体能渲染出来的最小距离,如果物体与相机的距离小于这个距离,则不可见。如果物体的某一部分小于这个距离,则这个物体会被裁剪。

减小这个值可以更加贴近物体来查看细节,增大这个值,靠近物体则更容易被裁剪掉而不可见。较大的值有利于提高深度值的精度,避免深度冲突(多个重叠或者位置相近的物体出现闪烁、抖动的现象)。

一般城市级别的场景3D单位是米,所以可以设置这个配置项为1,意思是距离相机小于1米的物体将会被裁剪掉而不可见。城市级的场景一般不需要贴近1米之内来查看物体。而如果是园区场景、室内场景(如一个工厂),可以设置这个配置项为0.1,意思是小于0.1米的物体被裁减掉。

远平面

场景中的物体能被渲染出来的最大距离,如果物体与相机的距离大于这个距离,则不可见。如果物体的某一个部分大于这个距离,则这个物体会被裁剪。

增大这个值可以看到更远的物体,减小这个值,远处的物体更容易被裁剪掉。较小的值有利于提高深度值的精度,避免深度冲突。如果发现远处的物体被裁剪掉了,可以适当增大这个配置项,以让物体完全显示,但也不能过大,不然容易产生深度冲突

一般城市级别的场景设置这个配置项为1000到10000,意思是城市最远可以看到几千米远的地方;园区场景室内场景可以设置1000以内。而如果场景中有远景,则看情况设置10万以内的数值,一般不需要设置大于10万的值。

视场角

控制相机的视野范围。数值越大,相机可视的范围越宽广,画面中渲染的场景范围也越广;数值越小,相机可视的范围越狭窄,画面中渲染的场景范围也窄。其他的专业软件中一般叫做Fov。

这个配置项的数值是一个0到180的角度值(角度制),一般小范围场景设置45到60,城市级的场景设置60到80。数值越大,虽然画面变广了,但是画面的中四个角容易变形,数值越大变形越严重(设置180的时候整个画面都是扭曲的)。这个配置项一般不要超过90。

镜头范围限制

开启这个配置项可以对镜头的可活动范围进行限制,防止视角到了某个奇奇怪怪的角落,而看到穿帮的画面(比如穿到地底,移动到看不到场景物体的地方而找不到回家的路了)。

缩放

鼠标滚轮可实现镜头的拉近和拉远,这个配置项可以限制镜头拉近拉远的幅度。

最小的输入框里限制的是镜头最近能拉多近,防止过度地靠近地面;最大的输入框里设置的是镜头最远可以拉多远,防止过度地远离场景主体。

这个配置项是世界单位下的数值,并且其最小值不能大于最大值。

例如设置最小值为30,最大值为800,意思是镜头可以在离地面30米和800米之间的范围活动(假设场景中使用了米为单位,且地面的位于世界原点所在的平面上)。

位移

鼠标右键可以在与视线垂直的平面上平移镜头,这个配置项可以限制镜头平移的范围,防止镜头拉到一个离场景主体太远的地方,或者移动某些可以看出穿帮的地方。

分别配置位移在3个坐标轴上的极值。

旋转

鼠标左键可以控制镜头进行旋转,这个配置项限制了镜头在垂直方向上的旋转角度。(当前只支持限制垂直方向的角度,也就是说只能限制俯仰角)

这个配置是一个范围选择的控件,可分别设置最大值和最小值,镜头可以在活动在最小值与最大值之间的角度。

配置的角度数值是相机视线与地面的夹角(角度制)。例如,从空中完全俯视地面,这时角度是90度;视线与地面平行(完全平视),这时角度是0度。

镜头灵敏度

可以控制镜头时操作的灵敏程度。四个参数对应了四个分别控制灵敏度的操作,包括缩放、平移、水平旋转和垂直旋转。灵敏度设置为0则该操作不可用,就是“点了没反应”。如果感觉控制镜头时某种操作太快或太慢,可以调节这些参数来优化操作体验。

  • 缩放:鼠标滚轮控制镜头拉远和拉进的灵敏度
  • 平移:鼠标右键控制镜头平移的灵敏度
  • 水平旋转:鼠标左键在垂直方向上控制镜头旋转的灵敏度,也就是控制俯仰角的灵敏度。
  • 垂直旋转:鼠标左键在水平方向上控制镜头旋转的灵敏度,也就是控制镜头绕视点水平旋转的灵敏度。
  • 键盘移动:键盘控制镜头移动的灵敏度。

镜头自动旋转

启用后,在无用户操作时镜头会围绕这当前视点自动旋转,可以设置旋转的速度。

调试模式

调试模式下可以让开发者对组件进行调试,方便排查和定位问题。因为是为开发者设计的,所以一些参数可能只对开发者才有意义。因为涉及到一些专业知识,所以这里不会详细描述。而且建议在调试结束后立即关闭调试模式,以免影响正常的表现。

统计信息

开启统计信息后,会在组件右上角显示如上图所示的统计面板。统计面板上参数的意义如下:

FPS

每秒的帧数,也就是通常的说帧率。帧率不会超过当前显示器的刷新率,而低于刷新率说明性能不够了,掉帧了。一般的显示器上最大帧率是60,大屏上可能会更低(30左右)。

每帧消耗

渲染每一帧时CPU消耗GPU消耗的时间之和,数值单位是毫秒。(参见下文)

CPU消耗

渲染每一帧时CPU中花费的时间,数值单位是毫秒,CPU消耗的时间一般用于逻辑运算。如果时间大部分花费在CPU中,可能是数据量过大、动画过多、子组件数量过多等。

GPU消耗

渲染每一帧时GPU中花费的时间,数值单位是毫秒,GPU消耗的时间一般用于3D渲染。如果时间大部分花费在GPU中,可能是3D渲染的压力太大,例如物体数量过多、网格数量过多、纹理分辨率太高等。

DrawCall

DrawCall是每一帧中CPU向GPU提交绘制命令的次数。这个数值过大意味着需要消耗很长时间在CPU与GPU的通信上,这时一般需要优化。如果DrawCall数量在100以下,就是比较好的情况;如果在100到300之间,就算有一点压力,但还过得去;如果数值1000左右甚至几千,基本上就是卡得动不了了。

页面内存

分配给JavaScript引擎的总堆内存,单位是MB。(当前Chrome浏览器下如果超过4096MB,则直接内存溢出而页面崩溃)

页面在用内存

JavaScript引擎正在使用的堆内存,单位是MB。

碰撞器

开启后,将在场景中以绿色线框的形式显示用于事件交互的碰撞器。(出于性能考虑,开启这个配置项后不会立刻生效,需要刷新编辑页或预览页面才能生效)

场景效果

环境光

灯光子组件中设置的是直接光,但场景中还有直接光照射不到的地方,这些地方在真实世界中是通过间接光照亮的。为了模拟真实世界中的间接光,使用了一种成为环境光的特殊的光源,它会给场景中所有物体均匀地增加一定的亮度(或覆盖一种颜色)。

环境光可以设置颜色强度

如果设置的颜色不是灰度颜色(纯白色、纯黑色以及二者之间的过渡灰色),则会给场景中所有物体染上一层颜色,这时可能会改变地图顶面或者图片子组件的颜色。

强度设置为0则表示不使用环境光,设置的值越大,给场景所有物体提升的亮度越大。过大的值可能会导致场景过曝甚至全屏变白,过小的值会让整个场景显得黯淡。

如果使用HDRI,则可以不使用环境光,这时如果开启环境光反而会提高整个场景的亮度,导致其不符合物理渲染。

常见问题:

  • 如果发现场景中去掉所有的灯光后,场景物体还不是全黑,则可能和设置了环境光有关系。
  • 如果发现场景中物体有色差,比如图片上传后颜色不对,排除了灯光的影响后,就可能与环境光有关系。

HDRI

HDRI可以为场景提供一个天空作为背景,同时HDRI还给场景中的一些基于物理渲染的物体提供间接光照。HDRI的理论知识可以参见《3D知识-效果篇》中HDRI的部分

这里推荐一个第三方网站,可以下载HDRI资源:https://polyhaven.com/hdris

如下图所示是一个HDRI的效果:

文件

可以上传.hdr格式的文件(暂不支持其他格式的HDRI文件)。

旋转

设置HDRI在水平方向上的旋转度数(角度制),数值范围在-180到180之间。一般地,HDRI有一个光源位置(就是图像中最亮的那个点),需要设置这个配置项才能让HDRI的光源方向和真实的灯光方向保持基本一致(以避免光照不自然)。

色调映射

色调映射可以会改变画面的质感,类似于滤镜的效果。另一个方面,如果不使用色调映射(下拉菜单中选择“无”),在PBR渲染下很容易出现画面过曝的现象,所以一般要选择一种色调映射类型(非写实风的渲染可不使用色调映射)。

一般改变色调映射之后,HDRI曝光也要相应的调整,不然画面可能会曝光过度或不足(参见下文的HDRI曝光)。

色调映射的理论知识可以参见《3D知识-效果篇》中色调映射的部分

各种色调映射的类型的效果示例如下:

  • Linear

  • Reinhard

  • Cineon

  • ACESFilmic

各种类型的映射对于画面的颜色和明暗有一些细微的影响,对天空的曝光程度也有很大影响,具体可以逐个尝试着查看。(推荐使用ACESFilmic或Cineon)

颜色调整

对画面整体上进行的颜色调整,可以适当增加画面的饱和度、对比度和校正曝光程度来美化画面效果。

因为技术上是全屏后处理,所以不仅会对3D物体产生影响,也会对UI有影响,调整的时候可能要注意兼顾各个部分。

各个参数都是图像处理的常用的,与PS等专业软件的意义完全一致,具体细节可查阅相关资料。这里只做一些简单说明。

亮度

影响画面的整体亮度。在开启了Bloom后,要注意其对发光区域的影响。

对比度

影响画面的明暗对比。增加这个值可以提高明暗对比,画面对比更加鲜明;减小这个值会让画面对比变淡,有一种灰蒙蒙的感觉。对比度和亮度一般需要互相配合来调整整体的明暗。

色相

影响画面的色调。向左或向右移动这个配置项会让画面中的颜色偏红、偏蓝或偏绿,适当调整这个值可以营造出暖色感或冷色感。一般这个值只需要调整一点点,不然画面会失真。

饱和度

影响画面颜色的鲜艳程度。增大这个值让颜色更加鲜艳,减小这个值让画面变灰暗。一般较高的饱和度有较好的画面效果,但也不能过大,不然会画面会失真。

明度

影响画面的明暗程度。看起来这个参数和亮度差不多,都会让画面变亮或变暗,但在算法实现上有本质区别,这让它们在细节之处有差别。

增加明度就仿佛在画面上蒙了一层半透明的纯白色的图层:开始这个图层透明度为0,明度值越大,这个白色图层的透明度越小,明度为100%时,画面完全变成白色了。

减小明度就是上述过程中的白色图层换成黑色图层,原理类似。

泛光

泛光就是屏幕后处理技术中的Bloom(在Blender等软件中叫做辉光),它会对画面中超过某一个亮度值的区域进行发光处理,可以实现类似于太阳照射在金属上形成的亮光,或者在非写实场景下模拟灯泡发光。关于Bloom的理论知识可以参见《3D知识-效果篇》中的Bloom部分

阈值

画面中颜色亮度值超过阈值将会产生发光效果,亮度值在阈值以下则不产生发光。

在写实风的场景中,场景的物体的最终渲染出来的颜色,如果亮度值大于1,说明它已经曝光过度了,原因很可能是因为它的能量太高了(例如太阳或者反射太阳光的亮点),它的实际的亮度值可能是几百、几千甚至几万。所以为了让场景中能量搞的部分才发光,一般至少要设置大于1的阈值,用来筛选出那些能量高的部分。阈值具体的数值还受到HDRI曝光值、灯光的光照强度、材质的参数等因素的影响,需要不断尝试选出最适合当前场景的阈值。

在科技风场景中,为了更多的表现发光效果,可能要设置低于1的阈值来让大多数的线条或形状能发光,来营造科技感。如下图所示:

强度

设置发光的强度,数值越大发光颜色越亮,发光范围越明显。

卷积半径

从技术角度来说它是高斯模糊的卷积半径。实际使用中,它的数值越大,发光的范围越大,但也越消耗性能。

迭代次数

从技术角度来说它是模糊处理的应用次数。实际使用中,它的数值越大,发光的范围越大,但也越消耗性能。

迭代步长

从技术角度来说,它是每次模糊处理时高斯模糊卷积的步长。实际使用中,它的数值越大,发光的范围越大,不会增加性能效果,但会降低模糊质量,可能会观察到瑕疵。设置为1则是完美的质量,设置为2或者更大的值则是牺牲质量换取更大的发光范围。一般最多设置为2或者3,再大就有接受不了的瑕疵了。

最佳实践

泛光是比较消耗性能的后处理,高质量的泛光一般要求发光的范围要大。未优化的情况下,发光范围与性能消耗成正比,一般发光范围达到几百像素在较高的硬件配置下也非常卡了。而为达到几百像素的发光范围,性能消耗又在可接受的范围内,需要灵活运用卷积半径迭代次数迭代步长这些配置项。

迭代次数一般不能太大,最多到7左右。这时如果发光范围还不够大,就考虑其他配置项了。

卷积半径一般设置为5,最多可以加到十几,再多一般就承受不了。当前这个参数只消耗显卡性能,显卡好的可以多加点。

最后考虑的是迭代步长,迭代次数和卷积半径都到瓶颈了,就可以考虑这配置项,再不提升性能消耗的情况下,牺牲发光质量换更大的发光范围。如果瑕疵不明显或能接受,就可以一直往上加。根据经验来说,最多到3,超过就有很明显的瑕疵。

抗锯齿

设置是否开启抗锯齿以及抗锯齿的效果等级。

技术上使用的是基于WebGL2.0的MRT(多重渲染目标)实现的MSAA,所以在对WebGL2.0兼容性不够的浏览器上可能有异常的表现,例如Safari、Firefox(火狐)或旧版本的Chrome,但由于MSAA在抗锯齿算法中有着不俗的效果和卓越的性能表现,所以为了使用这个配置项的功能,建议准备高版本的Chrome以避免兼容性问题。

关于抗锯齿的理论知识,可以参见《3D知识-效果篇》中抗锯齿的部分

采样倍数

数值越大,抗锯齿效果越好,但也越消耗显存(对GPU的影响倒是其次的)。设置为0则等同于关闭此项,数值必须是2的整数次幂。(当前最大值不能超8,设置为8已经基本够用了)

给场景的所有物体,根据其距离相机的远近,蒙上一层颜色,来模拟雾的效果。当前是根据深度值线性变化的算法,所以和真实的雾天可能有点不一样。但它的雾在空间范围上变化得比较均匀,比较适合模拟大气散射。

颜色

雾的颜色,雾天的雾一般是白色,或者灰度值低一点的白色,也可以是有颜色的雾(如灰黄色),模拟出沙尘或雾霾天气。这个配置项的透明度不会生效。

范围

最近值表示的是距离相机多远处开始有雾,最远值表示的是距离相机多远处开始是最高浓度的雾。最高浓度的雾就是物体表面的颜色和颜色配置项里设置的颜色完全一致,就是基本无法分辨物体,一整片都是雾的颜色。最近值可以设置负数,表示相机所在的位置也覆盖了一定浓度的雾,加强整体的雾的覆盖度。

阴影

阴影是在有光照的场景中物体在另一个物体上的投影,用来表现物体之间再光源下的互相遮挡的关系,可以增强画面效果。尤其是在写实风的场景中,阴影的效果更是立竿见影,可以说没有阴影就不会有写实感。

更新时机

设置阴影渲染更新的实际,一般来说需要每帧都更新阴影,这样物体移动和变换后才能有正确的阴影,这种更新方式就是实时

实时更新阴影的话相当于每帧都要计算,比较消耗性能。而且如果有时候场景中的绝大部分物体都不会动,阴影就是不动的,这样还每帧计算阴影就有点浪费性能了。而一般场景中导致物体移动或者改变的时机一般是数据有变化的时候,数据更新的频率可远远低于每帧渲染,所以可以设置更新时机数据驱动,既能保证大部分情况下数据驱动物体变化时能及时更新阴影,又能在数据不变化时大大节约性能。

分辨率

由于图形学上阴影是基于一种成为阴影贴图的技术实现的,并且无法将这个技术细节完全隐含在产品内部,无可避免地需要使用者根据场景需求和性能情况合理设置分辨率

分辨率越大,一般阴影效果越精细,但越消耗性能。而且阴影覆盖范围越大,需要的分辨率越大。所以需要和灯光子组件中的阴影范围联合调节。

阴影偏差

又叫做bais。由于图形学上阴影实现的某些局限性,当物体出现自阴影的时候需要增大这个值来消除之。自阴影就是物体表面出现一条一条的阴影条纹,如下图所示(对比上面的图片能很明显看出斜向的条纹):

但是这个值又不能调得太大,如果太大,会导致阴影过大地偏离投影的物体,明显看出渲染不正确。较小的值实际也会造成偏离,只不过是一般视角尺度下看不出来而已(理论上无限接近物体总能看出来)。

一般并不需要设置这个阴影偏差,保持为0就行。但是导入模型后发现有条纹,绝大部分情况下是建模师没有开启背面剔除导致的。没有开启背景剔除的模型导入后,设置阴影偏差也能消除条纹,但却牺牲了渲染效果,所以建议建模时一定勾选背面剔除。(除非是真的想做双面渲染的平面)

场景管理

点击配置项面板中如下所示的按钮,即可进入场景管理的配置界面:

进入场景管理的配置界面后,右侧有如下所示的配置项:

在场景管理的界面中,3D场景是可以自由控制镜头的。多场景配置项本身是一个配置项列表,可以添加多个视角。

刚进入场景的初始镜头使用的列表中的第一个镜头。

添加多个镜头后,可以通过其他组件对本组件设置自定义动作,来切换不同的视角。具体可以参见自定义动作中切换场景的部分

镜头视角

通过镜头控制操作设置成某个视角后,点击镜头视角中的保存按钮可以把当前的视角记录到配置项中;点击镜头视角中的“镜头”两个文字,可以预览该镜头的视角。点击重置按钮可以恢复到编辑之前的镜头数据。

名称

设置一个方便记忆和识别的名称,镜头数量多起来了之后,后期维护更加方便,也方便其他人接手。这个名称也会出现自定义动作-场景切换的列表中,如果不设置这一项,在自定义动作-场景切换的列表中会默认以场景1、场景2、场景3等格式的名称来显示这个视角。

入场时间

从其他视角切换到这一个视角时,通过这个配置项来设置镜头移动的动画持续的时间,以控制切换镜头的速度,数值单位是秒。

列表中的第一个镜头用于场景加载完成后的默认视角,默认视角没有镜头移动动画,所以这个配置项对于默认视角无效。但是从其他视角切回默认视角时,这个配置项就开始生效了。

开场播放

勾选后,组件加载完会自动切换到该视角,以此可以实现开场的镜头动画。如果多个视角都勾选了,则只会第一个勾选的生效,不建议勾选多个。

速度

设置镜头切换动画的速度变化。

速度系数

速度配置项设置为不是匀速时,会影响速度变化的程度,设置为1就是没有变化,数值大于1则速度变化率越大,数值小于1且大于0则变化率越小(一般设置这种数值)。

退出编辑模式

点击左上角的按钮返回主编辑视图即可退出编辑模式:

此时如果有未保存的镜头,会有确认提示框弹出。

自定义动作

切换场景

切换场景可以控制目标组件的镜头视角切换到预设的视角,实现3D场景中的巡航、漫游和聚焦等功能。

动作列表中,动作下拉列表选中切换场景后,会多出一个场景名称的配置项,展开它的下拉选项,列表中是目标组件在其场景管理中配置的镜头列表(参见场景管理)。

休眠

休眠是让组件进入不可见状态,并且停止渲染和逻辑更新。当有隐藏组件的需求时,可以使用休眠动作来隐藏组件,并且因为不更新逻辑、不渲染场景,对CPU和GPU没有资源占用,而再次显示出来的时候(使用自定义动作-唤醒),可以不重新加载组件(显示出来的速度极快),并且保留隐藏时的状态(保留镜头位置、交互状态等)。可以理解成做了内存中的缓存。

唯一的问题是,休眠后组件占用的内存和显存不会释放,过多的使用有可能导致内存溢出或WebGL上下文丢失。

(因为没有卸载和重新加载组件的过程,休眠唤醒无形之中还可以规避可能存在的内存泄漏)

唤醒

休眠配合使用,把进入休眠状态的组件重新唤醒,回到可见状态,恢复之前的交互状态,继续渲染画面和逻辑更新。

对未进入休眠状态的组件使用无效。

400-8505-905复制
免费试用
在线咨询
微信社区
易知微-数据可视化
微信扫一扫入群