CN110717963B

CN110717963B - 一种基于WebGL的可替换模型的混合渲染展示方法、系统及存储介质

Info

Publication number: CN110717963B
Application number: CN201910814287.4A
Authority: CN
Inventors: 唐睿; 黄治; 武芝慧; 郑家祥; 蔡凤娇; 刘陈佩
Original assignee: Hangzhou Qunhe Information Technology Co Ltd
Current assignee: Hangzhou Qunhe Information Technology Co Ltd
Priority date: 2019-08-30
Filing date: 2019-08-30
Publication date: 2023-08-11
Anticipated expiration: 2039-08-30
Also published as: US20220301273A1; CN110717963A; US12039683B2; WO2021036394A1

Abstract

本发明公开了一种基于WebGL的可替换模型的混合渲染展示方法和系统，包括以下步骤：云端处理子系统根据对原场景渲染图中默认商品的替换配置，将原场景渲染图分解为背景渲染图和默认商品的3D模型，并生成替换默认商品的备选商品的3D模型，对背景渲染图、默认商品的3D模型以及备选商品的3D模型进行存储和关联；终端展示子系统的渲染引擎基于WebGL的实时渲染技术加载所述背景渲染图，动态实时加载并渲染默认商品的3D模型或被选择的备选商品的3D模型于背景渲染图上，形成搭配效果图以展示。还公开了计算机可读存储介质。该混合渲染展示方法和系统大幅度降低了渲染资源消耗，也可大幅降低渲染图所需的等待时间。

Description

一种基于WebGL的可替换模型的混合渲染展示方法、系统及存储介质

技术领域

本发明属于图形渲染展示领域，具体涉及一种基于WebGL的可替换模型的混合渲染展示方法、系统及存储介质。

背景技术

Web Graphics Library(简称WebGL)是一种通用的3D绘图协议，借助系统显卡来在浏览器里更流畅地展示3D场景和模型，创建复杂的导航和数据视觉化。

随着VR概念的普及，在家装效果与实景展示中，以360度全景图为代表的渲染效果图已成为被广泛接受的一种终端视觉展示媒介。此外，由于其传播属性强、视觉冲击感明显、特别是还具有可跟踪、可互动的营销属性，已经大量的被装修公司、房产中介等行业所使用。目前，市场对具有可交互能力的全景图功能需求越来越多，尤其是在软装行业中，商家希望在一个全景图中尽可能多的进行商品的搭配组合，从而使客户能实现对商品的搭配，从而促进成交。为此，很多种技术方案也被提出。

最常用的解决方案是，通过完全预渲染有限数量的全景图，并存储于远端数据库，在需要替换场景中商品搭配的时候，直接简单地替换掉整张全景图，这会带来以下两个问题：

问题1，如果有N种商品(如3种)，每种替换M个款式(如5种)，则需渲染N的M次阶乘(243)张全景图，这会造成指数级增长的渲染资源与存储资源开销，以及漫长的渲染等待时间；

问题2，由于商品之间往往由于尺寸不同，对于商品替换后渲染图，若没有人工检查可能会出现商品出现碰撞的情况，这样的渲染图是大多数客户是不可接受的。

另一种方式是通过unity等实时渲染引擎，在云端构建好整个场景，并渲染一张全景图。用户在终端打开该全景图。由于场景中的所有物品的模型均为动态，因此可以任意替换环境中任意数量的商品，但是这种方式依旧会带来两个问题：

问题1，由于在web端(特别是移动端)加载整个场景，需要对3D模型进行大幅简化压缩，这会导致移动端的整体视觉效果与云端离线渲染效果差距极大，不能满足用户需求；

问题2，在场景中的商品被替换时，替换后的场景需要在云端进行渲染，为了降低终端显示的延迟率，需要在云端一直保持打开渲染处理进程，由于多个场景渲染进程同时占用运行内存，导致可替换的场景数量有限，无法大规模推广。

发明内容

本发明的目的是提供一种基于WebGL的可替换模型的混合渲染展示方法、系统及存储介质，该混合渲染展示方法、系统及存储介质解决了需要预渲染造成的指数级整张替换场景渲染图的问题，从而大幅度降低了渲染资源消耗，也可大幅降低渲染图所需的等待时间。

