一种基于三维引擎的场景实时地图的构建方法与流程

1.本发明涉及一种基于三维引擎的场景实时地图的构建方法，属于三维可视化技术领域。


背景技术：

2.场景实时地图是一种在运行时动态生成和更新的地图，它能够随着时间的推移实时更新，并实时持续地反映环境的状态及变化，直观地表达用户在场景中的实时位置，保持地图的最新状态。
3.公开号为cn114882188a的中国发明专利申请披露了一种基于数字孪生的小地图的实现方法，该方法的技术路线是：先创建小地图上的标识样式（即小地图的dom元素容器的样式），用自定义设置或构建专门的点位模型来标识；再获取三维模型底面与存储小地图的dom元素容器，并创建三维模型场景正交相机并设置三维模型场景正交相机的位置，使得底面上的模型完整展示在小地图的dom元素容器；将小地图上不需要展示的模型添加至所述不可见图层，隐藏部分不必要的模型。
4.上述的实现方法对同一三维模型渲染两次，都需要对模型进行单独的渲染计算，会导致cpu和gpu负担增加；当模型复杂度越高，渲染帧率下降的越快。上述过程需要有专业理论知识和强大的动手能力支撑才能做到，需本行业的专业人员才能完成，操作体验差，效率低。


技术实现要素：

