家具加到50个以后为什么转视角开始卡了前言前面六篇SpaceRoom 从空房间做到了能选家具、能转视角。房间里放个十来件家具跑起来很流畅。然后我放了 50 件家具进去问题来了转视角的时候开始掉帧拖一下卡一下内存也涨了不少。第一反应是手机性能不够吧然后我打印了一下帧率发现还真不是 GPU 跑不动而是很多地方做了不必要的工作。这一篇就讲3D 场景卡顿不能只盯着 GPU。节点数量、纹理大小、重复材质、不可见对象、每帧的逻辑更新这些都会影响性能。先把性能数据测出来才知道该优化哪里。一、先测数据卡顿到底卡在哪很多人做性能优化上来就模型减面、纹理压缩结果做完发现帧率还是上不去。因为你都不知道瓶颈在哪优化就是瞎猜。先建一个性能监控把关键指标打出来exportclassScenePerformanceMonitor{privateframeCount:number0;privatelastTime:number0;privatefps:number0;// 统计数据privatestats{nodeCount:0,// 节点总数meshCount:0,// Mesh数量materialCount:0,// 材质数量textureCount:0,// 纹理数量memoryMB:0,// 内存占用initTimeMs:0,// 场景初始化耗时frameTimeMs:0// 每帧耗时};/** * 每帧调用统计FPS */onFrame():void{this.frameCount;constnowDate.now();if(now-this.lastTime1000){this.fpsthis.frameCount;this.frameCount0;this.lastTimenow;console.info(PerfMonitor: FPS${this.fps}, nodes${this.stats.nodeCount}, meshes${this.stats.meshCount});}}/** * 收集场景统计 */collectStats(scene:scene.Scene):void{// 递归统计节点数this.stats.nodeCountthis.countNodes(scene.getRoot());console.info(PerfMonitor: stats collected,this.stats);}privatecountNodes(node:scene.Node):number{letcount1;constchildrennode.getChildren();for(constchildofchildren){countthis.countNodes(child);}returncount;}}先把数据打出来才能知道问题在哪。常见的问题有指标正常范围异常表现FPS50~60低于30就明显卡节点数几百个以内上千个就要注意纹理内存几十MB超过100MB就吃紧每帧耗时16ms以内超过33ms就是30帧二、最常见的优化不可见对象不渲染第一个最容易做的优化相机看不到的物体就不要渲染了。比如房间里有个柜子柜子门是关着的柜子里面的东西相机根本看不到。但如果柜子里面的模型也在渲染就是浪费。更常见的情况用户视角转到另一边左边的家具完全在视野外面但还是每帧都在算。这个叫视锥体裁剪Frustum Culling相机视野是个锥形锥形外面的物体直接跳过渲染。ArkGraphics 3D 应该会自动做这个但我们自己也可以加一层离相机太远的小物体直接不渲染。exportclassVisibilityManager{privatecameraPos:{x:number,y:number,z:number}{x:0,y:1.6,z:5};/** * 每帧更新可见性 */updateVisibility(nodes:scene.Node[]):void{for(constnodeofnodes){constposnode.position;// 算一下离相机多远constdxpos.x-this.cameraPos.x;constdypos.y-this.cameraPos.y;constdzpos.z-this.cameraPos.z;constdistMath.sqrt(dx*dxdy*dydz*dz);// 超过30米的小物体直接隐藏if(dist30){if(node.visible){node.visiblefalse;}}else{if(!node.visible){node.visibletrue;}}}}}这个优化很简单但效果明显。尤其是大场景里远处的小物体全部跳过渲染帧率马上就上来了。三、重复材质和纹理别每个家具都来一份第二个常见问题10把椅子每把椅子都加载了一份纹理。其实椅子都是一样的纹理只需要一份所有椅子共享。这个和之前说的 Resource 缓存是一个道理但材质和纹理也要做缓存exportclassMaterialCache{privatematerialMap:Mapstring,scene.MaterialnewMap();/** * 获取共享材质 */getMaterial(texturePath:string):scene.Material|null{// 已经有了直接返回if(this.materialMap.has(texturePath)){returnthis.materialMap.get(texturePath)!;}// 没有就创建constmaterial...// 创建材质加载纹理this.materialMap.set(texturePath,material);returnmaterial;}}10把椅子共享一份布料纹理纹理内存直接省了 90%。这个优化在家具多的时候效果特别明显。四、别每帧都更新不需要变的东西第三个问题每帧都在做不必要的逻辑更新。比如家具的位置从来没变过但每帧都在重新算它的世界坐标UI 状态从来没变过但每帧都在刷新动画已经停了但每帧还在检查。这些看起来都是小事但每帧省一点加起来就是帧率提升。一个原则只有真的会变的东西才每帧更新。东西什么时候更新相机位置手势操作的时候更新不是每帧家具位置用户拖动的时候更新选中高亮选中状态变化的时候更新可见性相机移动的时候更新不是每帧很多人写代码习惯了 onFrame() 里什么都做结果就是每帧跑一大堆没用的逻辑。五、几个最容易踩的性能坑把这一篇遇到的坑总结一下坑现象解决办法上来就减面压缩纹理做了半天帧率没提升先测数据找到瓶颈再优化所有物体都渲染视野外的物体也在算视锥体裁剪远处的隐藏每个家具一份纹理纹理内存爆了相同材质纹理共享缓存每帧都跑所有逻辑CPU占用高帧率上不去只在状态变化的时候更新退出页面不释放资源退出再进内存越来越大页面销毁时释放所有资源只看FPS不看内存帧率还行但App被系统杀了内存和帧率都要监控3D 性能优化不是玄学是先测数据、再找瓶颈、然后针对性优化。不要上来就瞎优化。总结第七篇的核心就一句话卡顿不能只怪 GPU先测数据再优化。先建性能监控把 FPS、节点数、内存都打出来相机看不到的物体直接隐藏不渲染相同的材质和纹理所有家具共享不要每个都来一份只有真的会变的东西才每帧更新退出页面记得释放资源不然内存越积越多SpaceRoom 现在家具多了也能流畅跑了。最后一篇做工程收尾加动画、管生命周期把整个项目整理成一个可维护的工程。
企业数字化 ERP 产品动态
相关推荐
EXE解包本质：从PE结构识别到资源提取实战 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 1:47:32
公司网站制作与推广新手入门：3步避开90%的坑 公司网站制作与推广新手入门：3步避开90%的坑 自己不会代码想做网站，这几乎是每个创业团队负责人的第一道坎。别慌，这很正常，但也是最大的风险点。很多老板花几万块买了个模板，上线后除了自己看，连个访客都没有。 公司网站制作与推广… · 2026/9/27 1:47:26
ADV7513BSWZ HDMI发送器：从选型到调试完整指南 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 1:47:20
六因子选股与双指标择时：量化策略回测实战拆解 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 2:33:26
福田网站设计公司实战：3个步骤搞定性能优化 福田网站设计公司实战：3个步骤搞定性能优化 改个按钮颜色，建站公司让你等一周？这种体验太常见了。很多福田的企业老板都遇到过，明明只是微调需求，反馈却慢得像蜗牛。更让人头疼的是，网站上线后打开速度慢，客户等不及就走了。这时候你才意识到，找福田… · 2026/9/27 2:33:08
网站建设的需求分析报告速查手册：搞定域名服务器不踩坑 网站建设的需求分析报告速查手册：搞定域名服务器不踩坑 域名服务器搞不懂，是90%甲方在建站初期最大的拦路虎。很多浙江的老板找我们做网站，第一句话不是问功能，而是问“我的域名怎么解析到服务器？SSL证书要不要钱？”这种基础概念一旦模糊，后续的… · 2026/9/27 2:33:08
北京，这座物以稀为贵的城市，真的适合我吗？ 一个从沧州小县城来北京实习的普通人，写下的一些心里话。来北京之前，我对这座城市是有滤镜的。首都、中关村、北大、互联网大厂、无数人的梦想……作为一个从小县城出来的人，我一直觉得，北京这种地方，是"闯一闯&q… · 2026/9/27 2:32:56
珠海网站建设的公司哪家好新手入门 珠海网站建设公司哪家好？避开被黑挂马坑的实战复盘 昨晚11点，客户电话打爆了我的手机，声音都在抖。 网站首页突然弹出一堆博彩广告，后台登录不了，百度一搜全是黑链。 那一刻你才明白， 网站被黑挂马不知道怎么办 ，才是建站最恐怖的噩梦。… · 2026/9/27 2:32:49
YOLOv8植物叶片检测实战：从LabelMe数据转换到边缘部署避坑指南 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 2:32:37
MATLAB雷达信号脉冲压缩仿真：LFM线性调频、匹配滤波与距离分辨率实现 简介：这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程，从线性调频（LFM）信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑，面向电子信息工程、计算机、数学等专业学生，适用于课程设计、期末大作… · 2026/9/27 0:00:01
汕头网站建设制作厂家避坑指南：5大注意事项救急 汕头网站建设制作厂家避坑指南：5大注意事项救急 改个需求建站公司拖一周，这种憋屈事我见得太多了。 很多汕头老板找本地建站团队，签合同前看着方案挺美，一上线就变脸。 今天不聊虚的，直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01
多模态虚假新闻检测实战：BERT+ResNet双塔与对比学习 简介：基于PyTorch的多模态虚假新闻检测项目完整代码包，面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者，解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征，以Res… · 2026/9/27 0:00:01
MATLAB雷达信号脉冲压缩仿真：LFM线性调频、匹配滤波与距离分辨率实现 简介：这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程，从线性调频（LFM）信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑，面向电子信息工程、计算机、数学等专业学生，适用于课程设计、期末大作… · 2026/9/27 0:00:01
汕头网站建设制作厂家避坑指南：5大注意事项救急 汕头网站建设制作厂家避坑指南：5大注意事项救急 改个需求建站公司拖一周，这种憋屈事我见得太多了。 很多汕头老板找本地建站团队，签合同前看着方案挺美，一上线就变脸。 今天不聊虚的，直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01
多模态虚假新闻检测实战：BERT+ResNet双塔与对比学习 简介：基于PyTorch的多模态虚假新闻检测项目完整代码包，面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者，解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征，以Res… · 2026/9/27 0:00:01
