TML5可不是什么虛幻的概念，與其高談闊論的討論HTML5未來的趨勢和價值，不如一起研究一下現在的HTML5可以做出哪些成果，可以讓我們做出出色的產品。

Form Follows Function就是一個展示HTML5實現的網站，目前網站展示了14個作品，其中包括了交互操作以及視覺效果。這些效果本身并不是一個完整的產品，但是加入到產品中就能讓產品生色不少。

1、散景（Bokeh）

一種圖像的焦外效果，通過HTML5實現的這種效果可以加載在背景、字體浮現。

2、3D效果

3D西紅柿罐頭湯，可通過鼠標進行旋轉操作，同時底部有一個倒影效果，一個很優秀的交互效果示范。

3、宇宙全景圖

設定整個宇宙的場景，可以用360度觀察整個宇宙星云，這種實現方式呈現出的效果更接近Google的街景地圖。

4、像素化效果

這種效果用于圖片很有趣，而實際可利用到的領域，還有待探索。

5、螺旋效果

字體的旋轉效果，簡單的近乎一張GIF圖片，不過通過對文章的替換，可以輕易的轉換成各種各樣的文案展示。

6、結晶化濾鏡

通過鼠標可選擇結晶化的范圍，用于網頁可對界面直接做出更多的交互視覺效果。

7、色相混合

隨著鼠標移動而改變各個位置的色相，一種很簡單就能匯聚用戶視線的交互效果，不過在簡單的背景才更能體現這種效果的價值。

8、翻轉時鐘

一種時鐘的展示效果，結構非常簡單，而看上去也很清晰明了，適合嵌入到很多不同的頁面中作為實時時間的展示。

9、水紋倒影

一種視覺效果，在這個Demo中可以調節倒影波動的速度。這種效果適合制作Logo以及主頁的展示。

10、自由落體

“下雨的人”展示了一種自由落體的效果，可以用鼠標條件調節飄落的角度，提供了一種帶有物理效果的交互操作。這種功能特別用于游戲。

11、水面波紋

同樣是一種物理效果，可通過鼠標刺激水面波紋，在網頁上就能輕松實現。

12、樹的成長

一種應激操作的交互方式，點擊一次長出一棵樹，可用于網頁展示的附加效果。這種效果在視覺上有多種用法，網頁、游戲都可以。

13、字母雨刷

在屏幕上掃除字母的雨刷效果，初次看見感覺像是網頁刷新的過度畫面。

14、漸顯效果

通過一些雜亂無章的線逐漸顯現出一幅畫，中間的顯現過程很適合作為網頁加載的等待界面。

原文鏈接：http://www.gbtags.com/gb/share/2595.htm

前，雖然VR開發的硬件發展已經適應了需求，但內容卻非常單薄。我們都知道一部VR電影或者一款游戲的成本非常之大。想要VR產品走向大眾市場，，居高不下的成文無疑是最大的阻力。以HTML5為代表的Web前端開發技術的發展，或將帶領VR走出這樣的困境，讓VR更好的走向普通消費人群。目前，最新的Google Chrome和Mozilla Firefox瀏覽器已經加入面向HTML5技術的WebVR功能支持，同時各方也正在起草并充實業界最新的WebVR API標準。

Web可降低VR體驗門檻

Web技術不僅使創作VR的成本更加低廉，而且大大降低技術門檻。開發從業者不必完全從零開始學習VR，只需要將web開發的方向轉向VR，同時Web VR還可以更好地結合云計算技術，補足VR終端的計算能力，加強交互體驗。

可以肯定的是，Web擴展了VR的使用范圍，很多生活化的內容也納入了VR的創作之中，如實景旅游、街景地圖、虛擬購物等，其內容展示、交互都可以由HTML5引擎輕松創建出來。這無疑給其未來發展帶來更多想象空間。

Web開發者基數龐大

除了技術上的實現優勢，Web還能給VR帶來一股巨大的創新動力，因為它擁有著廣泛的應用范圍與龐大的開發者基數，讓VR不再只是產業大亨們的資本游戲，而是以平民化的姿態，進入廣大用戶日常生活的方方面面。 這就好比在智能手機剛剛面世的時候，手機應用完全沒有想現在這樣琳瑯滿目的應用，而web開發無論是前端還是后端，都有著大批的開發者，并且web技術自身的成熟與穩定，也更加注定了web開發者的VR使命。

WebVR 開發的方式

在Web上開發VR應用，有下面三種方式：

第一種HTML5+ Java Scnipt + WebGL + WebVR API

第二種傳統引擎 + Emscripten

第三種第三方工具，如A-Frame

面對VR的發展趨勢，或許在不久的將來web開發者便多了一個職業方向了吧，還是一款明星產品。

景

即Panorama，是一種新興的富媒體技術，它與傳統的音視頻、圖片文字等媒體的最大區別在于“可操作”和“可交互”性。

全景可以分為虛擬全景和實景全景，虛擬實景通常是利用maya等軟件制作的模擬現實的場景，例如某個建筑物通過3D建模制作的虛擬實景；實景全景則是利用全景相機、單反或者街景車拍攝并經過特殊拼切處理的實景照片。

