WebGL開發(fā)中如何實(shí)現(xiàn)加載圖片配準(zhǔn)

這篇文章主要介紹了WebGL開發(fā)中如何實(shí)現(xiàn)加載圖片配準(zhǔn)，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

WebGL可以加載圖片紋理，圖片可以根據(jù)設(shè)定的坐標(biāo)變化，設(shè)置圖片的尺寸等等。

一般在加載圖片的時(shí)候，關(guān)鍵的是設(shè)置圖片的像素位置坐標(biāo)，如下邊的坐標(biāo)形式，按照順序排列圖片的位置。

圖片的像素位置設(shè)置好以后，設(shè)置圖片的尺寸，默認(rèn)可以根據(jù)圖片的長和寬進(jìn)行加載，當(dāng)x1和y1是0,0的時(shí)候，從左上角進(jìn)行圖片的加載，要想離開一點(diǎn)可以將x1和y1值調(diào)大些。

WebGL的vertex-shader（頂點(diǎn)著色器）中，需要將屏幕坐標(biāo)，變換成渲染空間的坐標(biāo)，下邊一段是從WebGL基礎(chǔ)網(wǎng)站復(fù)制下的，直接可以用，上邊有英文說明。

                        attribute vec2 a_position; 

attribute vec2 a_texCoord; 

uniform vec2 u_resolution; 

varying vec2 v_texCoord;  

void main() { 

// convert the rectangle from pixels to 0.0 to 1.0  

 vec2 zeroToOne =  a_position / u_resolution;  

// convert from 0->1 to 0->2 

vec2 zeroToTwo = zeroToOne * 2.0; 

// convert from 0->2 to -1->+1 (clipspace) 

vec2 clipSpace = zeroToTwo - 1.0; 

gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1); 

// pass the texCoord to the fragment shader 

     // The GPU will interpolate this value between points.

 v_texCoord = a_texCoord;

}

WebGL的fragment-shader（片段著色器）中，我們只需要設(shè)置圖片的顏色即可了，這也是參照webgl基礎(chǔ)網(wǎng)站的代碼。

precision mediump float; 

// our texture 

uniform sampler2D u_image;

uniform vec2 u_res; 

       //the texCoords passed in from the vertex shader. 

        varying vec2 v_texCoord; 

void main() 

{  

             gl_FragColor = texture2D(u_image, v_texCoord);  

 }

當(dāng)然說了以上這些，加載一張圖片還是比較簡單的，如果下邊的背景是一個(gè)地圖控件的話，如何讓加載的圖片和地圖進(jìn)行聯(lián)動(dòng)配準(zhǔn)。

下邊簡要說一下思路：

一般地圖都是按照web墨卡托進(jìn)行切片的，第一級(jí)的切片尺寸是256*256，對(duì)應(yīng)的經(jīng)緯度范圍是[-180,-90,180,90]，根據(jù)這些我們就能換算第一級(jí)的時(shí)候，經(jīng)緯度在第一級(jí)的切片像素位置，具體的算法參照以下的網(wǎng)址。

// -- converts latlon to pixels at zoom level 0 (for 256x256 tile size) , inverts y coord )

// -- source : http://build-failed.blogspot.cz/2013/02/displaying-webgl-data-on-google-maps.html

根據(jù)地圖的四至范圍，使用的是左上角的坐標(biāo)，就能換算出來對(duì)應(yīng)在第一級(jí)切片的像素位置。這樣就能構(gòu)建地圖的變換矩陣translateMatrix，再根據(jù)地圖的縮放級(jí)別，構(gòu)建地圖的縮放矩陣scaleMatrix，在地圖發(fā)生變化的時(shí)候，往vertex-shader中傳遞矩陣，用矩陣和坐標(biāo)進(jìn)行相乘，就能使坐標(biāo)發(fā)生變化，從而使圖片進(jìn)行覆蓋變化。

gl_Position =u_matrix * a_position;

白色的圖片是以半透明加載上去的，在地圖移動(dòng)時(shí)進(jìn)行變化，半透明要改變shader中的顏色透明度。

 gl_FragColor = vec4(floor(255.0 * color * 0.75) / 255.0);

webgl加載圖片的效率也是相當(dāng)高的，上邊圖片的大小是6M左右。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“WebGL開發(fā)中如何實(shí)現(xiàn)加載圖片配準(zhǔn)”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!