CN107890671A - Web端的三维模型渲染方法、装置、计算机设备及存储介质 - Google Patents

Abstract

本申请涉及一种WEB端的三维模型渲染方法、装置、计算机存储介质和计算机设备，所述方法包括：获取待显示三维模型数据；对待显示三维模型数据进行分析，根据分析结果构建三维场景模型；根据构建的三维场景模型确定三维模型配置信息；根据三维模型配置信息，基于3D绘图协议对三维场景模型进行渲染。本申请的方案根据获取的待显示三维模型数据构建三维场景模型，进一步确定三维模型配置信息，再直接基于3D绘图协议，根据三维模型配置信息对三维场景模型进行渲染，避免引入第三方3D模型渲染插件，内存消耗低，且操作方便，提高了WEB端三维模型的渲染效率。

Description

WEB端的三维模型渲染方法、装置、计算机设备及存储介质

技术领域

本申请涉及互联网技术领域，特别是涉及一种WEB端的三维模型渲染方法、一种WEB端的三维模型渲染装置、一种计算机设备以及一种计算机存储介质。

背景技术

随着互联网技术的发展，各种资源信息得到高度共享，其中，通过互联网提供的万维网服务进行信息共享的方式，俨然成为人们日常生活、工作和娱乐中不可或缺的一部分。WEB(万维网)端的信息是通过浏览器进行展示呈现的，而如何将各种应用程序，如游戏中的各三维模型对象在WEB端上更好的模拟展现出来是现今互联网络技术的一大热点问题。目前主要的实现手段是通过在浏览器中安装第三方3D(三维)模型渲染插件进行三维模型对象的渲染及交互展现。

然而，目前的通过第三方3D模型渲染插件进行网页渲染及交互展现的方式，其编程接口复杂，操作不便，以插件形式处理也会消耗更大的内存。

发明内容

基于此，有必要提供一种WEB端的三维模型渲染方法、一种WEB端的三维模型渲染装置、一种计算机设备以及一种计算机存储介质。

一种WEB端的三维模型渲染方法，包括步骤：

获取待显示三维模型数据；

对所述待显示三维模型数据进行分析，根据分析结果构建三维场景模型；

根据构建的所述三维场景模型确定三维模型配置信息；

根据所述三维模型配置信息，基于3D绘图协议对所述三维场景模型进行渲染。

一种WEB端的三维模型渲染装置，所述装置包括：

待显示数据模块，用于获取待显示三维模型数据；

场景模型构建模块，用于对所述待显示三维模型数据进行分析，根据分析结果构建三维场景模型；

配置信息获取模块，用于根据构建的所述三维场景模型确定三维模型配置信息；

渲染模块，用于根据所述三维模型配置信息，基于3D绘图协议对所述三维场景模型进行渲染。

一种计算机设备，包括存储介质、处理器以及存储在所述存储介质上并可在所述处理器上运行的计算机程序，其中，所述处理器执行所述计算机程序时实现如上所述的WEB端的三维模型渲染的方法的步骤。

一种计算机存储介质，其上存储有计算机程序，其中，该程序被处理器执行时实现如上所述的WEB端的三维模型渲染的方法的步骤。

基于如上所述的实施例中的方案，在获取页面待显示三维模型数据后对其进行分析，根据分析结果构建三维场景模型，根据该三维场景模型进一步确定三维模型配置信息，最后基于3D绘图协议，根据三维模型配置信息对三维场景模型进行渲染。方案根据获取的待显示三维模型数据构建三维场景模型，进一步确定三维模型配置信息，再直接基于3D绘图协议，根据三维模型配置信息对三维场景模型进行渲染，避免引入第三方3D模型渲染插件，内存消耗低，且操作方便，提高了WEB端三维模型的渲染效率。

附图说明

图1是一个实施例方案的工作环境的示意图；

图2是一个实施例的终端的组成结构的示意图；

图3是一个实施例中的WEB端的三维模型渲染方法的流程示意图；

图4是一个实施例中对待显示三维模型数据进行分析，根据分析结果构建三维场景模型的流程示意图；

图5是一个实施例中三维场景模型的界面示意图；

图6是一个实施例中对模型对象进行缩小操作的界面示意图；

图7是另一个实施例中的WEB端的三维模型渲染方法的流程示意图；

图8是一个实施例中的WEB端的三维模型渲染装置的结构示意图；

图9是另一个实施例中的WEB端的三维模型渲染装置的结构示意图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同。本文中在本申请的说明书中所使用的术语只是为了描述具体地实施例的目的，不是旨在于限制本申请。本文所使用的术语“或/及”包括一个或多个相关的所列项目的任意的和所有的组合。

图1示出了本申请一个实施例中的工作环境示意图。参照图1，WEB端的三维模型渲染方法的工作环境涉及终端101与服务器102，终端101与服务器102通过网络进行连接，终端101与服务器102之间可以通过网络进行网络数据的传输。其中，终端101具体可以是台式终端或移动终端，移动终端具体可以是手机、平板电脑、笔记本电脑等中的一种；服务器102可以用独立的服务器或者是多个服务器组成的服务器集群来实现；终端101与服务器102可以采用任何可能的网络进行通信，如局域网、互联网。

