修 平 科 技 大 學

資訊管理系

3D幻視影像處理系統

組長：BF99033 王嘉宏

組員：BF99017 陳翔瑋 BF99904 賴正彥 BF99003 陳旭瑋

指導教師：張 夏 青

中 華 民 國 一 ○ 二 年 十 二 月

目錄

第一章 前言 ............................................... 1

1–1 研究動機 ............................................ 1

1–2 研究目的 ............................................ 2

1–3 系統使用環境 ........................................ 4

1–4 研究限制 ............................................ 5

第二章 文獻探討 ........................................... 6

2–1 JAVA ................................................. 6

2–1–1 Java簡介 ...................................... 6

2–1–2 Java的特點 .................................... 6

2–1–3 本次專題選用 Java的原因 ........................ 8

2–2 幻視藝術 ........................................... 10

2–2–1 幻視藝術簡介 ................................. 10

2–2–2 幻視藝術常用技巧 .............................. 11

2–3 幻視藝術的現況 ..................................... 17

2–3–1 幻視藝術在台灣的發展 .......................... 17

2–3–2 首位華人 3D藝術家：蘇家賢 ..................... 18

第三章 系統功能 .......................................... 19

I

3–1 工作分配 ........................................... 19

3–2 工作進度 ........................................... 20

3–3 MVC基本介紹 ....................................... 21

3–3–1 MVC的優缺點 .................................. 22

3–4 轉換公式 ........................................... 23

3–5 系統架構圖 ......................................... 25

3–6 系統流程圖 ......................................... 26

第四章 系統說明 .......................................... 27

4–1 系統特色 ........................................... 27

4–2 系統使用對象 ....................................... 28

4–3 系統功能簡介 ....................................... 28

4–4 操作介面說明 ....................................... 32

4–5 操作流程介紹 ....................................... 34

4–6 成果展示 ........................................... 51

第五章 問題與討論 ........................................ 53

第六章 結論 .............................................. 54

參考文獻 ................................................. 56

II

圖目錄

圖 2-2-1 前進色與後退色 1 .............................. 11

圖 2-2-2 前進色與後退色 2 .............................. 12

圖 2-2-3 輕色 ......................................... 13

圖 2-2-4 重色 ......................................... 13

圖 2-2-5 收縮色 ....................................... 14

圖 2-2-6 膨脹色 ....................................... 15

圖 2-2-7 色彩的心理恆常性 ............................. 17

圖 3-4-1 側面圖 ....................................... 24

圖 3-4-2 正面圖 ....................................... 24

圖 3-5-1 系統架構圖 ................................... 25

圖 3-6-1 系統流程圖 ................................... 26

圖 4-3-1 原圖 ......................................... 29

圖 4-3-2 兩面牆轉出圖 ................................. 30

圖 4-3-3 兩面牆成果 ................................... 30

圖 4-3-4 三面牆轉出圖 ................................. 31

圖 4-3-5 三面牆成果 ................................... 31

圖 4-4-1 使用者介面 ................................... 32

圖 4-5-1 選擇圖片 1 .................................... 34

III

圖 4-5-2 選擇圖片 2 .................................... 35

圖 4-5-3 載入圖片 ..................................... 36

圖 4-5-4 調整角度 ..................................... 39

圖 4-5-5 裁切進行中 ................................... 40

圖 4-5-6 裁切結束 ..................................... 41

圖 4-5-7 轉換方式選單 ................................. 43

圖 4-5-8 成品展示 ..................................... 43

圖 4-5-9 檔案選單 ..................................... 47

圖 4-5-10 儲存檔案(整合) ............................... 49

圖 4-5-11 儲存檔案(個別)-左牆 .......................... 49

圖 4-5-12 儲存檔案(個別)-地板 .......................... 50

圖 4-5-13 儲存檔案(個別)-右牆 .......................... 50

圖 4-6-1 水杯 ......................................... 51

圖 4-6-2 小貓(三面牆) ................................. 51

圖 4-6-3 小貓(兩面牆) ................................. 52

圖 4-6-4 杯子 ......................................... 52

IV

表目錄

表 3–1–1 工作分配表 .................................... 19

表 3–2–1 工作進度表 .................................... 20

V

第一章 前言

1–1 研究動機

一般圖片都是以平面方式呈現，但實際的物件卻是立體的，因

此在觀看圖片時便會使眼睛所獲得的資訊與真實的實物間產生差

異。將平面圖片立體化，可以打破視覺上平面的限制，讓觀看者能

獲得身歷其境的感受。

而目前市面上有一些 3D效果影像是結合 3D眼鏡來呈現出其

3D的效果，很容易讓人有要呈現 3D特效就得結合電子 3C產品刻

板印象。但今年四月因緣際會下得知台中世貿有展出３Ｄ幻視展，

裡面所展示的幻視作品是利用美術的技巧來讓人的眼睛和大腦發

生錯覺，藉此產生 3D效果。此時發現，要將平面影像立體化不一

定只能使用 3D眼鏡來做到，用藝術手法一樣也能達成。

在觀賞展覽作品中，認真仔細的觀察出這些幻視作品是利用了

一些出圖角度、繪畫技巧、光線折射、大小遠近等技巧來呈現出

3D錯覺效果，在觀賞的同時，也更清楚了解到畫家們的觀點以及

想要呈現出的 3D視覺效果是需要花很多的時間、下很大的功夫，

才能完成一幅畫，所以要完成一幅作品是需要很大的成本與時間的，

1

所以一個作品的成本是昂貴的，對畫家來說經濟效益也是不高的。

所以如果能縮短他們製作的成本，就可以有更多的產能以及新的創

作作品，對幻視藝術來說也是一項創新。另外，對於一般沒有像畫

家有精湛的繪畫功夫的人而言，相信藉由現今的電腦繪圖科技，應

該也可以利用電腦程式來製作出同樣有３Ｄ視覺的２Ｄ平面圖。因

此，有了本專題的研究動機，試想將牆面幻視藝術的製作藉由電腦

程式的能力來縮短製作時程，產生更多的經濟效益。

1–2 研究目的

由於人類渴望體驗到更加逼真和獨特的 3D效果，所以現今的

3D影像發展得十分迅速，幾乎所有的電影院都能播放 3D電影，甚

至是家中的電視、電腦到隨身攜帶的智慧手機、掌上型遊戲機都可

以呈現出 3D效果。比起傳統的 2D影像顯示，新興的 3D影像顯示

有更多元的應用，包括電影、遊戲、拍照、教育等領域。其中有幾

種方法能夠將平面圖形產生出 3D效果，包括深度傳感器、三角立

體視覺、3D圖形渲染等。上述的方法都有個共通的缺點，需要特

定的設備且花費昂貴的金額。

3D立體畫起源於 80年代日本的幻視藝術運動，利用觀看者視

覺與平衡感所產生的一種錯覺，再配合燈光折射或是觀看角度的不

2

同，所產生的視覺認知盲點與觀賞作品的心理感知也隨之產生變化，

