星期五, 5月 21, 2010

Flash360環景+跑馬燈選單

跑馬燈的功能
在網頁上使用JavaScript早不是什麼特異功能
至於說在Flash中 也是司空見慣

只是對於只會按快門、點滑鼠的我而言
隨便要在360VR中加入一個簡單的功能
就足以讓我人仰馬翻~

以往都要跟處理虛擬導覽的業者合作
但往往因業主很實際(天馬行空)的要求
而又有時間壓力的考量
要四處求爺爺告奶奶的那種窘境...

求人不如求己
自己自強不息比較實在~

實際操作驗證 也能更深入理解"互動"的一些機制
接著慢慢添加一些亂七八糟 影響觀賞的垃圾資訊
之後再由繁復簡

嗯 抽掉功能 應該會比起增添功能要簡單
所以 先嘗試增接一些有的沒的功能
然後再慢慢篩選、整合~

底下就是連結與預覽畫面:
Flash360環景+跑馬燈選單 Demo連結

星期三, 5月 19, 2010

360環景與攝影

在從事360環景的研究中
經常會有一些愛好者詢問要如何拍攝製作

而最常詢問的就是相機與鏡頭的問題
事實上 用傻瓜相機也可以拍攝
只是 在後製接圖 會變得很麻煩!

而在進行影像拍攝
許多有學過攝影的人 卻對光影以及光學沒有概念...

其實 360環景是屬於視覺影像
而影像並不只限於攝影
在攝影發明之前 就已經有繪畫的存在

文藝復興時期 達文西就曾針對光影、透視有深入的研究
其後對於視覺的研究 又有分從生理與心理的層面進行探索
間單地說 就是眼球結構 光線與桿狀細胞、錐狀細胞的作用
訊息傳遞到大腦進行處理、理解
而當中 會有所謂"視覺錯覺"的存在...

跳脫艱深的理論
直接來探討攝影的機械式"捕捉影像"
光線明暗的問題就由感光度、光圈、快門的組合來解決

但除了光影明暗之外 還有一個"色彩"
早期的攝影 跟繪畫以"素描"入門一樣
既抽象又具體的黑白影像
正好可以用來簡化觀察光影跟立體景物的關係

攝影(photographic) 就是以"光"來作"畫"
當對光線有基本的概念與認識之後
再對色彩的呈現與變化 比較能有所掌握
當然 色彩學又是另外一個專業的領域
此外還有光學對於成像色彩的影響...

暫且跳過這些複雜的學理
直接跳到相機的白平衡設定
這對有摸相機的人會比較有概念~

就相機的白平衡而言
如果是進階的相機則會有RAW格式 可直接在後製時進行調整
例如 同一張畫面 可轉存相機預設的光線模式
如下 依序是 1.日光 2.陰天 3.陰影 4.鎢絲燈 5.螢光燈 6.閃光燈
這些都是概括性的光源...













自然光 有色溫的變化
而人照光源 相對於太陽 則有所謂的"演色性"(Color Rending)
所以 在攝影中除了白平衡(White Balance)之外
另外還有一個色彩補償(Color Compensation)

之後 數位影像紀錄檔案 還有色彩描述(Color Profile)
以及硬體所能包含色彩空間(Color Space)的色域(Gamut)...
如何在一堆不同的媒體之間進行色彩轉換
基本上就是一個大問題!
總之 色彩是一個相當艱深的學問~

跳過影像拍攝畫面 進入影像投影的問題
底下則是影像投影的方式
依序為 1.平面投影 2.圓柱面投投影 3.球面投影






從上面三種投影方式 大至能理解到鏡頭光學影像投射跟平常視覺的差異
不同的影像投射方式 跟長(寬)平面的寬景及有一定點的全景目標
以及後續的接圖都會有關係

就拼接逢圖 跟鏡頭光學所造成的收差、暗角、紫邊...
都有所關連
因此 要進行高品質影像 不免要花費許多工夫去進行影像修正的工作
這些就留待日後有空再來說明~