终端101在一个实施例中的结构示意图如图2所示，该终端包括通过系统总线连接的处理器、非易失性存储介质、通信接口、电源接口和内存。其中，终端的非易失性存储介质存储有操作系统和WEB端的三维模型渲染方法对应的计算机应用程序(图示中记为WEB端的三维模型渲染装置)，该方法对应的计算机应用程序被处理器执行时，实现一种WEB端的三维模型渲染的方法。终端的处理器用于提供计算和控制能力，支撑整个终端的运行。终端的存储器为非易失性存储介质中的程序的运行提供环境，该存储器中可储存有计算机可读指令，该计算机可读指令被处理器执行时，可使得处理器执行一种WEB端的三维模型渲染的方法。终端的网络接口用于与外部设备网络连接和通信，终端的电源接口用于与外部电源连接，外部电源通过该电源接口向终端供电。

本领域技术人员可以理解，图2中示出的结构，仅仅是与实施例方案相关的部分结构的框图，并不构成对本实施例方案所应用于其上的终端的限定，具体地终端可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

图3是一个实施例中的WEB端的三维模型渲染方法的流程示意图，该实施例中是以进行WEB端的三维模型渲染的终端101的处理过程为例进行说明。如图3所示，该实施例中的WEB端的三维模型渲染方法包括步骤S401至步骤S404。

步骤S401：获取待显示三维模型数据。

其中，WEB即全球广域网，也称为万维网，是一种基于超文本和HTTP(HyperTextTransfer Protocol，超文本传输协议)的、全球性的、动态交互的、跨平台的分布式图形信息系统，WEB具有将图形、音频、视频信息集合于一体的特性，可以在一个页面上同时显示各种形式的数据信息。三维模型是一种立体模型，可用专用三维建模软件生成，可以表示各种建筑、人物、植被、机械等物体结构，为了使计算机中的三维模型更加细致及真实，需要对三维模型进行渲染，即对一个三维模型进行几何描述，并且把它转换为二维屏幕上的一幅图像，由显示屏展现出来。在本实施例中，待显示三维模型数据即指与WEB端需显示的三维模型相关的数据，通过对该待显示三维模型数据进行相关分析、处理，可以在WEB端实现对三维模型的渲染。如，对于一款需要在WEB端运行的游戏而言，待显示三维模型数据可以为浏览器从服务器或本地端获取的、所要展示的游戏界面中的与各三维模型相关的数据。可以理解的是，针对不同的应用场景，待显示三维模型数据的内容不限。

步骤S402：对待显示三维模型数据进行分析，根据分析结果构建三维场景模型。

获取的待显示三维模型数据包括WEB端一个显示界面的全部数据，其中可以包括界面内的三维场景模型中各种模型对象的数据，而对于各模型对象的渲染方式并不一定相同。三维场景模型是指WEB端的一个显示界面相关的所有待显示三维模型组合得到的场景，可以理解，三维场景模型是由各待显示三维模型按照预设位置，设置到三维立体空间中组合得到。对该待显示三维模型数据的分析，可以是分析界面所需构建的三维场景模型中包括的各三维模型及其各对应的渲染方式等，再根据分析结果构建界面的三维场景模型。

步骤S403：根据构建的三维场景模型确定三维模型配置信息。

三维场景模型构建完成后，需要确定三维模型配置信息，三维模型配置信息是指对三维场景模型进行渲染时必要的配置信息，如，三维模型配置信息可以包括各模型对象的渲染顺序的配置信息。在具体应用时，三维模型配置信息可用于配置渲染时调用的渲染函数，再通过渲染函数对三维场景模型进行渲染，从而实现对三维场景模型渲染的配置。

步骤S404：根据三维模型配置信息，基于3D绘图协议对三维场景模型进行渲染。

3D绘图协议是WEB端进行硬件3D渲染的绘图标准，可以包括WEBGL(WEB GraphicsLibrary，一种3D绘图标准)。WEBGL可以提供硬件3D加速渲染，这样就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型，还能创建复杂的导航和数据视觉化，显然，WEBGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。本实施例中，在确定三维模型配置信息后，基于3D绘图协议，比如WEBGL，对三维场景进行渲染，从而实现了对WEB端三维模型的渲染。

基于如上所述的实施例中的方案，在获取页面待显示三维模型数据后对其进行分析，根据分析结果构建三维场景模型，根据该三维场景模型进一步确定三维模型配置信息，最后基于3D绘图协议，根据三维模型配置信息对三维场景模型进行渲染。方案根据获取的待显示三维模型数据构建三维场景模型，进一步确定三维模型配置信息，再直接基于3D绘图协议，根据三维模型配置信息对三维场景模型进行渲染，避免引入第三方3D模型渲染插件，内存消耗低，且操作方便，提高了WEB端三维模型的渲染效率。

一个实施例中，可以直接从本地获取本地三维模型数据。具体地，在监测到满足三维模型渲染触发条件时，从本地调取与三维模型渲染触发条件关联的本地三维模型数据，待显示三维模型数据包括本地三维模型数据。三维模型渲染触发条件是指预设的WEB端进行渲染的触发条件，在具体技术实现中，该三维模型渲染触发条件可以为终端上的操作满足一定条件，比如，对于一款游戏，三维模型渲染触发条件可以设为接收到游戏登录请求，需要登录游戏三维界面场景时；也可以为满足通关条件，如当前场景的所有热点、任务均已触发完成，已通关，需要进入下一关的三维场景界面时。此时，从本地调取与当前三维模型渲染触发条件关联的本地三维模型数据，获取的待显示三维模型数据包括该本地三维模型数据。本实施例中，待显示三维模型数据可以从本地数据库中调取，在网络状况不佳时，对于一些不需联网的数据，可以实现快速获取并渲染，可以提高渲染效率。

