CN114004925B - 基于WebGL的模型渲染方法、电子设备及存储介质 - Google Patents

Abstract

本申请公开了一种基于WebGL的模型渲染方法、电子设备及存储介质。本申请各实施例提供的技术方案，从待渲染目标模型对应的原始模型数据中选择由渲染纹理相同或相似且可形成目标模型上的连续区域的三角面，作为待优化三角面；进一步，从待优化三角面中选择至少一组包括相邻且彼此法线方向之间的夹角均小于设定角度阈值的至少两个三角面作为待优化的三角面组，可以降低同组中至少两个三角面的差异，加快优化效率；然后将该组三角面重新绘制成数量少于该组三角面数量的新三角面，得到优化后的模型，与原始模型相比，优化后的模型三角面减少，从而减少了渲染负载；再利用WebGL对优化后的模型数据进行渲染，可以提高渲染交互效率。

Description

基于WebGL的模型渲染方法、电子设备及存储介质

技术领域

本申请涉及模型渲染领域，尤其涉及一种基于WebGL的模型渲染方法、电子设备及存储介质。

背景技术

随着虚拟现实(Virtual Reality，VR)技术的发展，虚拟现实技术目前已广泛应用于基于三维空间的一些应用场景，例如在线装修中。在线装修场景中，根据后端提供的墙面和地面等数据在前端绘制在线装修三维场景，在在线装修三维场景中，为了更加真实地向用户展示装修效果图，需要对房梁、墙面以及房屋内的各种家居对象等进行模型渲染和呈现。

但是现有技术中，在模型渲染时，模型都是由顶点和三角面组成的，如果描述模型的三角面比较多，渲染负载较大，渲染交互效率较低。

发明内容

为解决或改善现有技术中存在的问题，本申请各实施例提供了一种基于WebGL的模型渲染方法、电子设备及存储介质。

在本申请的一个实施例中，提供了一种基于WebGL的模型渲染方法。该方法，包括：

获取待渲染目标模型对应的原始模型数据，所述原始模型数据包括所述目标模型所需的多个顶点、由所述多个顶点形成的多个三角面和每个三角面使用的渲染纹理；

根据每个三角面使用的渲染纹理，从所述多个三角面中选择由渲染纹理相同或相似且可形成所述目标模型上的连续区域的三角面，作为待优化三角面；

根据所述待优化三角面中相邻三角面的法线方向之间的夹角，从所述待优化三角面中选择至少一组三角面，每一组中包括相邻且彼此法线方向之间的夹角均小于设定角度阈值的至少两个三角面；

针对每一组三角面，将该组三角面重新绘制成数量少于该组三角面数量的新三角面，得到优化后的模型数据，并利用WebGL对所述优化后的模型数据进行渲染，得到所述目标模型；其中，根据所述优化后的模型数据渲染出的目标模型包括的顶点数量和三角面数量均少于根据所述原始模型数据渲染出的目标模型的顶点数量和三角面数量。

在本申请的另一个实施例中，还提供了一种电子设备。该电子设设备，包括：存储器和处理器；其中，存储器，用于存储计算机程序；处理器耦合至存储器，用于执行计算机程序以用于执行：

获取待渲染目标模型对应的原始模型数据，所述原始模型数据包括所述目标模型所需的多个顶点、由所述多个顶点形成的多个三角面和每个三角面使用的渲染纹理；

根据每个三角面使用的渲染纹理，从所述多个三角面中选择由渲染纹理相同或相似且可形成所述目标模型上的连续区域的三角面，作为待优化三角面；

根据所述待优化三角面中相邻三角面的法线方向之间的夹角，从所述待优化三角面中选择至少一组三角面，每一组中包括相邻且彼此法线方向之间的夹角均小于设定角度阈值的至少两个三角面；

针对每一组三角面，将该组三角面重新绘制成数量少于该组三角面数量的新三角面，得到优化后的模型数据，并利用WebGL对所述优化后的模型数据进行渲染，得到所述目标模型；其中，根据所述优化后的模型数据渲染出的目标模型包括的顶点数量和三角面数量均少于根据所述原始模型数据渲染出的目标模型的顶点数量和三角面数量。

