I have some code that generates two WebGL triangles, one green and one blue, and puts them on a mapbox-gl-js map. The four coordinates are those of four European cities. Here is the code I have:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add a custom style layer</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoic3RlZXBhdHRpY3N0YWlycyIsImEiOiJjbDNvaGFod2EwbXluM2pwZTJiMDYzYjh5In0.J_HeH00ry0tbLmGmTy4z5w';
const map = new mapboxgl.Map({
container: 'map',
zoom: 3,
center: [7.5, 58],
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/light-v11',
antialias: true, // create the gl context with MSAA antialiasing, so custom layers are antialiased
projection: 'mercator'
});
// define vertices of the triangle to be rendered in the custom style layer
const helsinki = mapboxgl.MercatorCoordinate.fromLngLat({
lng: 25.004,
lat: 60.239
});
const berlin = mapboxgl.MercatorCoordinate.fromLngLat({
lng: 13.403,
lat: 52.562
});
const kyiv = mapboxgl.MercatorCoordinate.fromLngLat({
lng: 30.498,
lat: 50.541
});
const moscow = mapboxgl.MercatorCoordinate.fromLngLat({
lng: 37.6173,
lat: 55.7558
});
const vertex_buffer = new Float32Array([
helsinki.x,
helsinki.y,
berlin.x,
berlin.y,
kyiv.x,
kyiv.y,
kyiv.x,
kyiv.y,
helsinki.x,
helsinki.y,
moscow.x,
moscow.y
])
const color_buffer = new Float32Array([
0.0, 1.0, 0.0, 1.0,
0.0, 1.0, 0.0, 1.0,
0.0, 1.0, 0.0, 1.0,
0.0, 0.0, 1.0, 1.0,
0.0, 0.0, 1.0, 1.0,
0.0, 0.0, 1.0, 1.0,
])
const highlightLayer = {
id: 'highlight',
type: 'custom',
// method called when the layer is added to the map
// https://docs.mapbox.com/mapbox-gl-js/api/#styleimageinterface#onadd
onAdd: function (map, gl) {
// create GLSL source for vertex shader
const vertexSource = `
uniform mat4 u_matrix;
attribute vec2 a_pos;
attribute vec4 color;
varying vec4 vColor;
void main() {
gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);
vColor = color;
}`;
// create GLSL source for fragment shader
const fragmentSource = `
precision lowp float;
varying vec4 vColor;
void main() {
gl_FragColor = vec4(vColor);
}`;
// create a vertex shader
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexSource);
gl.compileShader(vertexShader);
// create a fragment shader
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentSource);
gl.compileShader(fragmentShader);
// link the two shaders into a WebGL program
this.program = gl.createProgram();
gl.attachShader(this.program, vertexShader);
gl.attachShader(this.program, fragmentShader);
gl.linkProgram(this.program);
this.aPos = gl.getAttribLocation(this.program, 'a_pos');
this.color = gl.getAttribLocation(this.program, 'color');
// create and initialize a WebGLBuffer to store vertex and color data
this.vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
gl.bufferData(
gl.ARRAY_BUFFER,
vertex_buffer,
gl.STATIC_DRAW
);
this.colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer);
gl.bufferData(
gl.ARRAY_BUFFER,
color_buffer,
gl.STATIC_DRAW
);
},
// method fired on each animation frame
// https://docs.mapbox.com/mapbox-gl-js/api/#map.event:render
render: function (gl, matrix) {
gl.useProgram(this.program);
gl.uniformMatrix4fv(
gl.getUniformLocation(this.program, 'u_matrix'),
false,
matrix
);
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
gl.enableVertexAttribArray(this.aPos);
gl.vertexAttribPointer(this.aPos, 2, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer);
gl.enableVertexAttribArray(this.color);
gl.vertexAttribPointer(this.color, 4, gl.FLOAT, false, 0, 0);
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
gl.drawArrays(gl.TRIANGLES, 0, vertex_buffer.length / 2);
}
};
// add the custom style layer to the map
map.on('load', () => {
map.addLayer(highlightLayer, 'building');
});
</script>
</body>
</html>This generates an image that looks like this:
However, I want to blur, or smooth the polygons, so they look like this:
(disregard the fact that the map is also blurred, I just blurred the whole image so you can understand what I want the polygons to look like)
Is there any way I can achieve this? Maybe I can implement a Gaussian blur, or use some type of shader? I'm rather new to WebGL, so I would really appreciate some help.
