用HTML5+WebGL打造网页版3D游戏《刺客信条》

[ting_s]

用HTML5+WebGL打造网页版3D游戏《刺客信条》

微软IE团队与知名游戏开发厂商育碧（Ubisoft）联合推出了网页版《刺客信条：海盗传奇（Assassin’s Creed Pirates）》游戏，将3D技术与Web相结合，带给用户前所未有的浏览体验。

游戏地址：http://race.assassinscreedpirates.com/

《刺客信条：海盗传奇》背后：IE11与前沿技术的完美结合

移动游戏《刺客信条：海盗传奇》，现在已经成为一款免费的网页游戏。在页游版游戏中，玩家可以跟随游戏故事主角Alonzo Batilla船长遨游在加勒比海寻宝和挑战海盗，并能和其他玩家进行实时海战。游戏中的背景会根据时间和地点的不同而发生改变，玩家可以体验实时的海盗生涯。

页游版游戏中采用了全3D画面，令所有船只与环境看上去更加真实，即便是船只开动时细微的海浪波动也能得到完美的呈现，给玩家带来像在真正海面上航行的真实体验。玩家在 IE11 中运行游戏时，游戏会自动检测玩家的设备种类及输入方式，自动调整游戏来适应屏幕，以达到最佳的显示效果。



为了实现上面的效果，微软IE团队与育碧使用了开源的3D引擎Babylon.JS来搭建游戏。Babylon.JS是一个基于WebGL、JavaScript和TypeScript技术的开源3D引擎，配合Babylon.JS，开发者可以更好的利用WebGL技术，更方便快捷地完成光线、轮船纹理、海浪等的3D建模，从而带来最佳的呈现效果。正是因为WebGL所拥有的GPU加速特性，玩家们可以用最短的时间在浏览器上加载完复杂的3D页面。

WebGL引领未来网页游戏开发趋势

过去Flash+非标准插件的3D页游模式，正在逐渐演变成由WebGL当家，HTML5技术提供支撑的新3D页游模式，现在WebGL为页游带来的3D体验甚至可以媲美传统的PC桌面游戏。



通过WebGL，3D物体形象可以直接在网页上呈现出来，网页开发人员可以直接借助系统显卡在浏览器里更流畅地展示3D场景和模型，还能创建复杂的导航和数据视觉化。WebGL技术标准免去了开发网页专用渲染插件的麻烦，将开发流程进一步简化的同时，又能为用户带来更炫酷的3D效果体验。



现如今，不只是顶级开发团队在储备浏览器WebGL 3D技术，浏览器开发商们也在积极的研究如何利用WebGL技术在浏览器上呈现更好的3D互动体验。包括Chrome、Opera、FireFox和使用了Canvas的Safari在内，主流浏览器厂商都在大力推动WebGL技术标准的普及和发展。对于开发者来说，利用WebGL技术开发全3D网页已经成为当下的技术趋势。

IE11上的WebGL应用

“月熊志”（http://moonbear.animalsasia.org/ie/）是公益组织亚洲动物基金会与微软IE11共同开发的一个网站，借助IE11提供的更多技术和工具为读者呈现了可爱的月熊和他们丰富多彩的故事。得益于IE11的硬件加速以及WebGL的高效，“月熊志”开发团队可以在浏览器上运行场景丰富、动画流畅的3D画面。



开发团队先是通过3D建模软件Blender构建出月熊形象及他周围自然亲近的场景的3D模型，然后利用three.js，将它们导出为JSON格式的数据，使得这些模型和动画得以在浏览器中呈现。借着IE11上WebGL的高效处理特性，网站的浏览者能够更直观地了解月熊并体验到流畅的3D互动。



以下是与WebGl相关的代码示例：

loader.load("models/mesh.js", function (geometry, materials) {
 
    //创建模型对象
    var mesh = new THREE.MorphAnimMesh(geometry, new THREE.MeshFaceMaterial(materials));
 
    //设置动画区间
    mesh.mirroredLoop = true;
    mesh.setFrameRange(0, 290);
    mesh.duration = 290 * 24 / 1000;
 
    //设置位置和大小
    mesh.position.z = 2000;
    mesh.position.y = -1500;
    mesh.scale.x = mesh.scale.y = mesh.scale.z = 500;
 
    //设置阴影
    mesh.castShadow = true;
    mesh.receiveShadow = true;
    
    //添加到场景
    scene.add(mesh);
 
    //平行光
    var directionalLight = new THREE.DirectionalLight(0xffffff, .6);
    directionalLight.position.set(6000, 10000, 7000);
    directionalLight.castShadow = true;
    directionalLight.shadowCameraNear = 500;
    directionalLight.shadowCameraFar = 30000;
    directionalLight.shadowCameraLeft = -10000;
    directionalLight.shadowCameraRight = 10000;
    directionalLight.shadowCameraTop = 10000;
    directionalLight.shadowCameraBottom = -10000;
    directionalLight.shadowDarkness = .2;
    directionalLight.shadowMapWidth = 2048;
    directionalLight.shadowMapHeight = 2048;
    scene.add(directionalLight);
 
    //半球光
    var hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, .7);
    scene.add(hemiLight);
 
});