在本申请的再一个实施例中，提供了一种存储有计算机指令的计算机可读存储介质，当计算机指令被一个或多个处理器执行时，致使一个或多个处理器执行上述基于WebGL的模型渲染方法中的步骤。

本申请各实施例提供的技术方案，从待渲染目标模型对应的原始模型数据中选择由渲染纹理相同或相似且可形成目标模型上的连续区域的三角面，作为待优化三角面；进一步地，从待优化三角面中选择至少一组包括相邻且彼此法线方向之间的夹角均小于设定角度阈值的至少两个三角面作为待优化的三角面组，可以降低同组中至少两个三角面的差异，加快优化效率；然后针对待优化的每一组三角面，将该组三角面重新绘制成数量少于该组三角面数量的新三角面，得到优化后的模型，与原始模型相比，优化后的模型三角面减少，从而减少了渲染负载；再利用WebGL对优化后的模型数据进行渲染，可以提高渲染交互效率。

附图说明

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

图1示出了本申请一实施例提供的基于WebGL的模型渲染方法的流程示意图；

图2示出了本申请一实施例提供的在线装修场景中的家具模型渲染需求的示意图；

图3示出了本申请一实施例提供的在线装修场景中的优化后的家具模型的示意图；

图4示出了本申请一实施例提供的在线装修场景中的优化后的家具模型进行纹理渲染后的示意图；

图5示出了本申请一实施例提供的重新绘制的一组三角面示意图；

图6示出了本申请一实施例提供的电子设备的结构示意图。

具体实施方式

本申请提供了如下各实施例以解决或部分解决上述各方案存在的问题。为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述。

在本申请的说明书、权利要求书及上述附图中描述的一些流程中，包含了按照特定顺序出现的多个操作，这些操作可以不按照其在本文中出现的顺序来执行或并行执行。操作的序号如101、102等，仅仅是用于区分各个不同的操作，序号本身不代表任何的执行顺序。另外，这些流程可以包括更多或更少的操作，并且这些操作可以按顺序执行或并行执行。需要说明的是，本文中的“第一”、“第二”等描述，是用于区分不同的消息、设备、模块等，不代表先后顺序，也不限定“第一”和“第二”是不同的类型。此外，下文描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

图1示出了本申请一实施例提供的基于WebGL的模型渲染方法的流程示意图。如图1所示，方法包括：

101、获取待渲染目标模型对应的原始模型数据，原始模型数据包括目标模型所需的多个顶点、由多个顶点形成的多个三角面和每个三角面使用的渲染纹理；

102、根据每个三角面使用的渲染纹理，从多个三角面中选择由渲染纹理相同或相似且可形成目标模型上的连续区域的三角面，作为待优化三角面；

103、根据待优化三角面中相邻三角面的法线方向之间的夹角，从待优化三角面中选择至少一组三角面，每一组中包括相邻且彼此法线方向之间的夹角均小于设定角度阈值的至少两个三角面；

104、针对每一组三角面，将该组三角面重新绘制成数量少于该组三角面数量的新三角面，得到优化后的模型数据，并利用WebGL对优化后的模型数据进行渲染，得到目标模型；其中，根据优化后的模型数据渲染出的目标模型包括的顶点数量和三角面数量均少于根据原始模型数据渲染出的目标模型的顶点数量和三角面数量。

在本实施例中，根据应用需求需要渲染出目标模型。如在图2所示的在线装修场景中，用户希望在图2所示的场景位置上渲染出图2所示规格的沙发、茶几，则沙发和茶几均可视为本申请实施例中待渲染出的目标模型。其中，图2用于表达用户的模型渲染需求，并不是真实渲染出的目标模型。在本实施例中，目标模型是指对目标物体进行三维建模得到的三维模型，可以是在线装修场景中对商场、房屋等三维空间进行建模得到的三维模型，或者是在线装修场景中对房屋中的家具进行三维建模得到的家具模型，也可以是在线看车场景中对车辆进行建模得到的车辆模型，等等。

