(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202111616474.5 (22)申请日 2021.12.27 (71)申请人 浙江中测新图地理信息技 术有限公 司 地址 313200 浙江省湖州市德清县舞 阳街 道科源路1 1号6幢 (72)发明人 廖明　叶冬梅　俞凯杰　谭道刚　 魏鹏　王凯迪　滕润婕　王宇帆　 姚强　李昕　金加棋　 (74)专利代理 机构 杭州杭诚专利事务所有限公 司 33109 专利代理师 尉伟敏 (51)Int.Cl. H04L 67/1095(2022.01) H04L 67/02(2022.01)H04L 65/65(2022.01) H04L 9/40(2022.01) H04L 9/06(2006.01) G06T 17/05(2011.01) G06F 16/958(2019.01) G06F 16/957(2019.01) (54)发明名称 基于客户端和服务器同步渲染的Web三 维可 视化技术 (57)摘要 本发明公开了基于客户端和服务器同步渲 染的Web三维可视化技术； 后端服务器渲染和浏 览器端渲染同步进行， 通过对三维地理数据进行 预处理减少渲染加载时间， 前端浏览器通过首屏 骨架信息渲染、 静态文件加载和次屏信息懒加载 等方式提高系统首屏性能， 避免当前三维系统加 载白屏问题， 给用户更好的使用体验， 同时使得 前端的复杂度不过于太 大， 同时使用WebRTC对等 传输能够保证系统数据安全。 权利要求书2页 说明书7页 附图3页 CN 114513520 A 2022.05.17 CN 114513520 A 1.一种基于客户端和服务器同步渲染的Web三维可视化技术， 其特征在于， 所述Web三 维可视化 技术包括如下步骤： 步骤S1、 后端服务器将三维地理数据进行模型轻量化、 场景细粒度化、 渐进式加载预处 理； 模型轻量化将模 型拆分为模 型单元， 减小冗余； 场景细粒度化解析建筑物的楼层分布情 况及楼层 间的连通关系， 并控制漫游过程中场景数据的渐近式传输和加载； 渐进式加载优 先处理基本数据， 并根据视点位置增加模型精度； 预处理后基于WebRTC将三维数据对等传 输到客户端； 步骤S2、 客户端将用户数据和首屏数据通过EJS浏览器端渲染， 即将相关参数写入EJS 模板中， 通过Node.js解析向浏览器 返回已经渲染好的HTML文档； 客户端渲染包括首屏骨架 信息渲染、 静态文件加载和图片加载； 步骤S3、 在次屏中按照DIV分层， 每层单独做为数据接口异步加载， 在页面初始化时， 每 个DIV层仅保留最外层的DIV标签； 步骤S4、 当用户进行交 互后， 浏览器做独立判断， 数据重新 渲染。 2.根据权利要求1所述的基于客户端和服务器同步渲染的Web三维可视化技术， 其特征 在于， 步骤S1中所述模型 轻量化预处理过程如下： 步骤A1、 将重复对称的模型进行处理， 对原始数据进行构件层面的语义分析， 去除几何 重复性检测 和重复性冗余， 仅传输最小模型 单元； 步骤A2、 对最小模型单元进行旋转， 缩放， 平移得到复杂模型单元， 减少场景的冗余数 据。 3.根据权利要求1所述的基于客户端和服务器同步渲染的Web三维可视化技术， 其特征 在于， 步骤S1中所述场景细粒度化预处 理过程如下： 步骤B1、 分析建筑信息模型BIM数据中包含语义信息的楼层和空间对象， 形成初步的构 筑物空间结构； 步骤B2、 获取特殊构件， 结合初步构筑物 空间结构进行分析， 形成整个建筑物的楼层 分 布情况以及楼层 间的连通关系； 在每个楼层内部， 结合初步构筑物空间结构进行进一步的 楼层内连通关系分析， 形成整个建筑物的室内子空间划分及连通关系结构图； 步骤B3、 场景漫游时， 传输和加载用户虚拟化身周围的可见对象； 根据用户虚拟化身当 前所在位置， 判断出其所在子空间并计算出当前视锥内的物体， 降低加载数据量， 在实时漫 游过程中对当前视点范围内需要加载的数据量进 行有效控制， 实现场景数据的渐近式传输 和加载。 4.根据权利要求1所述的基于客户端和服务器同步渲染的Web三维可视化技术， 其特征 在于， 步骤S1中所述渐进式网格预处 理的过程如下： 步骤C1、 在对场景中复杂的、 在低带宽时无法实时传输的模型进行渐进式网格预处理 时， 将原始模型处 理成含有较少数据量的基网络和 增量网格两 部分； 步骤C2、 在进行场景漫游时， 首先处理基网络数据， 在后续的漫游过程中， 根据视点位 置增加相应的增量网络来实时调整该模型的精度。 5.根据权利要求1所述的基于客户端和服务器同步渲染的Web三维可视化技术， 其特征 在于， 步骤S1中所述基于WebRTC的对等传输为点对点传输； 包括在两个节点间用 RTCPeerConnection建立连接， 创建RTCDataC hannel， 在对等连接中建立双向数据通道。权　利　要　求　书 1/2 页 2 CN 114513520 A 26.根据权利要求5所述的基于客户端和服务器同步渲染的Web三维可视化技术， 其特征 在于， 两个节点经由服务器进行信令传递， 交换的信令包括： session的信息； 网络配置； 媒 体适配。 7.根据权利要求1所述的基于客户端和服务器同步渲染的Web三维可视化技术， 其特征 在于， 在所述 步骤S2所述中， 静态文件加载包括如下步骤： 步骤S211、 将与首屏 渲染相关的  CSS 和 JS 的代码由引用的形式改为内联的形式， 减 少HTTP的请求； 步骤S212、 将数据请求部分的  JS 代码放到头部； 将首屏渲染的  CSS 样式和 JS 数据 请求放在头部； 步骤S213、 在确保首屏的样式和数据渲染成功后， 次屏逻辑延后处理执行， 相关次屏数 据通过前端触发延时发送与上报， 减少网络阻塞。 8.根据权利要求1所述的基于客户端和服务器同步渲染的Web三维可视化技术， 其特征 在于， 所述 步骤S2中， 图片加载包括如下步骤： 步骤S221、 减少图片 资源的HTTP请求， 针对同一模块的低色位小图片进行合并处理， 使 用CSS‑SPIRIT技术将其合并为一张图片， 通过使用background  Image和background   Position属性控制显示； 步骤S222、 首屏显示的图片直接加载请求对应路径资源； 次屏图片实行懒加载， 仅有当 用户请求次屏数据的时候才向后台发送HTTP请求； 在页面载入时， IM G标签的资源路径保存 在自定义属性中， SRC属性指向一个小图片作为占位符防止空HT TP请求； 步骤S223、 在首屏完成渲染后， 遍历DOM树获取懒加载IMG的真实路径以及当前图片相 对于文档顶部的偏移距离， 将以上属 性保存在哈希数组中； 判断当前 的页面位置出现在可 视域范围后， 将真实的路径地址赋值给SRC， 并将已经加载完成的图片从数组中删除； 步骤S224、 在请求 等待的过程中， 设置反馈加载 预知提示符。 9.根据权利要求1所述的基于客户端和服务器同步渲染的Web三维可视化技术， 其特征 在于， 所述步骤S4中， 用户和系统进行交互， 判断鼠标滑动事件或者滚动事件是否发生， 对 浏览器的偏移量、 当前视角的高度、 当前视角的角度等用户操作数据进 行计算， 判断当前屏 幕显示需要的数据， 重新 渲染屏显数据。权　利　要　求　书 2/2 页 3 CN 114513520 A 3