育碧(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
- <!DOCTYPEhtml>
- <htmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>Usingbabylon.js-Testpage</title>
- <scriptsrc="babylon.js"></script>
- <style>
- html,body{
- width:100%;
- height:100%;
- padding:0;
- margin:0;
- overflow:hidden;
- }
-
#renderCanvas{
- width:100%;
- height:100%;
- }
- </style>
- </head>
- <body>
- <canvasid="renderCanvas"></canvas>
- </body>
- </html>
JS
- <script>
-
- varcanvas=document.getElementById("renderCanvas");
-
- varengine=newBABYLON.Engine(canvas,true);
-
- varcamera=newBABYLON.FreeCamera("Camera",newBABYLON.Vector3(0,0,-10),scene);
-
- varlight0=newBABYLON.PointLight("Omni0",newBABYLON.Vector3(0,100,100),scene);
-
- varsphere=BABYLON.Mesh.CreateSphere("Sphere",16,3,scene);
-
-
- varrenderLoop=function(){
- scene.render();
- };
-
-
- engine.runRenderLoop(renderLoop);
- </script>
这样就可以得到如下图结果:
当然,为了创建更丰富的世界,你的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体验带来更多的可能。
相关推荐
Unity导出的WebGL、网页前端、服务端以及硬件四级交互结构的实现(简单3d建模网页端物联网) 介绍博客地址 https://blog.csdn.net/Koweico/article/details/111195285
Unity与WebGl通信工具脚本 测试Demo 教程https://blog.csdn.net/boyZhenGui/article/details/114374111?spm=1001.2014.3001.5501
1. 深入地理解 HTML5、CSS3 样式与网页布局、JavaScript 脚本编程语言、WebGL 网页图形编程语言等内容; 2. 能够综合、灵活地运用上述所学内容,设计一个具有一定特色的网站。 实验内容: 1. 综合、灵活地运用以下...
网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。(抖音资料)网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。(抖音资料)网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画...
WebGL 是一项在网页上渲染三维图形的技术,也是HTML5 草案的一部分。 《WebGL编程指南》的主要篇幅讲解了WebGL 原生API 和三维图形学的基础知识,包括渲染管线、着色器、矩阵变换、着色器编程语言(GLSL ES)等等,...
Unity Webgl播放直播功能源码及运行文件
网络游戏-基于WebGL的3D网页游戏的开发与应用研究.zip
一种可以在基于WebGL技术的主流浏览器上显示巨量二维矢量文本文字而不会明显增加浏览内存消耗和明显增加前端网页转化文本矢量数据所需时间的技术。通过此技术可以在一些低配置的设备上展示WebGL时当展示内容含有巨量...
市面上大多数Unity内打开网页插件都不能支持Webgl, 找了好久才找到的这个插件,官网售价很贵 支持Unity发布Webgl,在Unity网页内打开其它网页 支持全屏
HTML5+CSS+WEBGL网页3D游戏开发,经典教程
本书?前可以?把?教你使用WebGL进行编程,?且在不断更 新。
webgl载入模型webgl载入模型webgl载入模型 webgl载入模型webgl载入模型webgl载入模型
我是个3D Fan,也很喜欢玩游戏,最近出了个WebGL,我做了一个基于Canvas的网页,用火狐4.0Beta英文版可打开,有兴趣可以看看哦,过段时间,我会继续上传一些我做的东东
Unity通用WebGL模板Universal WebGL Template 1.2.1 仅供学习,请勿商用。
网络游戏-基于WebGL的3D网页游戏的开发方法及系统.zip
工程是vue嵌套webgl,里面有unity和vue两个工程的代码
unity2021 webgl透明背景插件
unity 用安卓手机 打开webgl 浏览器全屏 显示模版
untiy webgl 打开 PDF文件