I am looking to render some output to an openlayers map using the vertexShader & fragmentShader from the WebGL options. The long term goal is something like the effect at windy.com .
I have created a CustomWebGLPointsLayer (extending ol/layer/WebGLPoints) & specified some simple shaders to control for position & color. With my CustomWebGLPointsLayer, data points are being placed in the center of the map resulting in a triangle (top left, top right, center) on the map. This triangle also ignores the color(s) I am attempting to set.
Questions are:
Repo is here if you want to play with the code.
CustomWebGLPointsLayer instantiation:
class CustomWebGLPointsLayer extends WebGLPointsLayer {
createRenderer() {
return new WebGLPointsLayerRenderer(this, {
// "attributes" are passed into the shaders
attributes: [
{
name: 'a_coords',
callback: function(feature) {
// Array of XY positions per feature to pass to the vertexShader.
const coordinatesArr = [
feature.values_[0],
feature.values_[1],
];
return coordinatesArr;
}
},
{
name: 'a_color',
callback: function(feature) {
// Create an array of some colors & select one at random
const colorsArr = {
"red": `[1.0, 0.0, 0.0]`,
"green": `[0.0, 1.0, 0.0]`,
"blue": `[0.0, 0.0, 1.0]`,
};
const obj = Object.keys(colorsArr);
const randomColor = obj[Math.floor(Math.random() * obj.length)];
const vec3_color = colorsArr[randomColor];
return vec3_color;
}
}
],
vertexShader:
`
// Specify the precision level to use with floats in this shader.
precision mediump float;
// Declare attributes; these values are passed into GLSL from JavaScript
attribute vec2 a_coords;
attribute vec3 a_color;
// Declare varyings; these values will be passed along to the fragmentShader
varying vec3 v_color;
void main() {
gl_Position = vec4(a_coords, 0.0, 0.0); // Set the position
v_color = vec3(a_color); // set the value of v_color <-- This doesn't work?
}
`,
// This should paint all fragments the value of v_color
fragmentShader: `
precision mediump float;
// Declare varyings; these values have been passed along from the vertexShader
varying vec3 v_color;
void main() {
gl_FragColor = vec4(v_color, 0.5); // Set the color dynamically - DOESN'T WORK
// gl_FragColor = vec4(1.0, 0.0, 1.0, 0.5); // pink; WORKS!
// gl_FragColor = vec4(1, 0, 0, 0.5); // red; WORKS! (testing ints, not floats)
}
`
})
}
};
And the map
const map = new Map({
layers: [
new Tile({ source: new OSM() }),
// new WebGLPointsLayer({ // Use this if you want to see the points rendered statically
new CustomWebGLPointsLayer({
source: new VectorSource({ features: featuresArr }),
style: {
symbol: {
symbolType: "triangle",
size: 16,
color: "red",
rotation: ["*", ["get", "deg"], Math.PI / 180],
rotateWithView: true,
},
},
}),
],
target: "map",
view: new View({center: [0, 0],zoom: 0,}),
});
Thanks!
I have the color passing into the shaders now, which effectively answers this question (which, if phrased better, was "How can I pass unique values per feature to the shaders?). Repo is updated if you want to play with it.
Here is my custom layer. You can see that I separated the RGB values into distinct attributes. featureColorRed, featureColorBlue & featureColorGreen are all set as features during data processing. Each is a FLOAT which appears to be a requirement of passing data into the shaders(?).
// A custom renderer intended to draw GLSL output to a layer
class CustomWebGLPointsLayer extends WebGLPointsLayer {
createRenderer() {
return new WebGLPointsLayerRenderer(this, {
attributes: [
{
name: 'featureColorRed',
callback: function(feature) {
const color = feature.values_.featureColorRed;
return color;
}
},
{
name: 'featureColorGreen',
callback: function(feature) {
const color = feature.values_.featureColorGreen;
return color;
}
},
{
name: 'featureColorBlue',
callback: function(feature) {
const color = feature.values_.featureColorBlue;
return color;
}
},
],
vertexShader:
`
attribute vec2 a_coordinates;
attribute float a_featureColorRed;
varying vec4 v_featureColor;
attribute float a_featureColorGreen;
varying vec4 v_featureColorGreen;
attribute float a_featureColorBlue;
varying vec4 v_featureColorBlue;
void main() {
v_featureColor = vec4(a_featureColorRed, a_featureColorGreen, a_featureColorBlue, 1.0);
gl_Position = vec4(a_coordinates, 0.0, 1.0);
}`,
fragmentShader: `
precision mediump float;
varying vec4 v_featureColor;
void main() {
gl_FragColor = v_featureColor;
}
`
})
}
};
Then creating my custom layer. featuresArr is the data that has been processed. IDK why I need to include "symbolType" here but without this style object OL fails to load.
const customGLSLLayer = new CustomWebGLPointsLayer({
source: new VectorSource({ features: featuresArr }),
style: {
symbol: {
symbolType: "square",
},
},
zIndex: 10,
});
And finally, the map (which is pretty standard).
const map = new Map({
layers: [
new Tile({
source: new OSM(),
zIndex: 1,
}),
customGLSLLayer
],
target: "map",
view: new View({center: [0, 0],zoom: 0,}),
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.