整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
星作為移動虛擬現實領域領軍人物一直致力于為用戶打造沉浸式的上網體驗。隨著目前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小時內與您取得聯系。