製作出擁有真實感的情境，是一種融合透視學、幾何學及心理學的

藝術作品，也算是擁有藝術性、娛樂性的全新型態的藝術創作。雖

然近幾年，3D影像軟體的發展非常迅速，但是對於 3D幻視影像的

處理，仍停留在人工創作階段，目前在市場上未見有專用的電腦軟

體可以來製作 3D立體圖。所以本研究的目的是希望撰寫一套專用

的軟體系統，能以現有的影像經過系統後製成一幅 3D幻視的立體

影像。系統內的影像是直接拿現有的 2D影像輸入而來的，而不是

在系統中繪製出來，因為繪製圖畫是需要專業的技能才能勝任，並

非一日即可促成的，而且這方面的現有軟體市面上已經有很多，功

能也都很強大，所以本研究不以此為發展目的。一般的影像要繪製

到牆面上呈現出立體影像，其間最重要的關鍵就是空間的深度感，

創作者完全手繪時需要去計算空間的立體感，所以必須很注意圖形

的變形扭曲等，若此部分可以經由電腦科技來協助，就可以在繪畫

2D圖時，不需要去煩惱該如何計算空間的深度，只需要全神貫注

的創作，將平面立體化的工作則交給程式去完成。如此就可以有更

多的時間來創作，產出更多的作品以提升經濟效益。

本研究利用 JAVA語言為基礎並以 Eclipse(日蝕)為開發平台，

系統主要目的就是藉由將影像延伸扭曲及視角的改變讓圖片呈現

3

出立體的效果。研究的成果是希望能夠協助一般人在攝影或繪圖之

後製完成部分能夠節省較多的時間，並將省下的時間創作出更多的

作品，思考更多不同的創意、進而讓創作者發揮出無限的可能。此

系統更可以有廣泛的用途，例如能與廣告業界合作，讓他們的廣告

刊版獨樹一格，在充滿琳瑯滿目的廣告牆裡吸引住眾人的目光，或

是電影業者製作劇照的大型看板，用來提共影迷拍照留念並且達到

宣傳效果。

1–3 系統使用環境

開發者需求:

硬體需求：

1. CPU：PENTIUM II 以上

2. 記憶體：512M RAM以上

3. 螢幕：螢幕建議 17吋以上、最佳解析度 1024*768。

軟體需求：

1. 作業系統：WindowsXP(含)以上系統

2. JDK:JDKJava SE 7u45(含)以上版本

3. 日蝕:Eclipse Standard 4.3.2,(含)以上版本

4

使用者需求:

硬體需求：

1. CPU：PENTIUM II 以上

2. 記憶體：512M RAM以上

3. 螢幕：螢幕建議 17吋以上、最佳解析度 1024*768。

軟體需求：

1. 作業系統：WindowsXP(含)以上系統

2. JDK:JDKJava SE 7u45(含)以上版本

1–4 研究限制

幻視圖需要配合最佳觀看視角才能呈現出最完美的立體效果，

因此觀看者需要在特定位置，無法隨意移動。目前本系統較適用於

單一物件，效果較佳，多重物件或圖層過多的影像，其焦點不容易

呈現立體影像，較不適用於本系統，因此不是任何的圖片都可以藉

由本系統達到立體化的效果。也因為本系統的主要目的是針對 3D

幻視藝術的圖形，而這類圖形本身就是有特定的限制，為了達到立

體的效果，大多是以單一物件為主來做出 3D幻視的效果，所以這

項限制對製作 3D幻視藝術圖形而言是沒有影響的。

5

第二章 文獻探討

2–1 Java

2–1–1 Java簡介

Java是幾乎所有類型之網路應用程式的基礎，並且是開發和

設計行動裝置、遊戲、Web 內容以及企業軟體的全球標準，從膝上

型電腦到資料中心、從遊戲機到科學用超級電腦、從行動電話到網

際網路，Java 均無所不在(Java 官方網站，2013)。Java在 1995

年由美國加州的昇陽公司所推出，是一種能跨平台的程式語言，後

來昇陽被甲骨文公司併購，Java也隨之成為甲骨文公司的產品。

2–1–2 Java的特點

講到Java程式語言必須提及Virtual Machine虛擬機器(VM)，

虛擬機器就像是以軟體虛擬出一個 CPU的環境，一般 C或 C++是真

實的在 CPU上面執行，可以用簡易的方式編譯、處理低階記憶體，

不需要任何執行環境支援便能執行的程式語言；而 Java是在由軟

體模擬出來的虛擬機器上執行而虛擬機器對於 Java的效能、安全

性、可移植等等都會有相當核心性的影響 (洪維恩，2005年)。

而從物件導向的特色分析 C、C++與 Java，我們當然都知道 C

6

語言不具備物件導向的特色，物件導向是未來軟體開發的主流、廣

泛應用於企業級 Web應用開發和行動應用開發，Java語言結構的

設計可以讓危險或無用的程式碼降到最低，語法更加嚴謹、安全且

Java的編譯器可以在編譯時期查到許多錯誤，以致撰寫上比起 C、

VB來說更容易上手，大幅減低程式設計者的困擾，這也許是 C、C++

語言無法作到的(洪維恩，2005年)。

另一個 Java的優勢是”跨平台”，一般當進一步被問到跨平

台的差異時，就是所謂的「作業系統架構不同」。要在不同的作業

系統上開發程式，如果有寫到多執行緒，需要參考各作業系統相關

的寫法，然後根據不同系統來寫。每台電腦能理解的程式語言都不

同，需要一台翻譯機翻譯程式語言，透過解讀成所有個別電腦懂的

形式的概念放在 JAVA上，那台翻譯機就是所謂的 JVM(Java

Virtual Machine)。Java透過編譯器(compiler)將 Source Code(原

始碼)編譯成與機器無關的 Byte Code位元組碼，這是給予 JVM執

行的一種虛擬機器碼。編譯的過程也會幫忙檢查寫的程式碼有沒有

錯誤，用來編譯的編譯器程式叫 javac，經過 compiler之後，JVM

會將 Byte Code轉換成電腦能理解的形式來運作(洪維恩，2005

年)。

7

就算程式發生錯誤，Java擁有特殊的「多執行緒」機制可以

在同一時間執行不同的程序。「垃圾收集」機制可將無用的變數所

佔用之記憶體釋放。「例外處理」機制可讓程式碰到非正常處理狀

況時，視情況將例外拋出，使得程式不會因此中斷執行(洪維恩，

2005年)。最後 Java的語法簡潔、勻稱、容易撰寫且易於維護，

C/C++可以做的，Java也幾乎能達成，甚至可以用更為簡潔的程式

碼來表現。

2–1–3 本次專題選用 Java的原因

在求學過程中接觸過三種程式語言，分別為 Visual Basic、

JAVA和 C++。本研究會選擇 JAVA而不使用其他語言來撰寫的原因

是因為 Visual Basic雖然在撰寫使用者介面較為方便容易，但是

不適合開發需要進行繁重運算的程式，由於本研究的目的是要將平

