天极传媒:
天极网
比特网
IT专家网
52PK游戏网
极客修
全国分站

北京上海广州深港南京福建沈阳成都杭州西安长春重庆大庆合肥惠州青岛郑州泰州厦门淄博天津无锡哈尔滨

产品
  • 网页
  • 产品
  • 图片
  • 报价
  • 下载
全高清投影机 净化器 4K电视曲面电视小家电滚筒洗衣机
您现在的位置: 天极网 > 软件 > 网页>新闻>IE11浏览器引领未来网页开发新概念

微软IE11浏览器引领未来网页开发新概念

天极网软件频道2013-12-12 06:00我要吐槽

  IE11带来无插件3D网页新体验

  对于开发者而言,IE11的硬件加速进一步提升,包括图像、文字、视频在内的多媒体资源都可以通过硬件实时渲染,极大的提升了网站体验。当今网站中开始使用越来越多的3D元素,并且也逐渐成为提升用户体验的重要手段。而纵观目前多数网站的3D体验都是通过插件来实现。但是在“月熊志”中,我们可以在第一部分看到以3D方式呈现的栩栩如生的Jasper,还可以进行交互,而这整个体验都是不需要插件的,完全基于浏览器来实现,这背后正是因为IE11对于WebGL的强大支持。

  
WebGL和IE11的硬件加速让3D图像更逼真

  WebGL是基于OpenGL ES 2.0的Web标准,开发者们通过WebGL可以在IE11上表现出逼真的交互式3D和2D图形,而不需要再借助任何的插件,同时,由于WebGL是直接调用显卡进行运算,所以执行的效率非常高。

“月熊志”与WebGl相关的代码示例

  loader.load("models/mesh.js", function (geometry, materials) {
    //创建模型对象
    varmesh = 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);
  });

  得益于IE11的硬件加速以及WebGL的高效,“月熊志”开发团队可以在浏览器上运行场景丰富、动画流畅的3D画面。开发团队先是通过3D建模软件Blender构建出月熊的形象及他周围自然亲近的场景,然后利用three.js引擎来载入这些数据,将动画在浏览器中呈现,借着IE11上WebGL的高效处理特性,让网站的浏览者能够体验到流畅的3D互动。

   GlacierWorks上运用了大量的3D效果

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

  而且WebGL一直被认为是下一代3D网游构建的重要标准,在为经典游戏Hover推出的3D网页版(http://hover.ie/)中,结合WebGL与HTML5等最新网络标准进行了重新开发,通过IE11打造出更加真实逼真的3D赛车场景和身临其境的赛车体验。可互操作的WebGL体验可在所有设备上运行, IE11充分利用了对GPU加速的特性,获得更快的处理速度。而IE11还能对不安全的WebGL内容进行扫描,将其使用基于软件的渲染来完善CPU,保证用户体验安全。通过IE11,您的3D体验可使用设备重力感应,为沉浸式网络内容创造新的交互体验。


通过WebGL标准重制Hover 3D体验

作者:天极软件责任编辑:杨玲)
请关注天极网天极新媒体 最酷科技资讯
扫码赢大奖
评论
* 网友发言均非本站立场,本站不在评论栏推荐任何网店、经销商,谨防上当受骗!
热点推荐
微软Windows 10操作系统Win10系统在Win8的基础上对界面、特性以及跨平台方面做了诸多优化。[详细]
Windows 10 新视界 [进入频道][使用技巧][微博互动]
手机整机DIY企业级