注：本篇文章整理的知識點為實景全景圖。

全景圖

全景圖可以主要分為：球形全景圖、柱形全景圖和立方體全景圖。

1. 球形全景圖（Sphere）

球形全景圖是最常見的一類全景圖，標準的全景圖包含了360°x180°的范圍，它包含了天和地以及鏡頭水平轉一圈所看到場景，也就是水平360°、垂直180°。球形全景圖的長寬比應為2:1，下圖為一張球形全景圖素材。

2. 柱形全景圖

柱形全景圖通常是指沒有拍天和地，或者沒拍夠360°x180°的全景圖，例如我們平時用手機相機拍攝的全景就是柱形全景圖，在拍攝中僅是讓鏡頭水平移動。

3. 立方體全景圖（Cube）

立方體全景圖就是代表了“前后上下左右”六個面的六張立方體切片圖，利用這樣的六張圖片通過全景拼接軟件可以拼成球形全景圖。當然，你也可以將球形全景圖切割成六張立方體全景圖，兩者相互之間是可以進行轉換的。

全景漫游/全景虛擬現實

是指基于全景圖的真實場景虛擬現實技術，觀看者可以通過使用鼠標拖動、陀螺儀、重力感應以及VR頭顯設備進行全方位互動式的場景觀看，達到身臨其境的效果。這是一種比較初級的虛擬現實技術，由于其開發成本低廉而深受關注，應用領域覆蓋了旅游景點、酒店賓館、室內裝修設計展示、建筑房地產等。

拍攝硬件

全景拍攝硬件主要有：全景相機、單反相機、魚眼鏡頭、全景云臺、三腳架或者手機等，例如使用GoPro相機拍攝全景，航拍的話還可以使用無人機掛載拍攝設備進行空中拍攝。

全景制作

全景制作通常可以分為以下幾步：

1. 利用全景相機、單反等專業的設備拍攝全景圖素材，并導出。

2. 利用krpano、pano2vr、PTGui等軟件處理或生成全景圖。

3. 利用Web技術制作可操作可交互的全景圖。

下面將整理幾個全景圖的處理制作方法

一、CSS 3D Panorama（全景）

這種方式其實是利用了CSS3 Transform，是CSS3 3D的一種應用場景，之前火爆朋友圈的淘寶造物節就是這樣的一個使用案例。詳細的技術分析大家可以查看凹凸實驗室的這篇文章：CSS 3D Panorama - 淘寶造物節技術剖析 https://aotu.io/notes/2016/08/24/2016-8-24-css-3d-panorama/

二、使用Three.js

Three.js是用JavaScript編寫的WebGL第三方庫，提供了豐富的3D顯示功能。這里主要給大家推薦一款基于Three.js的360°x180°全景圖預覽js插件：Photo Sphere Viewer，詳細的使用方法可以查看這篇文章：基于Three.js的360X180度全景圖預覽插件 http://www.html5cn.org/article-8621-1.html?utm_source=tuicool&utm_medium=referral

三、使用Pano2VR

Pano2VR是一款全景制作工具，可以將全景圖像轉換成HTML5、Flash和QuickTime VR等格式，界面操作與許多應用軟件相似。該軟件的基本操作方法大家可以查看下我的《Pano2VR學習筆記》文集 http://www.jianshu.com/notebooks/6503326/latest

四、使用krpano

krpano是一款專業的全景制作軟件，可以說是為全景而生的。用戶在使用時只需要將全景圖用鼠標拖動到一個批處理（droplet）文件的圖標上，幾十秒之后即可生成全景漫游文件，默認文件夾命名為vtour，效果如下所示：

默認生成的全景圖包含了基本的全屏、放縮、左右移動以及VR模式等功能，krpano本身是viewer(瀏覽器)+tools(工具)，并且它是沒有GUI(圖形用戶界面)的，而國內像720云、得圖云、airpano等帶有操作界面的全景平臺都是利用了krpano的技術。學習如何使用krpano制作全景大家可以瀏覽：krpano中文網 http://www.krpano360.com/，上面的教程比較全面，非常適合初學者入門。默認生成的全景圖只有基本的功能，如果要利用krpano做定制、個性化的全景則你還需要學習一下krpano xml這門語言。

五、使用Kolor Panotour Pro

由于krpano沒有可視化的操作界面，Kolor Panotour Pro則是使用了krpano內核的可視化全景漫游制作軟件，它使用了krpano的viewer。使用時基本上不需要有編程基礎，而且提供了豐富的模塊和功能，這對于沒有編程基礎又想使用krpano技術的用戶是一個不錯的選擇。

總結

本篇文章僅對全景的基本概念、拍攝以及制作處理方式等內容做了歸納整理，許多資料網上都可以找到，不作任何商業用途與廣告推廣~

本人最近也一直在研究全景制作，目前用的是krpano，感興趣的朋友可以給我留言一起交流學習一下。

完。