多視口的實現

1. 多視口

1.1. 什麼是視口及實現方法

   WebGL視口就是窗口上繪製模型的地方， WebGL通常狀況下只有一個窗口，可是能夠有多個視口， 有時候咱們須要多個視口顯示同一個模型的不一樣角度，這個時候就要用到多視口，在three.js中實現多視口有兩種方法，第一種用多個相機，每一個相機關聯一個視口，顯示每一個相機的時候，都要從新定義視口在頁面上的位置, 第二種只有一個相機，可是這個相機關聯多個視口，而後同一個相機分屢次繪製，就能夠把相機內部的模型繪製到不一樣的視口內部。

1.2. 多視口的原理

就是每次Render都改變視口矩陣，視口矩陣改變了，模型在屏幕上繪製的位置也就改變了，因此實現多視口能夠用多個相機或者一個相機，可是每次視口矩陣都要不一樣。opengl可使用glViewPort()改變視口矩陣，three.js可使用renderer.setViewport( left, bottom, width, height )改變視口矩陣，通常狀況下，視口矩陣的參數會被規格化到0和1之間。

也就是把屏幕的長寬定爲1.0, 而後根據比例輸入參數。

 

1.3. 案例

   three.js中的一個例子webgl_multiple_views.html

 

最左邊的視口定義以下，窗口長寬規格化爲1，以左下角爲原點，

{

left: 0,       視口在X方向的座標

bottom: 0,     視口在Y方向的座標

width: 0.5,    視口寬0.5，長寬都規格化到0和1之間

height: 1.0,    視口高1.0

background: new THREE.Color().setRGB( 0.5, 0.5, 0.7 ),  背景色

eye: [ 0, 300, 1800 ],  眼睛的位置

up: [ 0, 1, 0 ],        向上向量

fov: 30,             擡頭的角度

updateCamera: function ( camera, scene, mouseX, mouseY ) {

camera.position.x += mouseX * 0.05;

camera.position.x = Math.max( Math.min( camera.position.x, 2000 ), -2000 );

camera.lookAt( scene.position ); //mousreX, mouseY,鼠標在屏幕上移動的時候的座標，根據座標的變化，實現球的運動

    }

},

定義完第一個視口後，用一樣的方法定義其它兩個視口，只要改變left, bottom, width, height,就能夠改變視口的位置。

 

這個例子一樣能夠造成陰影，方法以下，先造成一個二維的畫布，而且在上面繪製一個填充的矩形

var canvas = document.createElement( 'canvas' );

canvas.width = 128;

canvas.height = 128;

 

造成陰影紋理，這是three.js中的實現陰影的方式

var shadowMaterial = new THREE.MeshBasicMaterial({ map: shadowTexture, transparent: true });

var shadowGeo = new THREE.PlaneBufferGeometry( 300, 300, 1, 1 );

 

而後把球掛場景上

group1 = THREE.SceneUtils.createMultiMaterialObject( geometry, materials );

group1.position.x = -400; 改變位置

group1.rotation.x = -1.87;

scene.add( group1 );

 

而後在不一樣的視口，使用不一樣的相機繪製，而後就造成了多視口

for ( var ii = 0; ii < views.length; ++ii ) {

view = views[ii];

camera = view.camera;

view.updateCamera( camera, scene, mouseX, mouseY );

 

    //從規格化的視口轉變爲屏幕座標

var left   = Math.floor( windowWidth  * view.left );

var bottom = Math.floor( windowHeight * view.bottom );

var width  = Math.floor( windowWidth  * view.width );

var height = Math.floor( windowHeight * view.height );

 

    //設置視口在屏幕上的位置

renderer.setViewport( left, bottom, width, height );

renderer.setScissor( left, bottom, width, height );

renderer.enableScissorTest ( true );

renderer.setClearColor( view.background );

camera.aspect = width / height;

camera.updateProjectionMatrix();

renderer.render( scene, camera );

}

 

交流圖形學的一切，尤爲是大型程序的設計，天天有原創文章
微信公衆號: GraphicsPlatform

qq羣: 559684273
qq:   1829634717

將近兩百篇圖形學相關的技術文章，常常更新技術博客: http://www.cnblogs.com/lizhengjin