本发明的技术方案为：

一种基于WebGL的可替换模型的混合渲染展示方法，实现所述混合渲染展示方法的系统包括云端处理子系统、与云端处理子系统通信的终端展示子系统，其特征在于，所述混合渲染展示方法包括以下步骤：

云端处理子系统根据对原场景渲染图中默认商品的替换配置，将原场景渲染图分解为背景渲染图和默认商品的3D模型，并生成替换默认商品的备选商品的3D模型，对背景渲染图、默认商品的3D模型以及备选商品的3D模型进行存储，且将背景渲染图、默认商品的3D模型以及备选商品的3D模型与原场景渲染图进行关联；

终端展示子系统的渲染引擎基于WebGL的实时渲染技术加载所述背景渲染图，动态实时加载并渲染默认商品的3D模型或被选择的备选商品的3D模型于背景渲染图上，形成搭配效果图以展示。

该混合渲染展示方法，将终端的视觉展示内容分为两层，一层为需替换备选商品以外的背景渲染图，该背景渲染图由云端渲染引擎生成，效果逼真，且由于只是一张固定分辨率的渲染图，对终端的性能要求极小；另一层为动态实时加载的备选商品的3D模型数据，由于同一时刻只渲染有限数量的3D模型，对终端的性能要求也很小，且备选商品的3D模型都是可任意移动，可避免由于模型间干涉造成的商品碰撞问题。此外，由于背景渲染图只需要一张，而加载的备选商品的3D模型可以是任意数量的，无需提前渲染大量渲染图，等待时间可从几小时降低到几分钟，因此对资源的消耗可忽略不计。该混合渲染展示方法能同时满足批量生成、效果好、速度快、传播性好、可配置性强、跨平台这6个要求。

一种基于WebGL的可替换模型的混合渲染展示系统，包括：

至少两个计算机处理器；

至少两个计算机存储器，用于存储多个计算机程序、原始数据和处理结果数据；

所述计算机存储器被所述计算机处理器执行时，实现上述基于WebGL的可替换模型的混合渲染展示方法。

该混合渲染展示系统中，其中一个处理器可以作为云端的渲染引擎，另外一个处理器作为终端的渲染引擎，该混合渲染展示系统实现的渲染混合渲染展示方法，解决了需要预渲染造成的指数级整张替换场景渲染图的问题，从而大幅度降低了渲染资源消耗，也可大幅降低渲染图所需的等待时间。

一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述基于WebGL的可替换模型的混合渲染展示方法。

附图说明

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

图1是实现基于WebGL的可替换模型的混合渲染展示方法的系统结构示意图；

图2是实施例提供的混合渲染展示方法的流程示意图。

具体实施方式

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

WebGL是计算机行业中已被广泛使用的前端实时渲染协议，目前大多数在浏览器上运行的3D模型展示与编辑应用，都是基于WebGL开发的。而本发明中的动态加载的3D模型，替换3D模型的能力，也是构建在WebGL所提供的一系列前端接口能力之上开发出来的。因此可以很容易的适配PC，APP，小程序等浏览器中，实现跨平台。

为了在保证渲染图质量的基础上，降低渲染资源消耗，降低渲染等待时间。本实施例提供了一种基于WebGL的可替换模型的混合渲染展示方法，该混合渲染展示方法将场景渲染图分解为背景渲染图和实时渲染的商品3D模型，在应用时，渲染引擎动态加载商品3D模型，实现了在渲染图中无限制替换任意多个商品3D模型，形成任意多个商品自由搭配效果，满足用户的需求。

如图1所示，实现基于WebGL的可替换模型的混合渲染展示方法的系统包含云端处理子系统101、与云端处理子系统101通信的终端展示子系统102。该云端处理子系统101主要实现对场景的渲染获得场景渲染图，还用于实现对原场景渲染图进行分解，和商品模型的构建等。

终端展示子系统102主要用于对场景渲染图进行呈现，以及根据用户的意愿对场景渲染图中的默认商品和备选商品进行编辑，生成搭配效果图。终端展示子系统可以为PC(包括台式机、一体机、笔记本电脑、掌上电脑、平板电脑)，移动APP以及小程序等终端平台。