面圖立體化，預計將會有比較複雜的運算，所以 VB並不適合用於

本專題。

剩下的選擇是 C++和 JAVA。C++是直接編譯成 CPU可以理解的

機械碼並直接執行，雖然此做法效能在高階語言中為最快，但直接

與底層機器溝通會有以下的缺點：第一是可移植性，原始碼編譯成

機械碼之後，便無法直接拿去其他的機器上執行。第二由於 C++直

8

接與底層機器溝通，電腦軟硬體之間沒有抽象分離將實作加以隱藏

及保護，檔案刪除、記憶體損害等惡意的破壞會變得十分容易。而

Java會先將原始碼編譯成跟機器無關的位元組碼，再以虛擬機器

執行位元組碼，無論任何平台的虛擬機器看都是同一份位元組碼，

也因此 Java可以做到跨平台的效果，只要寫一次便可以在任何平

台上執行，也因為程式在虛擬機器上執行，所以眾多的保護機制能

夠在這一層發揮效果，程式執行時讓軟硬體分離並加以保護。

因此本專題得到的結論是，C、C++是高效能且直接可以與底層

硬體溝通的語言，較適合拿來設計作業系統，而 Java是真正安全、

跨平台的語言，適合拿來寫與機器無關、應用軟體、網路應用程式、

跨平台的程式等。且未來也希望本程式可以在麥金塔或是智慧型手

機上做跨平台的應用，因此最後選擇了 JAVA最為這次專題所使用

的程式語言。

9

2–2 幻視藝術

2–2–1 幻視藝術簡介

幻視藝術打破立體繪製與二維視覺的界線，讓觀看者的

視覺產生錯覺(國立台灣科學教育館官方網站，2013)，是一種融

合了透視學、心理學、幾何學、設計學的特殊藝術。

它將傳統的繪藝術轉變成全新的藝術形式。日本 TRICK

ART 的大師劔重和宗認為：「藝術不該被束在高閣，藝術應

該是讓懂得欣賞的人或不懂欣賞的人不管是誰都能和它很

親近」。幻視藝術不僅僅只能用來觀看，更可以讓觀看者親

生體驗並與之互動，融入這些幻視圖成為一個獨一無二的藝

術品（資訊分享，2011）。

藝術家們可以藉由「遠近法」、「輕色與重色」等藝術

技巧再加上創新的想法，可以創作二維立體圖，使觀看者隨

著視野角度的不同，心理的認知與視覺的盲點也隨之變化，

真實與虛偽相互交融，形成出一種令人難以置信的視覺享

受。

10

2–2–2 幻視藝術常用技巧

本專題經由研究中了解，幻視藝術家們常利用「顏色的

心理感覺」、「空間與幾何學」、「大腦生理錯覺」等技巧

來創作幻視圖，藉由這些手法的互相配合再搭配上燈光折射

與巧思創意，使觀看者產生視覺認知上的錯覺來產出富有創

意又的作品，以下是常用技巧的說明與介紹。

(1)前進色與後退色：色彩波長由長至短的順序為紅橙黃綠藍紫。

波長較長的色光在視網膜後方集聚焦點所以感覺比較近，相反的波

長較短的色光在視網膜前方集聚焦點所以感覺比較遠(李銘龍，

1994)。色彩距離感的應用通常是在兩種顏色以上互相搭配比較下

才會有明顯的效果，巧妙的運用前進後退色可以產生寬空的空間感。

如圖 2–2-1與圖 2–2-2之差異。

圖 2–2-1前進色與後退色 1

11

圖 2–2-2前進色與後退色 2

黃色給人的感覺較近，紅色則較遠，因此圖 2–2-1感覺像凹

進去，圖 2–2-2則感覺像凸出來。

(2) 輕色與重色：明度愈高給人感覺愈輕，明度愈低則感覺愈重。

明度低的顏色，感覺愈重，明度高的顏色較輕。暖色系的色彩較重，

涼色系的色彩較輕。配色時輕重色的位置會影響畫面，重色在上方

會讓人感到動搖，重色在下方則感覺穩重，因此通常天花板是白色

的，而正式典禮的場合地毯則是深色的，給人莊嚴穩重的感覺(李

銘龍，1994)。

12

圖 2–2-3輕色

圖 2–2-4重色

明度高的的淡色讓人感覺輕(如 圖 2–2-3)，明度低的深色澤

感覺比較重(如 圖 2–2-4)。

(3) 色彩的觸感：明度高彩度低的顏色如淡黃色使人感覺柔軟，明

13

度低彩度高的顏色如深藍色讓人感覺堅硬，這類感覺通常從與物體

材質接觸的經驗而來(李銘龍，1994)。

(4) 膨脹色和收縮色：暖色系、前進色和明亮的色彩，有擴散的效

果看起來比實際上大稱為膨脹色，寒色系、後退色和較深的色彩，

有收縮的效果稱為收縮色(李銘龍，1994)。只要運用好此技巧便可

以讓物體看起來比實際上還要來得大，例如穿著亮淺色衣服會讓人

看起來比較胖，深暗色則看起來比較瘦。

圖 2–2-5收縮色

14

圖 2–2-6膨脹色

明亮度大的(如 圖 2–2-6)跟明亮度較暗的(如 圖 2–2-5)相

較明亮度大的看起來也比較大。

(5)空間：若要在一個平面之上表現出立體空間的真實形體，就需

要以透視原理等方式來呈現其形體的深度(邢益玲，2011年)藉由

藝術手法讓平面的影像產生深度。

(6)生理錯視：由視覺疲勞而產生的視覺暫留現象。人類視覺所

接受的影像會在腦裡短暫的留存，此種現象稱為視覺暫留

(Persistence of Vision)(國家教育研究院，2012)。人體的感官

在受到長期的刺激下會鈍化，產生補色和殘像生理現象。如果持續

的以某種色光刺激視網膜上的細胞，便會產生該顏色之疲勞，因此

當眼睛離開該顏色後，部分細胞暫失去作用，未受到刺激的細胞則

開始反應，因而出現補色的殘像。所以幻視圖可以利用此生理錯視

15

的技巧來產生立體感。

(7) 認知錯視：人對於已知物體的認知來自特徵及主要輪廓外型的

記憶，人腦會將印象相似的形狀及物件做比對來判別物品，因此只

要人們看見一個物體的瞬間只要和記憶中的特徵相似，人們就會直

接對該物做出判讀。也就是說人們會對第一印象產生強烈的認知，

進而忘記仔細的觀察整體。所以只要在不破壞認知特徵的狀況下，

加上其他的特徵，大腦便會產生誤判(游伯龍，1999年)。因此就

可以利用此認知錯視來使觀看者透過鏡頭誤判所看到的實體。

(8) 色彩的心理恆常性：人們在光線為弱或是在有明顯色偏的時候，

還是可以辨認物體原本的色彩。例如在昏暗的房間裡還是可以判別

出衣服的顏色，但是事實上人們所分辨的顏色和實際顏色是不同的。

