帶有自定義渲染器、vertexShader 和 fragmentShader 的 Openlayers

Question

我希望使用 WebGL 選項中的 vertexShader 和 fragmentShader 將一些 output 渲染到 openlayers map。 長期目標類似於windy.com的效果。

我創建了一個 CustomWebGLPointsLayer（擴展 ol/layer/WebGLPoints）並指定了一些簡單的着色器來控制 position 和顏色。 使用我的 CustomWebGLPointsLayer，數據點被放置在 map 的中心，從而在 map 上形成一個三角形（左上角、右上角、中心）。這個三角形也忽略了我試圖設置的顏色。

問題是：

• 我怎樣才能適當地呈現這些點？
• 如何讓動態顏色正常工作？

如果你想玩代碼，回購就在這里。

CustomWebGLPointsLayer 實例化：

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

和 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,}),
    });

謝謝！

Answer 1

我現在將顏色傳遞到着色器中，這有效地回答了這個問題（如果措辭更好的話，是“我如何將每個特征的唯一值傳遞給着色器？”）。如果您想使用它，請更新 Repo。

這是我的自定義圖層。 您可以看到我將 RGB 值分成不同的屬性。 featureColorRed, featureColorBlue & featureColorGreen 都是在數據處理時設置為特征。 每個都是一個 FLOAT，這似乎是將數據傳遞到着色器（？）的要求。

// 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;
      }
      `
    })
  }
};

然后創建我的自定義層。 featuresArr 是已經處理過的數據。 IDK 為什么我需要在此處包含“symbolType”但沒有此樣式 object OL 無法加載。

const customGLSLLayer = new CustomWebGLPointsLayer({
  source: new VectorSource({ features: featuresArr }),
  style: {
    symbol: {
      symbolType: "square",
    },
  },
  zIndex: 10,
});

最后是 map（非常標准）。

const map = new Map({
  layers: [
    new Tile({ 
      source: new OSM(), 
      zIndex: 1, 
    }),
    customGLSLLayer
  ],
  target: "map",
  view: new View({center: [0, 0],zoom: 0,}),
});