如图2所示，基于WebGL的可替换模型的混合渲染展示方法包括以下步骤：

云端处理子系统根据对原场景渲染图中默认商品的替换配置，将原场景渲染图分解为背景渲染图和默认商品的3D模型，并生成替换默认商品的备选商品的3D模型，对背景渲染图、默认商品的3D模型以及备选商品的3D模型进行存储，且将背景渲染图、默认商品的3D模型以及备选商品的3D模型与原场景渲染图进行关联。

当设计师设计好场景方案后，并设置好渲染参数，如渲染灯光，摄像机坐标与姿态等，利用云端服务器对设计的场景进行全局渲染，生成包含有默认商品的原场景渲染图，并将云端服务器反馈进行呈现，设计师在渲染编辑器中打开该原场景渲染图，对原场景渲染图中需要替换默认商品的备选商品进行选择，完成对原场景渲染图中默认商品的替换配置工作。具体地，所述对原场景渲染图中默认商品的替换配置包括：

确定能够被替换的默认商品；

确定替换默认商品的至少一个备选商品，并关联默认商品以及对应的至少一个备选商品。

在进行替换配置时，首先要确定能够被替换的默认商品，例如家装场景图中，家具、灶台等可以被选择为可以别替换掉的默认商品，即对这些默认商品进行标记，然后，从备选商品列表中挑选可以作为替换默认商品的备选商品，并将该些备选商品与被替换的默认商品进行关联，可以采用映射表进行关联，这样就完成了原场景渲染图中默认商品的替换配置，以供后续云端处理子系统根据该替换配置进行原场景渲染图进行分解。

对原场渲染图进行分解是在云端处理子系统101中完成的。云端处理子系统接收到替换配置后，即准备执行对场景渲染图进行处理，具体包括两方面，一方面是将原渲染场景图分解为背景渲染图，该背景渲染图以供前端展示作为背景图，具体地，将原场景渲染图分解为背景渲染图包括：

剔除原场景渲染图对应的原始场景数据中默认商品数据后，采用与场景渲染图相同的渲染条件，对原始场景数据中剩余数据进行渲染，生成背景渲染图。

剔除的默认商品数据是替换配置中勾选的默认商品，这些默认商品根据需求进行选择，可以是原场景渲染图中的部分默认商品，也可以是全部默认商品，当剔除原场景渲染图中的部分默认商品时，渲染生成背景渲染图中即包含剩下的部分默认商品，该些默认商品在终端进行呈现时，不会再实时动态加载渲染呈现，也不能对该些默认商品进行编辑。

场景渲染图对应的原始模型数据中包含默认商品和背景的3D模型结构，还包括默认商品的材质贴图等。采用与场景渲染图相同的渲染条件是指在重新渲染时采用的光照条件和摄像机位置与获得原场景渲染图时采用的光照条件和摄像机位置保持一致，这样能够保证渲染得到的背景渲染图与原场景渲染图效果一致。

云端处理子系统101除了能够将场景渲染图分解为背景渲染图后，还能够将场景渲染图分解为默认商品的3D模型，具体地，将场景渲染图分解为默认商品的3D模型包括：

对默认商品的3D模型结构和材质贴图进行封装打包，生成默认商品的3D模型。

云端处理子系统101除了生成默认商品的3D模型外，还需要生成替换默认商品的备选商品的3D模型，以供后续终端根据用户需求进行加载实时渲染以展示，具体地，所述生成替换默认商品的备选商品的3D模型包括：

对备选商品的3D模型结构和材质贴图进行封装打包，生成备选商品的3D模型。

在处理好背景渲染图、默认商品的3D模型以及备选商品的3D模型后，将背景渲染图、默认商品的3D模型以及备选商品的3D模型存储在云端处理子系统101的云储存器中，并建立背景渲染图、默认商品的3D模型以及备选商品的3D模型与原场景渲染图的关联关系，方便后续终端进行调用和云端处理子系统101对用户返回的搭配效果图进行重新渲染。

为了保证终端对默认商品和备选商品的实时渲染流畅性和实时渲染效果，在对默认商品和备选商品的3D模型结构和材质贴图进行压缩打包前，还需要对默认商品和备选商品的3D模型结构和材质贴图进行检查；

