WEB平台环境下三维模型加载和渲染方法及其装置

本技术涉及人机交互，特别是一种web平台环境下三维模型加载和渲染方法及其装置。

背景技术：

1、随着互联网的普及，使用三维交互技术展示三维模型和场景对于增强用户体验的真实感、沉浸感具有重要作用。当前，随着三维数据采集和建模技术的飞速发展，以多边形网格来表示的三维模型的数据量不断增长，这给展品的数字存储、传输和绘制都带来许多困难。

2、事实上，由于数据下载时间太长，大多数现有系统都存在延迟问题，缺乏对网络和客户端设备的适应能力，通过简化生成多细节层次模型，也会导致无法保持模型拓扑和属性特征、不支持三维场景等问题，这些缺陷严重影响用户体验的质量。

3、造成以上问题的根本原因为采用网格传输三维几何模型，但网络的传输速度不能满足用户的需求，因此，研究如何在网络上高效实时传输用户所需的三维几何信息始终是图形学研究的重要问题。

4、现有三维模型交互应用需要用户下载和安装应用程序，由于可移植性、跨平台操作和信息互操作性的限制，这一要求严重阻碍了大规模的跨平台应用和推广。解决方案之一是研发面向web的三维模型交互应用程序。现有三维模型绘制是面向web的三维模型交互应用的关键支撑技术。

5、然而，面向web的三维模型高效渲染和动态交互面临着挑战。一方面，由于javascript解释的低效率，web浏览器平台与本地应用程序之间的计算能力相比性能较为低下，web应用程序无法有效处理大量的数据和复杂的计算。另一方面，三维模型比二维模型包含更多的数据。随着业务需求复杂性的增加，这些模型也包含了大量的法线，光照等属性数据，复杂的交互需求进一步增加了web浏览器3d渲染所使用的数据量。

6、由于以上两个方面的原因，web平台的计算能力和3d模型的数据大小影响了web应用的用户体验。

7、自2011年webgl出现以来，已经实现了基于webgl的第三方javascript 3d渲染引擎，如three.js、babylon.js等，这些应用可以一次性加载整个模型文件。但该机制在web3d应用中存在以下问题：

8、首先，基于同步通信模式的一次性模型数据加载和渲染机制导致的模型加载渲染延迟较大，在同步数据通信模式下，客户端需要等待所有的模型数据传输完成后才能加载和渲染。一方面，移动无线网络的带宽不足或不稳定会导致模型加载的延迟。

9、此外，对于计算能力较弱的web平台，一次性渲染大型3d模型会有相当大的延迟，浏览器页面甚至可能出现卡顿的情况。传统上，在三维应用中使用渐进式网格方法解决了大量数据延迟的问题。但由于模型解压缩过程复杂，web平台将面临更大的计算压力，这将造成用户响应延迟的增加，从而导致客户放弃这种方法。

10、终端用户无法负担大规模、复杂的交互式3d应用程序。

11、因此，需要一种异步分散的三维模型传输方法来解决一次性加载造成的网络拥塞问题。

12、另外需要考虑一次性加载渲染模型数据机制存在的计算冗余问题：三维模型除了承载模型拓扑数据外，还承载了大量与用户动态交互需求相关的数据，在模型中初始化渲染时不需要这些数据，但这些数据在随后的用户交互中又需要被使用到。而一次性的模型加载和渲染机制将模型结构数据等全部加载和渲染，给计算能力较弱的web平台带来了额外的加载和计算压力，使得服务的计算响应延迟更长。在传统的云和web端传输方法中，由于终端计算能力的不足，复杂交互和大数据量的三维模型渲染计算导致通信成本增加和用户服务延迟。因此，需要一种有效的缓解模型初始化和数据渲染的方法来缓解基于web的终端的计算压力。

13、基于以上两个方面的讨论，使用一次性的模型加载呈现机制来构建更加复杂的web 3d应用程序，可能会导致严重的服务延迟甚至中断问题。因此，研究一种具有交互功能的web平台环境下的三维模型加载和渲染机制至关重要。

技术实现思路

1、本技术针对上述技术问题提供了一种web平台环境下三维模型加载和渲染方法及其装置，用于解决现有技术中存在的一次性加载造成的网络拥塞问题；模型初始化和数据渲染时基于web的终端计算压力过大的技术问题。

2、本技术提供了一种web平台环境下三维模型加载和渲染方法，包括以下步骤：

3、步骤s1：计算待处理模型的纹理各边的接缝约束，并划分第一边集合；

4、步骤s2：计算待处理模型的纹理各边的高斯曲率和平均二次误差代价；

5、步骤s3：计算待处理模型的纹理各边的折叠阈值，根据折叠阈值划分第二边集合，折叠模型各边u,v后重映射纹理后更新第一边集合和第二边集合；

6、步骤s4：判断折叠后模型的简化率是否低于阈值；