5.本专利旨在解决现有技术中存在的不足，提出一种基于三维引擎的场景实时地图的构建方法，该方法与背景技术中所引证的专利文献相比，无需对场景的三维模型多次渲染，对cpu和gpu都相对友好，模型复杂度不会加倍，也不会导致渲染帧率下降。
6.本发明解决其技术问题采取的技术方案是：一种基于三维引擎的场景实时地图的构建方法，其特殊之处在于，包括以下步骤：步骤1：获取场景尺寸；步骤2：配置底图；步骤3：创建场景实时地图数据模板；步骤4：创建dom元素展示地图；步骤5：构建场景实时地图，计算相机数据信息并实时更新地图位置；步骤5.1：由场景尺寸高除以底图尺寸高求出场景缩放因子m；步骤5.2：基于游标位置与相机位置之间的对应关系，计算游标位置及其旋转角度；计算游标的纵向偏移量：相机位置的x值camera.position.x减去场景中心点的x值center.position.x再除以缩放因子m得出游标dom元素以底图左上角二维坐标(0,0)的偏移量；再加上底图高度mapsize.height的一半，减去游标高度cursorsize.height的一
半，得到游标纵向偏移量，计算公式为：(camera.position.x-center.position.x)/m+mapsize.height/2-cursorsize.height/2；计算游标的横向偏移量：相机位置的z值camera.position.z减去场景中心点的z值center.position.z再除以缩放因子m得出游标dom元素以底图左上角二维坐标(0,0)的偏移量；再加上底图宽度mapsize.width的一半，减去游标宽度cursorsize.width的一半，得到游标横向偏移量，计算公式为：(camera.position.z-center.position.z)/m+mapsize.width/2-cursorsize.width/2；设置游标样式top属性值为纵向值偏移量，游标样式left属性为横向偏移量；设置游标dom元素的旋转transform属性值为rotate(相机旋转角度y单位为rad)。
7.步骤5.3：基于游标位置与相机位置之间的对应关系，计算并变换底图位置，以保证游标移动时其位置始终实时显示于可视区域viewsize的正中心；计算底图向下偏移距离值：相机位置的x值camera.position.x减去场景中心点的x值center.position.x再除以缩放因子m得出底图以可视区域viewsize左上角二维坐标(0,0)进行偏移的偏移量，若相机在场景中心点时，可视区域高度viewsize.height一半减去偏移量得纵向偏移量，向下偏移距离值计算方式为-50%加纵向偏移量，-50%是将底图的纵向中心点对准可视区域的左上角二维坐标(0,0)，加纵向偏移量后游标纵向中心点显示于可视区域viewsize的正中心，即：计算底图向右偏移距离值：相机位置的z值camera.position.z减去场景中心点的z值center.position.z再除以缩放因子m得出底图以可视区域viewsize左上角二维坐标(0,0)进行偏移的偏移量，若相机在场景中心点时，可视区域宽度viewsize.width的一半减去偏移量得出横向偏移量，向右偏移距离值计算方式为-50%加横向x轴方向偏移量，-50%是将底图的横向中心点对准可视区域的左上角二维坐标(0,0)，加横向偏移量后游标横向中心点显示于可视区域viewsize的正中心，即：设置底图变换属性transform的值，将向右向下偏移距离值设置到底图，设置方式如下：transform:translate(calc(向下偏移距离值),calc(向右偏移距离值))。
8.步骤5.4：在每帧渲染开始，将实时获取的相机位置、旋转角度经过步骤5.1-5.3计算的结果设置给底图和游标dom元素属性，以实现底图和游标在地图中的动态实时更新。
9.进一步地，所述步骤1具体为：基于场景内所有模型的包围盒信息求出场景的最大点max和最小点min，并借由该两点确定场景包围盒boundingbox及场景中心点center，进而得到场景尺寸configsize：场景尺寸宽configsize.height为最大点max与最小点min的z值差，场景尺寸高configsize.height为最大点max与最小点min的x值差，场景尺寸的宽高比aratio为场景尺寸宽除以场景尺寸高。
10.进一步地，所述步骤2的配置底图，方式之一为：创建相机，设置相机的视野缩放比aspect及上下左右限制，使相机看向场景中心点ceter，对正对准场景所有模型进行截图，获取底图图片image；其中，相机的视野缩放比aspect为绘制场景的dom元素的宽高比除以场景尺寸宽高比；相机右限制为场景尺寸宽除以2乘以视野缩放比aspect，相机左限制为相机右限制乘以-1，相机上限制为场景高除以2，相机下限制为相机上限制乘以-1。
11.进一步地，所述步骤2的配置底图，方式之二为：上传预设比例的底图图片image。
12.进一步地，所述步骤3的模板数据内容包括：可视区域viewsize、底图尺寸mapsize、底图图片image、游标尺寸cursorsize、扇形游标图片cursor和配置美化样式；其中，可视区域viewsize、底图尺寸mapsize和游标尺寸cursorsize为自定义项，游标尺寸cursorsize小于可视区域viewsize；扇形游标图片cursor朝向设置为向上。
13.进一步地，所述步骤4共创建3层dom元素：最外层是地图容器，大小与可视区域viewsize一致；第二层是底图容器，宽高为底图尺寸mapsize，其背景图效果为底图图片image；最里层是游标，宽高为游标尺寸cursorsize，其背景图效果为扇形游标图片cursor；游标代表相机位置与朝向。
14.进一步地，当步骤5的地图配置与预期的效果有差异时，修改步骤3中的场景实时地图数据，对地图进行重新构建。
15.本发明的一种基于三维引擎的场景实时地图的构建方法，与现有技术相比，有益效果在于：1、本发明的方法不需要对模型进行多次加载和渲染，对cpu和gpu都相对友好，模型复杂度不会加倍，渲染帧率不会下降，对硬件设备要求较低；2、本发明的方法可以自动计算地图尺寸并截取准确底图，而对比专利需要了解模型的结构，对不可见图层要有深入理解，才能进行相关操作。
16.3、本发明的方法在操作过程中不需要关注模型或图层，只需关注地图展示形式的美观度，实时地图的构建过程，用户关注重点在构建过程，可随时修改参数进行重新构建，实时获得满意的效果。
17.4、传统的场景实时地图的构建方法需要有专业理论知识和强大的动手能力支撑，而本方法在实践时不要求专业人员操作，会基本的电脑使用人群也可完成炫酷的场景实时地图的构建过程。
附图说明
18.图1是实施例一的实时地图构建的总流程框图；图2是实施例一的步骤5具体拆解、渲染过程中检测每一帧渲染更新dom元素样式所述的流程图；
具体实施方式
19.为能清楚说明本发明方案的技术特点，下面将通过具体实施方式，并结合其附图，对本发明的技术方案作进一步详细阐述，以下实施例用于说明本发明，但不能用来限制本
发明的范围。
20.下文的公开提供了许多不同的实施例用来实现本发明的不同结构。为了简化本发明的公开，下文中对特定例子的部件和设置进行描述。此外，本发明可以在不同例子中重复参考数字和/或字母。这种重复是为了简化和清楚的目的，其本身不指示所讨论各种实施例和/或设置之间的关系。应当注意，在附图中所图示的部件不一定按比例绘制。本发明省略了对公知组件和处理技术及工艺的描述以避免不必要地限制本发明。
21.实施例一一种基于三维引擎的场景实时地图的构建方法，包括以下步骤：步骤1：获取场景尺寸假设场景中的模型是一间厂房，通过计算场景内的所有模型的包围盒信息，求出场景的最大点max{x:536.4840087890625,y:62.657749176025455,z:579.0009765625}、场景的最小点min{x:-671.6409912109375,y:-0.16026687622070312,z:-305.1238098144531}；基于场景的最大点max和最小点min，求出场景包围盒boundingbox的信息：{center:{x:-67.5784912109375,y:31.248741149902376,z:136.93858337402344},maximum:{x:536.4840087890625,y:62.657749176025455,z:579.0009765625},minimum:{x:-671.6409912109375,y:-0.16026687622070312,z:-305.1238098144531}}；进而得出场景尺寸configsize的宽和高，场景尺寸宽configsize.width为场景最大点max与最小点min的z值差，即：boundingbox.maximum.z-boundingbox.minimum.z=579.0009765625-（-305.1238098144531）=884.1247863769531；场景尺寸高configsize.height为场景最大点max与最小点min的x值差，即：boundingbox.maximum.x-boundingbox.minimum.x=536.4840087890625-（-671.6409912109375）=1208.125；进一步，可求出场景尺寸的宽高比aratio为场景尺寸宽除以场景尺寸高，即：configsize.width/configsize.height=884.1247863769531/1208.125=0.731815653493598。
22.步骤2：配置底图有两种底图配置方法，一种是通过相机截取底图图片，另一种是直接上传同比例的美化图片。
23.本实施例采用的是相机截取底图的方式，具体做法如下：创建一个通用相机（第一人称）；设置相机的视野缩放比aspect和相机的上下左右限制：相机的视野缩放比aspect可由绘制场景的dom元素宽高比sratio除以场景尺寸的宽高比aratio求出，即:
sratio/aratio=1.471461187214612/0.731815653493598=2.0106992521819356；相机右限制由场景尺寸宽除以2乘以视野缩放比求出，即：configsize.width/2*aspect=884.1247863769531/2*2.0106992521819356=888.8545234018266；相机左限制为相机右限制乘以-1，即：888.8545234018266*-1=-888.8545234018266；相机上限制为场景尺寸高除以2，即：configsize.height/2=1208.125/2=604.0625；相机下限制为相机上限制乘以-1，即：604.0625*-1=-604.0625；将相机看向场景中心点ceter，对正对准场景所有模型进行截图，截取png类型的底图图片image，截图时默认的图片宽度为512像素，图片高度为图片宽度512像素除以场景尺寸宽高比0.731815653493598，计算得到的图片高度为699.6297463108024约699.63像素。在此需要说明的是：不按照1024像素或2048像素为宽进行截取的做法是为了优化图片大小，节约性能。
24.当然，如果对截取的底图不满意，用户也可直接上传宽为512像素、高为699.63像素的同比例美化图片作为底图。
25.步骤3：创建场景实时地图数据模板模板数据内容包括：可视区域viewsize，底图尺寸mapsize，底图图片image，游标尺寸cursorsize，扇形游标图片cursor和配置美化样式；本实施中，所述可视区域viewsize的宽、高为200像素*200像素，底图图片通过截取或上传获得，本实施例底图尺寸mapsize的宽、高由所述步骤2所得为512像素*699.63像素，游标尺寸cursorsize的宽、高为60像素*60像素；当游标尺寸cursorsize大于可视区域viewsize时会遮挡地图影响视野，故游标尺寸cursorsize应小于可视区域viewsize；扇形游标图片cursor为自定义图片且默认方向朝上，扇形游标图片cursor的朝向会影响到相机旋转时，朝向是否准确直接决定了地图组件的准确性，例如扇形游标图片朝向朝下时，原本相机是向左移动会看到图标朝向背向向左移动。
26.步骤4：创建dom元素展示地图本实施例共创建有3层dom元素，最外层是地图容器，大小与可视区域viewsize一致，即宽为200像素、高为200像素；第二层是底图容器，宽高为底图尺寸mapsize，即宽为512像素、高为699.63像素，底图容器的背景图效果为底图图片；最里层是游标，宽高为游标尺寸cursorsize，即宽为60像素、高为60像素；游标的背景图效果为扇形游标图片；对地图容
器、游标元素可以进行美化样式，可以为圆角、方角等多种形状；设置地图容器、游标元素边框颜色为透明色，边框圆角，游标代表相机位置与朝向，如果dom元素已创建则重新绘制dom元素。
27.步骤5：构建场景实时地图，计算相机数据信息并实时更新地图位置步骤5.1：计算场景缩放因子由场景尺寸高除以底图尺寸高求出场景缩放因子m，即：configsize.height/mapsize.height=1208.125/699.63=1.7268055972442578；步骤5.2：基于游标位置与相机位置之间的对应关系，计算游标位置及其旋转角度计算游标的纵向偏移量：相机位置的x值camera.position.x减去场景中心点的x值center.position.x再除以缩放因子m得出游标dom元素以底图左上角二维坐标(0,0)的偏移量，因游标是以场景中心点center为原点进行变换，相机位于场景中心点center则对应于底图左上角的二维坐标(0,0)，故所述偏移量为0；在偏移量的基础上加上底图高度mapsize.height的一半，中心点会偏移到底图纵向的中心点；由于游标是有高度的，所以需要再减去游标高度cursorsize.height的一半，得到游标纵向偏移量，计算公式为：(camera.position.x-center.position.x)/m+mapsize.height/2-cursorsize.height/2=0/1.7268055972442578+699.63/2-60/2=0+349.815-30=319.815计算游标的横向偏移量：相机位置的z值camera.position.z减去场景中心点的z值center.position.z再除以缩放因子m得出游标dom元素以底图左上角二维坐标(0,0)的偏移量，因游标是以场景中心点center为原点进行变换，相机位于场景中心点center则对应于游标位于底图左上角的二维坐标(0,0)，故所述偏移量为0；在偏移量的基础上加上底图宽度mapsize.width的一半，中心点偏移到底图横向的中心点；由于游标是有宽度的，所以需要再减去游标宽度cursorsize.width的一半，得到游标横向偏移量，计算公式为：(camera.position.z-center.position.z)/m+mapsize.width/2-cursorsize.width/2；=0/1.7268055972442578+512/2-60/2=0+256-30=226设置游标样式top属性值为纵向偏移量，单位是像素，设置游标样式left属性为横向偏移量，单位是像素，即top:319.815px，left:226px。
28.因游标旋转角度y与dom元素旋转角度均为角度制，二者不需要转换，故游标旋转角度y也即场景相机的旋转角度；设置游标dom元素的旋转transform属性值为rotate(相机旋转角度y单位为rad),即设置游标dom元素的旋转为transform：“rotate(0.6013873979430928rad)”。
29.步骤5.3：基于游标位置与相机位置之间的对应关系，计算并变换底图位置，以保
证游标移动时其位置始终实时显示于可视区域viewsize的正中心；计算底图向下偏移距离值：相机位置的x值camera.position.x减去场景中心点的x值center.position.x再除以缩放因子m得出底图以可视区域viewsize左上角二维坐标(0,0)进行偏移的偏移量，若相机在场景中心点时，可视区域高度viewsize.height一半减去偏移量得纵向偏移量（单位是像素），向下偏移距离值计算方式为-50%加纵向偏移量，-50%是将底图的纵向中心点对准可视区域的左上角二维坐标(0,0)，加纵向偏移量后游标纵向中心点显示于可视区域viewsize的正中心，即：计算底图向右偏移距离值：相机位置的z值camera.position.z减去场景中心点的z值center.position.z再除以缩放因子m得出底图以可视区域viewsize左上角二维坐标(0,0)进行偏移的偏移量，若相机在场景中心点时，可视区域宽度viewsize.width的一半减去偏移量得出横向偏移量（单位是像素），向右偏移距离值计算方式为-50%加横向偏移量，-50%是将底图的纵向中心点对准可视区域的左上角二维坐标(0,0)，加纵向偏移量后游标纵向中心点显示于可视区域viewsize的正中心，即：设置底图变换属性transform的值，将向右向下偏移距离值设置到底图，设置方式如下：transform:translate(calc(向下偏移距离值),calc(向右偏移距离值))scale(1))。
30.即设置为：。
31.步骤5.4：在每帧渲染开始，将实时获取的相机位置、旋转角度经过步骤5.1-5.3计算的结果设置给底图和游标dom元素属性，以实现底图和游标在地图中的动态实时更新。
32.本发明解决的问题是避免模型二次渲染增加硬件性能负担，快捷准确的描述构建过程和成果，在构建准备时不需要关注模型结构，了解模型含义，添加新图层等复杂专业性强等操作；与现有技术相比，本发明关注点更少，实现自定义实时可见的地图构建过程，用户操作更简易，减少用户学习、使用及操作成本，提高用户使用效率。
33.本发明通过自动截取底图，根据相机位置准确的描述游标位置，展示场景全貌供二次编辑美化，可直接编辑地图样式效果、游标尺寸效果等多项参数，完全是用户自定义的，所见即所得，直接调整地图实时构建过程的表现效果，实时利用构建过程，直观地表达用户在场景中的实时位置。
34.最后应当说明的是：以上实施例仅用以说明本发明的技术方案而非对其限制，尽管参照上述实施例对本发明进行了详细的说明，所属领域的普通技术人员应当理解：依然可以对本发明的具体实施方式进行修改或者等同替换，而未脱离本发明精神和范围的任何修改或者等同替换，其均应涵盖在本发明的权利要求保护范围之内。

