用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正在为开发者们创造更好的机会,激发更多的开发者去创造丰富多彩和炫酷的网页体验。