CN112396685A - 一种用于城市大脑场景web端的3D光效渲染方法 - Google Patents

Abstract

本发明公开了一种用于城市大脑场景web端的3D光效渲染方法，该方法包括：初始化三维场景并生成三维实体图形；获取三维实体图形的顶点信息并导入自定义材质；当自定义材质与三维实体图形匹配时，配置属性值；通过Web图形库解析三维实体图形的图形数据；在图形处理器管道渲染时读取着色器光栅化。该用于城市大脑场景web端的3D光效渲染方法目的是解决超图在底层库升级时过程复杂、成本高的问题。

Description

一种用于城市大脑场景web端的3D光效渲染方法

技术领域

本发明属于3D场景渲染技术领域，具体涉及一种用于城市大脑场景web端的3D光效渲染方法。

背景技术

在城市大脑建设中，通过构建城市的数字孪生，是为物理城市建设、运营及规划增加一套完整的数字基础设施，最终对于正在运转中的城市，达到事无巨细的感知能力。

Cesium(开源引擎)基于web(网页)端的三维可视化地球引擎。web实现三维可视化时，实现加载海量模型和矢量数据并且还能保证性能和可视化效果。而动态光效是Cesium目前不具备的功能，需要单独实现。

超图的三维GIS(Geographic Information System，地理信息系统)平台也是基于开源的Cesium来做二次封装的，提供了Cesium不支持的光效飞线效果，重写了一个光源类，对部分源码进行修改封装。

支持了点光源，平行光，聚光灯效果等三维场景整体效果有了一个质的提升，特别是小场景中有了光源的加入，效果更真实，模拟场景也符合需求。

超图基于Cesium做了很多拓展，也修改了很多源码，实现了许多Cesium当前阶段没有实现上的功能或者性能，但也是正因为修改的源码导致版本始终落后多个版本。

超图实现的功能在Cesium后面的版本更新中也完善了很多，而且以Cesium的更新频率和功能迭代速度，加上拥抱开源GIS的人群越来越多，使用Cesium的人也越来越多，更体现出超图在底层库更新迭代上的不足，不能以最低成本的代价去升级底层库。

有鉴于此，本领域技术人员亟待提供一种用于城市大脑场景web端的3D光效渲染方法用于解决超图在底层库升级时过程复杂、成本高的问题。

发明内容

(一)要解决的技术问题

本发明要解决的技术问题是超图在底层库升级时过程复杂、成本高。

(二)技术方案

本发明提供了一种用于城市大脑场景web端的3D光效渲染方法，该方法包括以下步骤：

初始化三维场景并生成三维实体图形；

获取所述三维实体图形的顶点信息并导入自定义材质；

当所述自定义材质与所述三维实体图形匹配时，配置属性值；

通过Web图形库解析所述三维实体图形的图形数据；

在图形处理器管道渲染时读取着色器光栅化。

进一步地，所述初始化三维场景并生成三维实体图形，具体包括如下步骤：

初始化三维视图，创建三维地球；

通过加载三维模型，搭建初始场景；

绘制一个闭合的矩形或者多边形并拔高形成所述三维实体图形。

进一步地，所述绘制一个闭合的矩形或者多边形并拔高形成所述三维实体图形后，还包括：

设定所述三维实体图形的边框样式、填充样式和材质属性。

进一步地，所述获取所述三维实体图形的顶点信息并导入自定义材质，具体为：

根据所述材质属性，导入自定义的动态材质，设定所述动态材质的光效颜色以及动态频率并贴合到实体的边框表面。

进一步地，所述当所述自定义材质与所述三维实体图形匹配时，配置属性值，具体为：

通过三维可视化地球引擎底层的材质接口自定义材质，编写着色器，配置属性和通信与着色器通信的字段。

进一步地，所述通过Web图形库解析所述三维实体图形的图形数据，具体包括如下步骤：

Web图形库自动解析所述三维实体图形的顶点形成顶点缓冲数据；

连接每一个所述顶点以形成图形网格。

进一步地，所述在图形处理器管道渲染时读取着色器光栅化，具体包括如下步骤：

在图形处理器中绘制所述图形网格；

利用着色器渲染所述图形网格；

通过管道对所述图形网格做光栅化。

进一步地，该方法还包括：当所述材质与所述三维实体图形不匹配时，重新导入所述自定义材质。

(三)有益效果

本发明的上述技术方案具有如下优点：