另一个实施例中，可以从服务器获取该待显示三维模型数据。具体地，在监测到满足三维模型渲染触发条件时，向服务器发送数据请求，并接收服务器基于数据请求返回的三维模型数据，待显示三维模型数据包括服务器返回的三维模型数据。在监测到满足三维模型渲染触发条件时，生成数据请求并发送至服务器，服务器进行数据请求验证并通过后响应该请求返回三维模型数据，待显示三维模型数据包括由服务器返回的该三维模型数据。在具体技术实现中，在监测到满足三维模型渲染触发条件时，向服务器发送的数据请求可以包括数据请求信息及身份验证信息，其中，数据请求信息可以包括所请求的三维模型数据，身份验证信息为当前用户或终端的唯一标识，比如，可以为当前终端的MAC地址(Media Access Control，物理地址)、SIM卡号(Subscriber Identification Module)、账号等。在具体应用中，如对于一款游戏程序，每个账户对应的三维模型数据并不一样，如账号的角色性别/形象、装备、技能特效、职业限定及关卡场景等均依账号而异，当终端的浏览器向服务器发送数据请求时，该数据请求可以包括请求三维模型数据的数据请求信息，及用于数据请求验证的身份验证信息，该身份验证信息可以为游戏的登录账户及密码，以此从服务器获取对应于当前账号的三维模型数据。可以理解，在具体实现方式中，也可以同时从本地和服务器获取三维模型数据。具体的，在监测到满足三维模型渲染触发条件时，既从本地调取关联的本地三维模型数据，也向服务器发送数据请求，接收服务器返回的三维模型数据。考虑到从服务器获取数据具有一定延迟，可以在服务器返回三维模型数据后，将服务器返回的三维模型数据与本地三维模型数据进行比较，并根据比较结果更新待显示三维模型数据。其中，比较时，以服务器返回的三维模型数据为标准，若二者完全一致，则可以不对本地三维模型数据进行处理，若不一致，则根据服务器返回的三维模型数据对本地三维模型数据更新，从而确保获得最新的待显示三维模型数据。

进一步地，当从本地获取本地三维模型数据时，也可以设定身份验证步骤。具体地，为每一用户账户建立一用于保存用户对应的本地三维模型数据的存储文件，并对存储文件与用户账户建立一一对应关系。当需要调取本地三维模型数据时，搜索与当前用户账户对应的存储文件，从而调取对应的本地三维模型数据。

图4是一个实施例中对待显示三维模型数据进行分析，根据分析结果构建三维场景模型的步骤的流程示意图。如图4所示，本实施例中，对待显示三维模型数据进行分析，根据分析结果构建三维场景模型的步骤包括步骤S501至步骤S504。

步骤S501：识别待显示三维模型数据中的各模型对象。

其中，模型对象是指WEB端展示的界面中，三维立体空间的各组成建模对象，模型对象可以以建模对象为单位划分，如一个建模对象设定一对应的模型对象；在建模对象较大致使数据量较大时，也可以以一建模对象的一部分进行模型对象设立；在建模对象较小、数据量小时，可以以多个建模对象的组合进行模型对象设立。进一步地，模型对象也可以根据渲染方式进行划分，如将渲染方式一致的建模对象划入同一模型对象，在渲染时可以根据同一渲染方式进行渲染，可以减少渲染方式的更换过程，从而提高渲染效率。在获取待显示三维模型数据后，按照预设的模型对象划分规则，识别出各模型对象。

步骤S502：根据识别的各模型对象对待显示三维模型数据分类，获得各模型对象对应的三维模型数据。

其中，三维模型数据可以包括各模型对象中具体地数据模型及其对应渲染方式，如渲染参数。具体地，识别出各模型对象后，对待显示三维模型数据进行分类，从而获得各模型对象对应的三维模型数据。

步骤S503：根据各模型对象对应的三维模型数据确定各模型对象对应的数据模型和渲染参数。

获得各模型对象对应的三维模型数据后，进一步获得各模型对象对应的数据模型和渲染参数。具体地，三维模型数据中可以包括对应的模型对象的数据模型和渲染参数，其中，数据模型用于构建模型，渲染参数则是对模型渲染时场景内的参数设定，具体可以包括光源位置和相机视角等。进一步地，渲染场景需要光源，若无光源则显示结果是一片黑暗，光源可以包括环境光、聚光灯、区域光、点光源和方向光，通过设定不同种类、位置的光源可以模拟三维物体的色彩及其明暗程度，可以提高三维模型的真实感。相机包括正投影相机和透视投影相机(正交投影摄像机)，正投影相机多用于工程建筑领域，其视角的远近高低比例都相同，而透视投影相机更符合人的视觉投影，其设有一个基本点，参照于该基本点，远处的物体比近处的物体小，从而可以使三维模型更具真实感。图5是一个实施例中三维场景模型的界面示意图。如图5所示，本实施例的三维场景界面图中，包括建筑物、人物及车辆的模型对象，其中，建筑模型对象有三种，每种各一个，人物模型对象有四个，车辆模型对象有一个。

