用基于WebGL的BabylonJS来共享你的3D扫描模型

本文由 极客范 - 杰克祥子 翻译自 Andy Beaulieu。欢迎加入极客翻译小组,同我们一道翻译与分享。转载请参见文章末尾处的要求。

在这里,我们将展示如何在支持WebGL的浏览器中用BabylonJS来现实和优化彩色的3D扫描模型。我们会用 Kinect for Windows来做3D扫描,当然你也可以用任何其它3D扫描仪。

点击下面的图片可以看到一些3D扫描的例子(请用支持WebGL的浏览器),一个猴子和一个果盘。

image001    image002

利用Kinect来做3D扫描已经有了一段时间,而且有一些商业软件,如ReconstructMeSkanect,都提供了非常简单的使用界面。当然,这些软件也都有它们自己的局限,并且需要付费。

作为一个免费的替代方案,我们会用Kincect Fusion和Blender来创建并优化我们的3D扫描模型。然后,我们会用BabylonJS——一个JavaScript实现的、基于WebGL的3D显示和动画库,将我们的3D扫描共享到网络上。

第一步:准备工具

本文中,我们将会用到以下工具和软件库:

Kinect for Windows SDK (和Developer Toolkit)

Kinect Fusion需要下载最新的SDK和Developer Toolkit。

Blender

我们用Blender,一个免费开源的3D设计工具,来优化我们的扫描模型以备网络共享使用。

BabylonJS

这是一个用WebGL实现的、用来简化创建3D场景和游戏的JavaScript库。

BabylonJS / Blender Export Plug-in

这是一个用来将Blender的3D场景导出成Babylon格式的插件。下载并阅读连接中的安装指示操作,让它可以在Blender中使用。

第二步:用Kinect Fusion做3D扫描

首先打开安装Kinect Developer Toolkit时自带的Developer Toolkit Browser,找到Kinect Fusion Explorer – D2D那个例子。

image003

Mesh Format一项选择PLY并且勾选Capture Color:

image004

你还需要设置Reconstruction Volume和Voxel Resolution。对于我的扫描而言,我发现下面的参数是最合适的,但对于你而言可能需要试试其他参数。

image005

扫描的时候你可以在Kinect的视图中旋转被扫描对象,或者绕着它走一圈。这次,我扫描了一个可爱的小猴子玩具。

 

image006

当你扫描完所有的角度后,点击Create Mesh按钮,保存为PLY格式(颜色信息也会被保存)。

第三步:用Blender优化模型

此时,我们会得到一个很大的模型文件,为了能在浏览器中用BabylonJS来显示它,我们需要进一步优化模型(译者注:因为模型需要下载到浏览器才能通过WebGL来显示,所以更小的模型意味着更快的下载速度和显示速度)。我们还要清理模型并让它更平滑一点,因为3D扫描时总会有些意外的缺陷。所以我们需要Blender。如果你不熟悉Blender,可能第一次用的时候会有些困难,但必须坚持,它是一个有用且有趣的工具!当然,这里将不会包含所有使用Blender的基础技能和细节。

1)在CrowTreeStudios 可以学到如何做顶点颜色烘焙,这个视频演示了这些步骤。

2)打开Blender并按”X“键删除默认的立方体。

3)选择File->Import->Stanford (PLY)

a)打开你在第二步得到的PLY文件

b)这可能会花一会儿时间,因为扫描文件很大!

4)档模型加载完时,可能朝向是不对的,需要自己旋转并放置到中间,就像下图一样:

image007

 

5)选中模型,然后选择Object->Duplicate Objects来复制一份。接下来,我们将减少顶点的数量,来优化复制的这个模型,并创建一个贴图来保存原始的颜色信息,也就是所谓的顶点烘焙。

重要提示:确保原始模型和复制的模型在完全一致的位置。这对顶点烘焙非常重要!两个模型需要完美的重合在一起。如果你需要调整,可以在Object Properties面板里手动设置位置X、Y、Z的值。

6)接下来,我们开始优化和清理模型,以得到一个更平滑、相对更小的模型文件。

a)隐藏原始的模型,这样你可以集中在复制的模型上。

b)选中复制的模型(Blender会给这个模型的名字后面加上“.001”)。

c)激活Modifies面板,选择Add Modifier。

image008