在黃燈的燈光下，雖然白紙已經受到光線影響而成為了黃色，但是

一般人還是會認為那是一張白紙，不會以為是黃紙，說明了一般人

在感覺色彩時，不只靠視覺感官，更受到記憶和經驗的心理影響(李

銘龍，1994)。

16

圖 2–2-7色彩的心理恆常性

雖然馬路因為路燈顏色的關係變成橘色的，但是大腦還是會告

訴觀看者馬路是黑色的。

2–3 幻視藝術的現況

2–3–1 幻視藝術在台灣的發展

3D 幻視藝術在台灣越來越受到大家的注目與喜愛，在全

台各地都會舉辦相關的展覽，目前台北科教館從 2013 年 10

月開始奇幻不思議 3D 幻視系列-鬼太郎特展，以幻視藝術結

合了大家喜愛的動漫人物，並帶給大家新奇的視覺享受。

17

而除了這些展覽之外也可以在戶外看見大型的 3D 幻視圖，

不論是政府或企業都會借此吸引眾人的目光並達到宣傳的效

果。

2–3–2 首位華人 3D藝術家：蘇家賢

蘇家賢從小便熱愛繪畫，父母讓他循著這項興趣自由發展，也支持

他就讀美工科系。他曾當過電視台綜藝節目的美工，也在百貨公司擺攤

做紙黏土人形公仔的立體雕塑與教學；後來憑著他從立體雕塑中鍛鍊出

來的功力，轉接製作高雄燈會的大型燈具模型，而這樣的經驗累積和歷

練，更讓他在無形中累積了日後 3D創作所需要的能量。

在 2010年時高雄某家建設公司邀請國際３Ｄ立體繪畫大師 Kurt

Wenner來現場創作。這對過去關注３Ｄ立體繪畫的蘇家賢來說，是項

不可多得的好消息。蘇家賢表示「Kurt Wenner是我崇拜的大師，看到

他做立體繪畫創作，我也想嘗試看看。」當時 Wenner為高雄創作的《海

洋龍宮》所畫的龍，混有西方人對龍的象徵，感覺上不像真正東方龍的

造型。他覺得西方人無法完全掌握東方美感的原味與精隨，如果想要表

現出道地的東方文化還是需要在地的藝術家親自操刀，這也促使蘇家賢

決心投入３Ｄ立體繪畫。他要用自己的話來成像出台灣的美，用自己的

作品贏得全球對台灣的肯定(商業週刊官方網站，2013)。

18

第三章 系統功能

專題製作的分工是根據每個人的特點去做分配及發揮。例如擅

常寫程式的就製作系統規劃及系統製作，比較擅長收集資料則製作

文獻探討，各司其職。

3–1 工作分配

表 3–1-1 工作分配表

學號 姓名

負責工作內容

定

期

開

會

專

題

構

思

與

探

討

資

料

收

集

與

分

工

程

式

設

計

與

撰

寫

程

式

測

試

與

除

錯

撰

寫

文

件

上

台

發

表

BF99033 王嘉宏 V V

V

V V

BF99017 陳翔瑋 V V V V

V V

BF99904 賴正彥 V V V

V V V

BF99003 陳旭瑋 V V V

V

V

19

3–2 工作進度

表 3–2-1工作進度表

日期

項目

2013年

03

月

04

月

05

月

06

月

07

月

08

月

09

月

10

月

11

月

12

月

定期開會

專題構思與探討

資料收集與分工

程式設計與撰寫

程式測試與除錯

撰寫文件

上台發表

灰色為預計時間 黑色為實際時間

20

3–3 MVC基本介紹

MVC模式最早由 Trygve Reenskaug在 1978年提出，是全錄帕

羅奧多研究中心（Xerox PARC）在 20世紀 80年代為程式語言

Smalltalk發明的一種軟體設計模式。主要目的就在於簡化軟體開

發的複雜度，以一種概念簡單卻又權責分明的架構來貫穿整個軟體

開發流程，透過「商業邏輯層」與「資料表現層」的切割，讓兩部

分的資料切割開來，以撰寫出更模組化，可維護性高的程式碼。（黃

保翕，2010）

MVC讓軟體開發的過程大致切割成三個主要單元，分別為

Model（模型）、View（介面）、Controller（控制），而這三個單字

的縮寫便簡稱為 MVC。其定義如下：

Model（模型）:負責定義資料格式與資料存取的介面，

包括商業邏輯與資料驗證。

View（介面）：負責使用者介面（User Interface；UI）

相關設計，包括輸入與輸出。

Controller（控制）：負責控制系統運行的流程、操作邏

輯、事件回應、錯誤處理等。

21

3–3–1 MVC的優缺點

MVC 架構的優點就在於它把一個功能區分成許多的階段。負責

View 部分的只需要專注於使用者介面，而 Model 只需要確實完成

要求，並且能讓資料正確地被操作。而最後，Controller則是對

於事件的回應及處理。雖然 MVC可能要花費比較多的時間與精力來

進行前置規劃作業，但是一個良好的架構可以讓未來的程式維護變

得十分容易。如果不了解其原理及思考方式，硬是要把功能拆成

MVC 三個部分，反而會讓往後的程式維護變得比原來的更加困難。

甚至還會用花費更多不必要的心力在於開發上。

而 MVC架構的缺點則是，由於 MVC並沒有非常明確的定義，所

以想要完全理解 MVC架構並不是非常容易。使用 MVC模式需要精心

的計劃，且它的內部原理也較為複雜，所以需要花費時間去思考，

因此 MVC模式較不適合小型或是中等規模的應用程式。這樣只會帶

來更多的工作量，增加應用的複雜性。

本專題會使用 MVC架構的原因是希望能夠藉由更加結構化、更

加工作分明的方式撰寫程式碼，讓後續程式運行上的問題或功能上

的增加能達到簡易的維護及編輯。

22

3–4 轉換公式

根據幾何學定理(相似三角形 Side-Angle-Side)，兩個三角型

若有一組對應角的角度相等，且夾此等角的兩組對應邊成比例，該

三角型為相似三角形。可以透過相似三角形公式求得三角形邊長的

值，如圖 3-4-1側面圖所示，H等於鏡頭的高度，L等於鏡頭的距

離，Y等於圖片需要放置在地面上的區塊長度，則 Fy則是 y長度

所變化的垂直位置，也就是 y值投影在地面上的位置。所以藉著載

入圖片的高、寬以及鏡頭的高度、與牆面的距離等值，套用相似三

角形的公式，以求得其圖片的新位置。

根據相似三角形的公式，本研究可得到方程式(1)公式，y(原

圖片上的位置)比上 Fy(地板上的新位置)等於 H(鏡頭的高度)比上

L-Fy(鏡頭的距離減去地板上的新位置)，如圖 3-4-1所示。因此可

得到方程式(2)之結果來求得 y值。同理可證，方程式（3）、（4）

則可以算出ｘ值。藉由算出(x,y)值來找到在地板上的新座標值

(Fx,Fy)的圖形顏色值要由(x,y)座標值來取得。

