Camera 與 Billboard in 三維繪圖與遊戲設計課程

Ned Dark D 整理編撰

Outline Camera 擺放的類型與功用 Camera 的構成 KCCamera 的介面使用方法 Camera 與控制 EXAMPLE

Billboard 簡介 Billboard 簡易實作方法 Billboard 與透明物 EXAMPLE

資料來源 醉資心　 GD 版－ 3D 場景中的佈告欄製作 Game Programming Gems 2 4.11 Classic

Super Mario 64 Third-Person Control and animation

Camera 擺放的類型與功用不同的 Camera 擺放方式造成不同的遊戲

類型－正如同電影不同的運鏡手法一般

通則：人越多，鏡頭就越遠

Eye Mode

Camera Mode ~ Eye Mode

主要以體驗情境為主，開始使用這種模式是早期歐美的 D&D 角色扮演遊戲，近年主要是 3D 第一人稱射擊動作居多<FPS> ： CS , QUAKE , AvP…

Camera Mode ~ Behind Mode （背後靈模式 or 小蜜蜂模式）

在早期 3D 還未成熟的時代，這種模式較少人使用，但自從古墓奇兵以來，大多動作類型，特別是有近身搏鬥的動作遊戲大多使用此種拍攝手法<ACT> : Tomb Rider , Alice…

Behind Mode

Camera Mode ~ Spotlight Mode 提供靜態或是平面移動方式的遊戲所使用，主要是為了減少 3D 運算以及同時監控多角色訊息兩個理由~< 族煩不及備載 > :MetalGear , Biohazard ,SuperRobotWar Apha , WarCraft3 , Syberia…

Spotlight Mode

Camera Mode ~

Don’t forget the Free Mode

陳死亡

原來是純粹為了遊走 3D模型場景而存在，與EyeMode 有若干程度類似

Camera 的構成－ KCCamera 只是個中繼介面 描述一個鏡頭必須要有

Camera 的位置 P( px , py , pz ) Camera 的右方向量 Vr( Rx , Ry , Rz ) Camera 的上方向量 Vu( Ux , Uy , Uz ) Camera 的後方向量 =Vr cross Vu

KCCamera 將上述資料傳入ViewMatrix[16] 並且將其存放入OpenGL 的 Camera 矩陣中即可透過 OpenGL 正確的顯像

Camera 的構成－其實他是個梯形金字塔

另外還需要設定透視的參數viewAngle ：左右開角度aspect ：長寬比nearDist ：近切面距離farDist ：遠切面距離

以及平行投影的參數Width , Heigjt ：螢幕的寬與高

KCCamera 的介面使用方法內部運作setModelViewMatrix()

KCCamera 的介面使用方法(cont.) 移動 Camera

1. Sit And See ： Set( position , target , up )

2. Shift To ： ShiftSet(start,end,speed,target,lock,up)

3. 相對移轉： Roll( angle ) ; // 原地搖擺 Yaw( angle ) ; // 轉向 Pitch( angle ) ; // 仆街 Slide( xdif , ydif , zdif ) ;// 移動

KCCamera 的介面使用方法(cont.)

透視與平行投影的轉換 透視部分

getCamera()->Set_Ortho( WIDTH , HEIGHT ) ; 平行部分

getCamera()->UnSet_Ortho() ; 透視部分

Camera 與控制 Convert the Camera to the World

coordinate , Because when the Camera FACE different , the Right is different .

(0,1)

Char Char

(1,1)

Camera 與控制 (cont.) If the Camera won’t roll , just seen it

droping y dimentionControl input have four arrow or a

circle , even pressure concern

4 input :

(1,0) (-1,0) (0,1) (0,-1)

input : any normalized vector( 0.5 , 0.866 )

input : any vector

輕壓右 ( 0.1 , 0.0 )

Camera 與控制 (cont.)InputLtRt (range –1 ~ +1)InputUpDn (range –1 ~ +1)Right (of camera)Forward (of camera)

World.x = InputLtRt * Right.x + InputUpDn * Forward.x )World.z = InputLtRt * Right.z + InputUpDn * Forward.z )World.y = 0 ;

World is the vector where the Player should move to (remember to normalize)

EXAMPLE

Billboard 簡介

〝想像一下，在 3D 場景中想要顯示一顆樹，若是利用美術軟體把樹枝樹葉都拉出來，可能一顆樹得要好幾千幾萬個多邊形，雖然很精緻，但這樣的效率會非常差，或是想要畫一根柱子 ,得花一堆多邊型來畫一個圓柱，或是想要一個動態火焰燃燒的物件，得用粒子系統或是得動用到 3D 貼

圖。

若是我們可以只畫一個平面，然後貼一個圖，然後令這個平面永遠面對玩家，只要圖的品質不錯，那麼效果是不會

輸給上述的東西的模型。〞

Billboard 簡易實作方法 做法一

1. 算出物件和玩家的視線向量2. 算這個向量和正 x 軸的夾角

angle3. 加上 90 度 ... 就是我們要的

佈告欄平面所需要的旋轉角度 ( 水平方向 ) ，對 y 軸旋轉

4. 算出 eye 座標和佈告欄之前對於水平線的夾角，對 x 軸旋轉

5. 這樣平面就能夠永遠面對你了

angle

Billboard 簡易實作方法 做法二

1. 算出攝影機與物件之間的向量 Zdir

2. 決定這個向量的上方向量Up

3. Right = Up cross Zdir4. 物件面對攝影機的四個角落

座標為 物件中心點 ＋ Right*半寬 物件中心點 － Right*半寬 物件中心點 ＋ Up*半高 物件中心點 － Up*半高

5. 利用這四個點來貼圖

UpRight

Zdir

Billboard 與透明物 給 Billboard貼的圖若是非版子大小的圖樣， Image 必須有 alpha channel 來做透明效果

如果使用的 Billboard都有透明效果，則必須對所有 Billboard 作深度排序，否則顯示會產生問題

Depth sortingAlpha blending

Billboard 與透明物 錯誤的做法（ with depth sorting but no alpha blending ）

一．黑　二．山及旁邊的顏色蓋掉黑（錯）　三．雲及旁邊的透明塊狀蓋掉山（錯）

Billboard 與透明物 錯誤的做法（ no depth sorting with alpha blending ）

一．黑　二．雲旁邊的透明區＋原來的顏色（黑）三．山比雲遠

Billboard 與透明物 正確的做法（ z-buffer test , alpha blending ）

一．黑　二．山旁邊的透明區＋原來的顏色（黑）　三．雲旁邊的透明區＋原來的顏色（黑 or山）

EXAMPLE