整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
星作为移动虚拟现实领域领军人物一直致力于为用户打造沉浸式的上网体验。随着目前AR/VR技术的持续火热，人们对于上网观看360度全景视频的期待也日渐高涨。昨日三星发布了一款适配虚拟现实眼镜Gear VR的浏览器。
这款浏览器将这天马行空的想象化为现实，把浏览器搬到了虚拟现实里。业内人士表示，三星此举进一步地扩充虚拟现实的生态系统，也为VR视觉体验技术立下了行业标杆。
三星方面称，该产品支持语音识别并配备虚拟键盘，用户可以在Gear VR里浏览网页，观看3D视频和HTML5视频等。Grear VR采用最新Gaze Mode模式，用户只需要盯着虚拟键盘就能操控按键，彻底解放双手。
但这种技术的交互体验仍需要得到进一步的优化，毕竟从打字到视控的转变颠覆了用户的上网习惯。这项技术的过度灵敏也会对用户造成一些困扰。只是因为在人群中多看了你一眼，就打开并不想要的界面，这对于优化上网体验来说并不是一件好事。因此如何最大化地减少用户在实际操作中的不适感还需要不断的实践。
另外有测评显示，Grear VR的浏览窗口略小。虽然配有放大的功能，但是从用户体验的角度来说，将默认设置的窗口大小按照人们正常的视线范围设计会显得更加合理。
目前该浏览器β版本已可以从Oculus Store下载。作为一个被众多开发工程师青睐的试验平台，Oculus Store能够对软件的开发和试验有较权威的指导，三星也表示希望借助该平台获得更多技术人士的专业建议，来帮助他们不断优化这款产品。
Via Techcrunch
创业小伙伴求扩散、求报道、求关注，请戳>>> 登记预约鸵鸟电台采访
栖TechDay活动第十四期中，来自阿里的墨川和江成共同为大家带来了题为《HTML5互动技术》的分享，主要分享了HTML5互动技术在天猫营销活动的应用和Web 3D相关的知识。
下面是现场分享观点整理。
大家好，我叫墨川，来自天猫技术部。今天主要来分享一下HTML5互动技术在天猫营销活动的应用。
图一 Hilo-电商互动游戏引擎
首先介绍一下Hilo，Hilo是我们三个月前开源的互动游戏引擎（开源地址：https://github.com/hiloteam/Hilo），目前在Github已经获得2700个Star、400多个Focus，欢迎大家关注。
图二 Hilo的开发案例
上图展示的是我们采用Hilo开发的一些Case。图上最大的两个模块代表的是双十一狂欢城，它是我们天猫互动最大的营销活动。它由很多品牌和动画组成，非常考验引擎的性能；左上角是双十一的喵喵5MZ，它是一个音乐类互动；其他的图片代表着的是我们平常的营销活动。
Hilo的特点
极精简
图三 Hilo的特点：极精简
Hilo的特点就是非常精简，gzip后只有24KB；它主要聚焦在渲染，其他事情交给工具和编辑器，我们是对市面上有名的编辑器做适配，而非自行开发；它是低耦合的，很多JS的模块可以直接调用。
多模块范式支持
图四 Hilo的特点：多模块范式支持
由于前端开发具有很多模块加载器，因此我们支持多模块范式，比如我们会支持独立版本的Hilo，还支持AMD、CMD、以及我们阿里内部的Kissy。所有的模块都具有注释（模块名等信息），我们通过脚本来提取这些依赖信息，构建成不同模块范式的脚本。
扩展灵活
图五 Hilo的特点：扩展灵活
Hilo扩展灵活，比如Load，目前我们支持图片Load和脚本Load、Audio Load，可以扩展出很多不同资源的Load。
多种渲染方案
图六 Hilo的特点：支持多种渲染方案
Hilo的另一大特点就是支持多种渲染方案，便于在不同场景下的使用最合适的渲染方案。下面来具体介绍每一种渲染方式的特点：
DOM渲染，由于安卓机上Canvas性能比较差，这种情况下就可以切换成DOM渲染，同样地，也可以利用CSS和HTML构建丰富的UI。DOM模式可以融合在其他模式下，例如在Canvas模式中，仍然可以使用部分DOM组件；
Canvas渲染：它是我们用的最多的渲染模式，我们对其进行大量的优化，比如通过预渲染、分片渲染等对性能进行优化；
Flash渲染：由于我们的电商属性决定会有一些IE用户，我们通过JSBridge的方式构建独立的Flash渲染系统（兼容IE6+）,做到全平台兼容；
WebGL渲染，现在随着系统升级，现在iOS8以及安卓5.0都支持该渲染模式。WebGL的性能远高于Canvas，它直接对GPU编程，支撑更多的渲染效果，例如附加颜色等等效果。Hilo支持自动Batch，批量渲染，降低Draw Call，性能有了明显的提高。
工具集
图七 Hilo所支持的工具集
Hilo支持多扩展，比如物理系统是集成了Chipmunk，Chipmunk比Box 2D更精简，在移动端更适用；骨骼系统对DragonBones进行了兼容，DragonBones是市面上比较流行的骨骼动画编辑器，它可以导出骨骼动画。我们自己也做了很多工具。由于目前2D动画的主流编辑器还是Flash，我们开发了针对Flash的插件，直接可以导出Hilo动画；我们还支持导出CSS3以及阿里最新出的渲染方案Weex等等。
此外我们提供了例子编辑器（ParticleEditor）、Hilo-generator（它是一个前端的脚手架）、TexturePacker（比较流行的打包工具）等工具的导出支持。
稳定性
图八 Hilo的稳定性非常高
稳定性方面，Hilo是十分稳定的，从2013年开始使用至今，在天猫、手淘的各类活动中测试了超过80款设备。
下面就是一些Web 3D的知识，这个由江城来讲。
Web 3D
图九 3D渲染
根据渲染内容，3D渲染主要分为全景图、模型和视频三块。通过渲染以后有很多表达的方式，例如全景图渲染之后可以采用AR的形式表现出来；另外一种VR形式，直接通过3D的形式展现。视频渲染之后的表现形式可能就是一些全景视频，既可以直接拖动，还可以通过3D眼镜观看。
CSS 3D
首先讲解下全景图，因为我是前端开发工程师，所以我今天讲解的案例是集中在移动端Web实现的。我首先介绍一下我是潜能开发工程师。我们首先想到一种方法是CSS 3D，因为CS3D基础支持功能还是比较完善的。它有一个perspective属性，这是一个非常重要的3D透视属性。它定义了元素距离视图的距离元素距离；元素定义perspective属性时，其子元素会获得透视效果。
图十 CSS 3D
上图是我直接从网上拿来的一个图。通过上面的代码可以看到，该Dump的透视距离为1500ps，下面有6张图，每张图的大小是1500ps。根据坐标轴，Translate Z坐标是-750，也就是说它把所有图移到更靠前的位置。所以我们手机屏幕看到的只是某一张图的一部分。然后每一张图6个面，过上下旋转形成一个立方体。所以通过手机屏幕，我们所看的就是一个近似立方体的内部。
这6个图在一起的时候，我可能需要调动它，只需要改变父节点的位置，其余的子节点的位置也会随之改变。因此只需改变父元素和转动，就可以近似模拟出立体的全景图。
Web VR
图十一 Web VR
对于表现形式，紧跟时代潮流，我们推出Web VR的预演。Web VR的标准是今年四月份才出的，目前只有火狐和chrome开发者版本支持。我们现在做的更多是模拟Web VR效果，由于浏览器本身不支持，我们更多地是通过其他手段模拟下Web VR效果。
人类观察任何一个事物，都是有先后顺序的，而且左眼和右眼看到的景象是不一样的，两者合起来以后就是一个三维图像。这种技术很早之前就已经出现了，将两张图片的合成一张图，再辅助以3D眼镜，就可以营造出一种身临其境的3D效果。
图十二 Web VR的案例
上面是我们在天猫客户端上玛莎拉蒂展示的一个案例。这个图其实是一个视角，可以理解成是一个左眼或者右眼的视角。在转动的过程中，只要再有一个偏差的View，就可以合成三维画面。这两个View之间是有固定的参数的。由于正常人两眼的视差值约为65毫米，根据这个值我们适当调整View之间的差值，形成VR的效果。
多面体和图像拼接
图十三 多面体和图像拼接技术
上文我们提到的都是六面体，但是六面体面与面之间的交界处会有一些变形。如果说我们把六面体扩大成更多面，那么交界面就会看起来非常柔滑，但出于成本考虑，前端是不会这么做的。对于拼接技术，从刚才的全景图中大家可以看到面与面之间是很连续的， 这是因为这些图像在事先进行了处理，否则，图像与图像之间是存在缝隙的。在前端，我们可以通过修改固定的参数实现这种拼接技术。
模型
图十四 模型
在内容获取上，我们可以得到一些模型。这对于传统游戏行业是非常容易。但对于前端而言，目前正处于起步阶段，到今天为止，主流的机器支持的是webGL 1.0版本。
上图显示的是我们拿到的梦工厂的功夫熊猫的部分模型。Native或客户端具有一套成熟的解析工具和渲染系统，因此他们拿到模型之后，很容易进行渲染。但对于我们而言，我们会经常丢失部分面或者点，甚至于一些法向量，进而导致渲染上出现问题。目前针对这些问题采用的解决方案是通过音卡3D导出所需的WebGL模型。
Runtime
图十五 Runtime
尽管目前大部分机器都支持WebGL 1.0，但是在去年双十进行AR开发时，只有iOS 8.0和安卓5.0以上版本部分支持。对于部分支持的机器，我们需要一些辅助的Runtime（包括一套webGL1.0实现的API）。
WebGL 2.0和WebGL 3.0 新加了许多让人特别兴奋的功能。WebGL 3.0并行计算能力号称是1.0版本的4倍；WebGL2.0 提出GLTF的通用模型，对于前端而言就像JPG文件一样，它定义了一个三维通用模型。
精彩问答：
提问：什么情况下使用DOM渲染？
莫川：在安卓机，我们是根据游戏场景进行区分。如果游戏场景数量少的时候，采用DOM渲染会比会比Canvas性能更高一点；游戏场景多时，Canvas的渲染效果就相对而言比较好了。例如在618活动时，我们是有很多促销活动游戏的。去年我们采用的是Canvas渲染，但效果很不好，我们就降级到安卓机上采用DOM渲染了，整个更改过程只需要改动一行代码即可。
关于分享者:
江成 现任天猫互动资深前端开发工程师，多年Web前端互动开发经验，热衷于Web图形图像技术，目前负责天猫互动Web 3D、AR、VR等方面营销和产品场景落地和Hilo(阿里巴巴HTML5开源互动游戏引擎)的日常维护工作。
更多深度技术内容，请关注云栖社区微信公众号：yunqiinsight。
前最具人气的前端开发技术框架是什么？移动至上时代的来临促使越来越多的开发者利用HTML 5开发移动友好型网站。HTML 5的主要优势一直在不断演进，旨在提供足以与原生技术相匹配的功能。从雷军这样的互联网精英人士到菜场股市大妈都深信一点：只要站在风口，猪也能够飞起来，那么对于IT技能领域来讲，2016年这只“猪”当之无愧属于HTML5开发技术，HTML5从根本上改变了开发商开发web应用的方式，从桌面浏览器到移动应用，这种语言和标准都影响并将继续影响各种操作平台。凭借着面向开发者与最终用户的强大及新鲜功能，HTML 5已经被世界各地网站所广泛采用。HTML 5适用于所有现代桌面与移动浏览器，亦可用于移动Web应用的开发工作。
今天学院君带你一图流看懂HTML 5六大核心优势。
1.跨平台：
在多屏年代，开发者的痛苦指数非常高，人人都期盼HTML5能扮演救星。多套代码、不同技术工种、业务逻辑同步，这是折磨人的过程。有点类似个人电 脑早期世界，那个时候的每家电脑都有自己的操作系统和编程语言，开发者疲于做不同版本，其实DOS的盛行也很大程度是因为开发者实在没精力给其他电脑写程 序。跨平台技术在早期大多因为性能问题夭折，但中后期硬件能力增强后又会占据主流，因为跨平台确实是刚需。你的现代流行浏览器都支持HTML5(Chrome，Firefox，Safari，IE9和Opera)，并且创建了HTML5 doctype这样所有的浏览器，即使非常老非常令人厌恶浏览器像IE6都可以使用。但是因为老的浏览器能够识别doctype并不意味它可以处理HTML5标签和功能。幸运的是，HTML5已经使得开发更加简单了，更多支持更多浏览器，这样老的IE浏览器可以通过添加javascript代码来使用新的元素。
2.视频和音频支持
忘了flash和其它第三方应用吧，让你的视频和音频通过HTML5标签和来访问资源。正确播放媒体一直都是一个非常可怕的事情，原生开发方式对于文字和音视频混排的多媒体内容处理相对麻烦，需要拆分开文字、图片、音频、视频，解析对应的URL并分别用不同的方式处理。HTML5在这个方面完全不受限制，可以完全放在一起进行处理。设计师要知道，如果新闻类、微博类、社交类应用的信息呈现中实现文字与多媒体混排，而不用专门嵌入webview，将是一件多美好的事情，至少现在原生方式实现起来还有困难。在国外大型社区网站FACEBOOK、视频分享网站YOUTUBE、谷歌和微软等网站，都已经使用html5作为默认技术，它的优点就是省电，流畅和清晰，因为采用了统一的国际标准H.264，国内已经出现手机html5视频网站。网内大火的bilibili也开始试水HTML 5播放器。
3. 游戏开发
没错， 你可以使用HTML5的开发游戏。HTML5提供了一个非常伟大的，移动友好的方式去开发有趣互动的游戏。如果你开发Flash游戏，你就会喜欢上HTML5的游戏开发。手机页游的3D化是大势所趋，随着硬件能力的提升、WebGL标准化的普以及手机页游的逐渐成熟，大量开发者需要创作更加精彩的3D内容。白鹭研发的3D引擎，将助力手机页游（HTML5游戏）产品形态从2D跨域到3D。可以预见，今年手机页游将出现高品质的3D内容。 随着超级APP、浏览器等渠道流量的开放，以及HTML5游戏品质的提升，出现多款千万月流水的爆款已经不是悬念。运气不错的话，有望出现1000万利润的产品。对，利润，不是流水。
4.网页应用开发
HTML5是web应用的未来，不要掉队了!HTML5 Web Storage API可以看做是加强版的cookie，不受数据大小限制，有更好的弹性以及架构，可以将数据写入到本机的ROM中，还可以在关闭浏览器后再次打开时恢复数据，以减少网络流量。同时，这个功能算得上是另一个方向的后台“操作记录”，而不占用任何后台资源，减轻设备硬件压力，增加运行流畅性。在线app支持边使用边下载离线缓存，或者不下载离线缓存;而离线app必须是下载完离线缓存才能使用。形象点说，cookie就是存了电话和菜单，想吃什么要叫外卖，等多长时间才能吃到就得看交通情况了;离线缓存就是直接在冰箱里存了食物，想吃就能马上吃到(当然，想吃最新的食物同样可以打电话预定)。设计师要知道，什么时候让用户下载离线缓存(注意在线和离线app的区别)。
除此之外值得一提的还有WebVR，WebVR就是通过HTML5将虚拟现实场景嵌入到网页，目前已受到谷歌、Facebook等巨头的拥护。Web扩展了VR的使用范围，很多生活化的内容纳入了VR的创作之中，如实景旅游，新闻报道、虚拟购物等，其内容展示、交互都可以由HTML5引擎轻松创建出来。去年12月白鹭与暴风魔镜，合作成立国内首个WebVR实验室，也是希望用HTML5来打造低成本、快捷、低门槛的VR游戏、影音体验。
5. 更好的互动
我们都喜欢更好的互动，我们都喜欢对于用户有反馈的网站，用户可以享受互动的过程。输入，HTML5的画图标签允许你做更多的互动和动画，就像我们使用Flash达到的效果。
6.又见SEO
HTML5有着开放的数据交换：HTML是以page为单元开放代码的，它无需专门开发SDK，只要不混淆，就能与其他应用交互数据。开发者可以让手机搜索引擎很容易检索到自己的数据， 也更容易通过跨应用协作来满足最终用户需求。这意味着更容易推广、更容易爆发：导流入口多：HTML5应用导流非常容易，超级App(如微信朋友圈)、搜索引擎、应用市场、浏览器，到处都是HTML5的流量入口。而原生App的流量入口只有应用市场。聪明的HTML5开发者当然会玩转各种流量入口从而取得更强的优势。流量大也是一个重要的点，前段时间微信朋友圈风靡一时《神经猫》，这个游戏如果放到Appstore，绝对没有那么多流量，超级App带来的流量，远大于原生应用市场。假如微信允许游戏在桌面创建快捷方式、假如游戏后续升级解决持续娱乐问题，未来不可想象。还值得一提的是导流效率高，除了入口多、流量大，导流效率高也不可忽视，谁都知道：页游和端游打同样的广告，广告变用户的转化率，页游远远高于端游。
吹了这么久的HTML 5，一个重要的问题浮现了：你说的我都懂，可是开发HTML 5也不容易啊！说到这里学院君必须给大家献上今天的终极福利，那就是性能最优的HTML5,CSS和JavaScript移动、Web开发框架，Visual Studio开发人员开发跨平台产品的首选工具——DevExtreme。
选择DevExtreme的四大理由：
1.简化移动应用开发
运用DevExtreme Complete Subscription创建高度响应式的移动应用。运用强大的HTML、CSS3和JavaScript交付实现一系列如本地应用程序的商业解决方案，不用学习各种语言或框架，你只需要懂得HTML和JavaScript，就可以开始进行你的跨平台开发。
无论是iPad、iPhone、Android、Windows Phone还是Surface tablet，DevExtreme Complete Subscription可以交付实现。
支持Apache Cordova (PhoneGap)。这意味着用DevExtreme创建的每个移动app都可以在目标设备上运行，并且可以随时提交到Apple App Store 或 Google Play Store。
2.完美的数据可视化
DevExtreme Complete Subscription为智能手机和平板电脑封装了易于使用的HTML JavaScript应用程序，包含超过30种触摸优化的本地UI小工具，可用于任何应用程序的单个页面。主要包括以下数据可视化工具：
图表和仪表：DevExtreme Complete Subscription包含高性能的线形图、面积图、柱状图和财务HTML5图表工具。同时还有非常漂亮的圆形和线形HTML5仪表工具。
量程选择器：HTML 5范围和值的选择器，带有Google仿真图表。
多功能小部件：一个完整的HTML5多功能小部件，你可以创建与目标平台最匹配的工具。
自适应样式：DevExtreme Complete Subscription应用特定设备的样式到所有组件，让其看起来有一个本地外观，且开箱即用。
3.完美集成Visual Studio
DevExtreme Complete Subscription 已经为Visual Studio做了一系列的优化，熟悉VS的开发人员可以立即着手开始创建运行于iOS, Android和交互式Web下的apps。
运用Visual Studio的项目模板和向导帮助你马上开始。完整集成的View Designer和代码窗口可以构建理想的视图，所有这一切都在Visual Studio中完成。
在Visual Studio内使用内置的设备模拟器，或者DXProxy和浏览器调试器调试你的移动应用。用DevExpress Courier App在PhoneGap环境下立即执行应用，交互一个本地的、可以立即上市的IOS和Android应用包，而不受平台SDK或额外服务器的限制。
4.一种语言、一个代码库搞定任何app
一个SDK：DevExtreme Complete Subscription只需通过一个SDK就可以交付到所有常用的平台上，真正的代码重用和省心的项目管理。
MVVM：支持Knockout.js，意味着Model View（基于UI开发的ViewModel）将变得前所未有的简单。
jQuery：开发者当前所掌握的东西全部都可以利用起来，不用担心知识上的限制。
为了更美好的职业前景，为了升职加薪走上人生巅峰，还不投入慧都学院君的怀抱！
更多行业资讯，更新鲜的技术动态，尽在慧都学院。
*请认真填写需求信息，我们会在24小时内与您取得联系。
