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

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

【技术实现步骤摘要】
基于WebGL的模型渲染方法、电子设备及存储介质


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

技术介绍

[0002]随着虚拟现实(Virtual Reality，VR)技术的发展，虚拟现实技术目前已广泛应用于基于三维空间的一些应用场景，例如在线装修中。在线装修场景中，根据后端提供的墙面和地面等数据在前端绘制在线装修三维场景，在在线装修三维场景中，为了更加真实地向用户展示装修效果图，需要对房梁、墙面以及房屋内的各种家居对象等进行模型渲染和呈现。
[0003]但是现有技术中，在模型渲染时，模型都是由顶点和三角面组成的，如果描述模型的三角面比较多，渲染负载较大，渲染交互效率较低。

技术实现思路

[0004]为解决或改善现有技术中存在的问题，本申请各实施例提供了一种基于WebGL的模型渲染方法、电子设备及存储介质。
[0005]在本申请的一个实施例中，提供了一种基于WebGL的模型渲染方法。该方法，包括：
[0006]获取待渲染目标模型对应的原始模型数据，所述原始模型数据包括所述目标模型所需的多个顶点、由所述多个顶点形成的多个三角面和每个三角面使用的渲染纹理；
[0007]根据每个三角面使用的渲染纹理，从所述多个三角面中选择由渲染纹理相同或相似且可形成所述目标模型上的连续区域的三角面，作为待优化三角面；
[0008]根据所述待优化三角面中相邻三角面的法线方向之间的夹角，从所述待优化三角面中选择至少一组三角面，每一组中包括相邻且彼此法线方向之间的夹角均小于设定角度阈值的至少两个三角面；
[0009]针对每一组三角面，将该组三角面重新绘制成数量少于该组三角面数量的新三角面，得到优化后的模型数据，并利用WebGL对所述优化后的模型数据进行渲染，得到所述目标模型；其中，根据所述优化后的模型数据渲染出的目标模型包括的顶点数量和三角面数量均少于根据所述原始模型数据渲染出的目标模型的顶点数量和三角面数量。
[0010]在本申请的另一个实施例中，还提供了一种电子设备。该电子设设备，包括：存储器和处理器；其中，存储器，用于存储计算机程序；处理器耦合至存储器，用于执行计算机程序以用于执行：
[0011]获取待渲染目标模型对应的原始模型数据，所述原始模型数据包括所述目标模型所需的多个顶点、由所述多个顶点形成的多个三角面和每个三角面使用的渲染纹理；
[0012]根据每个三角面使用的渲染纹理，从所述多个三角面中选择由渲染纹理相同或相似且可形成所述目标模型上的连续区域的三角面，作为待优化三角面；
[0013]根据所述待优化三角面中相邻三角面的法线方向之间的夹角，从所述待优化三角
面中选择至少一组三角面，每一组中包括相邻且彼此法线方向之间的夹角均小于设定角度阈值的至少两个三角面；
[0014]针对每一组三角面，将该组三角面重新绘制成数量少于该组三角面数量的新三角面，得到优化后的模型数据，并利用WebGL对所述优化后的模型数据进行渲染，得到所述目标模型；其中，根据所述优化后的模型数据渲染出的目标模型包括的顶点数量和三角面数量均少于根据所述原始模型数据渲染出的目标模型的顶点数量和三角面数量。
[0015]在本申请的再一个实施例中，提供了一种存储有计算机指令的计算机可读存储介质，当计算机指令被一个或多个处理器执行时，致使一个或多个处理器执行上述基于WebGL的模型渲染方法中的步骤。
[0016]本申请各实施例提供的技术方案，从待渲染目标模型对应的原始模型数据中选择由渲染纹理相同或相似且可形成目标模型上的连续区域的三角面，作为待优化三角面；进一步地，从待优化三角面中选择至少一组包括相邻且彼此法线方向之间的夹角均小于设定角度阈值的至少两个三角面作为待优化的三角面组，可以降低同组中至少两个三角面的差异，加快优化效率；然后针对待优化的每一组三角面，将该组三角面重新绘制成数量少于该组三角面数量的新三角面，得到优化后的模型，与原始模型相比，优化后的模型三角面减少，从而减少了渲染负载；再利用WebGL对优化后的模型数据进行渲染，可以提高渲染交互效率。
附图说明
[0017]为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0018]图1示出了本申请一实施例提供的基于WebGL的模型渲染方法的流程示意图；
[0019]图2示出了本申请一实施例提供的在线装修场景中的家具模型渲染需求的示意图；
[0020]图3示出了本申请一实施例提供的在线装修场景中的优化后的家具模型的示意图；
[0021]图4示出了本申请一实施例提供的在线装修场景中的优化后的家具模型进行纹理渲染后的示意图；
[0022]图5示出了本申请一实施例提供的重新绘制的一组三角面示意图；
[0023]图6示出了本申请一实施例提供的电子设备的结构示意图。
具体实施方式
[0024]本申请提供了如下各实施例以解决或部分解决上述各方案存在的问题。为了使本
的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述。
[0025]在本申请的说明书、权利要求书及上述附图中描述的一些流程中，包含了按照特定顺序出现的多个操作，这些操作可以不按照其在本文中出现的顺序来执行或并行执行。
操作的序号如101、102等，仅仅是用于区分各个不同的操作，序号本身不代表任何的执行顺序。另外，这些流程可以包括更多或更少的操作，并且这些操作可以按顺序执行或并行执行。需要说明的是，本文中的“第一”、“第二”等描述，是用于区分不同的消息、设备、模块等，不代表先后顺序，也不限定“第一”和“第二”是不同的类型。此外，下文描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
[0026]图1示出了本申请一实施例提供的基于WebGL的模型渲染方法的流程示意图。如图1所示，方法包括：
[0027]101、获取待渲染目标模型对应的原始模型数据，原始模型数据包括目标模型所需的多个顶点、由多个顶点形成的多个三角面和每个三角面使用的渲染纹理；
[0028]102、根据每个三角面使用的渲染纹理，从多个三角面中选择由渲染纹理相同或相似且可形成目标模型上的连续区域的三角面，作为待优化三角面；
[0029]103、根据待优化三角面中相邻三角面的法线方向之间的夹角，从待优化三角面中选择至少一组三角面，每一组中包括相邻且彼此法线方向之间的夹角均小于设定角度阈值的至少两个三角面；
[0030]104、针对每一组三角面，将该组三角面重新本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于WebGL的模型渲染方法，其特征在于，包括：获取待渲染目标模型对应的原始模型数据，所述原始模型数据包括所述目标模型所需的多个顶点、由所述多个顶点形成的多个三角面和每个三角面使用的渲染纹理；根据每个三角面使用的渲染纹理，从所述多个三角面中选择由渲染纹理相同或相似且可形成所述目标模型上的连续区域的三角面，作为待优化三角面；根据所述待优化三角面中相邻三角面的法线方向之间的夹角，从所述待优化三角面中选择至少一组三角面，每一组中包括相邻且彼此法线方向之间的夹角均小于设定角度阈值的至少两个三角面；针对每一组三角面，将该组三角面重新绘制成数量少于该组三角面数量的新三角面，得到优化后的模型数据，并利用WebGL对所述优化后的模型数据进行渲染，得到所述目标模型；其中，根据所述优化后的模型数据渲染出的目标模型包括的顶点数量和三角面数量均少于根据所述原始模型数据渲染出的目标模型的顶点数量和三角面数量。2.根据权利要求1所述的方法，其特征在于，根据每个三角面使用的渲染纹理，从所述多个三角面中选择由渲染纹理相同或相似且可形成所述目标模型上的连续区域的三角面，作为待优化三角面，包括：根据每个三角面的顶点坐标，获取由所述多个三角面形成所述目标模型时的所述目标模型中的边缘区域，并根据每个三角面的法线方向，获取由所述多个三角面形成的所述目标模型中的弯曲区域；根据每个三角面的渲染纹理，从所述边缘区域和所述弯曲区域中选择渲染纹理相同或相似的三角面，作为待优化三角面。3.根据权利要求2所述的方法，其特征在于，根据每个三角面的顶点坐标，获取由所述多个三角面形成所述目标模型时的所述目标模型中的边缘区域，包括：判断每个三角面的顶点坐标中是否出现坐标极值；从顶点坐标中出现坐标极值的三角面中，获取顶点坐标中出现同一坐标极值的三角面；所述顶点坐标中出现同一坐标极值的三角面形成所述目标模型中的边缘区域。4.根据权利要求2所述的方法，其特征在于，根据每个三角面的法线方向，获取由所述多个三角面形成的所述目标模型中的弯曲区域，包括：根据每个三角面的法线方向，判断所述目标模型中是否存在法线方向呈现均匀或近似均匀变化趋势的连续多个三角面；若存在，将所述连续多个三角面形成的区域作为所述目标模型中的弯曲区域。5.根据权利要求1
‑
4任一项所述的方法，其特征在于，针对每一组三角面，将该组三角面重新绘制成数量少于该组三角面数量的新三角面，包括：针对每一组三角面，将该组三角面的所有顶点映射到同一坐标平面内，得到该组三角面对应的一组二维顶点坐标；从该组二维顶点坐标中，选择位于所述同一坐标平面上最外层的至少三个二维顶点坐标；从该组三角面的所有顶点中，确定与所述至少三个...

【专利技术属性】
技术研发人员：高佩文，
申请(专利权)人：北京城市网邻信息技术有限公司，
类型：发明
国别省市：