与 WebGL 一起遇见网页的未来
育碧（Ubisoft）和IE浏览器团队合作推出了其首个WebGL游戏——《刺客信条：海盗奇航(Assassin'sCreedPirates)》。其拥有丰富的物理特性，高帧率运行和引人入胜的体验。最重要的是，它不需要任何插件并且跨浏览器/跨平台支持。 http://cdn.pcbeta.attachment.inimc.com/data/attachment/album/201406/24/103933ev5avjjjoqqhb2cv.png 借助BabylonJS，育碧在浏览器中重现了本地应用体验，一个目前独一无二的完整游戏体验。 BabylonJS是一个基于WebGL、JavaScript和TypeScript的开源3D引擎，由四个来自微软的开发者创建。通过BabylonJS，开发者可以用最少的代码实现快速添加碰撞检测、物理特性、灯光、摄像头角度、纹理效果和全新的3D场景等。 http://cdn.pcbeta.attachment.inimc.com/data/attachment/album/201406/24/103928i5pmhposxhoxthhr.png BabylonJS 上手非常简单，特别是如果你熟悉3D渲染的技术和软件。BabylonJS甚至可以导入Blender中创建的场景（需要安装一个免费的插件）。 http://cdn.pcbeta.attachment.inimc.com/data/attachment/album/201406/24/103925osnsn3px944wbg8s.png 如果你不了解3D图形编程，你可以先了解下基本概念，1个3D渲染场景至少需要这几个元素：一个需要渲染的对象，一个用来呈现对象的摄像机和一束灯光来让摄像机可以“看”到对象。 最基本的BabylonJS 示例：HTML<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> Using babylon.js- Test page <style> html, body{ width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; } #renderCanvas { width: 100%; height: 100%; } </style> <canvas id="renderCanvas"></canvas>JS<script>// 获取canvas元素var canvas =document.getElementById("renderCanvas");// 创建引擎var engine = new BABYLON.Engine(canvas,true);// 创建一台摄像机var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0,0, -10), scene);// 创建一个点光源var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0,100, 100), scene);// 创建一个球体var sphere =BABYLON.Mesh.CreateSphere("Sphere", 16,3, scene); // 渲染循环var renderLoop = function(){ scene.render();}; // 运行渲染循环engine.runRenderLoop(renderLoop);
</script> 这样就可以得到如下图结果：http://cdn.pcbeta.attachment.inimc.com/data/attachment/album/201406/24/103925ndvnl2fmnvq6qqq2.png 当然，为了创建更丰富的世界，你的3D场景也会越加复杂。以灯光为例，就有点光源、聚光灯、方向光和半球光四种类型。每个对象都可以被赋予不同的纹理和材质，来丰富世界中的对象。除此之外，你还可以创建自己的自定义着色器来控制场景渲染。 BabylonJS提供了要给叫CYOS(CreateYourOwn Sader)（http://www.babylonjs.com/CYOS）的页面，你可以在这里动态创建着色器，并在浏览器中立即看到结果。http://cdn.pcbeta.attachment.inimc.com/data/attachment/album/201406/24/103925qgt8tsz3b88ww18q.png 然而，游戏需要的不仅仅是3D图形。创建一个引人注目的游戏，可能需要使用碰撞检测来检测物体间的碰撞，也需要实现对真实物理特性的模拟。幸运的是，BabylonJS包括了一套物理引擎和碰撞检测。 由于最终用户的带宽可能差别很大，如果不加以考虑，用户体验会非常糟糕。为了缓解这类问题，BabylonJS支持增量加载资源，从而减少初始加载时间。要获得进一步的性能提升，还可以通过IndexedDB把资源缓存到本地。 http://cdn.pcbeta.attachment.inimc.com/data/attachment/album/201406/24/103924c4uhipj2jj3zi6u2.png HTML5中令人兴奋的一点就是可以创建那些曾经只有本地应用才有的丰富功能。随着HTML标准新功能的添加，现在已经可以创建比休闲游戏更加优秀的游戏体验。并且伴随Internet Explorer的不断增强，诸如硬件加速和触摸优先的设计，让其成为运行此类网页游戏的理想浏览器。IE11做的更多《月熊志》是InternetExplorer团队与亚洲动物基金（AAF）合作推出的网站。 开发团队通过 Blender 这个 3D 建模软件构建出了月熊的形象，以及他周围自然亲近的场景，然后结合 three.js 这个 JavaScript 3D 引擎，通过WebGL技术把月熊搬到了浏览器上，生动的表达加上支持触控的交互方式，不仅运用到了最前沿的技术，更重要的是为用户带来了一种前所未有的浏览体验——它模糊了“网页”和“应用”之间的界限让原本只能通过本地应用的复杂表现方式，变成了随时随地就可以浏览的网页。得益于 IE11 的硬件加速以及 WebGL 的高效，可以给我们带来可以在浏览器上运行场景丰富，动画流畅的 3D 体验。 http://cdn.pcbeta.attachment.inimc.com/data/attachment/album/201406/24/103924yz0mmrvarbzbbbpp.png 迎接巴西2014世界杯，微软Internet Explorer 团队宣布联合 ESPN 推出了 ESPN FC World Cup Essentials 网站，该站点通过 HTML5 +WebGL 技术沉浸式体验展示了世界杯相关的内容：包括赛事安排、最新资讯、参赛队伍、世界杯历史。 网站使用Pointer Events技术实现了不同输入设备的统一体验，手指在导航处滑动可以体验到“跟手”的感觉，同时网站也应用了响应式设计以适配不同屏幕尺寸的设备。 http://cdn.pcbeta.attachment.inimc.com/data/attachment/album/201406/24/103923khuxqpo0ee3d6gq6.png 近日，微软推出了面向 Web 开发者的 IEDeveloper Channel 版本（IE 开发者渠道版本），主要是提供了 IE 新版本中的一些新功能，比如新标准的支持，相当于之前的 IE 平台预览版。 在首个 IE Dev Channel 版本中，微软改进了 F12开发工具、支持WebDriver 和 Xbox 手柄，并且提升了WebGL性能。 并且在即将到来的OS X Yosemite中，Safari也开始正式支持WebGL技术。 这样，WebGL在绝大多数平台/浏览器上都得到了可靠的支持，相信无需多久，WebGL技术就会被真正广泛应用，为全新Web体验带来更多的可能。
支持下{:5_597:} 哎哟，我是板凳？ 现在体验还不是很好，不过看好web 顶楼上 我发现大型3D游戏在浏览器上玩 电脑卡卡的 没I7玩不了吧 支持下有时间去体验 现在IE也正在朝多媒体应用发展啊，不再仅仅是互联网的入口了 这个很不错。。 学习
1个3D渲染场景至少需要这几个元素：一个需要渲染的对象，一个用来呈现对象的摄像机和一束灯光来让摄像机可以“看”到对象。 不明嚼栗{:5_591:} 回帖支持。 男默女泪 啊 看看！！
页:
[1]