𝐲𝐲𝐅𝐅𝐲𝐲

= 𝐇𝐇𝐋𝐋−𝐅𝐅𝐲𝐲

(1)

𝐲𝐲 = 𝐅𝐅𝐲𝐲 ∗ ( 𝐇𝐇𝐋𝐋−𝐅𝐅𝐲𝐲

) (2)

23

𝐅𝐅𝐅𝐅𝐋𝐋−𝐅𝐅𝐲𝐲

= 𝐅𝐅𝐋𝐋 (3)

𝐅𝐅 = 𝐅𝐅𝐅𝐅∗𝐋𝐋𝐋𝐋−𝐅𝐅𝐲𝐲

(4)

圖 3–4-2 正面圖

圖 3–4-1 側面圖

Fy

L

H 鏡頭

Y

y

折點

24

3–5 系統架構圖

使用者介面

載入圖片 參數設定

轉換

儲存圖片

圖 3–5-1系統架構圖

25

3–6 系統流程圖

顯示錯誤訊

輸

入

錯

誤

檢查參數是否正確

顯示到畫面上

正確

輸入參數

進行轉換

儲存

開始

結束

圖 3–6-1系統流程圖

26

第四章 系統說明

4–1 系統特色

本系統的設計理念強調為專用軟體，簡潔整齊的設計和順暢的

功能性。正因為是專用的系統，所以在操作介面使用簡單明瞭的設

計，讓使用者能以簡單有效率的方式輕易操作。在使用時符合直覺

性操作，當使用者開起程式的時候便可以直接匯入想轉化之影像，

填入相關之參數後按下瀏覽鍵，即可在展示視窗下直接看到轉換的

成果，輕鬆的幾個步驟就能使2D的平面影像轉換成3D的立體圖像。

當然本系統仍會有基本的影像編輯及修改的功能，可以做到移動、

放大縮小等功能，讓部分需要調整的影像也可以在系統內獲得解決，

而不需要再使用額外依賴的繪圖軟體來做編修。

編寫過程使用 MVC，應用程式被分成三個核心部件，一支程式

擁有一個好的架構，就能有較好的穩定性以及擴充性，使用 MVC

模式除了能有效的達到程式內部的工作分配，並讓未來的程式維護

變得十分的容易。本系統的設備使用需求很低，幾乎可以在任何市

面上的電腦執行，就算是蘋果電腦的作業系統也能藉由 JAVA的跨

平台來打破限制，隨時創造無限的契機。也因為目前在市面上還尚

未有專門為此領域所開發的專用軟體，相信這創意可以為此行業帶

27

來開發先鋒。

4–2 系統使用對象

本系統主要的對象是：1.繪圖者，包括畫家、漫畫家等，繪圖

者有意將繪畫出的作品轉換為立體化的過程中，不用為了將相同的

作品立體化而再花上一樣甚至更多的時間來產出；2.利用數位、單

眼相機拍攝者，使用者本身可能不具備繪圖軟體、繪圖技能，甚至

沒有立體空間感，但此系統可將使用者拍攝到的影像，簡單幾個步

驟將其立體化，就可使該影像呈現出不同的特色，應用在牆面藝術

上。

4–3 系統功能簡介

本專題程式可將一般照片或圖片轉換成2面牆或是3面牆的圖

片，藉由鏡頭呈現出立體影像。系統基本功能有載入圖片、輸入高

度與距離等參數、轉換以及輸出圖形。操作步驟敘述如下：載入欲

轉換的影像後，可進行影像的調整，最後輸入環境參數（牆面的寬

度及高度，和鏡頭的距離與高度)，按下預覽即可顯示出轉換後的

影像，可在預覽處以滾輪做出放大及縮小的預覽效果，若結果滿意

則可按下”儲存”，即可將此影像輸出成圖片檔。如原圖(圖 4–3-1)

轉換為 2面牆的結果(如圖 4–3-2)、轉換為 3面牆的結果(如圖

28

4–3-4)。

圖片檔印出後，依折線對折放在牆邊，在指定的距離下(最適

點)可以看到像是要被鯊魚吞掉的效果(如 圖 4–3-3 和圖 4–3-5)。

這樣的簡易操作功能可以讓許多想創作出一些幻視效果，卻不太會

拿捏其立體空間感與缺乏繪畫技巧的創作者們達到創作的目的。

圖 4–3-1原圖

29

圖 4–3-2 兩面牆轉出圖

圖 4–3-3 兩面牆成果

30

圖 4–3-4 三面牆轉出圖

圖 4–3-5三面牆成果

31

4–4 操作介面說明

圖 4–4-1 使用者介面

開啟程式後，會出現本程式使用者介面（圖 4–4-1），功能主要有

以下 10項，簡介如下：

1. 預覽畫面１：顯示的圖片轉換後的操作結果

2. 預覽畫面２：顯示欲轉換的原始圖片

3. 載入圖片：點選載入圖片按鈕後，就可以點選要轉換的圖檔

4. 環境參數設定：將實際牆面的寬度跟高度以及鏡頭的距離跟

高度進行設定

5. 圖片角度調整：假如說載入的圖片有些頃斜，可藉由此處進

32

行設定

6. 預覽：進行圖片的轉換及將最後的成品顯示給使用者觀看

7. 裁切：裁切出想轉換成幻視圖的範圍

8. 還原：還原成原始載入的圖片

9. 儲存整張圖片：將轉出的成品整合成單張圖片進行儲存

10. 個別儲存圖片：將轉出的成品個別的分成牆面地板的個別儲

存儲存，若三面牆則會牆面部份分成左右牆分別儲存

33

4–5 操作流程介紹

1.首先從”載入圖片”介紹，點選載入圖片後，可先點選檔案類型

來篩選要轉換的圖檔類型，視窗出現符合檔案格式的清單，如圖

4–5-1所示。

圖 4–5-1選擇圖片 1

2.選擇想要轉換的圖片，按”開啟”，如圖 4–5-2所示。

34

圖 4–5-2選擇圖片 2

載圖程式碼說明

void inport(){ //載圖

JFileChooser fileChooser = new JFileChooser();// 建立檔案

選擇器

FileNameExtensionFilter filter = new

FileNameExtensionFilter("圖形檔案（JPG/JPEG)", "JPG",

"JPEG");// 建立過濾器(使 使用者只能看到資料夾跟JPG,JPEG的

圖片)

fileChooser.setFileFilter(filter);// 設定過濾器（預設）

filter = new FileNameExtensionFilter("圖形檔案

（GIF)","GIF");// 建立過濾器(使 使用者只能看到資料夾跟GIF

的圖片)

fileChooser.addChoosableFileFilter(filter); // 增加過濾器

int i = fileChooser.showOpenDialog(null);// 顯示檔案選擇

器,在使用完時會傳一個值給i

if (i == JFileChooser.APPROVE_OPTION) {//檢查使用者是否有

選擇圖片

imgFile = fileChooser.getSelectedFile(); // 獲得勾選

圖片的路徑

}

