由天貓雙11VR邀請函引發的H5新技術學習

    今天，看了淘寶雙十一VR邀請函（http://tmall1111.im20.com.cn/index.html/http://www.jiawin.com/tmall-1111-vr-h5）頓時覺得眼前一亮，對於應用H5技術可以做出如此炫酷的效果表示震驚。那么，這個來源於VML 互動營銷公司的作品都應用了哪些H5技術，引發深思。通過搜索信息，對於了解及學習做如下記錄與總結：

1、Web GL(web graphics library) 3D繪圖標准

    WebGL 技術允許把 JavaScript 和 OpenGL ES 2.0 結合在一起，通過增加 OpenGL ES 2.0 的一個 JavaScript 綁定，WebGL 可以為 HTML5 Canvas 元素提供硬件 3D 加速渲染，這樣 Web 開發人員就可以借助系統顯卡來在瀏覽器里更流暢地展示3D場景和模型了，還能創建復雜的導航和數據視覺化。而three.js是一款webGL框架，由於其易用性被廣泛應用。如果要學習webGL，拋棄那些復雜的原生接口從這款框架入手是一個不錯的選擇。

（1）令人震驚的示例：http://www.open-open.com/news/view/9d8136/;

（2）學習資源：

     網站：http://www.hewebgl.com/；

           https://threejs.org/；

           http://www.ituring.com.cn/minibook/792；

     博客學習：http://www.cnblogs.com/shawn-xie/archive/2012/08/16/2642553.html；

2、tween.js

   攝像頭的前后移動就是通過我們手指滑動來實現的，這里它用到了 jstween 這個庫做一些緩動效果，使整體體驗更加綿滑。

　　http://www.htmleaf.com/Demo/201501271285.html

3、使用 Webpack 打包，整站圖片資源用的都是 base64（一種編碼格式），網站體積壓縮

4、手機陀螺儀，效果就是視角跟着手機的方位一起變化