在本实施例中，渲染目标模型依据目标模型对应的模型数据，模型数据用于描述目标模型，是渲染出目标模型的基础数据。渲染出的目标模型通常包括多个顶点和多个三角面，多个三角面是由多个顶点形成的；另外，目标模型中的每个三角面需要使用相应渲染纹理进行渲染，渲染纹理为目标模型的三角面在渲染时所需赋予的材质和纹理贴图等。

在本实施例中，并不是直接根据目标模型对应的模型数据进行模型渲染处理，而是先对目标模型对应的模型数据进行优化，并基于优化后的模型数据进行模型渲染得到目标模型。基于此，在上述步骤101中，首先获取待渲染目标模型对应的原始模型数据，原始模型数据是指优化前的模型数据，用于描述目标模型。该原始模型数据包括在优化前目标模型所需的多个顶点、由所述多个顶点形成的多个三角面和每个三角面使用的渲染纹理。之后，对原始模型数据进行优化，得到优化后的模型数据；利用WebGL对优化后的模型数据进行渲染，得到目标模型。

接续于图2在在线装修场景中的模型渲染需求，首先获取沙发和茶几的原始模型数据，原始模型数据用于在进行模型数据优化前描述沙发和茶几所需的顶点、三角面以及三角面的渲染纹理。在对沙发和茶几的原始模型数据进行渲染之前，可以对这些原始模型数据进行优化，得到沙发和茶几对应的优化后的模型数据，具体的优化过程可以参见下文描述，在此暂不详述。之后，再利用WebGL对沙发和茶几对应的优化后的模型数据进行渲染，其中，模型渲染的过程包括：顶点渲染过程、三角面渲染过程以及纹理渲染过程；在执行顶点渲染和三角面渲染过程之后可以得到如图3所示的沙发和茶几模型，可以看到该模型包括一些顶点和三角面；进一步在对图3所示的沙发和茶几模型进行纹理渲染之后，可以得到图4所示带有纹理信息的模型。由于优化后的模型数据与原始模型数据相比，三角面减少，渲染负载随之减少，那么渲染效率随之提高

在本实施例中，获取待渲染的原始模型的方式有多种，例如可以通过浏览器从云服务器的模型存储区域下载对应的模型，也可以输入所需要的模型，本实施例对此不作具体限定。原始模型的类别也有多种，例如可以为工业三维模型等，本实施例对此不作具体限定。特别的，在获取到原始模型后，通常还需要对原始模型进行数据格式解析，常见的三维模型数据格式有gltf、obj、fbx等，以及机械行业常用的三维模型格式igs、stp等。数据格式解析的目的是将原始模型转为显示所用的格式。原始模型在坐标系中显示的方式有多种，例如可以直接利用支持WebGL(Web Graphics Library，一种3D绘图标准)技术的浏览器将经过数据格式解析的原始模型数据在初始化好的坐标系中显示，以便于执行渲染，本实施例对此不作具体限定。

上述步骤102中，在获取待渲染目标模型对应的原始模型数据之后，并不是直接对原始模型数据进行渲染，而是根据每个三角面使用的渲染纹理，从原始模型数据中选择由渲染纹理相同或相似且可形成所述目标模型上的连续区域的三角面，作为待优化三角面。进一步，针对待优化三角面进行优化得到优化后的模型数据，对优化后的模型数据进行渲染。其中，连续区域的三角面是指由两两相邻的多个相三角面所形成的区域。渲染纹理相同可以理解为原始模型的三角面在渲染时所需赋予的材质和纹理贴图等类型、属性(如颜色)均相同。渲染纹理相似可以理解为原始模型的三角面在渲染时所需赋予的材质和纹理贴图等类型、属性(如颜色)相似。

在本实施例中，根据每个三角面使用的渲染纹理，从所述多个三角面中选择由渲染纹理相同或相似且可形成所述目标模型上的连续区域的三角面，作为待优化三角面，可通过以下步骤实现：

首先，根据每个三角面的顶点坐标，获取由多个三角面形成目标模型时的目标模型中的边缘区域，并根据每个三角面的法线方向，获取由多个三角面形成目标模型时的目标模型中的弯曲区域；然后根据每个三角面的渲染纹理，从边缘区域和弯曲区域中选择由渲染纹理相同或相似的三角面，作为待优化的三角面。其中，由多个三角面形成目标模型时的目标模型中的边缘区域和弯曲区域一般存在的三角面较多，导致渲染负载较大，所以可从上述边缘区域和弯曲区域中选择待优化区域。进一步，为了提高优化效率，可将渲染纹理相同或相似的连续区域的三角面，作为待优化三角面。