本发明提供的用于城市大脑场景web端的3D光效渲染方法，该方法包括：初始化三维场景并生成三维实体图形；获取三维实体图形的顶点信息并导入自定义材质；当自定义材质与三维实体图形匹配时，配置属性值；通过Web图形库解析三维实体图形的图形数据；在图形处理器管道渲染时读取着色器光栅化。该方法兼容流行的其他版Cesium库，如超图等，在使用非原生Cesium技术栈开发项目时也可以使用，通过调解时间轴控制飞线动态展示频率，适应不同场景；支持光效亮度控制，可调节飞线图形的光效亮度，实现闪烁效果；支持纹理贴图的方式导入自定义的图片作为纹理贴在图形表面。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例中所需要使用的附图作简单地介绍，显而易见地，下面所描述的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的一种用于城市大脑场景web端的3D光效渲染方法的流程示意图；

图2为本发明实施例提供的另一用于城市大脑场景web端的3D光效渲染方法的流程示意图。

具体实施方式

下面结合附图和实施例，对本发明的具体实施方式作进一步详细描述。以下实施例用于说明本发明，但不用来限制本发明的范围。

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参照附图并结合实施例来详细说明本申请。

根据本发明实施例提供了一种用于城市大脑场景web端的3D光效渲染方法，如图1所示，该方法包括以下步骤：

S1、初始化三维场景并生成三维实体图形；

S2、获取三维实体图形的顶点信息并导入自定义材质；

S3、当自定义材质与三维实体图形匹配时，配置属性值；

S4、通过Web图形库解析三维实体图形的图形数据；

S5、在图形处理器管道渲染时读取着色器光栅化。

在该实施方式中，过Cesium添加的图形，导入自定义的材质，解析顶点数据将自定义的材质贴在图形表面，实现图形动态光效效果，兼容不同版本Cesium，达到导入即用的目的，主要用于智慧城市类项目。兼容流行的其他版Cesium库，如超图等，在使用非原生Cesium技术栈开发项目时也可以使用，通过调解时间轴控制飞线动态展示频率，适应不同场景；支持光效亮度控制，可调节飞线图形的光效亮度，实现闪烁效果；支持纹理贴图的方式导入自定义的图片作为纹理贴在图形表面。

在一些可选的实施例中，在步骤S1中，初始化三维场景并生成三维实体图形，具体包括如下步骤：

S101、初始化三维视图，创建三维地球；

S102、通过加载三维模型，搭建初始场景；

S103、绘制一个闭合的矩形或者多边形并拔高形成三维实体图形。

在该实施方式中，通过3dtilset(OGC标准格式，三维切片技术，解决大场景加载性能问题)加载三维模型。

在一些可选的实施例中，在步骤S103中，绘制一个闭合的矩形或者多边形并拔高形成三维实体图形后，还包括：

S104、设定三维实体图形的边框样式、填充样式和材质属性。

在一些可选的实施例中，在步骤S2中，获取三维实体图形的顶点信息并导入自定义材质，具体为：

根据材质属性，导入自定义的动态材质，设定动态材质的光效颜色以及动态频率并贴合到实体的边框表面。

在一些可选的实施例中，在步骤S3中，当自定义材质与三维实体图形匹配时，配置属性值，具体为：

通过Cesium底层的Cesium material(开源引擎材质)接口自定义材质，编写着色器，配置属性和通信与着色器通信的字段。

在一些可选的实施例中，在步骤S4中，通过Web图形库解析三维实体图形的图形数据，具体包括如下步骤：

S401、Web图形库自动解析三维实体图形的顶点形成顶点缓冲数据；

S402、连接每一个顶点以形成图形网格。

在一些可选的实施例中，在步骤S5中，在图形处理器管道渲染时读取着色器光栅化，具体包括如下步骤：

S501、在图形处理器中绘制图形网格；

S502、利用图形库着色语言着色器渲染图形网格；

S503、通过管道对图形网格做光栅化。

在一些可选的实施例中，该方法还包括：当材质与三维实体图形不匹配时，重新导入自定义材质。

根据本发明实施例提供了另一用于城市大脑场景web端的3D光效渲染方法，如图2所示，该方法包括以下步骤：

S11、初始化三维场景并生成三维实体图形；

S12、获取三维实体图形的顶点信息并导入自定义材质；

S13、判断自定义材质与三维实体图形是否匹配；若是，则执行步骤S14；若否，则返回执行步骤S12；

S14、配置属性值；

S15、通过WebGL解析三维实体图形的图形数据；

S16、在GPU管道渲染时读取着色器光栅化。

使用本发明提供的方法进行光效光线具有如下优点：

兼容流行的其他版Cesium库，如超图等，在使用非原生Cesium技术栈开发项目时也可以使用；

支持2.5D/3D效果展示，可以在不同视图下展示三维图形效果；

支持时间轴控制，通过调解时间轴控制飞线动态展示频率，适应不同场景；

支持光效亮度控制，可调节飞线图形的光效亮度，实现闪烁效果；

支持纹理贴图的方式导入自定义的图片作为纹理贴在图形表面。

基于Cesium的二次封装改造，将底层的绘图接口做一部分改造，提供Cesium没有实现的光线材质，集成material材质和graphics自定义图形，供开发者直接调用。

