[发明专利]一种基于WebGL的载入3D模型实现自动生成缩略图的方法

说明书

本发明提出一种基于WebGL的载入3D模型实现自动生成缩略图的方法，包括如下步骤：步骤1、在网页中创建一个cesium地球，设置地球表面颜色；步骤2、用户将三维模型导入步骤1在网页创建的地球中，使用HTML5读取三维模型文件得到二进制流，完成三维模型加载；步骤3、使用cesium调整相机视角，以对准模型；步骤4、使用html2canvas类库的接口对模型进行截图，得到带背景颜色的模型图片；步骤5、使用上一步得到的模型图片，调用HTML5的内容获取方法函数，得到模型图片的画布对象，画布对象再调用图像数据获取方法，得到画布内指定范围的像素颜色数据；步骤6、得到像素颜色数据后开始切图、抠图，处理后的图片即为最终的三维模型缩略图。

技术领域

本发明涉及图像处理及三维建模领域，具体涉及一种基于WebGL的载入3D模型实现自动生成缩略图的方法。

背景技术

WebGL(Web Graphics Library)是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。

如今是web2.0时代，由于Javascript、HTML5的引入，使得浏览器也可以做到和桌面级图像处理软件相同功能。随着浏览器的性能越来越强，以及WebGL的出现，浏览器处理三维图形的能力越来越强，以至于如今有很多优秀的三维图形库，例如：three.js、cesium.js。这就代表着已有大部分用户选择浏览器处理、查看三维图形。

canvas是HTML5新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的HTML元素。它可以用来制作照片集或者制作动画，甚至可以进行实时视频处理和渲染。three.js和cesium.js都是在canvas标签上展示三维模型和动画。

html2canvas是一个Javascript类库，使用此脚本可以在浏览器中截图。使用其的原因是，此脚本可以截取canvas中的内容，有些截图脚本做不到。而且它还可以将截完的图转为canvas显示出来。

RGBA是代表Red(红色)Green(绿色)Blue(蓝色)和Alpha的色彩空间。alpha通道一般用作不透明度参数。

Cesium作为一个地理信息三维地球引擎，通过优化的WebGL技术，充分利用硬件渲染图形以及低级别的几何和渲染程序，使得可以支持绝大多数的浏览器和mobile，因此近些年来受到了广泛的使用和推广。在向三维地球中添加三维模型时，为了向用户提供较好的体验,需以缩略图列表的方式展示模型。若手动制作模型的缩略图，需使用专业图片处理软件，操作复杂、专业、效率低，并且图片的格式、大小、样式不统一，模型列表浏览体验不佳。模型的缩略图背景应是透明色，大小、格式、样式统一，模型列表才会整洁美观。

使用三维模型时，在操作系统的文件资源管理器或浏览器中无法直接预览模型的缩略图,只能使用三维模型编辑软件加载模型才能看到模型的外观。因此，本领域的人员希望有一种通过简单操作就可以生成模型缩略图的方法，以方便查看模型。传统生成三维模型缩略图的步骤时序图如图1所示，包括：

1)使用模型编辑软件打开三维模型；

2)使用鼠标拖动模型调整视角到适合截图的角度；

3)使用截图软件截图；

4)用图像处理软件进行切图、抠图，得到缩略图。

可见，此传统方法生成三维模型缩略图需使用多个软件，操作繁琐、学习成本高。

发明内容