7、步骤s5：如果判断结果为是，则将所得简化模型并入多层次细节网格流，并生成多层次细节网格流模型；如果判断结果为否，则返回步骤s1并重复步骤s1～s4，直至判断结果均为是后，得到待处理模型的多层次细节网格流模型；

8、步骤s6：根据用户指令逐层线性传输多层次细节网格流模型并逐层加载后，显示精细模型。

9、优选地，步骤s1包括以下步骤：

10、步骤s11：计算待处理三维模型的纹理接缝约束代价，并折叠边，如果待处理三维模型中具有纹理接缝边的任两半边e1、e2边与任两边d1、d2和f1、f2相邻，将纹理映射共线(||e1||/||f1||＝||e2||/||f2||)作为约束条件；

11、步骤s12：设d1(0)、e1(0)、e1(1)、f1(1)为纹理映射的端点序列d1，e1，f1，设d2(0)、e2(0)、e2(1)、f2(1)为d2，e2，f2的端点序列；表示出了新的需要进行边折叠的顶点w1、w2在接缝两侧的纹理映射位置，其中，w1的位置按下式获得：

12、

13、

14、w2的位置按下式获得：

15、

16、

17、如果待处理模型的纹理接缝边仅与一条边相邻，那么约束的唯一解是边d1，e1和d2，e2，通过新顶点w1，w2进行边折叠合并，生成新边e1(1)和e2(1)作为第一边集合；

18、步骤s13：对无接缝纹理映射的轮廓边进行如下式所示共线约束：

19、

20、不要求纹理映射的参数边长比一致，只要几何特征保持不变，则相应的边没有接缝。

21、优选地，步骤s2包括以下步骤：

22、步骤s21：按下式分别计算待处理三维模型各顶点vi的二次误差度量为：

23、

24、其中，n表示与顶点vi相关的三角形数量，qi和fi表示二次误差度量和与该顶点vi相关的第i个三角形的面积；

25、步骤s22：按下式分别计算待处理三维模型内各顶点(a)的高斯曲率：

26、

27、其中，n是相邻三角形的个数，s是每个相邻三角形的面积和，是三角形fi的内角和；

28、步骤s23：按下式分别计算待处理三维模型边界顶点(b)的高斯曲率按下式计算：

29、

30、其中，n是相邻三角形的个数，s是每个相邻三角形的面积和，是三角形fi的内角和。

31、优选地，步骤s3包括以下步骤：

32、步骤s31：计算边折叠所得新顶点位置ε(u,v)，

33、ε(u，v)＝δ(u)×weight

34、

35、其中，边(u,v)折叠到顶点v后，△(u)表示原顶点的折叠代价，tv表示新三角形的集合，tv-tuv表示属于三角形集合tv但不属于集合tuv的集合，n是集合中三角形的个数；weight表示边折叠位置的权重；

36、通过权重计算可以使新三角形接近等边三角形，限制生成非delaunay三角形；

37、步骤s32：折叠模型各边u,v；

38、步骤s33：重映射纹理后更新第一边集合和第二边集合。

39、优选地，步骤s4中的简化率＝简化后模型面片数/待处理模型原面片数。

40、本技术的另一方面还提供了一种如上述的web平台环境下三维模型加载和渲染装置，包括：

41、接缝计算模块，用于计算待处理模型的纹理各边的接缝约束，并划分第一边集合；

42、曲率误差计算模块，用于计算待处理模型的纹理各边的高斯曲率和平均二次误差代价；

43、折叠模块，用于计算待处理模型的纹理各边的折叠阈值，根据折叠阈值划分第二边集合，折叠模型各边u,v后重映射纹理后更新第一边集合和第二边集合；

44、判断模块，用于判断折叠后模型的简化率是否低于阈值；

45、简化模型模块，用于如果判断结果为是，则将所得简化模型并入多层次细节网格流，并生成多层次细节网格流模型；如果判断结果为否，则返回接缝计算模块，直至判断结果均为是后，得到待处理模型的多层次细节网格流模型；

46、传输模块，用于根据用户指令逐层线性传输多层次细节网格流模型并逐层加载后，显示精细模型。

47、本技术能产生的有益效果包括：

48、1)本技术所提供的web平台环境下三维模型加载和渲染方法，通过对大规模场景进行合理划分，加速加载大场景的速度，优化了模型简化效果，方便后续的传输工作，简化三维模型的同时实现对几何及纹理特征的保持，还能生成了多层次细节模型。

49、2)本技术所提供的web平台环境下三维模型加载和渲染方法，优化了web端传输模型的优先级，该方法可以动态优化浏览器的内存开销，可以有效缓解浏览器传输压力。

50、3)本技术所提供的web平台环境下三维模型加载和渲染方法，通过更加关注高曲率和具有微小几何特征的区域，使得优化后的模型能更好的保持良好的几何特征，并通过增添纹理接缝约束，避免简化后的模型在纹理接缝处产生伪影，提高优化模型的传输精度。