簡單陣列相機效果(threejs array camera例子實現(xiàn))

ArrayCamera银还,陣列相機,其本質(zhì)應(yīng)該是shift camera原理(成像平面投射偏離)的應(yīng)用瘫里。WebGL中的ArrayCamera設(shè)計意圖是為VR場景高效渲染提供支持肿轨,但是目前實際上只是提供了多子視口(sub view port)的渲染支持。

webgl_array_camera例子

webgl_array_camera例子只是實現(xiàn)了類似九宮格效果的多視口(viewport)畫面渲染恃逻。其實現(xiàn)方式是通過在unit square [0..1]區(qū)間按照比例定義每個子視口的參數(shù)雏搂,同時還有子視口對應(yīng)的投射矩陣參數(shù)。在渲染時寇损,對每個子視口參數(shù)根據(jù)實際的窗口尺寸進行對應(yīng)的glViewport調(diào)用凸郑,然后根據(jù)對應(yīng)的投射矩陣渲染場景到對應(yīng)的視口。

在OpenGL ES上的C++渲染實現(xiàn)

webgl的arraycamera渲染例子實現(xiàn)起來比較簡單矛市。首先定義相機接口芙沥,包含子視口參數(shù),投射矩陣參數(shù)。其次在渲染前實現(xiàn)對相機列表中每個視口和投射矩陣的應(yīng)用而昨。

iOS版本實現(xiàn)源碼可以從github上獲取救氯。

1. 定義PerspectiveCamera接口


//sub view port參數(shù),使用比例設(shè)置
struct SubViewPort
{
    float x;
    float y;
    float width;
    float height;
    
    SubViewPort(float x,float y,float width,float height):x(x),y(y),width(width),height(height){};
};

class PerspectiveCamera{
public:
    Matrix4 projMat;
    float aspect;
    float fov;
    float near;
    float far;
    SubViewPort subview;
    
public:
    PerspectiveCamera(float aspect=1.0,float fov=50.0,float near=-0.1,float far=-10000.0):aspect(aspect),fov(fov),near(near),far(far),subview(SubViewPort(0.,0.,0.,0.)){

        updatePorjectonMatrix();
    };
    ~PerspectiveCamera(){};
    
    void updatePorjectonMatrix(){
        //make a right handed projection matrix
        projMat = Matrix4::makeProjection(fov,aspect,near, far);
    }
   
};

2. 設(shè)置子視口參數(shù)和對應(yīng)的投射矩陣

每個子視口和對應(yīng)的投射矩陣實現(xiàn)為一個PerspectiveCamera實例歌憨,所有的PerspectiveCamera實例存儲在一個容器中着憨。

    //6*6陣列相機
     vector<PerspectiveCamera> arrayCamera;
    
    int amount = 6;
    float size = (float)1/amount;
    
    for ( int y = 0; y < amount; y ++ ) {
        for ( int x = 0; x < amount; x ++ ) {
            PerspectiveCamera subcamera;
            subcamera.subview = SubViewPort((float)x/amount,(float)y/amount,size,size);
            arrayCamera.push_back(subcamera);
        }      
    }
    
    ...
    //設(shè)置每個投射矩陣參數(shù)
    float aspect = g_windowWidth / static_cast <double> (g_windowHeight);
    for(auto &camera : arrayCamera){
        //注意:camera必須為reference,否則參數(shù)無法存儲到arrayCamera的實例中
        camera.aspect = aspect;
        camera.far = g_frustFar;
        camera.near = g_frustNear;
        camera.fov = g_frustFovY;
        //生成投射矩陣
        camera.updatePorjectonMatrix();
    }

3. 渲染時應(yīng)用多個子視口

在渲染時务嫡,每個子視口被設(shè)置到window的一個特定區(qū)域享扔,每個視口都可以實現(xiàn)獨立的場景渲染。

for(auto &camera:arrayCamera){
        //由于每個子視口以比例方式設(shè)置植袍,應(yīng)用時要根據(jù)窗口尺寸進行適當?shù)目s放。
        SubViewPort svPort = camera.subview;
        int x = svPort.x * g_windowWidth;
        int y = svPort.y * g_windowHeight;
        int width = svPort.width * g_windowWidth;
        int height = svPort.height * g_windowHeight;
        glViewport(x, y, width, height);
        
        //背景渲染
        planeModel->setPerspectiveCamera(make_shared<PerspectiveCamera>(camera));
        planeModel->Render();
        //teapot渲染
        teapotModel->setPerspectiveCamera(make_shared<PerspectiveCamera>(camera));
        teapotModel->Render();
    }