从上面的代码范例可以看出，利用WebGL技术，开发者可以通过数量更少且更为简单的代码来实现过去需要借助非标准插件才能完成的工作，同时，结合IE11对GPU加速的特性，这段代码在运行之后可以让用户在最短的时间内获得流畅的3D体验。

除此之外，IE还曾与 GlacierWorks 合作开发制作http://explore.glacierworks.org/en网站，希望向全世界展示珠穆朗玛峰这一神秘而又美丽的区域。网站采用WebGL技术开发，依托 IE11的强大性能和对WebGL的支持，用完美逼真的3D效果向用户呈现珠峰前所未见的影像，为用户带来最真实的交互体验。



IE一直致力于为广大开发者提供最好的技术开发平台，无论是对WebGL技术的支持，还是对于触控的优化，IE11正在为开发者们创造更好的机会，激发更多的开发者去创造丰富多彩和炫酷的网页体验。

[OYB123456]

[sytmkj]

HTML5提供了一些新的元素和属性，例如<nav>（网站导航块）和<footer>。这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能，如<audio>和<video>标记。 1、取消了一些过时的HTML4标记 其中包括纯粹显示效果的标记，如<font>和<center>，它们已经被CSS取代。 HTML5 吸取了XHTML2 一些建议，包括一些用来改善文档结构的功能，比如，新的HTML 标签 header, footer, dialog, aside, figure 等的使用，将使内容创作者更加语义地创建文档，之前的开发者在实现这些功能时一般都是使用div。 2、将内容和展示分离 b 和 i 标签依然保留，但它们的意义已经和之前有所不同，这些标签的意义只是为了将一段文字标识出来，而不是为了为它们设置粗体或斜体式样。u，font，center，strike 这些标签则被完全去掉了。 3、一些全新的表单输入对象 包括日期，URL，Email 地址，其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据，这一使用机器可以识别的标签标注内容的方法，使语义Web 的处理更为简单。总的来说，这些与结构有关的改进使内容创建者可以创建更干净，更容易管理的网页，这样的网页对搜索引擎，对读屏软件等更为友好。 4、全新的，更合理的Tag 多媒体对象将不再全部绑定在object或 embed Tag 中，而是视频有视频的Tag，音频有音频的 Tag。 5、本地数据库 这个功能将内嵌一个本地的SQL 数据库，以加速交互式搜索，缓存以及索引功能。同时，那些离线Web 程序也将因此获益匪浅。不需要插件的丰富动画。 6、Canvas 对象 将给浏览器带来直接在上面绘制矢量图的能力，这意味着用户可以脱离Flash 和Silverlight，直接在浏览器中显示图形或动画。 7、浏览器中的真正程序 将提供 API 实现浏览器内的编辑，拖放，以及各种图形用户界面的能力。内容修饰Tag 将被剔除，而使用CSS。 8、Html5取代Flash在移动设备的地位。 9、其突出的特点就是强化了web页的表现性,追加了本地数据库, http://www.sytm.net/jiejuefangan/

[哈哈gogo]

好像必须要顶的样子

[line_us]

看起来不错的样子。

[拔丝凉面]

很好奇光照和水波纹是如何做出来的 这里也有一个水波纹效果 http://madebyevan.com/webgl-water/

[asdtuknb]

IE 11渲染webGL速度怎么样？

[CCDDzclxy]

看起来 好牛啊

[孤飞不倦]

楼主求认识求指教。

[aierda]

太niu了,必须顶!~~

[ztemudtoast]

您好，能否加qq号 229020492，注明CSDN。详细聊聊，谢谢！

[feilinhe]

看着不错，顶一下~

[aqua2013]

看着挺好 的

[业余草]

HTML5很牛X的,但是有些标准还是没有出来。

[jmppok]

[austin9972]

[WhyForbidden]

Java3D呢

[书香卷气]

页游的尽头是泡沫

[没实力又不努力]

好牛逼的样子，有空要学学才行....

[497023067]

链接为啥都打不开

[tommercatfly]

看起来好牛啊。。。。3d模型，听听就高大上。。。。