进一步地，监测是否满足对三维场景模型内的各模型对象的操作触发条件，以此判断是否对模型对象进行操作。具体地，对模型对象的操作可以包括但不限于移动、旋转、放大、缩小和点击操作。其中，点击操作可以链接热点事件，当满足对模型对象的点击操作时，触发相应链接的热点事件。图6是一个实施例中对模型对象进行缩小操作的界面示意图。如图6所示，在WEB端，用户通过手势对一人物模型对象进行缩小操作，相应的，场景内的模型对象也更新其展示的人物模型对象的大小。

进一步地，一个实施例中，步骤S503可以通过以下方式进行实现：

从各模型对象对应的三维模型数据中，分别提取各模型对象对应的数据节点，分别根据各模型对象对应的数据节点构建各模型对象对应的数据模型；

根据各模型对象对应的三维模型数据，分别设定各模型对象对应的渲染参数，渲染参数包括光源位置和相机视角。

其中，一方面，从三维模型数据中提取各模型对象对应的数据节点，并按照该数据节点构建各模型对象对应的数据模型，数据节点用于构建数据模型，一个数据模型可以包括众多数据节点，通过遍历数据节点，可以构建一个完整的数据模型。另一方面，从三维模型数据中获取各模型对象对应的渲染参数，具体地包括光源位置和相机视角。在得到各模型对象的各数据模型及其对应的渲染参数后，就可以进一步构建出完整界面内所有模型对象的三维场景模型。具体应用中，如对于一款WEB端的游戏，如果将角色所有的装备划分为一装备模型对象，在识别出该装备模型对象后，对待显示三维模型数据分类，获得该装备模型对象对应的装备三维模型数据，该装备三维模型数据中可以包括组成各项装备数据模型的数据节点及各项装备数据模型对应的渲染参数，通过遍历数据节点，可以相应构建出各项装备数据模型，如可以包括武器数据模型、衣服数据模型、鞋子数据模型、腰带数据模型、帽子数据模型及饰品数据模型，以及各项装备模型对应的渲染参数，渲染参数包括各数据模型渲染时游戏场景内的光源位置和相机视角。相同的，再获取其他各模型对象的各数据模型及其对应渲染参数，从而构建出一游戏完整界面的三维场景模型。

步骤S504：分别根据各模型对象对应的数据模型和渲染参数构建三维场景模型。

获得各模型对象的数据模型和渲染参数后，在三维立体空间中构建三维场景模型。具体地，WEB端的显示界面可以认为为一三维立体空间，各模型对象的数据模型添加入该三维立体空间中，按照预设的场景构建条件进行数据模型位置的设置，再按照渲染参数进一步设定各模型对象的光源位置和相机视角，从而组合得到三维场景模型。进一步地，获取的待显示三维模型数据中包括了场景构建条件，如各数据模型的设放规则。

一个实施例中，根据构建的三维场景模型确定三维模型配置信息的步骤可以通过以下方式进行：

对构建的三维场景模型进行分割，获得分割后的数据模型块；

基于分割后的数据模型块设定三维模型配置信息。

其中，数据模型块与模型对象可以为一一对应关系，及一个模型对象设为一个模型数据块，也可以是其他对应关系，如多个模型对象设同一模型数据块或一个模型对象包括对个模型数据块。一个三维场景中，场景的内各模型对象的重要优先级并不相同，所以可以优先渲染优先级更高的模型对象。基于此，对构建的三维场景模型进行分割，获得各数据模型块，再基于该数据模型块设定三维配置模型。在具体实现时，如对于一游戏程序，在一个三维场景界面中，人物模型对象可以是优先级最高，其次是动态模型对象，如怪物、NPC(Non Player Character，非玩家控制角色)等，最后是静态的环境模型对象，所以，可以将人物模型对象设为优先数据模型块，动态模型对象设为中间数据模型块，环境模型对象设为滞后数据模型块，并根据此划分对构建的三维场景模型进行分割，获得各数据模型块，最后根据分割后的得到的数据模型块设定三维模型配置信息，如各数据模型块的渲染顺序等。

更具体地，一个实施例中，对构建的三维场景模型进行分割，获得分割后的数据模型块的步骤可以通过以下形式进行：

根据三维场景模型中的各模型对象，对三维场景模型中的各数据节点进行分割，分别获得各模型对象对应的第一数据节点组；

基于分割后的数据节点组获得分割后的数据模型块，分割后的数据节点组包括各第一数据节点组。

其中，数据节点是构建模型对象的数据单位，模型对象由各数据节点组成，各模型对象数据节点的数目及其数据内容由各模型对象本身决定，一般地，结果越复杂，数据量越大的模型对象的数据节点数据越多。基于各模型对象，对三维场景模型中的各数据节点进行分割，获得各模型对象对应的第一数据节点组，再根据分割后的数据节点组获得数据模型块，其中，分割后的数据节点组包括各第一数据节点组。

另一个实施例中，在基于分割后的数据节点组获得分割后的数据模型块，分割后的数据节点组包括各第一数据节点组的步骤前，还可以执行以下步骤：

在满足模型对象节点分割条件时，对满足模型对象节点分割条件的模型对象对应的第一数据节点组中的数据节点进行分割，获得第二数据节点组；

分割后的数据节点组包括第二数据节点组。

