WebGL系列(二)三維運算矩陣

2021-09-14 04:39:17 字數 966 閱讀 2423

viewmatrix.setlookat(eyex,eyey,eyez,atx,aty,atz,upx,upy,upz)

eye是視點,at是觀察點,up是指定上方向

modelmatrix.setrotate(-10,0,0,1)表示繞z軸旋轉10度

長方體,盒狀空間,正射投影(orthographic projection)產生

四稜錐/金字塔空間,透視投影(perspective projection)產生

遠近裁剪面

projmatrix.setortho(left,right,bottom,top,near,far)

projmatrix.setperspective(fov,aspect,near,far)

fov垂直視角

aspect裁剪面寬高比

near,far近、遠裁剪面位置

mvpmatrix.set(projmatrix).multiply(viewmatrix).multiply(modelmatrix)

gl_position = u_mvpmatrix*a_position

gl.enable(gl.depth_test)

gl.clear(gl.color_buffer_bit | gl.depth_buffer_bit)

深度衝突:兩個面挨的太近

多邊形位移(polygon offest)

gl.polygonoffest(factor,units)

gl.drawelements(mode,count,type,offest)

mode:gl.points、gl.lines、gl.line_strip、gl.line_loop、gl.********s、gl.********_strip或gl.trangle_fan

count:繪製頂點個數

type:gl.unsigned或gl.triangie_fan

offest:指定索引陣列中開始繪製的位置

Cesium開發 二三維聯動

費勁巴拉的想弄個cesium和二維地圖的聯動,先是按照原來的思路,通過二維地圖的縮放範圍座標,計算cesium的 視角和 範圍,在根據二維地圖的中心點座標,設定cesium的camera座標一致,再實現二維地圖移動時,移動三維地圖。後來發現,cesium的camera中,setview函式支援定位到...

cesium和leaflet的二三維聯動

最近做個專案,要實現二三維聯動。二維是基於leaflet的地圖,三維是基於cesium,webgl的場景。要實現的是,平移 縮放二維地圖時,三維跟著平移縮放,反過來也一樣。一 問題界定 總體看,一共三個問題。1 要解決二維三維迴圈聯動的問題。就是說,不能拖動二維,三維跟著動,然後二維再跟著三維動,無...

webgl開源三維引擎的選擇

webgl發展的很快,可謂日新月異,所以下面的這些引擎過乙個月,半年可能就不是現在這樣了,對應的連線位址以方便檢視比較。一。小場景的開源三維js引擎 1.babylonjs 當前在用 優點 有微軟背景,有不少的demo,有較詳細的api文件,有供測試的平台,有提供3dsmax轉換模型的外掛程式,缺點...