How to load point with webgl

This article introduces the relevant knowledge of "how to load points in webgl mode". In the operation process of actual cases, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

This method is different from using Leaflet API to load points, this is to overlay a canvas object on the upper layer of the map, using the open source L.CanvasOverlay.js, which can be searched on github, draw points on canvas, calculate the transformation matrix in vertex shader when the map range or level changes dynamically, and keep consistent with the position on the map.

json coordinate data volume:

The key shader:

uniform mat4 u_matrix;

attribute vec4 a_vertex;

attribute float a_pointSize;

attribute vec4 a_color;

varying vec4 v_color;

void main() {

// Set the size of the point

gl_PointSize = a_pointSize;

// multiply each vertex by a matrix.

gl_Position = u_matrix * a_vertex;

// pass the color to the fragment shader

v_color = a_color;

}

precision mediump float;

varying vec4 v_color;

void main() {

float border = 0.05;

float radius = 0.5;

vec4 color0 = vec4(0.0, 0.0, 0.0, 0.0);

vec4 color1 = vec4(v_color[0], v_color[1], v_color[2], 0.2);

vec2 m = gl_PointCoord.xy - vec2(0.5, 0.5);

float dist = radius - sqrt(m.x * m.x + m.y * m.y);

float t = 0.0;

if (dist > border)

t = 1.0;

else if (dist > 0.0)

t = dist / border;

// float centerDist = length(gl_PointCoord - 0.5);

// works for overlapping circles if blending is enabled

gl_FragColor = mix(color0, color1, t);

/*

// -- another way for circle

float centerDist = length(gl_PointCoord - 0.5);

float radius = 0.5;

// works for overlapping circles if blending is enabled

gl_FragColor = vec4(v_color[0], v_color[1], v_color[2], 0.2 * step(centerDist, radius));

*/

/*

// simple circles

float d = distance (gl_PointCoord, vec2(0.5,0.5));

if (d

< 0.5 ){ gl_FragColor =vec4(v_color[0], v_color[1], v_color[2], 0.2); } else{ discard; } */ // -- squares //gl_FragColor = v_color; //gl_FragColor =vec4(v_color[0], v_color[1], v_color[2], 0.2); // v_color; } // -- 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 //将经纬度转换像素的代码，在第一级别进行转换 function LatLongToPixelXY(latitude, longitude) { var pi_180 = Math.PI / 180.0; var pi_4 = Math.PI * 4; var sinLatitude = Math.sin(latitude * pi_180); var pixelY = (0.5 - Math.log((1 + sinLatitude) / (1 - sinLatitude)) / (pi_4)) * 256; var pixelX = ((longitude + 180) / 360) * 256; var pixel = { x: pixelX, y: pixelY }; return pixel; } //计算转换的矩阵 function drawingOnCanvas(canvasOverlay, params) { if (gl == null) return; gl.clear(gl.COLOR_BUFFER_BIT); pixelsToWebGLMatrix.set([2 / canvas.width, 0, 0, 0, 0, -2 / canvas.height, 0, 0, 0, 0, 0, 0, -1, 1, 0, 1]); gl.viewport(0, 0, canvas.width, canvas.height); var pointSize = Math.max(leafletMap.getZoom() - 4.0, 1.0); gl.vertexAttrib1f(gl.aPointSize, pointSize); // -- set base matrix to translate canvas pixel coordinates ->

webgl coordinates

mapMatrix.set(pixelsToWebGLMatrix);

var bounds = leafletMap.getBounds();

var topLeft = new L.LatLng(bounds.getNorth(), bounds.getWest());

var offset = LatLongToPixelXY(topLeft.lat, topLeft.lng);

// -- Scale to current zoom

var scale = Math.pow(2, leafletMap.getZoom());

scaleMatrix(mapMatrix, scale, scale);

translateMatrix(mapMatrix, -offset.x, -offset.y);

// -- attach matrix value to 'mapMatrix' uniform in shader

gl.uniformMatrix4fv(u_matLoc, false, mapMatrix);

gl.drawArrays(gl.POINTS, 0, numPoints);

}

"How to load point with webgl" content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!