具体地，设一模型对象节点分割条件，对于满足该条件的模型对象的数据节点进行二次分割，进一步得到第二数据节点组。对于一些数据体量超大的模型对象，进行一次分割得到第一数据节点组，其中的第一数据节点组数据可能仍较长，此时，对其进行二次分割，获得数据长度更短的第二数据节点组，以便能够为其创建合适的线程并配置渲染函数进行渲染，能有效提高渲染效率。在具体应用时，可以根据当前设备或处理器的配置以及三维场景模型的实况进行合理设定，如对于本身数据量不大的三维场景模型，可以仅进行一次分割，根据获得的第一数据节点组进行获取模型数据块的步骤，而对于数据量大甚至超大的三维场景模型，可以进行多次分割，如二次分割、三次分割等，只需得到合适长度的数据组，能够快速获取模型数据块，进而获取三维模型配置信息即可。

一个实施例中，根据三维模型配置信息，基于3D绘图协议对三维场景模型进行渲染的步骤可以通过以下形式进行：

调用基于3D绘图协议的渲染函数；

根据三维模型配置信息对渲染函数进行配置；

通过配置后的渲染函数对三维场景模型渲染。

其中，3D绘图协议是WEB端设备能够支持的可用于3D渲染的绘制标准，具体可以包括WEBGL。基于3D绘图协议，调用渲染函数，根据获得的三维模型配置信息对渲染函数进行配置，最后通过配置后的渲染函数进行三维场景模型的渲染。具体地，以WEBGL为例，可以通过其支持的第三方库——three.js进行三维场景模型的渲染。

进一步地，一个实施例中，根据三维模型配置信息对渲染函数进行配置的步骤可以通过以下形式进行：

根据三维模型配置信息中设定的各数据模型块，分别为各数据模型块创建对应的线程并配置对应的渲染函数。

在调取得到渲染函数后，根据设定的各数据模型块，分别对各数据模型块创建对应的线程任务并且配置相应的渲染函数。具体地，数据模型块、线程和渲染函数的对应关系可以为一一对应，也可以为其他对应关系，如一个数据模型块对应多个线程，一个线程配置一个或多个渲染函数。

另一个实施例中，通过配置后的渲染函数对三维场景模型渲染的步骤可以通过以下形式进行：

通过调用各数据模型块对应的线程，对相应的数据模型块进行渲染。

具体地，在为数据模型块创建线程并配置完渲染函数后，执行相应线程，对数据模型块进行渲染，从而实现了对三维场景模型的渲染。通过为三维场景模型创建多个线程任务同步渲染，可以充分利用处理器资源，显著提高渲染效率。

在WEB端显示三维场景模型，当发生数据更新时，需要及时更新渲染。具体可以通过以下形式进行：

向服务器发送更新数据获取请求，更新数据获取请求用于请求服务器发送三维模型更新数据；

接收服务器返回的三维模型更新数据；

将三维模型更新数据作为待显示三维模型数据，返回对待显示三维模型数据进行分析的步骤。

在发生数据更新时，向服务器发送更新数据获取请求，并接受由服务器返回的三维模型更新数据，将该三维模型更新数据作为待显示三维模型数据，返回对待显示三维模型数据进行分析的步骤，从而实现对更新数据的渲染。在具体实现时，如对于一游戏程序，当角色升级，需要更新等级显示且更换角色形象时，接收服务器基于更新数据获取请求返回的三维模型更新数据，将该三维模型更新数据作为待显示三维模型数据，返回对待显示三维模型数据进行分析、渲染的步骤，从而实现了对三维场景模型的及时渲染更新。

一个实施例中，在发生数据更新时，将三维模型更新数据储存至本地端。具体地，在发生数据更新时，将获取得到的服务器基于更新数据获取请求返回的三维模型更新数据储存至本地端数据库中，以便后续渲染可以快速从本地调取本地三维模型数据，有利于提高渲染效率。

一个实施例中，在监测到满足三维模型渲染触发条件时，从本地调取与三维模型渲染触发条件关联的本地三维模型数据之前，还可以包括以下步骤：

异步调取并加载本地端的通用源数据，通用源数据包括渲染源数据和模型源数据。

具体地，在满足三维模型渲染触发条件触发渲染操作开始时，可以提前以异步调取方式加载本地端的通用源数据，通用源数据包括渲染源数据和模型源数据。其中，渲染源数据可以包括渲染所必要的脚本文件，模型源数据可以包括模型构建必要的三维标准模型库。更进一步地，可以通过异步懒加载方式从本地加载通用源数据，以节省加载通用源数据时间，提高渲染效率。

另一个实施例中，在监测到满足三维模型渲染触发条件时，接收服务器基于数据请求返回的三维模型数据之前，还包括以下步骤：

发出通用源数据加载请求；异步加载服务器返回的通用源数据，通用源数据包括渲染源数据和模型源数据。

具体地，在满足三维模型渲染触发条件触发渲染操作开始时，可以提前向服务器发送通用源数据加载请求，以异步调取方式加载服务器返回的通用源数据，以节省加载通用源数据时间，提高渲染效率。

一个实施例中，还进行3D绘图协议支持度判断，以提供向下兼容方案。具体地，可以通过以下形式进行：

当检测到不支持3D绘图协议时，通过像素描点方式展示三维场景模型。

对于一些低端设备，其性能有限，不支持3D绘图协议的技术，无法通过3D绘图协议进行三维模型渲染，对于此，本实施例提供兼容方案。具体地，判断是否支持3D绘图协议，若不支持，则通过像素描点方式展示三维场景模型。在具体实现时，可以通过javascript(一种WEB编程语言)技术对所要展示的三维场景模型的各像素点描点，以此展示出三维场景模型。

