用webgl來繪製二維點雲吧

2021-08-03 02:38:19 字數 2637 閱讀 7803

執行測試平台:小強ros機械人

做圖形化程式web是非常方便的。最近做了乙個專案就是用webgl來繪製二維點雲，執行效果還是不錯的。下面簡單介紹一下webgl的使用方法和二維點雲的繪製方法。

首先什麼是webgl？opengl大家一定都知道，就是 open graphic library. webgl 就相當於web中的opengl實現。利用webgl就可以充分利用顯示卡的效能繪製出很好的圖形效果。

webgl的基本概念

三維圖形在opengl中都是分割成三角形進行渲染的。比如乙個正方形可以分成上下兩個三角形。

這樣乙個正方形就有六個定點去確定下來。要利用webgl取畫圖就要指定兩點就可以了，乙個是所繪圖形的所有定點，另乙個是每個三角形的貼圖。在webgl中這個是用 script type="x-shader/x-fragment"去指定的。

下面就是畫乙個正方形的頂點計算script

首先定義了幾個變數，然後根據轉動，平移等座標變換去計算應該繪製的座標。gl_position就是最後計算得出的座標。整個計算過程由gpu去完成，因此執行效率也是很高的。

定義貼圖的script如下

這個指令碼只是設定了填充的顏色，當然也可以填充之類的。

變數的計算方式已經有了，怎麼給這些變數設值呢？opengl提供了一些方法

gl = canvas.getcontext("webgl");


if (!gl) 


// setup glsl program


var program = glutils.createprogramfromscripts(gl, ["2d-vertex-shader", "2d-fragment-shader"]);


gl.useprogram(program);


// lookup uniforms


resolutionlocation = gl.getuniformlocation(program, "u_resolution"); // 獲取gpu中變數的位址


colorlocation = gl.getuniformlocation(program, "u_color");


translationlocation = gl.getuniformlocation(program, "u_translation");


rotationlocation = gl.getuniformlocation(program, "u_rotation");


scalelocation = gl.getuniformlocation(program, "u_scale");


var positionlocation = gl.getattriblocation(program, "a_position");


translation = [0, 0];


rotation = [0, 1];


scale = [1, 1];


// set the resolution


gl.uniform2f(resolutionlocation, canvas.width, canvas.height);  // 給gpu中的變數賦值


// set the translation.


gl.uniform2fv(translationlocation, translation);


// set the rotation.


gl.uniform2fv(rotationlocation, rotation);


// set the scale.


gl.uniform2fv(scalelocation, scale);
執行uniform2f之後就會更改gpu內對應資料的值。

通過

gl.bufferdata(gl.array_buffer, new float32array([


x1, y1,


x2, y1,


x1, y2,


x1, y2,


x2, y1,


x2, y2]), gl.static_draw);
去設定所繪圖形的端點座標，這裡是繪製正方形，所以是六個頂點。

gl.drawarrays(gl.********s, 0, 6);
執行上面這句就可以開始繪圖了，這裡的引數指明了採用三角形進行繪圖，共繪製六個頂點。這樣我們就能看到乙個正方形了

完整的**執行例子, 不涉及到座標的計算

完整的有座標計算和拉伸的例子

對於我們所要繪製的點雲，只有畫正方形是不夠的。還有影象的放大，縮小，平移等等。這些就可以通過改變計算頂點座標時的引數來實現。具體算起來會比較複雜，但是原理上就是如此。每個點就是乙個非常小的正方形。

來乙個軟體的最終效果圖吧。

放大後的點雲圖

二維資料用三維表達來表現

這次要做的是二維資料實現三維表達，我們要弄的操作如下 例如一 圍欄的操作，首先我們先加載入資料，之後檢視屬性 第一 調整高度模式 風格設定，高度模式選擇相對地面，底部高程，拉伸高度 第二 三維貼圖管理 側面貼圖 實際大小，側面貼圖橫向重複 例2 建築物的操作，頂面設定。三維貼圖管理 側面紋理路徑，實...

python用二維管繪製當前年份

python初級 用二維管繪製當前系統年份，如下 import turtle,datetime defdrawgap 繪製數碼管間隔 turtle.penup turtle.fd 5 defdrawline draw 繪製單段數碼管 drawgap turtle.pendown if draw el...

二維點雲ICP的python實現

使用python語言來實現二維點雲的icp演算法 二維點雲icp演算法原理及推導，請見我的另外一篇部落格 二維點雲icp原理推導 特點說明 icp演算法中的loss計算方式，可以根據自己實際需要來調整。我這裡使用的是，目標點雲a中的某個點 a，從源點雲 b 中找到距離點 a 最近的點 b，總的los...