WebGL开发：加载图片配准

Posted 2021-04-25 技术几句杂谈

WebGL可以加载图片纹理，图片可以根据设定的坐标变化，设置图片的尺寸等等。

一般在加载图片的时候，关键的是设置图片的像素位置坐标，如下边的坐标形式，按照顺序排列图片的位置。

图片的像素位置设置好以后，设置图片的尺寸，默认可以根据图片的长和宽进行加载，当x1和y1是0,0的时候，从左上角进行图片的加载，要想离开一点可以将x1和y1值调大些。

WebGL的vertex-shader（顶点着色器）中，需要将屏幕坐标，变换成渲染空间的坐标，下边一段是从WebGL基础网站复制下的，直接可以用，上边有英文说明。

                        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（片段着色器）中，我们只需要设置图片的颜色即可了，这也是参照webgl基础网站的代码。

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);  

 }

当然说了以上这些，加载一张图片还是比较简单的，如果下边的背景是一个地图控件的话，如何让加载的图片和地图进行联动配准。

下边简要说一下思路：

一般地图都是按照web墨卡托进行切片的，第一级的切片尺寸是256*256，对应的经纬度范围是[-180,-90,180,90]，根据这些我们就能换算第一级的时候，经纬度在第一级的切片像素位置，具体的算法参照以下的网址。

// -- 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

根据地图的四至范围，使用的是左上角的坐标，就能换算出来对应在第一级切片的像素位置。这样就能构建地图的变换矩阵translateMatrix，再根据地图的缩放级别，构建地图的缩放矩阵scaleMatrix，在地图发生变化的时候，往vertex-shader中传递矩阵，用矩阵和坐标进行相乘，就能使坐标发生变化，从而使图片进行覆盖变化。

gl_Position =u_matrix * a_position;

白色的图片是以半透明加载上去的，在地图移动时进行变化，半透明要改变shader中的颜色透明度。

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

webgl加载图片的效率也是相当高的，上边图片的大小是6M左右。

以上参照互联网搜索进行组合开发的，不会造轮子，就从网上找了一些轮子进行开发。