下面以具体实施例对本发明进行详细说明

实例1

以动态飞线光效为例：

初始化三维视图，创建三维地球，通过3dtilset加载三维模型，搭建初始场景

选取任意两个位置的经纬度，设置为起点和终点形成一条线段，通过抛物线方程得到新坐标，通过新坐标做线段插值出新的插值点并返回；

将插值点连接在一起并绘制出来形成一条新的线段，设置线的宽度和和材质；

通过材质属性，导入自定义的动态光效材质，设定光效颜色和动态频率，最后贴到线段表面，实现动态飞线光效效果；

在底层的WebGL(Web Graphics Library，Web图形库，是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化)会自动解析图形顶端形成顶点缓冲数据，连接各个顶点形成顶点网格在GPU(Graphics Processing Unit，图形处理器)中绘制出来，材质那部分会做glsl(GraphicsLibrary Shading Language，图形库着色语言)着色器来渲染，通过管道对图形网格做光栅化，最终将效果呈现在屏幕上。

实例2

以动态围栏为例：

初始化三维视图，创建三维地球，通过3dtilset加载三维模型，搭建初始场景

通过鼠标拾取或者手动设定经纬度，绘制一个闭合的矩形或者多边形。在三维场景中线段和图形一般是带有高度的，可以设置默认值也可以拾取真实数据。

将绘制出来的矩形多边形拔高形成一个三维实体图形，设定边框样式和填充样式，材质属性等。

通过材质属性，导入自定义的动态警示线材质，设定偏移量和光效颜色以及频率并贴合到实体的边框表面，默认将实体填充部分设置为透明，实现动态围栏的一个效果展示。

在底层的WebGL会自动解析图形顶端形成顶点缓冲数据，连接各个顶点形成顶点网格在GPU中绘制出来，材质那部分会做glsl着色器来渲染，通过管道对图形网格做光栅化，最终将效果呈现在屏幕上。

需要明确的是，本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同或相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。本发明并不局限于上文所描述并在图中示出的特定步骤和结构。并且，为了简明起见，这里省略对已知方法技术的详细描述。

以上仅为本申请的实施例而已，并不限制于本申请。在不脱离本发明的范围的情况下对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围内。

Claims (8)

1.一种用于城市大脑场景web端的3D光效渲染方法，其特征在于，该方法包括以下步骤：

初始化三维场景并生成三维实体图形；

获取所述三维实体图形的顶点信息并导入自定义材质；

当所述自定义材质与所述三维实体图形匹配时，配置属性值；

通过Web图形库解析所述三维实体图形的图形数据；

在图形处理器管道渲染时读取着色器光栅化。

2.根据权利要求1所述的用于城市大脑场景web端的3D光效渲染方法，其特征在于，所述初始化三维场景并生成三维实体图形，具体包括如下步骤：

初始化三维视图，创建三维地球；

通过加载三维模型，搭建初始场景；

绘制一个闭合的矩形或者多边形并拔高形成所述三维实体图形。

3.根据权利要求2所述的用于城市大脑场景web端的3D光效渲染方法，其特征在于，所述绘制一个闭合的矩形或者多边形并拔高形成所述三维实体图形后，还包括：

设定所述三维实体图形的边框样式、填充样式和材质属性。

4.根据权利要求3所述的用于城市大脑场景web端的3D光效渲染方法，其特征在于，所述获取所述三维实体图形的顶点信息并导入自定义材质，具体为：

根据所述材质属性，导入自定义的动态材质，设定所述动态材质的光效颜色以及动态频率并贴合到实体的边框表面。

5.根据权利要求1所述的用于城市大脑场景web端的3D光效渲染方法，其特征在于，所述当所述自定义材质与所述三维实体图形匹配时，配置属性值，具体为：

通过三维可视化地球引擎底层的材质接口自定义材质，编写着色器，配置属性和通信与着色器通信的字段。

6.根据权利要求1所述的用于城市大脑场景web端的3D光效渲染方法，其特征在于，所述通过Web图形库解析所述三维实体图形的图形数据，具体包括如下步骤：

Web图形库自动解析所述三维实体图形的顶点形成顶点缓冲数据；

连接每一个所述顶点以形成图形网格。

7.根据权利要求6所述的用于城市大脑场景web端的3D光效渲染方法，其特征在于，所述在图形处理器管道渲染时读取着色器光栅化，具体包括如下步骤：

在图形处理器中绘制所述图形网格；

利用着色器渲染所述图形网格；

通过管道对所述图形网格做光栅化。

8.根据权利要求1所述的用于城市大脑场景web端的3D光效渲染方法，其特征在于，还包括：当所述材质与所述三维实体图形不匹配时，重新导入所述自定义材质。

Images