在默认商品和备选商品的3D模型结构和材质贴图不适配终端展示子系统的实时展示时，还需要对默认商品和备选商品的3D模型结构进行压缩，对默认商品和备选商品的材质贴图进行优化。

当终端展示子系统的渲染引擎与云端处理子系统采用的渲染引擎不一样，或者渲染参数不同，会造成终端展示子系统的渲染引擎对默认商品和备选商品的3D模型渲染的效果不佳，渲染速度慢，甚至出现终端展示子系统的渲染引擎完全不能够实现对默认商品和备选商品的3D模型渲染，这种情况下即表明默认商品和备选商品的3D模型结构和材质贴图不适配终端展示子系统的实时展示，需要对3D模型结构和材质贴图进行预处理，具体地，为了提升传输效率缩短终端展示子系统的渲染引擎对3D模型的渲染时间，需要对对默认商品和备选商品的3D模型结构进行压缩。为了保证终端对3D模型的渲染质量，还需要对默认商品和备选商品的材质贴图进行优化，具体地，云端服务器会针对终端屏幕分辨率，GPU性能，带宽等，对模型的体积进行相应的自动化缩减，从而在极少降低视觉感知的情况下，降低对终端性能的依赖，也提高加载速度。另外，对材质也会进行相应的自动合并与缩减，降低加载材质数量或体积超过终端限制的情况。从而实现各端适配。

当云端处理子系统处理结束，获得背景渲染图、默认商品的3D模型以及备选商品的3D模型的基础上，终端展示子系统即可以进行展示。

当终端展示子系统展示渲染图时，首先展示的是包含有默认商品的原场景渲染图。用于可以根据需求电击替换功能，即进入默认商品替换环境，该替换环境的特征是，原场景渲染图更新为去除默认商品的背景渲染图，并将处理过的默认商品的3D模型动态加载在背景渲染图上，并进行实时渲染，且尺寸、姿态和位置与原场景渲染图中默认商品完全相同。在进入替换环境时，终端展示子系统还可以呈现供用户编辑功能，即所述混合渲染展示方法还包括：

终端展示子系统提供备选商品的缩略图列表，还提供对默认商品和备选商品进行编辑操作的接口，用户根据需求对默认商品和备选商品进行编辑操作，以构建搭配效果图。

用户点击默认商品后，会在终端展示子系统中展示备选商品的缩略图列表，用户点击后利用备选商品替换默认商品，这个过程可反复进行，从而达到备选商品的自由搭配效果。此外，还可以对任意备选商品和默认商品进行编辑操作，编辑操作包括移动、旋转或删除。在完成搭配后，即可以获得搭配效果图。该搭配效果图并不是一张商品和背景融为一体的高质量渲染图，因此还可选地向云端服务器重新发起高质量渲染请求。具体地，所述混合渲染展示方法还包括：

在形成搭配效果图后，终端展示子系统发送包含搭配效果图的渲染请求至云端处理子系统；

云端处理子系统根据搭配效果图对搭配效果图中的场景进行渲染，生成新场景渲染图反馈给终端展示子系统。

应用时，用户通过界面点击渲染，会向云端处理子系统中的服务器发起一次渲染任务，服务器对场景进行重新渲染，返回一张备选商品将与背景渲染图完全融合在一起的新场景渲染图，该新场景渲染图可以被传播。

该基于WebGL的可替换模型的混合渲染展示方法，通过将无需替换的三维数据通过离线渲染的方式作为背景渲染图，保留了画面总体的光影效果足够逼真；而将需要替换的是商品通过实时渲染引擎动态加载，又可以保证可替换商品的数量几乎无限制，满足了客户自由搭配需求。

该基于WebGL的可替换模型的混合渲染展示方法，由于无需提前渲染指数级的商品搭配，可以大大节约渲染资源，同时也将渲染时间从数小时降低为几分钟，大大降低了客户的等待时间。

该基于WebGL的可替换模型的混合渲染展示方法，由于可替换商品是动态加载的，因此可以对商品进行诸如移动，旋转等编辑，避免了由于不可预期的模型之间的碰撞造成的无效渲染浪费。

该基于WebGL的可替换模型的混合渲染展示方法，需要动态加载的商品模型数量有限，因此对终端的性能要求很低，具有良好的跨平台能力，可以应用于绝大多数的移动设备。