在本实施例中，根据每个三角面的顶点坐标，获取由所述多个三角面形成所述目标模型时的所述目标模型中的边缘区域，可通过以下步骤实现：

首先判断每个三角面的顶点坐标中是否出现坐标极值；然后从顶点坐标中出现坐标极值的三角面中，获取顶点坐标中出现同一坐标极值的三角面；最后由顶点坐标中出现同一坐标极值的三角面形成目标模型的边缘区域。其中，三角面的顶点坐标可以是三维坐标，对应的坐标极值为坐标的最大值或最小值。

在本申请实施例中，根据每个三角面的法线方向，获取由多个三角面形成的目标模型中的弯曲区域，可通过以下步骤实现：

首先根据每个三角面的法线方向，判断目标模型中是否存在法线方向呈现均匀或近似均匀变化趋势的连续多个三角面；若存在，将连续多个三角面形成的区域作为目标模型中的弯曲区域。

其中，法线是指始终垂直于某平面的虚线，且具有方向。在本实施例中，某平面为各三角面分别所在的平面。目标模型中连续多个三角面之间的法线方向的改变量等于或小于设定的阈值时，可判定上述连续多个三角面的法线方向呈现均匀或近似均匀变化趋势。

上述步骤103中，在得到待优化三角面之后，进一步，可将待优化的的三角面分为多组三角面，然后对多组三角面进行优化。在对多组三角面进行优化时，可根据待优化三角面中相邻三角面的法线方向之间的夹角，从待优化三角面中选择至少一组三角面，具体地，可将相邻且彼此法线方向之间的夹角均小于设定角度阈值的至少两个三角面划分至同一组。由此，可进一步提高优化效率。

上述步骤104中，即在得到至少一组三角面之后，针对每一组三角面，对该组三角面进行重新绘制，以将该组三角面重新绘制成数量少于该组三角面数量的新三角面，得到优化后的模型数据；其中，优化后的模型数据所包含的三角面数量少于原始模型所包含的三角面数量。优化后的模型数据渲染负载大大减小，在保证渲染效果的同时，降低了计算量。

可选地，针对每一组三角面，将该组三角面重新绘制成数量少于该组三角面数量的新三角面，得到优化后的模型数据，可通过以下步骤实现：

首先针对每一组三角面，将该组三角面的所有顶点映射到同一坐标平面内，得到该组三角面对应的一组二维顶点坐标；其次从该组二维顶点坐标中，选择位于同一坐标平面上最外层的至少三个二维顶点坐标；然后从该组三角面的所有顶点中，确定与至少三个二维顶点坐标对应的三角面上的至少三个顶点，分别作为目标顶点；最后针对该组三角面，利用至少三个目标顶点重新绘制最少数量的新三角面，并根据该组三角面使用的渲染纹理设置新三角面使用的渲染纹理。从某个坐标维度来看，值最大或者大于设定的阈值的认为是最外层；或者，也可以同时从两个坐标维度来看，每个坐标维度上的取值最大或大于设定的阈值的认为是最外层。

假设如图5所示，将一组三角面的所有顶点映射到同一坐标平面后，得到该组三角面对应的一组二维顶点A、B、C、D、E。由于三个顶点相连才能形成一个三角面，按照同时从两个坐标维度来看，每个坐标维度上的取值大于设定的阈值的认为是最外层进行定义的情况下，那么需要从该组二维顶点中，选择位于同一坐标平面上最外层的至少三个二维顶点，分别作为目标顶点。本例中，如图5所示，假设最后选定的最外层的目标顶点有4个，分别是A、B、C、D，那么其能构成的三角面的最少数量为4个，且构成的三角面分别为△ABE、△BCE、△CDE、△ADE。

上述步骤104中，WebGL绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。在本实施例中，利用WebGL对优化后的模型数据进行渲染，可通过以下步骤实现：

