雲栖techday活動第十四期中，來自阿裡的墨川和江成共同為大家帶來了題為《html5互動技術》的分享，主要分享了html5互動技術在天貓營銷活動的應用和web 3d相關的知識。
下面是現場分享觀點整理。
大家好，我叫墨川，來自天貓技術部。今天主要來分享一下html5互動技術在天貓營銷活動的應用。
<b>圖一 hilo-電商互動遊戲引擎</b><b></b>
<b>圖二 hilo的開發案例</b><b></b>
上圖展示的是我們采用hilo開發的一些case。圖上最大的兩個子產品代表的是雙十一狂歡城，它是我們天貓互動最大的營銷活動。它由很多品牌和動畫組成，非常考驗引擎的性能；左上角是雙十一的喵喵5mz，它是一個音樂類互動；其他的圖檔代表着的是我們平常的營銷活動。
hilo的特點<b></b>
<b>極精簡</b><b></b>
<b> </b>
<b>圖三 hilo的特點：極精簡</b><b></b>
hilo的特點就是非常精簡，gzip後隻有24kb；它主要聚焦在渲染，其他事情交給工具和編輯器，我們是對市面上有名的編輯器做适配，而非自行開發；它是低耦合的，很多js的子產品可以直接調用。
<b>多子產品範式支援</b><b></b>
<b>圖四 hilo的特點：多子產品範式支援</b>
由于前端開發具有很多子產品加載器，是以我們支援多子產品範式，比如我們會支援獨立版本的hilo，還支援amd、cmd、以及我們阿裡内部的kissy。所有的子產品都具有注釋（子產品名等資訊），我們通過腳本來提取這些依賴資訊，建構成不同子產品範式的腳本。
<b>擴充靈活</b><b></b>
<b>圖五 hilo的特點：擴充靈活</b>
hilo擴充靈活，比如load，目前我們支援圖檔load和腳本load、audio load，可以擴充出很多不同資源的load。
<b>多種渲染方案</b><b></b>
<b>圖六 hilo的特點：支援多種渲染方案</b>
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，性能有了明顯的提高。
工具集<b></b>
<b>圖七 hilo所支援的工具集</b><b></b>
hilo支援多擴充，比如實體系統是內建了chipmunk，chipmunk比box 2d更精簡，在移動端更适用；骨骼系統對dragonbones進行了相容，dragonbones是市面上比較流行的骨骼動畫編輯器，它可以導出骨骼動畫。我們自己也做了很多工具。由于目前2d動畫的主流編輯器還是flash，我們開發了針對flash的插件，直接可以導出hilo動畫；我們還支援導出css3以及阿裡最新出的渲染方案weex等等。
此外我們提供了例子編輯器（particleeditor）、hilo-generator（它是一個前端的腳手架）、texturepacker（比較流行的打包工具）等工具的導出支援。
穩定性<b></b>
<b>圖八 hilo的穩定性非常高</b>
穩定性方面，hilo是十分穩定的，從2013年開始使用至今，在天貓、手淘的各類活動中測試了超過80款裝置。
下面就是一些web 3d的知識，這個由江城來講。
web 3d<b></b>
<b>圖九 3d渲染</b><b></b>
根據渲染内容，3d渲染主要分為全景圖、模型和視訊三塊。通過渲染以後有很多表達的方式，例如全景圖渲染之後可以采用ar的形式表現出來；另外一種vr形式，直接通過3d的形式展現。視訊渲染之後的表現形式可能就是一些全景視訊，既可以直接拖動，還可以通過3d眼鏡觀看。
<b>cs</b><b>s </b><b>3d</b><b></b>
首先講解下全景圖，因為我是前端開發工程師，是以我今天講解的案例是集中在移動端web實作的。我首先介紹一下我是潛能開發工程師。我們首先想到一種方法是css 3d，因為cs3d基礎支援功能還是比較完善的。它有一個perspective屬性，這是一個非常重要的3d透視屬性。它定義了元素距離視圖的距離元素距離；元素定義perspective屬性時，其子元素會獲得透視效果。
<b>圖十 css 3d</b><b></b>
上圖是我直接從網上拿來的一個圖。通過上面的代碼可以看到，該dump的透視距離為1500ps，下面有6張圖，每張圖的大小是1500ps。根據坐标軸，translate z坐标是-750，也就是說它把所有圖移到更靠前的位置。是以我們手機螢幕看到的隻是某一張圖的一部分。然後每一張圖6個面，過上下旋轉形成一個立方體。是以通過手機螢幕，我們所看的就是一個近似立方體的内部。
這6個圖在一起的時候，我可能需要調動它，隻需要改變父節點的位置，其餘的子節點的位置也會随之改變。是以隻需改變父元素和轉動，就可以近似模拟出立體的全景圖。
<b>web vr</b><b></b>
<b>圖十一 web vr</b><b></b>
對于表現形式，緊跟時代潮流，我們推出web vr的預演。web vr的标準是今年四月份才出的，目前隻有火狐和chrome開發者版本支援。我們現在做的更多是模拟web vr效果，由于浏覽器本身不支援，我們更多地是通過其他手段模拟下web vr效果。
人類觀察任何一個事物，都是有先後順序的，而且左眼和右眼看到的景象是不一樣的，兩者合起來以後就是一個三維圖像。這種技術很早之前就已經出現了，将兩張圖檔的合成一張圖，再輔助以3d眼鏡，就可以營造出一種身臨其境的3d效果。
<b>圖十二 web vr的案例</b><b></b>
上面是我們在天貓用戶端上瑪莎拉蒂展示的一個案例。這個圖其實是一個視角，可以了解成是一個左眼或者右眼的視角。在轉動的過程中，隻要再有一個偏差的view，就可以合成三維畫面。這兩個view之間是有固定的參數的。由于正常人兩眼的視內插補點約為65毫米，根據這個值我們适當調整view之間的內插補點，形成vr的效果。
<b>多面體和圖像拼接</b><b></b>
<b>圖十三 多面體和圖像拼接技術</b><b></b>
上文我們提到的都是六面體，但是六面體面與面之間的交界處會有一些變形。如果說我們把六面體擴大成更多面，那麼交界面就會看起來非常柔滑，但出于成本考慮，前端是不會這麼做的。對于拼接技術，從剛才的全景圖中大家可以看到面與面之間是很連續的， 這是因為這些圖像在事先進行了處理，否則，圖像與圖像之間是存在縫隙的。在前端，我們可以通過修改固定的參數實作這種拼接技術。
模型<b></b>
<b>圖十四 模型</b><b></b>
在内容擷取上，我們可以得到一些模型。這對于傳統遊戲行業是非常容易。但對于前端而言，目前正處于起步階段，到今天為止，主流的機器支援的是webgl 1.0版本。
上圖顯示的是我們拿到的夢工廠的功夫熊貓的部分模型。native或用戶端具有一套成熟的解析工具和渲染系統，是以他們拿到模型之後，很容易進行渲染。但對于我們而言，我們會經常丢失部分面或者點，甚至于一些法向量，進而導緻渲染上出現問題。目前針對這些問題采用的解決方案是通過音卡3d導出所需的webgl模型。
runtime<b></b>
<b>圖十五 runtime</b><b></b>
盡管目前大部分機器都支援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檔案一樣，它定義了一個三維通用模型。
<b>精彩問答：</b><b></b>
提問：什麼情況下使用dom渲染？
莫川：在安卓機，我們是根據遊戲場景進行區分。如果遊戲場景數量少的時候，采用dom渲染會比會比canvas性能更高一點；遊戲場景多時，canvas的渲染效果就相對而言比較好了。例如在618活動時，我們是有很多促銷活動遊戲的。去年我們采用的是canvas渲染，但效果很不好，我們就降級到安卓機上采用dom渲染了，整個更改過程隻需要改動一行代碼即可。
<b>關于分享者:</b><b></b>
江成 現任天貓互動資深前端開發工程師，多年web前端互動開發經驗，熱衷于web圖形圖像技術，目前負責天貓互動web 3d、ar、vr等方面營銷和産品場景落地和hilo(阿裡巴巴html5開源互動遊戲引擎)的日常維護工作。