图7示出了另一个实施例中WEB端的三维模型渲染方法的流程示意图。应该理解的是，虽然图7的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，图7中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些子步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。如图7所示，本实施例中，WEB端的三维模型渲染方法通过以下形式进行：

步骤S801：异步调取并加载本地端的通用源数据，通用源数据包括渲染源数据和模型源数据；

步骤S802：发出通用源数据加载请求；异步加载服务器返回的通用源数据，通用源数据包括渲染源数据和模型源数据。

在WEB端进行三维模型渲染前，一方面，提前通过异步加载方式，如懒加载方式加载本地端预先储存的通用源数据；另一方面，向服务器发送通用源数据加载请求，从而从服务器获取通用源数据。其中，通用源数据包括渲染源数据和模型源数据，渲染源数据包括渲染的脚本文件，模型源数据包括三维模型标准库文件等。

步骤S803：判断是否满足三维模型渲染触发条件，当结果为是时，执行步骤S804，否则持续执行步骤S803；

步骤S804：从本地调取与三维模型渲染触发条件关联的本地三维模型数据，待显示三维模型数据包括本地三维模型数据；

步骤S805：服务器发送数据请求，并接收服务器基于数据请求返回的三维模型数据，待显示三维模型数据包括服务器返回的三维模型数据。

监测是否满足三维模型渲染触发条件，当判断结果为是时，一方面从本地调取关联的本地三维模型数据，另一方面向服务器发送数据请求，从服务器获取三维模型数据，待显示三维模型数据包括从本地调取的本地三维模型数据和由服务器返回的三维模型数据。

步骤S806：判断是否支持3D绘图协议，若判断结果为否，则执行步骤S807，若判断结果为是，则执行步骤S808；

步骤S807：通过像素描点方式展示三维场景模型。

此步骤用于解决向下兼容问题。具体地，对于一些低端设备，其不能支持3D绘图协议，无法直接基于3D绘图协议对三维场景模型进行渲染，此时，直接通过像素描点方式展示三维场景模型。在具体实现时，可以通过javascript技术对所要展示的三维场景模型的各像素点描点，以此展示出三维场景模型。

步骤S808：识别待显示三维模型数据中的各模型对象；

步骤S809：根据识别的各模型对象对待显示三维模型数据分类，获得各模型对象对应的三维模型数据；

步骤S810：从各模型对象对应的三维模型数据中，分别提取各模型对象对应的数据节点，分别根据各模型对象对应的数据节点构建各模型对象对应的数据模型；

步骤S811：根据各模型对象对应的三维模型数据，分别设定各模型对象对应的渲染参数，渲染参数包括光源位置和相机视角；

步骤S812：分别根据各模型对象对应的数据模型和渲染参数构建三维场景模型。

步骤S808至S812是本实施例中对待显示三维模型数据进行分析，根据分析结果构建三维场景模型步骤的实现形式。具体地，从待显示三维模型数据中识别各模型对象，对待显示三维模型数据进行分类，获得各模型对象对应的是三维模型数据，从三维模型数据中分别提取各模型对象的数据节点，进一步构建对应的数据模型，此外，根据各模型对象的三维模型数据，分别设定对应的包括光源位置和相机视角的渲染参数，最后根据各模型对象对应的数据模型和渲染参数构建三维场景模型。

步骤S813：根据三维场景模型中的各模型对象，对三维场景模型中的各数据节点进行分割，分别获得各模型对象对应的第一数据节点组；

步骤S814：判断是否满足模型对象节点分割条件，若判断结果为是，则执行步骤S815，否则执行步骤S816；

步骤S815：对模型对象对应的第一数据节点组中的数据节点进行分割，获得第二数据节点组；分割后的数据节点组包括第二数据节点组；

步骤S816：基于分割后的数据节点组获得分割后的数据模型块，分割后的数据节点组包括各第一数据节点组；

步骤S817：基于分割后的数据模型块设定三维模型配置信息。

步骤S813至S817是本实施例中根据构建的三维场景模型确定三维模型配置信息的实现形式。具体地，根据各模型对象对各数据节点进行分割，获得各模型对象对应的第一数据节点组，判断是否满足模型对象节点分割条件，若满足，则进行二次分割，即对模型对象对应的第一数据节点组中的数据节点再进行分割，获得第二数据节点组，然后基于分割后的数据节点组获得分割后的数据模型块，最后基于分割后的数据模型块设定三维模型配置信息。其中，分割后的数据节点组包括各第一数据节点组和各第二数据节点组。对于一些数据量较为庞大的模型对象，可以通过设定模型对象节点分割条件对其进行二次分割，以便获得更短的数据组，便于多线程同步渲染，有利于提高渲染效率。可以理解，此处二次分割并非必要的，对于一些数据体量较小的三维场景，可以不设定二次分割，而仅进行一次分割，得到第一数据节点组，并基于第一数据节点组获得分割后的数据模型块，最后基于分割后的数据模型块设定三维模型配置信。同理的，也可以对于所有模型对象均进行二次分割，甚至三次分割，以获得更加适合线程处理的端数据组，充分利用处理器资源，提高渲染效率。

步骤S818：调用基于3D绘图协议的渲染函数；