if (imgFile != null) {

try {

BufferedImage bufferedimg =

ImageIO.read(imgFile);//載入圖片

35

}catch (IOException ex) {

ex.printStackTrace();

}}}

使用 JAVA本身已經寫好的檔案選擇器去讓使用者勾選想

轉換的圖片，來載入到本系統內。

3.載入圖片後會自動將圖片的長寬轉換成英吋，填入”載入圖片資

訊內”，若發現載入圖片過大或太小不能完整預覽，可在”預覽畫

面１”與”預覽畫面２”上方用滑鼠滾輪進行放大縮小，另外滑鼠

左鍵可點擊移動圖片在預覽視窗內的位置。

圖 4–5-3載入圖片

移動及放大縮小程式碼說明如下：

I. 觸發滑鼠滾輪事件時程式碼

36

addMouseWheelListener(new

java.awt.event.MouseWheelListener(){publicvoid

mouseWheelMoved(MouseWheelEvent e) {//滑鼠滾輪事件

if(e.getWheelRotation()<0){//滾輪向上滾時

percent += 0.02;//每一次就放大 2%圖片大小

}else{//滾輪向下滾時

if(percent >= 0.04){//這邊是避免圖片縮得過小

percent -= 0.02;//每一次就縮小 2%圖片大小

}else{

percent = 0.02;//最低縮小成 2%圖片大小

}}}});

II. 觸發滑鼠按鍵點擊時事件時程式碼

addMouseListener(new java.awt.event.MouseAdapter(){

publicvoid mousePressed(MouseEvent e){//取得點擊時的x,y座

標

OriginalX = e.getX();

OriginalY = e.getY();

}});

III. 觸發滑鼠按鍵拖動時事件時程式碼

addMouseMotionListener(new

java.awt.event.MouseMotionAdapter(){publicvoid

mouseDragged(MouseEvent e){

move_X = e.getX()-OriginalX;//算出位x移動量

move_Y = e.getY()-OriginalY);//算出位y移動量

}}});

IV. 圖片顯示給使用者程式碼

publicvoid paint(Graphics g) {

g. clearRect (0,0,getWidth(), getHeight());//將舊畫面清除

g.drawImage(

image , //要繪製的圖片

move_X , move_Y,//將前面算好的移動量當作圖片顯示給使

37

用者起點座標

move_X+(int)(image.getWidth()*PI),

move_Y+(int)(image.getHeight()*PI),//圖片顯示給使用

者的終點座標

0 , 0 ,//圖片載入範圍起點座標

image.getWidth() , image.getHeight()//圖片載入範圍

終點座標

//因為是以圖片(0,0)到圖片完整的長寬所以會將圖片依前

面框選給圖片的範圍放大縮小,畫入圖片

,null);

}

利用滾輪上下移動可以讓圖片作放大縮小的改變，滑鼠點擊時會

先記錄下點擊時的位置，在滑鼠進行移動時會去計算位移的量，來設

定最終圖片顯示時實際位移後的位置。

4.”調整角度”，如果發現要轉換的圖有點歪斜，可以藉由輸入角

度，按下”設定”來做修正。將圖片的中心點計算出來後以中心點

去進行圖片角度的調整，如圖 4-5-4所示。。

38

圖 4–5-4調整角度

旋轉程式碼說明

publicvoid Scroll() {

double cos = Math.abs(Math.cos(Math.toRadians(angel)));//將

使用者輸入的參數轉cos

double sin = Math.abs(Math.sin(Math.toRadians(angel))); //將

使用者輸入的參數轉sin

int width = (int) (image.getWidth() * cos+

image.getHeight() * sin);//算出旋轉後圖片寬

int height = (int) (image.getWidth() * sin +

image.getHeight() * cos); //算出旋轉後圖片高

BufferedImage newimage =new

BufferedImage(width,height,imagebase.getType());

Graphics g = newimage.getGraphics();

Graphics2D g2d = (Graphics2D) g;

g2d.clearRect(0, 0, image.getWidth(), image.getHeight());

AffineTransform origXform = g2d.getTransform();

AffineTransform newXform =

(AffineTransform)(origXform.clone());

int xRot = image.getWidth() / 2;

int yRot = image.getHeight() / 2;

newXform.rotate(Math.toRadians(angel), xRot, yRot);

39

//更改圖片繪製方法以xRot, yRot為中心點旋轉至使用者指定的

角度

g2d.setTransform(newXform);

int x = (image.getWidth() - newimage.getWidth()) / 2;

int y = (image. getHeight () - newimage.getHeight()) / 2;

g2d.drawImage(image, x, y,null);

//以新的起點座標,重繪圖片

}

5.”裁切圖片”鈕按下後，在預覽視窗 1進行裁切動作（如圖

4–5-5）。如果發現切的過多可按”還原”回到最初的圖片模樣，完

成後按下”完成”，即完成要轉換的圖片設定（如圖圖 4–5-5）。

圖 4–5-5 裁切進行中

40

圖 4–5-6 裁切結束

裁切程式碼說明

I. 觸發滑鼠按鍵點擊時事件時程式碼

addMouseListener(new java.awt.event.MouseAdapter(){

publicvoid mousePressed(MouseEvent e){//取得點擊時的x,y座

標

beginX = e.getX();

beginY = e.getY();

}});

II. 觸發滑鼠按鍵放開時事件時程式碼

