与WebGL一起遇见网页的未来

发表于2014-06-25 14:20|2837次阅读| 来源CSDN|4条评论| 作者CSDN

摘要：育碧（Ubisoft）和IE浏览器团队合作推出了其首个WebGL游戏《刺客信条：海盗奇航（Assassin'sCreedPirates）》。其拥有丰富的物理特性，高帧率运行和引人入胜的体验。最重要的是，它不需要任何插件并且跨浏览器/跨平台支持。

育碧（Ubisoft）和IE浏览器团队合作推出了其首个WebGL游戏——《刺客信条：海盗奇航（Assassin'sCreedPirates）》。其拥有丰富的物理特性，高帧率运行和引人入胜的体验。最重要的是，它不需要任何插件并且跨浏览器/跨平台支持（http://ubisoft.azurewebsites.net/）。

借助BabylonJS，育碧在浏览器中重现了本地应用体验，一个目前独一无二的完整游戏体验。

BabylonJS是一个基于WebGL、JavaScript和TypeScript的开源3D引擎，由四个来自微软的开发者创建。通过BabylonJS，开发者可以用最少的代码实现快速添加碰撞检测、物理特性、灯光、摄像头角度、纹理效果和全新的3D场景等。

BabylonJS 上手非常简单，特别是如果你熟悉3D渲染的技术和软件。BabylonJS甚至可以导入 Blender中创建的场景（需要安装一个免费的插件）。

如果你不了解3D图形编程，你可以先了解下基本概念，1个3D渲染场景至少需要这几个元素：一个需要渲染的对象，一个用来呈现对象的摄像机和一束灯光来让摄像机可以“看”到对象。

最基本的BabylonJS 示例：

HTML

"http://www.w3.org/1999/xhtml">

Usingbabylon.js-Testpage
"babylon.js">
</li> 
    <li class="alt" style="background-color:rgb(255,255,255);color:inherit;">html,body{</li> 
    <li style="background-color:rgb(255,255,255);color:rgb(92,92,92);">width:100%;</li> 
    <li class="alt" style="background-color:rgb(255,255,255);color:inherit;">height:100%;</li> 
    <li style="background-color:rgb(255,255,255);color:rgb(92,92,92);">padding:0;</li> 
    <li class="alt" style="background-color:rgb(255,255,255);color:inherit;">margin:0;</li> 
    <li style="background-color:rgb(255,255,255);color:rgb(92,92,92);">overflow:hidden;</li> 
    <li class="alt" style="background-color:rgb(255,255,255);color:inherit;">}</li> 
    <li style="background-color:rgb(255,255,255);color:rgb(92,92,92);"> <span class="preprocessor">#renderCanvas{</span> </li> 
    <li class="alt" style="background-color:rgb(255,255,255);color:inherit;">width:100%;</li> 
    <li style="background-color:rgb(255,255,255);color:rgb(92,92,92);">height:100%;</li> 
    <li class="alt" style="background-color:rgb(255,255,255);color:inherit;">}</li> 
    <li style="background-color:rgb(255,255,255);color:rgb(92,92,92);">


"renderCanvas">

JS

</li> 
    <li style="background-color:rgb(255,255,255);color:rgb(92,92,92);"> <span class="comment" style="color:rgb(0,130,0);">//获取canvas元素</span> </li> 
    <li class="alt" style="background-color:rgb(255,255,255);color:inherit;"> <span class="keyword">var</span>canvas=document.getElementById(<span class="string">"renderCanvas"</span>);</li> 
    <li style="background-color:rgb(255,255,255);color:rgb(92,92,92);"> <span class="comment" style="color:rgb(0,130,0);">//创建引擎</span> </li> 
    <li class="alt" style="background-color:rgb(255,255,255);color:inherit;"> <span class="keyword">var</span>engine=<span class="keyword">new</span>BABYLON.Engine(canvas,<span class="keyword">true</span>);</li> 
    <li style="background-color:rgb(255,255,255);color:rgb(92,92,92);"> <span class="comment" style="color:rgb(0,130,0);">//创建一台摄像机</span> </li> 
    <li class="alt" style="background-color:rgb(255,255,255);color:inherit;"> <span class="keyword">var</span>camera=<span class="keyword">new</span>BABYLON.FreeCamera(<span class="string">"Camera"</span>,<span class="keyword">new</span>BABYLON.Vector3(0,0,-10),scene);</li> 
    <li style="background-color:rgb(255,255,255);color:rgb(92,92,92);"> <span class="comment" style="color:rgb(0,130,0);">//创建一个点光源</span> </li> 
    <li class="alt" style="background-color:rgb(255,255,255);color:inherit;"> <span class="keyword">var</span>light0=<span class="keyword">new</span>BABYLON.PointLight(<span class="string">"Omni0"</span>,<span class="keyword">new</span>BABYLON.Vector3(0,100,100),scene);</li> 
    <li style="background-color:rgb(255,255,255);color:rgb(92,92,92);"> <span class="comment" style="color:rgb(0,130,0);">//创建一个球体</span> </li> 
    <li class="alt" style="background-color:rgb(255,255,255);color:inherit;"> <span class="keyword">var</span>sphere=BABYLON.Mesh.CreateSphere(<span class="string">"Sphere"</span>,16,3,scene);</li> 
    <li style="background-color:rgb(255,255,255);color:rgb(92,92,92);"> </li> 
    <li class="alt" style="background-color:rgb(255,255,255);color:inherit;"> <span class="comment" style="color:rgb(0,130,0);">//渲染循环</span> </li> 
    <li style="background-color:rgb(255,255,255);color:rgb(92,92,92);"> <span class="keyword">var</span>renderLoop=<span class="keyword">function</span>(){</li> 
    <li class="alt" style="background-color:rgb(255,255,255);color:inherit;">scene.render();</li> 
    <li style="background-color:rgb(255,255,255);color:rgb(92,92,92);"> };</li> 
    <li class="alt" style="background-color:rgb(255,255,255);color:inherit;"> </li> 
    <li style="background-color:rgb(255,255,255);color:rgb(92,92,92);"> <span class="comment" style="color:rgb(0,130,0);">//运行渲染循环</span> </li> 
    <li class="alt" style="background-color:rgb(255,255,255);color:inherit;"> engine.runRenderLoop(renderLoop);</li> 
    <li style="background-color:rgb(255,255,255);color:rgb(92,92,92);">