星期五, 5月 07, 2010

Flash360環景VR內嵌Google地圖

試做了一個在360VR內嵌入Google地圖的網頁
一方面要在地圖上標示360位置的圖標
另一個就是360VR本身的羅盤(指北針)

這個Demo總共放置了五個360景點
分別為:
1.七星山
2.台北101
3.台灣博物館
4.308原住民為尊嚴而走
5.中正紀念堂
(移動地圖至相關位置 則會出現標示點
點選標示點則可切換至該景點之360畫面)

因為是使用先前的影像檔
所以畫面的方位(指北針)不一定正確...

還有一個大問題 就是IE瀏覽器沒辦法正常執行
但FireFox, Chrome, Opera等瀏覽器則完全沒問題~

在360當中 除了電子地圖之外
應該是可嵌入更多的物件 提供更多的資訊內容
但 要如何整合一堆資訊 而又可避免畫面的紊亂
(360VR當中 有哪些是必要、不可或缺的資訊?)
這是需要好好思考的問題!

網址連結 360環場+Google地圖導覽

星期日, 5月 02, 2010

新港奉天宮媽祖祝壽大典空中鳥瞰

上週收到中研院廖泫銘博士寄來的一封email
提供一個2010大甲媽祖遶境進香活動網址
當中有一個zoomify的魚眼鳥瞰畫面
(見底下附圖中第二個畫面)

因為平常就是用魚眼在拍攝360環景
所以就抓了圖檔 再用Photoshop拼成大圖

接著再大約估算畫面的視角
修正魚眼變形的投影轉換

之後再補上天空的畫面
這樣子 就完成了一幅空中鳥瞰的360環景畫面

將平面影像轉換成Flash格式
就可在網頁上瀏覽此一360VR~
(見底下附圖中的第一幅畫面)

因為圖檔是從網路抓下來的 所以不是最高解析
此外 如果有原始的拍攝圖檔
應該可接出完整無瑕疵的高品質畫面
只是要花很多時間就是了...

從這360環景影像也證明了一點
無論在空中 或是海中浮潛
都是可拍攝、製作出沒有死角的球體360VR!

在這裡 要特別提一下
趣遊碗的彭喜執先生
在去年致贈給我他們工作室設計出品的三個不同地區的"碗"
特別在此要向彭先生及諸位工作同仁表達致謝感激之意!

網頁連結 新港奉天宮媽祖祝壽大典空中鳥瞰

(註 目前該網頁要用IE瀏覽器 才能觀賞360VR) 

設計能夠拯救報紙嗎?

TED網站TALKS IN LESS THAN 6 MINUTES
Jacek Utko designs to save newspapers影片

演講者Jacek Utko 提出一些關於報紙與設計的概念 頗值得發人深省

沒錯 最近電子書的新聞甚囂塵上
那麼紙張書面的印刷是否會面臨淘汰?

就影片中的觀點
如果把報紙當成一種設計型態的海報
那麼這個大面積的視覺影像效果
這就不是小小的電子書所能取代的

同樣地 通常我們再使用手機的小小螢幕瀏覽網頁
也是要不斷地縮放、捲動 來一覽整體的內容...
這對於資訊的吸收 是一種蠻大的干擾
(所以人機介面的設計 比硬體本身來的重要)

相對於人們對於宏觀或是微觀的資訊吸收
有著視覺感官與心理層面等各種的不同感受
也就是說 版面大小跟觀賞距離
對於傳統與未來的媒體生存 也是另一種決定性的因素

從另外一個觀點來看
類似項電子地圖 或是360環景影像
可透過縮放來檢視整體或是局部的影像資料
這又跟文字類的電子書有著不同的差別

在資訊爆炸與硬體設備不斷推陳出新的情況下
如何就資訊內容本身進行更深入 以及另類的思考
實在值得好好研究!

Shareaholic