《以Flash 模擬如何在平面中表現空間感》由会员分享，可在线阅读，更多相关《以Flash 模擬如何在平面中表現空間感（21页珍藏版）》请在金锄头文库上搜索。
1、1以以 FlashFlash 模擬如何在平面中表現空間感模擬如何在平面中表現空間感洪偉肯明志技術學院工業設計系摘要本研究在仁武廠駐廠期間完成, 主要以深度線索與電腦 3D 的幾何理論為基礎，探討影響空間感形成的因素，首先以文獻探討如何在平面中呈現 3D 空間感的方法，首先以無透視、一點透視、二點透視等三種效果進行實例創作，說明如何運用 Flash 之 Action Script 語法，經由透視比的轉換，在平面上呈現虛擬的 3D 透視效果，並瞭解其在模擬上的限制。再進一步以案例探討如何控制移動與旋轉以形成動態深度效果，如此即可在不需要真正虛擬實境的複雜運算下，作為模擬簡單 3D 互動介面設計之用
2、途，亦可提供 Flash 媒體創作與設計者開發的參考。關鍵字: 3D，深度線索，透視模擬，Flash Action Script21. 1.如何在平面中表現空間感如何在平面中表現空間感如何在平面中表現空間感？這樣的觀念對藝術創作者並不陌生，早期寫實派的畫家已將人物、景深與光影模擬到幾可亂真，甚至於印象派畫家刻意以不同觀看視角將同一物體並陳的構圖，以呈現理性與非理性交錯的感覺。由於 3D 輔助繪圖的出現，如今已可輕易的建構一個精確的立體空間，也由於工具的便利，跳過了許多基本的圖學思考，許多設計者與學生常對於這些習以為常的 3D 效果知其然而不知所以然，在進階的學習上亦因而受限。有鑑於此，本文運用
3、圖學的理論說明 2D 與 3D 間的轉換，並以 Flash 軟體為平台，以其 Action Script 語法透過幾個基本的範例: 無透視、一點透視、二點透視，示範如何產生虛擬的 3D 空間感，設計者亦可以此概念創造出更豐富與互動的 3D 效果。2. 2.影響空間感形成的因素影響空間感形成的因素空間感的形成，可用深度線索(depth cues)的概念作為說明。無論是在真實世界或是電腦虛擬 3D 環境中，各種不同的深度線索是可以同時存在的，以圖 1 (Wicken ,1985) 所舉之例說明:圖 1:單眼圖像式深度線索圖片來源 Wicken，1985，p131.1.尺寸(size)：一般而言，物
4、體在近處顯得較大，遠處顯的較小，可由此來表達遠近的感覺，而若有兩物體存在時，可比較其相關尺寸(relative size)，較大的物體一般會感覺是距離較近。此外， 熟悉的尺寸(familiar size)，亦深深影響人對尺寸判斷的感覺，如上圖在貨車旁的倉庫，即可依熟悉的貨車尺寸，判斷倉庫的大小情形。2.重疊(interposition)：如圖中近山與遠山之層巒疊障，當兩個不透明的物體在同一視線上時，會感覺位於最上層(離視線最近)的距離較近，在下層的距離較遠。3.光線與陰影(lights and shadow)：如凹陷的表面所造成的光亮與陰暗之層次，讓人產生凹陷的感覺，並知覺到深度。4.高地與清
5、晰度(elevation and clarity)：如觀看視野遼闊的照片時，遠處地平線會位於照片的上方，且亦會因大氣粉塵作用，使遠處感覺較不清晰。35.透視及紋理(perspective and texture)：此兩因素常是相輔相成的，如圖 1 中，道路在遠方看來似乎匯集成一點，左方之玉黍薯田較具規則的紋理，在遠的地方顯得較密集，近的地方則顯得鬆散，藉此可判斷遠近與深度。上述內容包含了真實世界與電腦 3D 世界的深度線索，但若要將自然界中豐富的深度線索轉變至電腦環境時，考慮成本條件下時，一般認為最重要的考慮因素在於 1.重疊、2.運動視差、3.雙眼視差。而重疊的深度線索不論在單眼與雙眼視覺、
6、2D 或 3D 的情況下皆會發生，因此又具有關鍵性的影響(Wicken，1985)。但探討相關研究，其範圍主要是以物體與物體之間，和物體與所處環境深度線索之影響為研究的重點。隨著對人類資訊處理理論的演進，逐漸地了解到人類在接受視覺刺激後，經過感官神經送到大腦後，會將所有相關之訊息（或稱線索CUE）做綜合，以協助解釋其整體意義，這些資訊可總稱為深度線索（depth cues） 。如 Aks (1993) 的研究，探討透視 、 壓縮等背景紋路的方向與密度，對於視覺追索速度之影響進行探討，與 Aks origin_y = 350;ball_size = 100;i_num=5;j_num=5;k_n
7、um=5;/ 運用 for 迴圈產生 125 個圓球n = 0;for (k=0; kk_num; k+) for (i=0; ii_num; i+) for (j=0; jj_num; j+) n+;duplicateMovieClip(“/ball“, “ball“+n, -n);/ 設定間距x = i*50;y = j*50;/設定 i 及 j 方向之偏離值div = 20;/ 設定圓球屬性並產生圓球setProperty(“/ball“+n, _x, origin_x+x);setProperty(“/ball“+n, _y, origin_y-y);setProperty(“/bal
8、l“+n, _xscale, ball_size);6setProperty(“/ball“+n, _yscale, ball_size);setproperty(“/ball“+n,_alpha,100-20*k);/ 控制第 25 排圓球的 x 及 y 方向的位移origin_x = origin_x+div;origin_y = origin_y-div;setProperty(“/ball“, _visible, false);.此例中並無任何透視效果，僅控制各球出現的位置與排列方式，透過 for 迴圈分別在 j 方向與 i 方向建立共 25 顆球，之後再以偏離值 div 將第二層的
9、25 顆球向右及向上各偏離 20 單位，後續各層依此類推，說明如圖 3。另設定屬性若越遠的球(k 值越大)之透明度(alpha)越高，以模擬遠方較為模糊的效果。 圖 3: 第一顆圓球之座標與複製方向說明76. 6.將將 3D3D 座標轉換為座標轉換為 2D2D 位置的轉換方式位置的轉換方式上例中未考量到透視紋理及其所造成的尺寸變化效果，為進一步模擬出合理而逼真的結果，運用簡單的三角函數關係，可推導出透視比的觀念。如圖 4，假設空間中某一點之位置(x,y,z)已知，該點投影在螢幕上的位置為(x,y)，此時只需有 d 值 (眼睛到電腦螢幕的距離)與 z 值(空間中某一點到螢幕的距離)，則運用簡單的
10、三角函數觀念，即可將(x,y,z)座標轉換為平面中(x,y)的位置，此即後續程式中將 3D 轉換為 2D 所需用到的轉換式(perspective_ratio)，其值=d/(z+d)，而 y=y*透視比，x=x*透視比。圖 4 透視轉換式說明ratio_eperspectivy ydzdratio_eperspectivzdyd y)zd( yydyzd yd同理可證ratio_eperspectivx x接下來即運用此透視比，將原本固定位置與尺寸的球，分別處理成因透視所造成的尺寸與位置變化。87. 7.例例( (二二) )：一點透視：一點透視圖 5: 例(二)執行結果./ 初始值設定orig
11、in_x = 175;origin_y = 350;ball_size = 100;i_num=5;j_num=5;k_num=5;/ 運用 for 迴圈產生 125 個圓球n = 0;for (k=0; kk_num; k+) for (i=0; ii_num; i+) for (j=0; jj_num; j+) n+;duplicateMovieClip(“/ball“, “ball“+n, -n);/ 透視值設定d = 400;x = k*50+i*50;y = k*50+j*50;z = k*50;perspective_ratio = d/(d+z);perspective_x =
12、x*perspective_ratio;perspective_y = y*perspective_ratio;/設定圓球屬性並產生圓球9setProperty(“/ball“+n, _x, origin_x+perspective_x);setProperty(“/ball“+n, _y, origin_y-perspective_y);setProperty(“/ball“+n, _xscale, ball_size*perspective_ratio);setProperty(“/ball“+n, _yscale, ball_size*perspective_ratio);setprop
13、erty(“/ball“+n,_alpha,100*perspective_ratio);setProperty(“/ball“, _visible, false);.在此例中，進一步加入 d 與 z 兩變數，結果使圓球排列呈現一點透視之空間感，z 值會影響不同 k 層間的距離，d 值的大小則會影響消失點的位置，當 d=100 時，消失點將位於正中心位置，該值越大，消失點越遠，補充說明如圖 6。圖 6: 由左而右分別為 d=100、d=300、d=700 的執行結果108. 8.例例( (三三) )：二點透視：二點透視圖 7: 例(三)執行結果./ 初始值設定origin_x = 175;or
14、igin_y = 350;ball_size = 100;i_num=5;j_num=5;k_num=5;/ 運用 for 迴圈產生 125 個圓球n = 0;for (k=0; kk_num; k+) for (i=0; ii_num; i+) for (j=0; jj_num; j+) n+;duplicateMovieClip(“/ball“, “ball“+n, -n);/ 第一個透視值設定d1 = 500;x1 = j*50+i*50;y1 = j*50+k*50;z1 = j*50;perspective_ratio = d1/(d1+z1);perspective_x = x1*
15、perspective_ratio;perspective_y = y1*perspective_ratio;/ 第二個透視值控制11d2 = 500;x2 = x1+j*50;y2 = y1-i*50;z2 = j*50-i*50;perspective_ratio2 = d2/(d2+z2);perspective_x2 = x2*perspective_ratio2;perspective_y2 = y2*perspective_ratio2;/設定圓球屬性並產生圓球setProperty(“/ball“+n,_x,origin_x+(perspective_x+perspective_x2)/2); setProperty(“/ball“+n,_y,origin_y-(perspective_y+perspective_y2)/2); setProperty(“/ball“+n,_xscale,ball_size*(perspective_ratio+perspective_ratio2)/2);setProperty(“/ball“+n,_yscale,ball_size*(perspective_ratio+perspective_ratio2)/2);setproperty(“/ball“+n,_alpha,100*(perspective_rat