技术特征：
1.一种基于三维引擎的场景实时地图的构建方法，其特征在于，包括以下步骤：步骤1：获取场景尺寸；步骤2：配置底图；步骤3：创建场景实时地图数据模板；步骤4：创建dom元素展示地图；步骤5：构建场景实时地图，计算相机数据信息并实时更新地图位置；步骤5.1：由场景尺寸高除以底图尺寸高求出场景缩放因子m；步骤5.2：基于游标位置与相机位置之间的对应关系，计算游标位置及其旋转角度；计算游标的纵向偏移量：相机位置的x值camera.position.x减去场景中心点的x值center.position.x再除以缩放因子m得出游标dom元素以底图左上角二维坐标(0,0)的偏移量；再加上底图高度mapsize.height的一半，减去游标高度cursorsize.height的一半，得到游标纵向偏移量，计算公式为：(camera.position.x-center.position.x)/m+mapsize.height/2-cursorsize.height/2；计算游标的横向偏移量：相机位置的z值camera.position.z减去场景中心点的z值center.position.z再除以缩放因子m得出游标dom元素以底图左上角二维坐标(0,0)的偏移量；再加上底图宽度mapsize.width的一半，减去游标宽度cursorsize.width的一半，得到游标横向偏移量，计算公式为：(camera.position.z-center.position.z)/m+mapsize.width/2-cursorsize.width/2；设置游标样式top属性值为纵向偏移量，游标样式left属性为横向偏移量；设置游标dom元素的旋转transform属性值为rotate 相机旋转角度y，单位为rad，步骤5.3：基于游标位置与相机位置之间的对应关系，计算并变换底图位置，以保证游标移动时其位置始终实时显示于可视区域viewsize的正中心；计算底图向下偏移距离值：相机位置的x值camera.position.x减去场景中心点的x值center.position.x再除以缩放因子m得出底图以可视区域viewsize左上角二维坐标(0,0)进行偏移的偏移量，若相机在场景中心点时，可视区域高度viewsize.height一半减去偏移量得纵向偏移量，向下偏移距离值计算方式为-50%加纵向偏移量，-50%是将底图的纵向中心点对准可视区域左上角二维坐标(0,0)，加纵向偏移量后游标纵向中心点显示于可视区域viewsize的正中心，即：计算底图向右偏移距离值：相机位置的z值camera.position.z减去场景中心点的z值center.position.z再除以缩放因子m得出底图以可视区域viewsize左上角二维坐标(0,0)进行偏移的偏移量，若相机在场景中心点时，可视区域宽度viewsize.width的一半减去偏移量得出横向x轴方向偏移量，向右偏移距离值计算方式为-50%加横向偏移量，-50%是将底图的横向中心点对准可视区域左上角二维坐标(0,0)，加横向偏移量后游标横向中心点显示于可视区域viewsize的正中心，即：
设置底图变换属性transform的值，将向右向下偏移距离值设置到底图，设置方式如下：transform:translate(calc(向下偏移距离值),calc(向右偏移距离值))，步骤5.4：在每帧渲染开始，将实时获取的相机位置、旋转角度经过步骤5.1-5.3计算的结果设置给底图和游标dom元素属性，以实现底图和游标在地图中的动态实时更新。2.如权利要求1所述的一种三维引擎的场景实时地图的构建方法，其特征在于，所述步骤1具体包括：基于场景内所有模型的包围盒信息求出场景的最大点max和最小点min，并借由该两点确定场景包围盒boundingbox及场景中心点center，进而得到场景尺寸configsize：场景尺寸宽configsize. width为最大点max与最小点min的z值差，场景尺寸高configsize.height为最大点max与最小点min的x值差，场景尺寸的宽高比aratio为场景尺寸宽除以场景尺寸高。3.如权利要求1所述的一种三维引擎的场景实时地图的构建方法，其特征在于，所述步骤2的配置底图，方式之一为：创建相机，设置相机的视野缩放比aspect及上下左右限制，使相机看向场景中心点ceter，对正对准场景所有模型进行截图，获取底图图片image；其中，相机的视野缩放比aspect为绘制场景的dom元素的宽高比除以场景尺寸宽高比；相机右限制为场景尺寸宽除以2乘以视野缩放比aspect，相机左限制为相机右限制乘以-1，相机上限制为场景高除以2，相机下限制为相机上限制乘以-1。4.如权利要求1所述的一种三维引擎的场景实时地图的构建方法，其特征在于，所述步骤2的配置底图，方式之二为：上传预设比例的底图图片image。5.如权利要求1所述的一种三维引擎的场景实时地图的构建方法，其特征在于，所述步骤3的模板数据内容包括：可视区域viewsize、底图尺寸mapsize、底图图片image、游标尺寸cursorsize、扇形游标图片cursor和配置美化样式；其中，可视区域viewsize、底图尺寸mapsize和游标尺寸cursorsize为自定义项，游标尺寸cursorsize小于可视区域viewsize；扇形游标图片cursor朝向设置为向上。6.如权利要求1所述的一种三维引擎的场景实时地图的构建方法，其特征在于，所述步骤4共创建3层dom元素：最外层是地图容器，大小与可视区域viewsize一致；第二层是底图容器，宽高为底图尺寸mapsize，其背景图效果为底图图片image；最里层是游标，宽高为游标尺寸cursorsize，其背景图效果为扇形游标图片cursor；游标代表相机位置与朝向。7.如权利要求1所述的一种三维引擎的场景实时地图的构建方法，其特征在于，当步骤5的地图配置与预期的效果有差异时，修改步骤3中的场景实时地图数据，对地图进行重新构建。

技术总结
本发明公开了一种基于三维引擎的场景实时地图的构建方法，属于三维可视化技术领域。特征包括：步骤1：获取场景尺寸；步骤2：配置底图；步骤3：创建场景实时地图数据模板；步骤4：创建DOM元素展示地图；步骤5：构建场景实时地图，计算相机数据信息并实时更新地图位置；步骤5.1：求出场景缩放因子M；步骤5.2：计算游标位置及其旋转角度；步骤5.3：计算并变换底图位置；步骤5.4：将实时获取的相机位置、旋转角度经步骤5.1-5.3计算的结果设置给底图和游标DOM元素属性，实现地图动态实时更新。本发明无需对场景的三维模型多次渲染，对CPU和GPU都相对友好，模型复杂度不会加倍，也不会导致渲染帧率下降。帧率下降。帧率下降。


技术研发人员：杨斌 吕雪琴 丛金昌 王彩宇
受保护的技术使用者：山东捷瑞数字科技股份有限公司
技术研发日：2023.08.07
技术公布日：2023/9/13