获取优化后的模型数据包括的顶点、三角面以及每个三角面使用的渲染纹理；根据优化后的模型包括的顶点、三角面以及每个三角面使用的渲染纹理，将优化后的模型数据加载至预先生成的三维场景中。

在本实施例中，三维场景可以为在线家装场景，原始模型数据或优化后的模型数据为在线家装场景中的家具模型数据或墙面模型数据。

例如，在在线家装场景中，通过电子终端设备显示图形用户界面，图形用户界面中包括家装的VR交互界面，该界面上已经包含桌子、沙发等家具；同时该界面上还有对象选择控件；根据用户选择的对象对应的参数，找到上述参数对应的原始模型数据；对原始模型数据进行优化，得到优化后的模型数据；加载优化后的模型数据，然后对优化后的模型数据进行渲染，就会出现一张桌子、沙发等对应的家具。

其中，家具的参数可以由用户选定，也可以由电子终端根据VR交互界面展示的房屋的实际尺寸，来选择适配的家具参数。

图6示出了本申请一实施例提供的电子设备的结构示意图，该电子设备包括：存储器60a和处理器60b；其中，存储器60a，用于存储计算机程序；处理器60b耦合至存储器60a，用于执行计算机程序以用于执行：

获取待渲染目标模型对应的原始模型数据，原始模型数据包括目标模型所需的多个顶点、由多个顶点形成的多个三角面和每个三角面使用的渲染纹理；

根据每个三角面使用的渲染纹理，从多个三角面中选择由渲染纹理相同或相似且可形成目标模型上的连续区域的三角面，作为待优化三角面；103、根据待优化三角面中相邻三角面的法线方向之间的夹角，从待优化三角面中选择至少一组三角面，每一组中包括相邻且彼此法线方向之间的夹角均小于设定角度阈值的至少两个三角面；

针对每一组三角面，将该组三角面重新绘制成数量少于该组三角面数量的新三角面，得到优化后的模型数据，并利用WebGL对优化后的模型数据进行渲染，得到目标模型；其中，根据优化后的模型数据渲染出的目标模型包括的顶点数量和三角面数量均少于根据原始模型数据渲染出的目标模型的顶点数量和三角面数量。

进一步地，在处理器60b用于执行根据每个三角面使用的渲染纹理，从多个三角面中选择由渲染纹理相同或相似且可形成目标模型上的连续区域的三角面，作为待优化三角面时，具体用于：根据每个三角面的顶点坐标，获取由多个三角面形成目标模型时的目标模型中的边缘区域，并根据每个三角面的法线方向，获取由多个三角面形成的目标模型中的弯曲区域；根据每个三角面的渲染纹理，从边缘区域和弯曲区域中选择渲染纹理相同或相似的三角面，作为待优化三角面。

进一步地，处理器60b在根据每个三角面的顶点坐标，获取由多个三角面形成目标模型时的目标模型中的边缘区域时，具体用于：判断每个三角面的顶点坐标中是否出现坐标极值；从顶点坐标中出现坐标极值的三角面中，获取顶点坐标中出现同一坐标极值的三角面；顶点坐标中出现同一坐标极值的三角面形成目标模型中的边缘区域。

进一步地，处理器60b在根据每个三角面的法线方向，获取由多个三角面形成的目标模型中的弯曲区域时，具体用于：根据每个三角面的法线方向，判断目标模型中是否存在法线方向呈现均匀或近似均匀变化趋势的连续多个三角面；若存在，将连续多个三角面形成的区域作为目标模型中的弯曲区域。进一步地，处理器60b在针对每一组三角面，将该组三角面重新绘制成数量少于该组三角面数量的新三角面时，具体用于：针对每一组三角面，将该组三角面的所有顶点映射到同一坐标平面内，得到该组三角面对应的一组二维顶点坐标；从该组二维顶点坐标中，选择位于同一坐标平面上最外层的至少三个二维顶点坐标；从该组三角面的所有顶点中，确定与至少三个二维顶点坐标对应的三角面上的至少三个顶点，分别作为目标顶点；针对该组三角面，利用至少三个目标顶点重新绘制最少数量的新三角面，并根据该组三角面使用的渲染纹理设置新三角面使用的渲染纹理。