addMouseListener(new

java.awt.event.MouseAdapter(){publicvoid

mouseReleased(MouseEvent e){//取得放開時時的x,y座標

endX = e.getX();

endY = e.getY();

41

});

III. 裁切程式碼

publicvoid cut() {

int imageWidth =endX – beginX//取得新圖片的寬

int imageHeight =endY – beginY//取得新圖片的高

BufferedImage newimage =new BufferedImage(imageWidth,

imageHeight,imagebase.getType());//產生新的空白圖片

Graphics g = newimage.getGraphics();

g.drawImage(image , //要繪製的圖片

0 , 0,imageWidth,imageHeight,beginX , beginY ,//圖片繪

入範圍起點座標

endX , endY//圖片繪入範圍終點座標

,null);

}

利用使用者框選的範圍當作新圖片的大小，在使用滑鼠點擊時

的座標跟放開時的座標，來重繪圖片以達成裁切功能。

7.”轉換方式”，選擇實際圖片想轉換的方式有”左牆+右牆+底面”

與”牆+底面”兩種方式。

42

圖 4–5-7轉換方式選單

8.輸入實際場地的相關參數，如左牆寬、右牆寬、牆高、攝影機距

離、攝影機高度，按下”預覽”即可轉出成品，如圖 4-5-8所示。

圖 4–5-8成品展示

轉換程式碼說明

43

publicvoid drawfun() {//以三面牆為例

double CameraX[] = newdouble[1],

CameraY[] = newdouble[1];

double ix[] = newdouble[1],iy[] = newdouble[1];

double[] S= newdouble[1];

double ImageTop,ImageX1,ImageY1,ImageX2,ImageY2;

double x,y,z,iz,FloorImageWidth,FloorImageHeight;

int

ABitmapWidth,ABitmapHeight,FloorWidth ,FloorHeight,W

allHeight,I,j,ja,k,ka ;

double ResMM = 1,ResA;

SetCameraXY(CameraX,CameraY,S);// 設定攝影機的 X, Y

座標

ImageLength =Math.sqrt( WallAWidth * WallAWidth + WallBWidth * WallBWidth);

if (Resolution< 1 ) {// 輸出圖片的解析度 Resolution

= dpi 每英吋的畫素的數量

ResMM = 400/ImageLength;

}else{

ResMM = Resolution/25.4;

}

ABitmapWidth = ABitmap.getWidth();//取得原始圖片的寬

ABitmapHeight = ABitmap.getHeight();//取得原始圖片的

高

ResA = ABitmapWidth/ImageLength;

x =

CameraX[0]*WallAWidth*WallBWidth/(CameraX[0]*WallBWi

dth+CameraY[0]*WallAWidth);

ImageTop =

(WallABHeight-CameraZ)*(CameraX[0]-x)/CameraX[0]+CameraZ

;

ImageTop=Math.min(WallABHeight,WallABHeight); ImageZC = WallABHeight-ImageTop/2;

ImageX1 = WallAWidth;

ImageY1 = 0;

ImageX2 = 0;

ImageY2 = WallBWidth;

FloorImageWidth = WallAWidth;

FloorImageHeight = WallBWidth;

FloorWidth = (int)(FloorImageWidth*ResMM);

FloorHeight = (int)(FloorImageHeight*ResMM);

//地板

Floor = new BufferedImage(FloorWidth, FloorHeight,

44

BufferedImage.TYPE_INT_RGB); EraseBitmap(Floor);//舊畫面的清除

Graphics g = Floor.getGraphics();

for (i = 0 ;i < FloorHeight-1;i++){

y = i/ResMM;//實際的 Y 座標

for(j = 0 ;j < FloorWidth-1;j++ ){

x = FloorImageWidth-j/ResMM;

//實際的 X 座標 地板的 Z 固定為 0

if(InterLine(ImageX1,ImageY1,ImageX2,

ImageY2,CameraX[0],CameraY[0],x,y,

ix,iy,S) && (S[0] >= 0) && (S[0] < 1)){

iz = CameraZ*(ix[0]-x)

/(CameraX[0]-x);

//投影到攝影機的高度方向與輸入影像實際相交的 Z 座標

ja = (int)((ImageTop-iz)*ResA);

//由 Z 座標換算成輸入的影像所對應的畫素座標 Y

k = j;

ka = (int)(S[0]*ABitmapWidth);

if(ka>0 && ja>0

&& ka <ABitmap.getWidth()

&& ja <ABitmap.getHeight()){

int px =

ABitmap.getRGB((int)ka,ja );

//將原始圖片的指定座標的顏色值存入px

g.setColor(new Color(px));

//設定畫筆顏色

g.fillRect(j, i, 1,1);

//畫到牆面實際位置

}}}}

//右牆

Wall=new BufferedImage((int)(WallAWidth*ResMM),

(int)(WallABHeight*ResMM),

BufferedImage.TYPE_INT_RGB); Wall2=new BufferedImage((int)(WallBWidth*ResMM),

(int)(WallABHeight*ResMM),

BufferedImage.TYPE_INT_RGB); WallHeight = (int)(WallABHeight*ResMM);

EraseBitmap(Wall); //舊畫面的清除

g = Wall.getGraphics();

for(i = 0 ;i< Wall.getHeight()-1;i++){

z = WallABHeight-i/ResMM;

for( j = 0 ; j < Wall.getWidth()-1;j++){

x = FloorImageWidth-j/ResMM;

45

if (InterLine(ImageX1,ImageY1,ImageX2,ImageY2,

CameraX[0],CameraY[0],x,0,ix,iy,S)

&& (S[0] >= 0) && (S[0] < 1)){

iz = (z-CameraZ)*(ix[0]-CameraX[0])/

(x-CameraX[0])+CameraZ;

ja = (int)((ImageTop-iz)*ResA);

ka = (int)(S[0]*ABitmapWidth);

if(ka>0 && ja>0 && ka <ABitmap.getWidth()

&& ja < ABitmap.getHeight()){

int px = ABitmap.getRGB((int)ka,ja );

//將原始圖片的指定座標的顏色值存入px

g.setColor(new Color(px));

//設定畫筆顏色

g.fillRect(j, i, 1,1);

//畫到牆面實際位置

}}}}

//左牆

EraseBitmap(Wall2); //舊畫面的清除

g = Wall2.getGraphics();

for (i = 0 ; i < Wall2.getHeight()-1 ; i++){

z= WallABHeight-i/ResMM;

for(j = 0 ; j < Wall2.getWidth()-1 ; j++ ){

y = j/ResMM;

if(InterLine(ImageX1,ImageY1,ImageX2,Ima

geY2,CameraX[0],CameraY[0],0,y,ix,iy,S)

&& (S[0] >= 0) && (S[0] < 1)){

iz =

(z-CameraZ)*(iy[0]-CameraY[0])/(y-C

ameraY[0])+CameraZ;

ja = (int)((ImageTop-iz)*ResA);

k = j;

ka = (int)(S[0]*ABitmapWidth);

if(ka>0 && ja>0 && ka

<ABitmap.getWidth() && ja <

ABitmap.getHeight()){

int px =

ABitmap.getRGB((int)ka,ja );//將原

始圖片的指定座標的顏色值存入px

g.setColor(new Color(px));//設定畫

筆顏色

g.fillRect(j, i, 1,1);//畫到牆面實際

位置

}}}}

46

利用簡易的投影公式y=Fy*H/(L-Fy)，就可計算出鏡頭與牆壁

的每一個點所投影到圖片實際的每一個點。

9.最後點開檔案選單，依需求做”儲存檔案（整合）”的儲存進行

轉出的成品彙整成單張圖存入電腦以三面牆時為例就如圖 4–5-10，

或者選擇”儲存檔案（個別）”依照轉出的成品（兩面牆或三面牆）

兩面牆時分成牆面與地板個別存入電腦，三面牆時分成左牆、右牆、

地板個別存入電腦（如圖 4–5-11、圖 4–5-12、圖 4–5-13）。

圖 4–5-9 檔案選單

儲存程式碼說明

void Save(String str){//存檔

JFileChooser fileChooser = new JFileChooser();

// 建立檔案選擇器

fileChooser.setDialogTitle(str+"存檔");

//更改檔案選擇器標題

47

fileChooser.setApproveButtonText("存檔");

//更改檔案選擇器確認鈕存檔

FileNameExtensionFilter filter =

new FileNameExtensionFilter("圖形檔案（JPG/JPEG)",

"JPG", "JPEG");

// 建立過濾器(使 使用者只能看到資料夾跟JPG,JPEG的圖

片)

fileChooser.setFileFilter(filter);

// 設定過濾器

filter =

new FileNameExtensionFilter("圖形檔案（GIF)","GIF");

// 建立過濾器(使 使用者只能看到資料夾跟GIF的圖片)

fileChooser.addChoosableFileFilter(filter);

// 增加過濾器

filter =

new FileNameExtensionFilter("圖形檔案（BMP)","BMP");

fileChooser.addChoosableFileFilter(filter);

filter =

new FileNameExtensionFilter("圖形檔案（PNG)","PNG");

fileChooser.addChoosableFileFilter(filter);

int i = fileChooser.showOpenDialog(null);

// 顯示檔案選擇器,在使用完時會傳一個值給i

if (i == JFileChooser.APPROVE_OPTION) { //檢查使用者是否有選擇圖片

try {

File f = fileChooser.getSelectedFile();

String path2 = f.getParent();// 獲得圖片的路徑

String fileName = f.getName();// 獲得原圖片檔案名

String fileExtName =

fileName.substring(fileName.indexOf(".") + 1);

// 檔案擴充名,不含點

String pathAndName = path2 + "\\" + fileName;

// 檔案的完整路徑

ImageIO.write(model.getFloor() , fileExtName, new File(pathAndName));

// 將緩衝圖形儲存到磁碟

} catch (IOException e1) {

JOptionPane.showMessageDialog(null, "儲存失敗\n" +

e1.getMessage());// 顯示提示資訊

}}}

使用 JAVA本身已經寫好的檔案選擇器去讓使用者去勾選

48

想儲存的圖片，將圖片存入電腦。

圖 4–5-10 儲存檔案(整合)

圖 4–5-11儲存檔案(個別)-左牆

49

圖 4–5-12儲存檔案(個別)-地板

圖 4–5-13儲存檔案(個別)-右牆

50

4–6 成果展示

本專題在研究過程中也有嘗試使用其它圖片，以下為成果展示:

圖 4–6-1 水杯

圖 4–6-2 小貓(三面牆)

51

圖 4–6-3 小貓(兩面牆)

圖 4–6-4杯子

52

第五章 問題與討論

問題一：可用圖片尋找花了不少時間以及圖片使用權有待解決。

答：這次的專題製作需要很多的圖片來做實驗及測試，而圖片的來源只

有網路搜尋或是自己繪製。由於前面研究限制所提到，並非所有圖片都

適用，所以在選圖過程中就有一定的難度，而組員們對於攝影或繪畫並

沒有深入的研究及一定的水準，如果要自行準備又有一定的難度，且網

路上的圖片皆有版權上的問題，另外 CC創用圖能用來立體化的圖片更

是少之又少。因此花在找圖片上的時間比預計上的還要來得更多。

問題二：使用者介面設計上的問題

答：JAVA本身物件導向設計有許多設定值是已經設好的，所以平時上

課使用就只是很簡單的加入物件就好了，但本專題設計時出現紅字

Layout（排版）衝突問題才知道，如果要有不同排版的方式就要用其他

物件去設定 Layout放到視窗上才能有不同的排版方式，所以想要有上

方列，側邊工具列，工作畫面就要先把視窗的 Layout設定成

Borderlayout讓它可以置入物件時指定放置於上方、側邊或者中間，

之後側邊工具列要將按鈕、輸入方塊依照自己意思擺放，就宣告個物件

設定取消其 Layout就可以指定座標將想放的按鈕，輸入方塊依自己想

要的位置擺放，之後再將這物件放入視窗側邊就行了。

53

第六章 結論

本研究所介紹的平面影像立體化方式，不同於以往的立體影像效果，

利用幻視藝術的原理並結合專用程式來轉換而產生立體的效果。快速又

準確，使用者在操作時也不需準備額外繪圖軟體，大幅的增加便利性與

簡易性。但是過去似乎鮮少有人研究利用程式產生幻視藝術圖，因此在

文獻及相關資料的搜集上遇到了許多的挫折與困難，對本小組無疑是一

大挑戰，但也因此學習到許多新的知識。

本系統的初衷是以需要將2D影像轉換成3D立體的使用者為主要的

目標對象，本系統的設計開發完全以使用者為主，能夠簡單又快速的產

生立體圖形。但在研究的過程中發現，並非的所有影像皆適用本系統所

產生出的立體效果，例如：影像裡有不規則的高低起伏、或是同一個影

像裡出現過多的物件，其轉換後的效果較差。如何呈現出更多元的立體

影像，並且同時保持著製作的便利性，是本小組未來必須探討及解決的

問題。

本次設計的重點除了研究幻視藝術的原理和技巧之外，也對於圖片

上的應用做了許多的嘗試，由於前面也提到並非所有的影像都能夠轉換

成 3D，要如何挑選或繪製適合拿來做立體化的圖片也成這次的討論議

題之一。

54

最後感謝老師，在百忙之中抽空畫出一幅精美的鯊魚圖畫來協助我

們做實驗和測試，也感謝老師細心的指導以及組員的互相勉勵合作，這

些都是製作專題的寶貴經驗，只有不斷的溝通才能讓團隊更有效率的運

作。

55

參考文獻

李銘龍(1994)：應用色彩學。台北市。藝風堂出版社。

邢益玲(2011年)：空間 ：藝術與人生 - 了解視覺藝術之發展。新文

京開發。16頁。

林昆範(2008)：色彩原理。台北市全華圖書股份有限公司。

洪維恩(2005年)：Java 2-SDK 5.0教學手冊 (第三版)。博碩文化。1-5

頁，1-6頁。

俞聖棠 (2000)：靜態電腦平面影像圖式線索與影像處理軟體指令相關

性研究。新竹市：國立交通大學應用藝術研究所。

姜凱鈞(2008年 7月)：2D影像立體化。台中市。亞洲大學資訊與設計

學系碩士班

黃保翕 (2010年 8月)ASP.NET MVC2 開發實戰。台北市。精誠資訊。

黃盟淵(2000年)：突顯視覺關注物件之 2D/3D轉換系統。高雄市。國

立高雄應用科技大學資訊工程系碩士班碩士論文本文 5-6頁。

游伯龍(1999)：認知錯視：hd 習慣領域 影響一生成敗的人性軟體。時

報出版。123頁。

鄭日昌，周軍(2003)：知覺:理論、發展與組織。五南。

劉亭瑜(2009年 7月)：以 Web-mining為基礎的 3D色票視覺化系統。

南投縣：國立暨南國際大學資訊工程學系。

56

參考網頁

Java 官方網站

http://www.java.com/zh_TW/

國立台灣科學教育館

http://www.ntsec.gov.tw/User/ Article.aspx?a=999

國家教育研究院：視覺暫留

http://terms.naer.edu.tw/detail/1311716/

商業週刊成功者故事：華人首位３Ｄ立體藝術家 蘇家賢要用作品贏得

全球目

光 http://www.businessweekly.com.tw/KIndepArticle.aspx?id=185

33

資訊分享：《奇幻．不思議》日本 3D幻視藝術畫展

http://www.vive-la-vie.com.tw/articles.aspx?id=224&mainID=24

57