这样就可以得到如下图结果：

当然，为了创建更丰富的世界，你的3D场景也会越加复杂。以灯光为例，就有点光源、聚光灯、方向光和半球光四种类型。每个对象都可以被赋予不同的纹理和材质，来丰富世界中的对象。除此之外，你还可以创建自己的自定义着色器来控制场景渲染。

BabylonJS提供了要给叫CYOS（CreateYour Own Sader）（http://www.babylonjs.com/CYOS）的页面，你可以在这里动态创建着色器，并在浏览器中立即看到结果。

然而，游戏需要的不仅仅是3D图形。创建一个引人注目的游戏，可能需要使用碰撞检测来检测物体间的碰撞，也需要实现对真实物理特性的模拟。幸运的是，BabylonJS包括了一套物理引擎和碰撞检测。

由于最终用户的带宽可能差别很大，如果不加以考虑，用户体验会非常糟糕。为了缓解这类问题，BabylonJS支持增量加载资源，从而减少初始加载时间。要获得进一步的性能提升，还可以通过IndexedDB把资源缓存到本地。

HTML5中令人兴奋的一点就是可以创建那些曾经只有本地应用才有的丰富功能。随着HTML标准新功能的添加，现在已经可以创建比休闲游戏更加优秀的游戏体验。并且伴随Internet Explorer的不断增强，诸如硬件加速和触摸优先的设计，让其成为运行此类网页游戏的理想浏览器。

IE11做的更多

携手人气日漫 微软IE推出3D飞行模拟页游

与合作伙伴联手开发网页游戏，是微软宣传IE浏览器的一贯方式。近日，微软IE团队与日本I.G漫画工作室联合推出了3D版网页游戏《Gargantia: Sky Courier》，希望借助日本人气超群的Gargantia系列动画，推广自家的IE浏览器。

这款网页游戏采用了HTML5、Javascript以及WebGL图形技术，基于开源Turbulenz引擎制作。作为Gargantia的首款网页游戏，它其实是一款有着3D街机风格的飞行模拟器。

该游戏的源码已共享到GitHub平台，允许任何第三方游戏开发者下载、重新编译。如果你想了解更多的技术细节，也可以直接到Modern.ie观看游戏整个开发过程。

在游戏操作上，支持键盘、触控和手柄操作，尤其原生为IE11浏览器量身定制,如果你是一位动漫爱好者，不妨去体验一下这款3D网页版模拟飞行游戏。

游戏地址：http://fly.gargantia.jp/

迎接巴西2014世界杯

全球足球盛世之季，微软IE团队宣布联合ESPN推出了ESPN FC World Cup Essentials网站，该站点通过HTML5+WebGL技术沉浸式体验展示了世界杯相关的内容：包括赛事安排、最新资讯、参赛队伍、世界杯历史。http://essentials.espnfc.com/

网站使用Pointer Events技术实现了不同输入设备的统一体验，手指在导航处滑动可以体验到“跟手”的感觉，同时网站也应用了响应式设计以适配不同屏幕尺寸的设备。

近日，微软推出了面向Web开发者的IE Developer Channel版本（IE开发者渠道版本），主要是提供了IE新版本中的一些新功能，比如新标准的支持，相当于之前的 IE 平台预览版。

在首个IE Dev Channel版本中，微软改进了F12开发工具、支持WebDriver和Xbox手柄，并且提升了WebGL性能。

并且在即将到来的OS X Yosemite中，Safari也开始正式支持WebGL技术。

这样，WebGL在绝大多数平台/浏览器上都得到了可靠的支持，相信无需多久，WebGL技术就会被真正广泛应用，为全新Web体验带来更多的可能。