进一步地，处理器60b在利用WebGL对优化后的模型数据进行渲染时，具体用于：获取优化后的模型数据包括的顶点、三角面以及每个三角面使用的渲染纹理；根据优化后的模型数据包括的顶点、三角面以及每个三角面使用的渲染纹理进行模型渲染，得到优化后的目标模型，将优化后的目标模型加载至预先生成的三维场景中。

进一步地，三维场景为在线家装场景，原始模型数据或优化后的模型数据为在线家装场景中的家具模型数据或墙面模型数据。

进一步，如图6所示，该电子终端还包括：通信组件60c、显示器60d、电源组件60e、音频组件60f等其它组件。图6中仅示意性给出部分组件，并不意味着电子终端只包括图6所示组件。本实施例的电子终端可以实现为台式电脑、笔记本电脑、智能手机或IOT设备等终端设备。

这里需要说明的是：上述实施例提供的电子设备可实现上述各方法实施例中描述的技术方案，上述各模块或单元具体实现的原理可参见上述各方法实施例中的相应内容，此处不再赘述。

本申请一实施例还提供了存储有计算机指令的计算机可读存储介质，计算机指令被一个或多个处理器执行时，致使一个或多个处理器执行以下步骤：

获取待渲染目标模型对应的原始模型数据，原始模型数据包括目标模型所需的多个顶点、由多个顶点形成的多个三角面和每个三角面使用的渲染纹理；

根据每个三角面使用的渲染纹理，从多个三角面中选择由渲染纹理相同或相似且可形成目标模型上的连续区域的三角面，作为待优化三角面；103、根据待优化三角面中相邻三角面的法线方向之间的夹角，从待优化三角面中选择至少一组三角面，每一组中包括相邻且彼此法线方向之间的夹角均小于设定角度阈值的至少两个三角面；

针对每一组三角面，将该组三角面重新绘制成数量少于该组三角面数量的新三角面，得到优化后的模型数据，并利用WebGL对优化后的模型数据进行渲染，得到目标模型；其中，根据优化后的模型数据渲染出的目标模型包括的顶点数量和三角面数量均少于根据原始模型数据渲染出的目标模型的顶点数量和三角面数量。

进一步地，在处理器用于执行根据每个三角面使用的渲染纹理，从多个三角面中选择由渲染纹理相同或相似且可形成目标模型上的连续区域的三角面，作为待优化三角面时，具体用于：根据每个三角面的顶点坐标，获取由多个三角面形成目标模型时的目标模型中的边缘区域，并根据每个三角面的法线方向，获取由多个三角面形成的目标模型中的弯曲区域；根据每个三角面的渲染纹理，从边缘区域和弯曲区域中选择渲染纹理相同或相似的三角面，作为待优化三角面。

进一步地，处理器在根据每个三角面的顶点坐标，获取由多个三角面形成目标模型时的目标模型中的边缘区域时，具体用于：判断每个三角面的顶点坐标中是否出现坐标极值；从顶点坐标中出现坐标极值的三角面中，获取顶点坐标中出现同一坐标极值的三角面；顶点坐标中出现同一坐标极值的三角面形成目标模型中的边缘区域。

进一步地，处理器在根据每个三角面的法线方向，获取由多个三角面形成的目标模型中的弯曲区域时，具体用于：根据每个三角面的法线方向，判断目标模型中是否存在法线方向呈现均匀或近似均匀变化趋势的连续多个三角面；若存在，将连续多个三角面形成的区域作为目标模型中的弯曲区域。进一步地，处理器在针对每一组三角面，将该组三角面重新绘制成数量少于该组三角面数量的新三角面时，具体用于：针对每一组三角面，将该组三角面的所有顶点映射到同一坐标平面内，得到该组三角面对应的一组二维顶点坐标；从该组二维顶点坐标中，选择位于同一坐标平面上最外层的至少三个二维顶点坐标；从该组三角面的所有顶点中，确定与至少三个二维顶点坐标对应的三角面上的至少三个顶点，分别作为目标顶点；针对该组三角面，利用至少三个目标顶点重新绘制最少数量的新三角面，并根据该组三角面使用的渲染纹理设置新三角面使用的渲染纹理。

