Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to load image registration in WebGL development, which has certain reference value. Interested friends can refer to it. I hope you will gain a lot after reading this article. Let Xiaobian take you to understand it together.

WebGL can load image textures, images can change according to set coordinates, set image size, etc.

Generally, when loading pictures, the key is to set the pixel position coordinates of the pictures, such as the coordinate form below, and arrange the positions of the pictures in order.

After the pixel position of the picture is set, set the size of the picture. By default, you can load the picture according to the length and width of the picture. When x1 and y1 are 0, 0, load the picture from the upper left corner. If you want to leave a point, you can adjust the x1 and y1 values to be larger.

WebGL vertex-shader (vertex shader), the screen coordinates need to be transformed into rendering space coordinates, the following paragraph is copied from the WebGL basic website, can be used directly, there are English instructions above.

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;

}

In WebGL's fragment-shader, we just need to set the color of the image, which is also the code of the webgl base website.

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

}

Of course, said the above, loading a picture is relatively simple, if the background below is a map control, how to load the picture and map linkage registration.

Here is a brief thought:

Generally, maps are sliced according to Web Mercator. The slice size of the first level is 256*256, and the corresponding latitude and longitude range is [-180,-90, 180, 90]. According to these, we can convert the pixel position of the slice with latitude and longitude at the first level when the first level is in use. For the specific algorithm, refer to the following website.

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

Based on the map's four quadrants, using the coordinates of the upper left corner, the pixel position corresponding to the first level slice can be converted. In this way, the map transformation matrix translateMatrix can be constructed, and then the map zoom matrix scaleMatrix can be constructed according to the zoom level of the map. When the map changes, the matrix is transferred to the vertex-shader, and the matrix and coordinates are multiplied, so that the coordinates can be changed, so that the image can be overlaid.

gl_Position =u_matrix * a_position;

White images are loaded in translucency, which changes as the map moves. Translucency changes the transparency of the colors in the shader.

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

Webgl loading efficiency is also quite high, the size of the picture above is about 6M.

Thank you for reading this article carefully. I hope that the article "How to load image registration in WebGL development" shared by Xiaobian will be helpful to everyone. At the same time, I hope that everyone will support you a lot and pay attention to the industry information channel. More relevant knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.