步骤S819：根据三维模型配置信息中设定的各数据模型块，分别为各数据模型块创建对应的线程并配置对应的渲染函数；

步骤S820：通过调用各数据模型块对应的线程，对相应的数据模型块进行渲染。

步骤S818至S823是本实施例中根据三维模型配置信息，基于3D绘图对三维场景模型进行渲染的实现形式。具体地，基于3D绘图协议调用相关渲染函数，根据各数据模型块创建线程并配置渲染函数，其中，模型数据块、线程及渲染函数的对应关系可以为一一对应设置，也可以是其他设置方式，如一个模型数据块创建多个线程，一个线程配置多个渲染函数同时执行渲染等。最后执行线程，对数据模型块进行渲染，从而实现了对三维场景模型的高效渲染。

步骤S821：向服务器发送更新数据获取请求，更新数据获取请求用于请求服务器发送三维模型更新数据；

步骤S822：接收服务器返回的三维模型更新数据；

步骤S823：将三维模型更新数据作为待显示三维模型数据，返回步骤S808。

步骤S824：将三维模型更新数据储存至本地端。

步骤S821至步骤S824是数据发生更新时的解决方案。具体地，当数据发生更新时，向服务器发送更新数据获取请求，然后将获取的由服务器返回的三维模型更新数据作为待显示三维模型数据，返回待显示三维模型数据进行分析的步骤，从而根据更新数据及时更新渲染。此外，在数据更新时，将更新数据储存至本地端，以便后续渲染时能够及时从本地调取到已更新的数据，从而缩短系统响应时间，提高渲染效率。

本实施例的WEB端的三维模型渲染方法，根据获取的待显示三维模型数据构建三维场景模型，进一步确定三维模型配置信息，再直接基于3D绘图协议，根据三维模型配置信息对三维场景模型进行渲染，避免引入第三方3D模型渲染插件，内存消耗低，且操作方便，提高了WEB端三维模型的渲染效率。此外，通过提前异步加载通用源数据，缩短通用源数据加载时间；通过创建多线程同步渲染，充分利用系统资源，提高了渲染效率。而且，还提供了向下兼容方案及数据更新解决方案，既为低端设备的渲染提供支持，又及时响应了数据更新。

图8是一个实施例中的WEB端的三维模型渲染装置的结构框图。如图8所示，本实施例的WEB端的三维模型渲染装置包括：

待显示数据模块901，用于获取待显示三维模型数据；

场景模型构建模块902，用于对待显示三维模型数据进行分析，根据分析结果构建三维场景模型；

配置信息获取模块903，用于根据构建的三维场景模型确定三维模型配置信息；

渲染模块904，用于根据三维模型配置信息，基于3D绘图协议对三维场景模型进行渲染。

本实施例的WEB端的三维模型渲染装置，由待显示数据模块获取待显示三维模型数据，由场景模型构建模块对待显示三维模型数据进行分析，根据分析结果构建三维场景模型，再由配置信息获取模块根据该三维场景模型进一步确定三维模型配置信息，最后由渲染模块基于3D绘图协议，根据三维模型配置信息对三维场景模型进行渲染。方案从获取的待显示三维模型数据构建三维场景模型，进一步确定三维模型配置信息，再直接基于3D绘图协议，根据三维模型配置信息对三维场景模型进行渲染，避免引入第三方3D模型渲染插件，内存消耗低，且操作方便，提高了WEB端三维模型的渲染效率。

进一步地，图9是另一个实施例中的WEB端的三维模型渲染装置的结构框图。与图8所示的实施例相比，本实施例中的场景模型构建模块包括以下结构：

模型对象识别模块921，用于识别待显示三维模型数据中的各模型对象；

三维模型数据获取模块922，用于根据识别的各模型对象对待显示三维模型数据分类，获得各模型对象对应的三维模型数据；

三维模型数据分析模块923，用于根据各模型对象对应的三维模型数据确定各模型对象对应的数据模型和渲染参数；

三维场景模型构建模块924，用于分别根据各模型对象对应的数据模型和渲染参数构建三维场景模型。

其中，由模型对象识别模块从待显示三维模型数据中识别出各模型对象，模型对象是指WEB端展示的界面中，三维立体空间的各组成建模对象。再由三维模型数据对待显示三维模型数据进行分类，得到各模型对象对应的三维模型数据。获得各模型对象对应的三维模型数据后，进一步由三维模型数据分析模块根据三维模型数据确定模型对象的数据模型和渲染参数，其中，数据模型用于构建模型，渲染参数则是对模型渲染时场景内的参数设定，具体可以包括光源位置和相机视角等。最后由三维场景模型构建模块根据模型对象的数据模型和渲染参数构建得到三维场景模型。

基于如上所述的实施例，在一个实施例中还提供一种计算机设备，该计算机设备包括存储介质、处理器及存储在存储介质上并可在处理器上运行的计算机程序，其中，处理器执行所述程序时实现如上述各实施例中的任意一种WEB端的

三维模型渲染的方法。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一非易失性计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

据此，在一个实施例中还提供一种存储介质，其上存储有计算机程序，其中，该程序被处理器执行时实现如上述各实施例中的任意一种WEB端的三维模型渲染的方法。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (15)

1.一种WEB端的三维模型渲染方法，其特征在于，包括步骤：

获取待显示三维模型数据；

对所述待显示三维模型数据进行分析，根据分析结果构建三维场景模型；

