一种基于WebGL的载入3D模型实现自动生成缩略图的方法技术

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

【技术实现步骤摘要】
一种基于WebGL的载入3D模型实现自动生成缩略图的方法


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

技术介绍

[0002]WebGL(Web Graphics Library)是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。
[0003]如今是web2.0时代，由于Javascript、HTML5的引入，使得浏览器也可以做到和桌面级图像处理软件相同功能。随着浏览器的性能越来越强，以及WebGL的出现，浏览器处理三维图形的能力越来越强，以至于如今有很多优秀的三维图形库，例如：three.js、cesium.js。这就代表着已有大部分用户选择浏览器处理、查看三维图形。
[0004]<canvas>是HTML5新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的HTML元素。它可以用来制作照片集或者制作动画，甚至可以进行实时视频处理和渲染。three.js和cesium.js都是在canvas标签上展示三维模型和动画。
[0005]html2canvas是一个Javascript类库，使用此脚本可以在浏览器中截图。使用其的原因是，此脚本可以截取canvas中的内容，有些截图脚本做不到。而且它还可以将截完的图转为canvas显示出来。
[0006]RGBA是代表Red(红色)Green(绿色)Blue(蓝色)和Alpha的色彩空间。alpha通道一般用作不透明度参数。
[0007]Cesium作为一个地理信息三维地球引擎，通过优化的WebGL技术，充分利用硬件渲染图形以及低级别的几何和渲染程序，使得可以支持绝大多数的浏览器和mobile，因此近些年来受到了广泛的使用和推广。在向三维地球中添加三维模型时，为了向用户提供较好的体验,需以缩略图列表的方式展示模型。若手动制作模型的缩略图，需使用专业图片处理软件，操作复杂、专业、效率低，并且图片的格式、大小、样式不统一，模型列表浏览体验不佳。模型的缩略图背景应是透明色，大小、格式、样式统一，模型列表才会整洁美观。
[0008]使用三维模型时，在操作系统的文件资源管理器或浏览器中无法直接预览模型的缩略图,只能使用三维模型编辑软件加载模型才能看到模型的外观。因此，本领域的人员希望有一种通过简单操作就可以生成模型缩略图的方法，以方便查看模型。传统生成三维模型缩略图的步骤时序图如图1所示，包括：
[0009]1)使用模型编辑软件打开三维模型；
[0010]2)使用鼠标拖动模型调整视角到适合截图的角度；
[0011]3)使用截图软件截图；
[0012]4)用图像处理软件进行切图、抠图，得到缩略图。
[0013]可见，此传统方法生成三维模型缩略图需使用多个软件，操作繁琐、学习成本高。

技术实现思路

[0014]为了解决上述技术问题，本专利技术提供一种基于WebGL的载入3D模型实现自动生成缩略图的方法，能够实现：(1)自动生成模型的缩略图。(2)自动对文件进行切图，只显示有模型的区域，减少图片的尺寸及文件体积。(3)将图片背景自动修改为透明。本专利技术可以利用浏览器直接生成三维模型的缩略图，极大地简化了操作步骤和学习成本，可以解决上述问题。
[0015]本专利技术的技术方案为：一种基于WebGL的载入3D模型实现自动生成缩略图的方法，包括如下步骤：
[0016]步骤1、在网页中创建一个cesium地球，设置地球表面颜色；
[0017]步骤2、用户将三维模型导入步骤1在网页创建的地球中，使用HTML5读取三维模型文件得到二进制流，完成三维模型加载；
[0018]步骤3、使用cesium调整相机视角，以对准模型；
[0019]步骤4、使用html2canvas类库的接口对模型进行截图，得到带背景颜色的模型图片；
[0020]步骤5、使用上一步得到的模型图片，调用HTML5的内容获取方法函数，得到模型图片的画布对象，画布对象再调用图像数据获取方法，得到画布内指定范围的像素颜色数据；
[0021]步骤6、得到像素颜色数据后开始切图、抠图，读取每一行像素的颜色，当此位置的颜色与背景颜色相同时，替换为透明色对图片中每个像素点进行处理，处理后的图片即为最终的三维模型缩略图。
[0022]进一步的，所述步骤2中，步骤2、用户将三维模型导入步骤1在网页创建的地球中，使用HTML5读取三维模型文件得到二进制流，完成三维模型加载，其中的三维模型加载，采用模型位置参数和文件的二进制流格式作为参数进行加载。
[0023]进一步的，所述步骤3中，使用cesium调整相机视角，以对准模型，是基于三维模型所在的位置，设置相机的水平方位角、倾斜角度、相机与模型的距离，其中，距离的数值为使得能够完整的看到模型，并且大小适中适合截图。
[0024]进一步的，所述步骤6、得到像素颜色数据后开始切图和抠图，读取每一行像素的颜色，当此位置的颜色与背景颜色相同时，替换为透明色对图片中每个像素点进行处理，处理后的图片即为最终的三维模型缩略图，所述的切图和抠图具体如下：
[0025]读取每一行/列的像素的颜色，当这一行/列的颜色均与背景颜色相同，则判断这一行内均为背景图片，以此方法切除图片中多余的边缘部分；
[0026]以切图完成后的图片为原始图片，读取每一行像素的颜色，当此位置的颜色与背景颜色相同时，替换为透明色，当图片中每个像素点都经过以上处理后，图片即为最终的三维模型缩略图。
[0027]有益效果：
[0028]本专利技术提出的一种基于WebGL的载入3D模型实现自动生成缩略图的方法，能够实现网页自动处理，不需要其他软件参与减少用户操作，通常个人计算机中都会安装网页浏览器，只要有个人计算机就能实现的方法，而传统的客户端上难以展示出来该优点。本专利技术的优势也正是体现在这些方面：
[0029]1、通过浏览器执行本专利技术的方法自动生成缩略图，大量减少用户操作；
[0030]2、使用过程无需其他软件参与，自动完成三维模型的缩略图生成。
附图说明
[0031]图1：传统生成缩略图的方法；
[0032]图2本专利技术的方法流程图；
[0033]图3：本专利技术一种基于WebGL的载入3D模型实现自动生成缩略图的方法时序流程图；
[0034]图4：本专利技术的一个实施例的示意图。
具体实施方式
[0035]下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整的描述，显然，所描述的实施例仅为本专利技术的一部分实施例，本文档来自技高网...

【技术保护点】

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

【专利技术属性】
技术研发人员：梁帆，杨一涵，
申请(专利权)人：中科星图股份有限公司，
类型：发明
国别省市：