进一步地，处理器在利用WebGL对优化后的模型数据进行渲染时，具体用于：获取优化后的模型数据包括的顶点、三角面以及每个三角面使用的渲染纹理；根据优化后的模型数据包括的顶点、三角面以及每个三角面使用的渲染纹理进行模型渲染，得到优化后的目标模型，将优化后的目标模型加载至预先生成的三维场景中。

进一步地，三维场景为在线家装场景，原始模型数据或优化后的模型数据为在线家装场景中的家具模型数据或墙面模型数据。

这里需要说明的是：上述实施例提供的计算机可读存储介质可实现上述各方法实施例中描述的技术方案，上述各模块或单元具体实现的原理可参见上述各方法实施例中的相应内容，此处不再赘述。

本申请实施例还提供一种计算机程序产品，包括计算机程序/指令，当计算机程序/指令被处理器执行时，致使处理器实现图1所示方法实施例中的步骤。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助加必需的通用硬件平台的方式来实现，当然也可以通过硬件和软件结合的方式来实现。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以计算机产品的形式体现出来，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程坐标确定设备的处理器以产生一个机器，使得通过计算机或其他可编程坐标确定设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程坐标确定设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程坐标确定设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

最后应说明的是：以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。

Claims (9)

1.一种基于WebGL的模型渲染方法，其特征在于，包括：

获取待渲染目标模型对应的原始模型数据，所述原始模型数据包括所述目标模型所需的多个顶点、由所述多个顶点形成的多个三角面和每个三角面使用的渲染纹理；

根据每个三角面使用的渲染纹理，从所述多个三角面中选择由渲染纹理相同或相似且可形成所述目标模型上的连续区域的三角面，作为待优化三角面；

根据所述待优化三角面中相邻三角面的法线方向之间的夹角，从所述待优化三角面中选择至少一组三角面，每一组中包括相邻且彼此法线方向之间的夹角均小于设定角度阈值的至少两个三角面；

针对每一组三角面，通过顶点平面映射的方法从该组三角面的顶点中选取至少三个目标顶点，利用所述至少三个目标顶点将该组三角面重新绘制成数量少于该组三角面数量的新三角面，得到优化后的模型数据，并利用WebGL对所述优化后的模型数据进行渲染，得到所述目标模型；其中，根据所述优化后的模型数据渲染出的目标模型包括的顶点数量和三角面数量均少于根据所述原始模型数据渲染出的目标模型的顶点数量和三角面数量；

其中，针对每一组三角面，通过顶点平面映射的方法从该组三角面的顶点中选取至少三个目标顶点，利用所述至少三个目标顶点将该组三角面重新绘制成数量少于该组三角面数量的新三角面，包括：

针对每一组三角面，将该组三角面的所有顶点映射到同一坐标平面内，得到该组三角面对应的一组二维顶点坐标；

从该组二维顶点坐标中，选择位于所述同一坐标平面上最外层的至少三个二维顶点坐标；

从该组三角面的所有顶点中，确定与所述至少三个二维顶点坐标对应的三角面上的至少三个顶点，分别作为目标顶点；

针对该组三角面，利用所述至少三个目标顶点重新绘制最少数量的新三角面，并根据该组三角面使用的渲染纹理设置新三角面使用的渲染纹理。

2.根据权利要求1所述的方法，其特征在于，根据每个三角面使用的渲染纹理，从所述多个三角面中选择由渲染纹理相同或相似且可形成所述目标模型上的连续区域的三角面，作为待优化三角面，包括：

根据每个三角面的顶点坐标，获取由所述多个三角面形成所述目标模型时的所述目标模型中的边缘区域，并根据每个三角面的法线方向，获取由所述多个三角面形成的所述目标模型中的弯曲区域；

根据每个三角面的渲染纹理，从所述边缘区域和所述弯曲区域中选择渲染纹理相同或相似的三角面，作为待优化三角面。

3.根据权利要求2所述的方法，其特征在于，根据每个三角面的顶点坐标，获取由所述多个三角面形成所述目标模型时的所述目标模型中的边缘区域，包括：