根据构建的所述三维场景模型确定三维模型配置信息；

根据所述三维模型配置信息，基于3D绘图协议对所述三维场景模型进行渲染。

2.根据权利要求1所述的方法，其特征在于，所述获取待显示三维模型数据的步骤包括下述两项中的至少一项：

在监测到满足三维模型渲染触发条件时，从本地调取与所述三维模型渲染触发条件关联的本地三维模型数据，所述待显示三维模型数据包括所述本地三维模型数据；

在监测到满足三维模型渲染触发条件时，向服务器发送数据请求，并接收所述服务器基于所述数据请求返回的三维模型数据，所述待显示三维模型数据包括所述服务器返回的三维模型数据。

3.根据权利要求1所述的方法，其特征在于，所述对所述待显示三维模型数据进行分析，根据分析结果构建三维场景模型的步骤包括：

识别所述待显示三维模型数据中的各模型对象；

根据识别的各模型对象对所述待显示三维模型数据分类，获得各模型对象对应的三维模型数据；

根据各模型对象对应的三维模型数据确定各模型对象对应的数据模型和渲染参数；

分别根据各所述模型对象对应的所述数据模型和所述渲染参数构建三维场景模型。

4.根据权利要求3所述的方法，其特征在于，所述根据各模型对象对应的三维模型数据确定各模型对象对应的数据模型和渲染参数的步骤包括：

从各模型对象对应的三维模型数据中，分别提取各模型对象对应的数据节点，分别根据各模型对象对应的数据节点构建各模型对象对应的数据模型；

根据各模型对象对应的三维模型数据，分别设定各模型对象对应的渲染参数，所述渲染参数包括光源位置和相机视角。

5.根据权利要求1所述的方法，其特征在于，所述根据构建的所述三维场景模型确定三维模型配置信息的步骤包括：

对构建的三维场景模型进行分割，获得分割后的数据模型块；

基于分割后的数据模型块设定所述三维模型配置信息。

6.根据权利要求5所述的方法，其特征在于，所述对构建的三维场景模型进行分割，获得分割后的数据模型块的步骤包括：

根据所述三维场景模型中的各模型对象，对所述三维场景模型中的各数据节点进行分割，分别获得各模型对象对应的第一数据节点组；

基于分割后的数据节点组获得所述分割后的数据模型块，所述分割后的数据节点组包括各所述第一数据节点组。

7.根据权利要求6所述的方法，其特征在于，在基于分割后的数据节点组获得所述分割后的数据模型块之前，还包括步骤：

在满足模型对象节点分割条件时，对满足模型对象节点分割条件的模型对象对应的第一数据节点组中的数据节点进行分割，获得第二数据节点组；

所述分割后的数据节点组包括所述第二数据节点组。

8.根据权利要求1所述的方法，其特征在于，所述根据所述三维模型配置信息，基于3D绘图协议对所述三维场景模型进行渲染的步骤包括：

调用基于3D绘图协议的渲染函数；

根据所述三维模型配置信息对所述渲染函数进行配置；

通过配置后的渲染函数对所述三维场景模型渲染。

9.根据权利要求8所述的方法，其特征在于，

根据所述三维模型配置信息对所述渲染函数进行配置的方式包括：根据所述三维模型配置信息中设定的各数据模型块，分别为各数据模型块创建对应的线程并配置对应的渲染函数；

通过配置后的渲染函数对所述三维场景模型渲染的方式包括：通过调用各数据模型块对应的线程，对相应的数据模型块进行渲染。

10.根据权利要求2所述的方法，其特征在于，包括下述两项中的至少一项：

在监测到满足三维模型渲染触发条件时，从本地调取与所述三维模型渲染触发条件关联的本地三维模型数据之前，还包括步骤：异步调取并加载本地端的通用源数据，所述通用源数据包括渲染源数据和模型源数据；

在监测到满足三维模型渲染触发条件时，接收所述服务器基于所述数据请求返回的三维模型数据之前，还包括步骤：发出通用源数据加载请求；异步加载所述服务器返回的通用源数据，所述通用源数据包括渲染源数据和模型源数据。

11.根据权利要求1至10任意一项所述的方法，其特征在于，所述方法还包括：

向服务器发送更新数据获取请求，所述更新数据获取请求用于请求服务器发送三维模型更新数据；

接收所述服务器返回的三维模型更新数据；

将所述三维模型更新数据作为所述待显示三维模型数据，返回所述对所述待显示三维模型数据进行分析的步骤。

12.根据权利要求1至10任意一项所述的方法，其特征在于，所述方法还包括：

当检测到不支持所述3D绘图协议时，通过像素描点方式展示所述三维场景模型。

13.一种WEB端的三维模型渲染装置，其特征在于，所述装置包括：

待显示数据模块，用于获取待显示三维模型数据；

场景模型构建模块，用于对所述待显示三维模型数据进行分析，根据分析结果构建三维场景模型；

配置信息获取模块，用于根据构建的所述三维场景模型确定三维模型配置信息；

渲染模块，用于根据所述三维模型配置信息，基于3D绘图协议对所述三维场景模型进行渲染。

14.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述计算机程序被所述处理器执行时，使得所述处理器执行如权利要求1至12中任一项所述方法的步骤。

15.一种计算机存储介质，存储有计算机程序，其特征在于，所述计算机程序被处理器执行时，使得所述处理器执行如权利要求1至12中任一项所述方法的步骤。