4. 渲染效果

arraycamera_example_20200329.jpg
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末籽懦,一起剝皮案震驚了整個濱河市于个,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌暮顺,老刑警劉巖厅篓,帶你破解...
    沈念sama閱讀 212,542評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異捶码,居然都是意外死亡羽氮,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,596評論 3 385
  • 文/潘曉璐 我一進店門惫恼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來档押,“玉大人,你說我怎么就攤上這事祈纯×钏蓿” “怎么了?”我有些...
    開封第一講書人閱讀 158,021評論 0 348
  • 文/不壞的土叔 我叫張陵腕窥,是天一觀的道長粒没。 經(jīng)常有香客問我,道長簇爆,這世上最難降的妖魔是什么癞松? 我笑而不...
    開封第一講書人閱讀 56,682評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮入蛆,結(jié)果婚禮上响蓉,老公的妹妹穿的比我還像新娘。我一直安慰自己安寺,他們只是感情好厕妖,可當我...
    茶點故事閱讀 65,792評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般言秸。 火紅的嫁衣襯著肌膚如雪软能。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,985評論 1 291
  • 那天举畸,我揣著相機與錄音查排,去河邊找鬼。 笑死抄沮,一個胖子當著我的面吹牛跋核,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播叛买,決...
    沈念sama閱讀 39,107評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼砂代,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了率挣?” 一聲冷哼從身側(cè)響起刻伊,我...
    開封第一講書人閱讀 37,845評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎椒功,沒想到半個月后捶箱,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,299評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡动漾,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,612評論 2 327
  • 正文 我和宋清朗相戀三年丁屎,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片旱眯。...
    茶點故事閱讀 38,747評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡晨川,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出键思,到底是詐尸還是另有隱情础爬,我是刑警寧澤,帶...
    沈念sama閱讀 34,441評論 4 333
  • 正文 年R本政府宣布吼鳞,位于F島的核電站看蚜,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏赔桌。R本人自食惡果不足惜供炎,卻給世界環(huán)境...
    茶點故事閱讀 40,072評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望疾党。 院中可真熱鬧音诫,春花似錦、人聲如沸雪位。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,828評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至香罐,卻和暖如春卧波,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背庇茫。 一陣腳步聲響...
    開封第一講書人閱讀 32,069評論 1 267
  • 我被黑心中介騙來泰國打工港粱, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人旦签。 一個月前我還...
    沈念sama閱讀 46,545評論 2 362
  • 正文 我出身青樓查坪,卻偏偏與公主長得像,于是被迫代替她去往敵國和親宁炫。 傳聞我的和親對象是個殘疾皇子偿曙,可洞房花燭夜當晚...
    茶點故事閱讀 43,658評論 2 350

推薦閱讀更多精彩內(nèi)容

  • 前言 最近翻閱關(guān)于從2D視頻或者圖片中重構(gòu)3D姿態(tài)的文章及其源碼,發(fā)現(xiàn)都有關(guān)于攝像機參數(shù)的求解羔巢,查找了相關(guān)資料遥昧,做...
    予汐閱讀 6,143評論 0 3
  • 對Camera的理解一直在于棋牌游戲(2D)開發(fā)時Camera Projection的選擇,其他方面的參數(shù)沒有糾結(jié)...
    夜行水寒閱讀 2,005評論 0 1
  • 本文主要是講解 Three.js 的相關(guān)概念朵纷,幫助大家對 Three.js 以及相關(guān)知識形成比較完整的理解。今年來...
    Simon王小白閱讀 8,440評論 2 9
  • 投影 透視投影(perspective projection) 透視投影屬于中心投影永脓。透視投影圖簡稱為透視圖或透視...
    ninedreams閱讀 45,111評論 0 12
  • 概述 Canvas -> JavaScript -> Three.js -> WebGL -> OpenGL ->...
    李霖弢閱讀 1,415評論 0 1