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,感興趣的朋友可以給我留言一起交流學習一下。
完。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。