d)选择Remesh并且设置Octree Depth为6,设置Mode为Smooth。观察模型的形状变化,你可能需要增加或者减少Octree Depth以取得合适的平滑度和精细度。当你满意时,点击Apply。这将减少顶点的数量并让模型更平滑一点。

7)至此,复制的那份模型应该看上去更加平滑了,而且一些小缺陷也没有了:

image009

a)让原始的模型可见,一起显示出来。

8)给原始的扫描模型添加材质

a)选中原始的模型

b)添加一个新材质

c)在Shading栏下面,选择“Shadeless”

image010

d)在Options下面,勾选“Vertex Color Paint”

image011

9)回到Blender的主视图,在“Viewport Shading”(小的球形图标)中选择“Texture”(这将会显示顶点的颜色数据)

image012

10)现在,我们可以在原始模型上看到扫描的颜色了。下一步,我们将从这些颜色数据中创建一个贴图(也就是所谓的顶点烘焙)。

image013

 

11)我们现在来为优化过的(复制的那份)模型添加一个材质

a)选中复制的那份模型

b)添加一个新材质

c)在Shading中选择“Shadeless”

12)然后,我们需要展开模型,是创建贴图的准备工作。

a)将Blender的视图切换为两个视图

b)在左侧的视图中,选中“UV/Image Editor”

image014

c)在右侧的视图中,将复制的模型切换到Edit模式

d)选中所有的顶点

e)点击“U”键展开模型并选择“Smart UV Project”

13)创建一个图片来保存贴图。

a)在左侧的Image Editor中,创建一个新图片

image015

b)为图片起个名字,并取消勾选“Alpha”,点击OK。

image016

 

14)为了做顶点颜色烘焙,我们需要改变Blender默认的颜色管理。

a)选择Blender的Scene面板

b)在Color Management下,将Display Device设置为None。

image018

15)现在我们来讲顶点的颜色数据烘焙到贴图。

a)找到Render面板(那个相机的图标)

b)选中高解析度的(原始的那份)模型

c)按住Shift并点击复制的那份模型(优化过的那份)。在你场景的树状图中,你可以看到原始模型的字体是黑色,复制模型的字体是白色:

image019

16)下拉找到Bake(烘焙)菜单

a)勾选“Selected to active”

b)取消勾选“Clear”

image020

c)点击Bake按钮

17)在左边的视图中,你可以看到顶点颜色都被烘焙到贴图中了:

image021

18)保存贴图到本地文件。

a)在Image Editot菜单中选择Image/Save As Image

image022

19)现在我们将贴图应用到优化过的那个模型上。

a)选中优化过的模型

b)添加一个新贴图

c)设置type=image或者movie

d)打开贴图文件

e)在Mapping栏中将Coordinates设置为UV

f)将Map设置为UVMap

image023

20)现在我们有了贴图和优化过的模型,我们可以从项目中删掉原始模型了。

a)选中原始模型,选择Object->Delete来删除它。

21)将场景导出为Babylon的格式。

a)选择File->Export->Babylon JS(如果你没看到这个选项,那回到第一步,阅读关于插件的那节)

b)将会导出两个文件:一个*.babylon和一个*.png(贴图)文件。

第四步:用BabylonJS导入并显示模型

现在我们有了*.babylon的场景文件和*.png的贴图文件,用BabylonJS我们能很容易的将其导入并显示出来。

1)确定你的网页服务器开启了Babylon Mime Types。在IIS中,你需要在system.webserver中添加下面的一段(在configuration下面):

2)我们要用到两个从Babylon下载的脚本(将它们放在scripts子目录下):hand.js和Babylon.js

3)创建一个新HTML文件,加上下面的代码,用来从Blender导出的文件中创建Babylon的场景。

 结论

再提醒一下,你可以在这里这里看到整个过程的两个例子。就像你所见,用WebGL来显示模型还需要一点额外的优化工作,但掌握这些我就可以最终控制模型的大小和细节。使用WebGL和BabylonJS,让我们有了无论在IE11、Firefox、Chrome、甚至一些移动平台的浏览器,都可以使用的跨平台的解决方案。

 

 



原文链接: Andy Beaulieu 翻译: 极客范 - 杰克祥子

译文链接: http://www.geekfan.net/6578/

[ 转载请保留原文出处、译者和译文链接。]

杰克祥子
Practice doesn't make perfect, passion makes perfect. 新浪微博 @ 杰克祥子

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">