另外一个实施方式还提供了一种基于WebGL的可替换模型的混合渲染展示系统，包括：

至少两个计算机处理器；

该混合渲染展示系统中，其中一个处理器可以作为远端的云端的渲染引擎，另外一个处理器作为终端的渲染引擎，该混合渲染展示系统实现的渲染混合渲染展示方法的具体步骤及效果均与上述渲染混合渲染展示方法相同，在此不再赘述。

实际应用中，计算机存储器可以为在近端的易失性存储器，如RAM，还可以是失性存储器，如ROM，FLASH，软盘，机械硬盘等，还可以是远端的存储云。计算机处理器可以为中央处理器(CPU)、微处理器(MPU)、数字信号处理器(DSP)、或现场可编程门阵列(FPGA)，即可以通过这些处理器实现渲染混合渲染展示方法步骤。

另外一个实施方式提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述基于WebGL的可替换模型的混合渲染展示方法。

上述混合渲染展示方法和系统将效果逼真的云端离线渲染引擎生成的渲染图，与可在用户端实时渲染的动态3D模型融合在一起，无需提前渲染海量渲染图；此外，商品的3D模型可以在前端任意移动，避免了模型之间的碰撞，从而既实现了接近离线渲染的视觉效果，又可以对任意多模型的自由搭配，从而达到了家居软装的“轻设计”的目标。

以上所述的具体实施方式对本发明的技术方案和有益效果进行了详细说明，应理解的是以上所述仅为本发明的最优选实施例，并不用于限制本发明，凡在本发明的原则范围内所做的任何修改、补充和等同替换等，均应包含在本发明的保护范围之内。

Claims

1.一种基于WebGL的可替换模型的混合渲染展示方法，实现所述混合渲染展示方法的系统包括云端处理子系统、与云端处理子系统通信的终端展示子系统，其特征在于，所述混合渲染展示方法包括以下步骤：

将原场景渲染图分解为背景渲染图包括：剔除原场景渲染图对应的原始场景数据中默认商品数据后，采用与场景渲染图相同的渲染条件，对原始场景数据中剩余数据进行渲染，生成背景渲染图；

将场景渲染图分解为默认商品的3D模型包括：对默认商品的3D模型结构和材质贴图进行封装打包，生成默认商品的3D模型；

所述生成替换默认商品的备选商品的3D模型包括：对备选商品的3D模型结构和材质贴图进行封装打包，生成备选商品的3D模型；

在对默认商品和备选商品的3D模型结构和材质贴图进行压缩打包前，还需要对默认商品和备选商品的3D模型结构和材质贴图进行检查；在默认商品和备选商品的3D模型结构和材质贴图不适配终端展示子系统的实时展示时，还需要对默认商品和备选商品的3D模型结构进行压缩，对默认商品和备选商品的材质贴图进行优化，具体地，云端服务器会针对终端屏幕分辨率，GPU性能以及带宽，对模型的体积进行相应的自动化缩减，从而在极少降低视觉感知的情况下，降低对终端性能的依赖，也提高加载速度，另外，对材质也会进行相应的自动合并与缩减，降低加载材质数量或体积超过终端限制的情况，从而实现各端适配；

2.如权利要求1所述的基于WebGL的可替换模型的混合渲染展示方法，其特征在于，所述对原场景渲染图中默认商品的替换配置包括：

确定能够被替换的默认商品；

3.如权利要求1所述的基于WebGL的可替换模型的混合渲染展示方法，其特征在于，所述混合渲染展示方法还包括：

4.如权利要求1所述的基于WebGL的可替换模型的混合渲染展示方法，其特征在于，所述混合渲染展示方法还包括：

5.如权利要求4所述的基于WebGL的可替换模型的混合渲染展示方法，其特征在于，所述编辑操作包括移动、旋转或删除。

6.一种基于WebGL的可替换模型的混合渲染展示系统，其特征在于，包括：

至少两个计算机处理器；

所述计算机存储器被所述计算机处理器执行时，实现权利要求1～5任一项所述的基于WebGL的可替换模型的混合渲染展示方法。

7.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1～5任一项所述的基于WebGL的可替换模型的混合渲染展示方法。