視圖平截錐體（view frustum）幾何體渲染
threejs中webgl_camera例子中渲染出了視圖平截錐體的形狀嫡意，其實(shí)現(xiàn)了frustum geometry對(duì)象用于專門負(fù)責(zé)view frustum幾何體數(shù)據(jù)的生成。
下面我們仿照threejs中camera的實(shí)現(xiàn)原理使用C++在OpenGL ES上實(shí)現(xiàn)view frustum幾何形狀的渲染捣辆。iOS項(xiàng)目源碼可從github中獲取蔬螟。
渲染效果圖如下
視圖平截錐體（view frustum）幾何體數(shù)據(jù)的生成
要繪制view frusutum，首先需要確定frustum形狀的幾何數(shù)據(jù)汽畴。由于我們只是要繪制出frustum的基礎(chǔ)輪廓旧巾，因而我們會(huì)準(zhǔn)備相關(guān)線段的頂點(diǎn)以及頂點(diǎn)色彩屬性數(shù)據(jù)耸序。我們對(duì)頂點(diǎn)數(shù)據(jù)的準(zhǔn)備會(huì)分為兩個(gè)步驟。
1. 根據(jù)眼睛空間中frustum的典型形狀鲁猩，大略準(zhǔn)備出頂點(diǎn)數(shù)據(jù)
投射變換矩陣參數(shù)會(huì)在眼睛空間中確定出一個(gè)view frusutum坎怪，在本文中，我門使用右手性的投射矩陣（right handedness）廓握，因此搅窿，我們的frustum應(yīng)該完全位于眼睛空間的負(fù)z軸之上。通常情況下隙券，我們通過fov男应，aspect ratio和near/far平面z值參數(shù)確定出frustum。借助這些參數(shù)娱仔，其實(shí)我們可以計(jì)算出frustum的頂點(diǎn)數(shù)據(jù)沐飘。但是，這種方式不是很方便牲迫，因?yàn)槊看味家_定頂點(diǎn)的位置信息耐朴，而同類的信息我們?cè)谏赏渡渚仃嚂r(shí)還要再次確定。所以恩溅，在第一步中隔箍，我們只是指出頂點(diǎn)數(shù)據(jù)的大略信息，比如頂點(diǎn)的數(shù)目脚乡，還有每個(gè)頂點(diǎn)要繪制的色彩信息蜒滩，而頂點(diǎn)的位置數(shù)據(jù)我們?cè)诘诙街刑幚恚诘谝徊街皇墙o出占位信息奶稠。我們需要設(shè)置的頂點(diǎn)數(shù)據(jù)如下代碼實(shí)例中所展示：
// 線段的色彩信息
Cvec3 colorFrustum = hexStringToRGB("0xffaa00");
Cvec3 colorCone = hexStringToRGB("0xff0000");
Cvec3 colorUp = hexStringToRGB("0x00aaff");
Cvec3 colorTarget = hexStringToRGB("0xffffff");
Cvec3 colorCross = hexStringToRGB("0x333333");
//注意：下面每段中每個(gè)點(diǎn)的名稱俯艰，這些名稱代表了frustum錐體每個(gè)頂點(diǎn)的名稱
// 近平面方形的四條線段和對(duì)應(yīng)色彩
addLine( "n1", "n2", colorFrustum );
addLine( "n2", "n4", colorFrustum );
addLine( "n4", "n3", colorFrustum );
addLine( "n3", "n1", colorFrustum );
// 遠(yuǎn)平面方形的四條線段和對(duì)應(yīng)色彩
addLine( "f1", "f2", colorFrustum );
addLine( "f2", "f4", colorFrustum );
addLine( "f4", "f3", colorFrustum );
addLine( "f3", "f1", colorFrustum );
// 從近平面到遠(yuǎn)平面錐體邊緣線段和色彩
addLine( "n1", "f1", colorFrustum );
addLine( "n2", "f2", colorFrustum );
addLine( "n3", "f3", colorFrustum );
addLine( "n4", "f4", colorFrustum );
// 從眼睛坐標(biāo)原點(diǎn)到近平面的錐體頂端線段和色彩
addLine( "p", "n1", colorCone );
addLine( "p", "n2", colorCone );
addLine( "p", "n3", colorCone );
addLine( "p", "n4", colorCone );
// 指示上方方向的三角形線段和色彩
addLine( "u1", "u2", colorUp );
addLine( "u2", "u3", colorUp );
addLine( "u3", "u1", colorUp );
// 錐體中線線段和色彩
addLine( "c", "t", colorTarget );
addLine( "p", "c", colorCross );
// 近平面和遠(yuǎn)平面中間軸對(duì)齊十字線線段和色彩
addLine( "cn1", "cn2", colorCross );
addLine( "cn3", "cn4", colorCross );
addLine( "cf1", "cf2", colorCross );
addLine( "cf3", "cf4", colorCross );
...
//其中，每個(gè)addLine確定兩個(gè)頂點(diǎn)信息
void addLine(string a,string b,Cvec3 color){
addPoint(a, color);
addPoint(b, color);
}
//對(duì)于每個(gè)頂點(diǎn)的位置信息锌订，我們只是記錄占位信息竹握，這些占位信息在第二步更新
void addPoint(string id, Cvec3 color){
//存儲(chǔ)每個(gè)點(diǎn)的占位位置信息
vertices.push_back(Cvec3(0,0,0));
//存儲(chǔ)每個(gè)點(diǎn)的色彩信息
colors.push_back(color);
//我們使用GL_LINES primtive類型繪制線段，每個(gè)線段由兩個(gè)點(diǎn)確定辆飘，
//根據(jù)我們的繪制方式啦辐，那么相對(duì)于錐體的每個(gè)真實(shí)頂點(diǎn)，這些線段會(huì)多次使用錐體的每個(gè)頂點(diǎn)蜈项。
//所以芹关，我們會(huì)記錄每個(gè)頂點(diǎn)的使用詳情，便于在第二步更新時(shí)根據(jù)頂點(diǎn)名稱更新真實(shí)位置信息
if (pointMap.find(id)==pointMap.end()){
pointMap[id] = vector<int>();
}
pointMap[id].push_back((int)vertices.size() - 1);
}
2. 更新frustum錐體每個(gè)頂點(diǎn)的位置信息
在OpenGL中紧卒，投射矩陣將視圖平截錐體變換為經(jīng)典立方體（經(jīng)透視除法-perspective division-之后）侥衬。如果要渲染view frustum，關(guān)鍵在于如何生成view frustum幾何體。如果我們?cè)谘劬臻g直接描述轴总，則面臨著針對(duì)每一種不同的view frustum規(guī)格（投射矩陣參數(shù)所確定）直颅，都要根據(jù)參數(shù)重新指定view frustum的各個(gè)頂點(diǎn)。但是假如我們變換角度怀樟，從標(biāo)準(zhǔn)化設(shè)備空間的經(jīng)典立方體開始功偿，則很容易獲得眼睛空間中view frustum各頂點(diǎn)的眼睛坐標(biāo)。
經(jīng)典立方體各頂點(diǎn)的坐標(biāo)很容易確定漂佩，并且是固定不變的脖含。因?yàn)榻?jīng)典立方體在x/y/z軸的坐標(biāo)區(qū)間都是[-1..1]。因而我們可以輕松確定view frustum近平面和遠(yuǎn)平面上的8個(gè)頂點(diǎn)投蝉，加上眼睛坐標(biāo)的原點(diǎn)和遠(yuǎn)近平面的中心點(diǎn)养葵。那么這幾乎就是我們需要的所有頂點(diǎn)。
我們可以設(shè)置頂點(diǎn)如下：
int w = 1, h = 1;
// 近平面和遠(yuǎn)平面中心點(diǎn)
setPoint( "c", 0, 0, 1 );
setPoint( "t", 0, 0, -1 );
// 近平面頂點(diǎn)
setPoint( "n1", - w, - h, 1 );
setPoint( "n2", w, - h, 1 );
setPoint( "n3", - w, h, 1 );
setPoint( "n4", w, h, 1 );
// 遠(yuǎn)平面頂點(diǎn)
setPoint( "f1", - w, - h, -1 );
setPoint( "f2", w, - h, -1 );
setPoint( "f3", - w, h, -1 );
setPoint( "f4", w, h, -1 );
// 指示向上方向的三角形頂點(diǎn)
setPoint( "u1", w * 0.7, h * 1.1, 1 );
setPoint( "u2", - w * 0.7, h * 1.1, 1 );
setPoint( "u3", 0, h * 2, 1 );
// 遠(yuǎn)平面十字相交線頂點(diǎn)
setPoint( "cf1", - w, 0, -1 );
setPoint( "cf2", w, 0, -1 );
setPoint( "cf3", 0, - h, -1 );
setPoint( "cf4", 0, h, -1 );
// 近平面十字相交線頂點(diǎn)
setPoint( "cn1", - w, 0, 1 );
setPoint( "cn2", w, 0, 1 );
setPoint( "cn3", 0, - h, 1 );
setPoint( "cn4", 0, h, 1 );
要獲得這些頂點(diǎn)對(duì)應(yīng)的眼睛坐標(biāo)瘩缆，我們還需要投射矩陣关拒，利用這個(gè)矩陣的反轉(zhuǎn)矩陣劳坑，我們就可以獲得各頂點(diǎn)的眼睛坐標(biāo)捐川。經(jīng)過反轉(zhuǎn)投射變換后屏轰，近平面被投射到眼睛坐標(biāo)中view frustum的近平面之上概而，遠(yuǎn)平面被投射到對(duì)應(yīng)的遠(yuǎn)平面之上。注意慷荔，反轉(zhuǎn)投射后膀钠，我們所獲得的點(diǎn)和投射變換所獲得的點(diǎn)一樣杖刷，都為同質(zhì)坐標(biāo)斤儿，需要將坐標(biāo)的各個(gè)部件都除以第4部件剧包，來獲得眼睛空間的仿射坐標(biāo)。那么往果，獲得眼睛坐標(biāo)的代碼示例如下：
void setPoint(string p,float x,float y,float z){
//先將ndc坐標(biāo)反轉(zhuǎn)投射為eye coordinate
Cvec4 eyeP4 = inv(projMat) * Cvec4(x,y,z,1.0);
//點(diǎn)的同質(zhì)坐標(biāo)需要轉(zhuǎn)換為標(biāo)準(zhǔn)仿射坐標(biāo)
Cvec4 eyeP4Affine = eyeP4/eyeP4[3];
Cvec3 eyePos = Cvec3(eyeP4Affine);
//根據(jù)頂點(diǎn)名稱疆液，更新vertices中占位位置信息的真實(shí)值
vector<int> points = pointMap[p];
if (points.size()>0) {
for (int i = 0, l = (int)points.size(); i < l; i ++ ) {
vertices[points[i]] = eyePos;
}
}
}
至此，我們就獲得了frustum錐體幾何形狀繪制所需的頂點(diǎn)信息陕贮，剩下的就是使用OpenGL將這個(gè)信息繪制出來堕油。