判断每个三角面的顶点坐标中是否出现坐标极值；从顶点坐标中出现坐标极值的三角面中，获取顶点坐标中出现同一坐标极值的三角面；所述顶点坐标中出现同一坐标极值的三角面形成所述目标模型中的边缘区域。

4.根据权利要求2所述的方法，其特征在于，根据每个三角面的法线方向，获取由所述多个三角面形成的所述目标模型中的弯曲区域，包括：

根据每个三角面的法线方向，判断所述目标模型中是否存在法线方向呈现均匀或近似均匀变化趋势的连续多个三角面；

若存在，将所述连续多个三角面形成的区域作为所述目标模型中的弯曲区域。

5.根据权利要求1所述的方法，其特征在于，利用WebGL对所述优化后的模型数据进行渲染，包括：

获取所述优化后的模型数据包括的顶点、三角面以及每个三角面使用的渲染纹理；

根据所述优化后的模型数据包括的顶点、三角面以及每个三角面使用的渲染纹理进行模型渲染，得到优化后的目标模型，将所述优化后的目标模型加载至预先生成的三维场景中。

6.根据权利要求5所述的方法，其特征在于，所述三维场景为在线家装场景，所述原始模型数据或优化后的模型数据为在线家装场景中的家具模型数据或墙面模型数据。

7.一种电子设备，其特征在于，包括：存储器和处理器；其中，所述存储器，用于存储计算机程序；所述处理器耦合至所述存储器，用于执行所述计算机程序以用于执行：

获取待渲染目标模型对应的原始模型数据，所述原始模型数据包括所述目标模型所需的多个顶点、由所述多个顶点形成的多个三角面和每个三角面使用的渲染纹理；

根据每个三角面使用的渲染纹理，从所述多个三角面中选择由渲染纹理相同或相似且可形成所述目标模型上的连续区域的三角面，作为待优化三角面；

根据所述待优化三角面中相邻三角面的法线方向之间的夹角，从所述待优化三角面中选择至少一组三角面，每一组中包括相邻且彼此法线方向之间的夹角均小于设定角度阈值的至少两个三角面；

针对每一组三角面，通过顶点平面映射的方法从该组三角面的顶点中选取至少三个目标顶点，利用所述至少三个目标顶点将该组三角面重新绘制成数量少于该组三角面数量的新三角面，得到优化后的模型数据，并利用WebGL对所述优化后的模型数据进行渲染，得到所述目标模型；其中，根据所述优化后的模型数据渲染出的目标模型包括的顶点数量和三角面数量均少于根据所述原始模型数据渲染出的目标模型的顶点数量和三角面数量；

其中，针对每一组三角面，通过顶点平面映射的方法从该组三角面的顶点中选取至少三个目标顶点，利用所述至少三个目标顶点将该组三角面重新绘制成数量少于该组三角面数量的新三角面，包括：

针对每一组三角面，将该组三角面的所有顶点映射到同一坐标平面内，得到该组三角面对应的一组二维顶点坐标；

从该组二维顶点坐标中，选择位于所述同一坐标平面上最外层的至少三个二维顶点坐标；

从该组三角面的所有顶点中，确定与所述至少三个二维顶点坐标对应的三角面上的至少三个顶点，分别作为目标顶点；

针对该组三角面，利用所述至少三个目标顶点重新绘制最少数量的新三角面，并根据该组三角面使用的渲染纹理设置新三角面使用的渲染纹理。

8.根据权利要求7所述的电子设备，其特征在于，在所述处理器用于执行根据每个三角面使用的渲染纹理，从所述多个三角面中选择由渲染纹理相同或相似且可形成所述目标模型上的连续区域的三角面，作为待优化三角面时，具体用于：

根据每个三角面的顶点坐标，获取由所述多个三角面形成所述目标模型时的所述目标模型中的边缘区域，并根据每个三角面的法线方向，获取由所述多个三角面形成的所述目标模型中的弯曲区域；

根据每个三角面的渲染纹理，从所述边缘区域和所述弯曲区域中选择渲染纹理相同或相似的三角面，作为待优化三角面。

9.一种存储有计算机指令的计算机可读存储介质，其特征在于，当所述计算机指令被一个或多个处理器执行时，致使所述一个或多个处理器执行权利要求1-6任一项所述方法中的步骤。

Images