杜长宇:HTML5 + WebGL的应用实践

8月8日,由HTML5梦工场主办的第四届HTML5峰会暨攻城师嘉年华(iWeb峰会)北京站,会上Autodesk资深开发顾问 杜长宇表了《HTML5 + WebGL的应用实践》主题演讲。

以下是演讲实录:

今天我给大家分享的题目是Autodesk最近推出的一种基于HTML5+WebGL的三维模型浏览器。我叫杜长宇,是2008年加入到Autodesk,如果大家使用过Autodesk的产品,Autodesk所有的产品都有二次开发,这个时候你可以考虑ADN。欢迎大家加我的名片,如果感兴趣的话可以拿一张名片。刚才各位嘉宾都给大家分享了非常多的干货,今天我想请大家轻松一下,我们看几个视频。我不知道今天的网络情况怎么样。 大家现在看的这种三维艺术级的体验,而且我可以用鼠标和这个进行交互,把它进行一些扰乱。这是一匹奔腾的骏马。我们再看另外一个。我可以通过鼠标引领这个光球,我点到这个亮亮的地方有一个爆炸的效果,这个不太好点中的。我现在可以通过鼠标的方向引领光球行进的方向。这个可能大家都玩儿过,像这种网页上的游戏。而且刚才我给大家演示的,我所有的这些都是在浏览器上的,我没有装任何的插件。或者看这个网站呢,它这个首页上有一个像logo的东西,但是它是三维的,我可以在网页上跟它进行交互,而且非常流畅。 我们再看另外一个,这个是一款起亚的车,我们可以在浏览器上看一下它的长度、宽度、高度。比如我们去买一款车,你可能有时间去4S店,你可以去4S店看一下,但是没时间我们可以在网上体验一下,看一下它的外饰什么情况,发动机什么情况,有哪些参数,它的油耗,相关的介绍,看它的内饰,操控台是什么情况,音响情况,以及蓝牙接口。而这些我们都可以在互联网上以这种用户友好的方式进行查看。其实上午我们讲了很多,大家一提到HTML5,首先想到的第一个印象就是游戏,而且就是上午我几乎听了一下,几乎每场嘉宾都在讲游戏。Autodesk当然也是做游戏开发的非常重要的贡献者,但是Autodesk同时也是关注我们每个人的生活,其中一个理念就是让我们的生活更美好。当然打游戏会让我们感觉到很愉快,但是我们还要接触到日常生活中的,比如说我们的衣食住行,使我们的建筑更加安全、绿色。我们再看一下这个图片,这个是澳大利亚的一个卖滑板的公司。其实刚才我们给大家看的这些所有的例子,都只是在浏览器上不需要任何的插件,我们无论从艺术的享受,从游戏,卖汽车或者建筑等等,我们都可以在网上浏览的需求。我们看到的这个例子,我们具体到建筑的时候,我们可能需要同时要查看它的三维建筑图纸,也有需要查看它的二维建筑图纸,或者对整个建筑中的除了查看三维模型之外,还要查看它的属性信息,它是由什么材料来构建的,然后这些材料有些其他的属性,由哪些生产商供应的,它在什么时候需要维护,我们都希望在Web上非常方便的查看。但是这种三维模型非常多,有不同的软件生成的三维模型,这样有没有一个办法,我们更快捷的方式,更简单的方式查看各种各样的三维模型。我们先简单看一下这个。这个刚才大家看到的三维的房子,这个楼房的模型是很大的,包括其中的建筑模型,所有的墙、柱子都在里面,还有管线,基建模型,我们在浏览器中可以加载,不需要任何的插件。除了加载三维模型之外还可以加载它的二维图纸,而且可以把三维和二维进行对应,看三维的时候可以找到它在二维图纸上对应的部分。比如说我看这个楼梯,找到这个楼梯。其实我在二维的图纸上选中,可以找到对应的三维的部分,或者找到三维可以看到二维的部分,或者找到属性图、管线,我在右边找到管线,可以在三维模型上把所有的管线找到,然后在二维的图纸上把所有的图纸找到。我们在浏览器上可以对这种三维模型和二维图纸实时联动的查看。我们再看一个具体的例子,我们最常见就是互联网图片,这是一个典型的例子,卖拖拉机的网站,我们把图片放在上面,有没有更好的展示方法呢?我根据这个网站简单做了一下,这样会更好一点。我们把一个三维模型放网站上面,而且这个模型也可以和用户进行实时的交互,我可以单独查看某一个组件,比如单独查看这个轮胎,或者我把某一个轮胎给它隐藏掉,而且每一个组件它都是有属性的。我们在选择某一个商品的时候,我们看到的不光是机械本身,它是有数据的。或者我们看这样一个复杂的机械,它是如何组装的,可以通过爆炸效果来显示,可能这样一个复杂的机器,有几千几万的零件在里面。这是机械模型。 大家买房子都不陌生这个模型,开发商可能会给大家一个户型图,这个户型图有的人看得懂,有的人看不懂,我们有没有更好的办法?我们通过这样的方式,把三维的模型放在我们网站上。咱们最熟悉的淘宝,比如说我们买一个自行车,我们有没有一种更好的方式,我们把一个三维模型放到淘宝网上。这是我们户型图,像这种我们可以把一个三维的模型插入到我们的网站上,这就是你的房子,你要看到的房子就是这样的,总比一个户型图直观的多。可以看到所有的房间,房间里面的情况,都可以把它做的非常的生动、直观,这样大家在卖房子的时候就能够获得更多的信息。你可以看到你的楼梯,你的车库,你可以走到房子里面去进行实时的交互,房间的信息也可以查得到,比如说混凝土和钢筋用的什么标号,建筑商是谁,维护商是谁。包括现在看到的这个拖拉机,我们普通的商业网站就是一个图片或者是照片,像这种我们可以以三维的方式直接把它嵌入到网站,用户可以随时对它进行交互,而且可以爆炸现在这种复杂的机械有N多个零件组成,零件的组合关系,而且每个上面都有属性,相关的属性信息。我们可以把某一个东西单独查看或者把某一个东西隐藏,这个给大家演示过了。另外,我们这样一个复杂的机械,刚才提到它有一个组装关系,从左边可以看到它的组装关系,它的目录树。这个复杂的机械里面所有的东西都在,包括每一个螺丝钉和螺丝帽都可以表现出来,而且每一个组件上面都有相关的对应信息。 淘宝网这是常见的,这是一个图片,我们可以把鼠标放在上面有更大的显示。我们可不可以三维的图形放在淘宝网上,用户可以以交互的方式查看我要交易的东西,用户可以对它进行实时的交互,以三维的方式,而且这个完全不需要用户装任何的插件,他直接打开浏览器就可以了。我们可以直接把三维的模型嵌入到三维网站,嵌入任何的网站,非常容易。 现在一个问题,二维和三维你要哪个?这个我想答案是不言而喻的,我们需要三维。但是这个三维怎么做?现在答案就是我们可以通过基于WebGL的技术,做Web上面的浏览。WebGL不需要任何的插件,现在的浏览器都已经支持了,IOS、移动浏览器也都支持。不过原生的WebGL还是有点复杂的,如果大家做原生WebGL开发的话还是要有一点时间来去学习。有没有更简单的办法?其实我连原生WebGL都不想弄,甚至WebGL的内库都不想弄,现在Autodesk做了内部的浏览器,你只要把模型上传到云端,由云端进行转换,你就可以把模型嵌入到自己的网站中,比如嵌入到淘宝的页面里面,或者自己的博客里面,或者嵌入到自己的网站里面,你可以在浏览器上进行浏览。这个过程非常简单,上传、嵌入、使用,非常简单,而且它是免费使用的。 我想冒一个险,试一下在线的,Autodesk的网站上有这样一个浏览器,可以在线试一下。我其实一直希望给大家以实际演示的方式展示它的魅力,但是如果实在迫不得已才会做视频,现在我们看看能不能成功。我这里上传一个DWS的三维模型,把这个模型上传到网站上,这个模型在上传的过程中。上传完了之后,由云端对这种格式进行转换。原生的格式肯定在浏览器上是不支持的,所以要对格式进行一次转换。转换完了之后,然后我们就可以把它嵌入到我们的浏览器里,这个嵌入到Autodesk官方的360的网站上,我们可以在网站上进行查看。因为我这个笔记本很老了,同时开这么多网页,很冒险,所以造成WebGL的渲染会有一些问题。这个大家如果下来感兴趣的话可以自己试一下。我们继续我们的PPT。它支持的数据格式非常多,几乎我们市面上所有常见的三维模型都支持,而且这个数据列表还在增加。刚才我们屡次提到,这个浏览器不光是模型数据本身,而且它还包括了数据在里面。就是我们可以看到,我们除了显示模型本身,模型上附加的数据也可以显示出来,而且我们可以通过API的方式,把这个数据和后台的其他的数据库做联合。比如说我们现在看到的例子,我们的汽车座椅,我们可以通过API把它用的材料以及材料的价格和ERP系统连接起来,或者和后台的数据库连接起来,这样我们可以做一个功能非常丰富的系统。刚才提到了,除了有这样一个可以上传或者使用之外,还提供了API的编程接口,它的编程接口也非常简单,对应的是两部分,一部分是模型的上传,是基于REST的API,包括身份认证模型上传,格式转换。另外是客户端的java scripter API,可以进行相机控制、获取属性信息,用户事件处理,属性信息搜索,自定义用户界面,以便这个浏览器和我们的网站更好的融合。 大家看到这个小猫非常可爱,这个是示例代码,大家可以登录到我们的Autodesk的站点,可以进行一些参考。我们可能的一些应用场景,虽然这是我自己想到的一些,大家可能有更好的方法。比如我们对会议中心的大楼,把三维的模型放到网上,而且它附带了相关的信息,管道信息,什么时候更换的,什么时候下一次更换,它的生产商是谁,有助于物业部门进行管理,或者是电子商务的展示,咱们刚才看到的淘宝的例子,或者在线的虚拟体验,或者生产监控的管理。当然很多。如果大家对使用API感兴趣,可以注册一下,就可以开始使用这个API。我们刚才提到我们有非常丰富的工具。 刚才说了这么多,支持这么多模型,我们在座的各位大部分是开发人员,那么这些数字从哪里来?模型从哪里来?如果这些模型你自己不能生成的话,你可以从各种渠道拿到,比如说CAD设计师会有各种图纸,比如建筑师设计大楼的时候,会有建筑软件生成的模型,或者机械设计师他也会有三维的模型,或者是非常熟悉的这种3D动画师设计出来的模型,或者我们自己,我们自己可以创建这样的模型。你说了,我不是干这个的,我怎么创建这个模型?这里有一个非常酷的技术,照片建模,我们可以通过照片拍照的方式给一个模型进行建模。给大家看一个例子,如果大家去过卢沟桥的话,在卢沟桥西边有一个石碑,我拿着手机拍照,给这个石碑拍了360度,大概拍了80张照片。我把80张照片上传到了recap.360.com,我们把照片上传到云端,云端技术解算,生成一个三维的模型,把这个嵌入到浏览器当中。我现在是嵌入到我的博客里面,你可以把它嵌入到任何的地方去。好了,我的内容就这么多,大家有什么问题可以和我交流一下。