Webgl renderer / fix existing examples

The shaders were rewritten manually for those, althoughj eventually they
should use the shader builder utilities as well.

src/ol/layer/Heatmap.js

@@ -177,38 +177,47 @@ class Heatmap extends VectorLayer {
    */
   createRenderer() {
     return new WebGLPointsLayerRenderer(this, {
+      attributes: [
+        {
+          name: 'weight',
+          callback: this.weightFunction_
+        }
+      ],
       vertexShader: `
         precision mediump float;
-        attribute vec2 a_position;
-        attribute vec2 a_texCoord;
-        attribute vec2 a_offsets;
-        attribute float a_opacity;
-
         uniform mat4 u_projectionMatrix;
         uniform mat4 u_offsetScaleMatrix;
         uniform float u_size;
+        attribute vec2 a_position;
+        attribute float a_index;
+        attribute float a_weight;
 
         varying vec2 v_texCoord;
-        varying float v_opacity;
+        varying float v_weight;
 
         void main(void) {
-          vec4 offsets = u_offsetScaleMatrix * vec4(a_offsets, 0.0, 0.0);
-          gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0) + offsets * u_size;
-          v_texCoord = a_texCoord;
-          v_opacity = a_opacity;
+          mat4 offsetMatrix = u_offsetScaleMatrix;
+          float offsetX = a_index == 0.0 || a_index == 3.0 ? -u_size / 2.0 : u_size / 2.0;
+          float offsetY = a_index == 0.0 || a_index == 1.0 ? -u_size / 2.0 : u_size / 2.0;
+          vec4 offsets = offsetMatrix * vec4(offsetX, offsetY, 0.0, 0.0);
+          gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0) + offsets;
+          float u = a_index == 0.0 || a_index == 3.0 ? 0.0 : 1.0;
+          float v = a_index == 0.0 || a_index == 1.0 ? 0.0 : 1.0;
+          v_texCoord = vec2(u, v);
+          v_weight = a_weight;
         }`,
       fragmentShader: `
         precision mediump float;
         uniform float u_blurSlope;
 
         varying vec2 v_texCoord;
-        varying float v_opacity;
+        varying float v_weight;
 
         void main(void) {
           vec2 texCoord = v_texCoord * 2.0 - vec2(1.0, 1.0);
           float sqRadius = texCoord.x * texCoord.x + texCoord.y * texCoord.y;
           float value = (1.0 - sqrt(sqRadius)) * u_blurSlope;
-          float alpha = smoothstep(0.0, 1.0, value) * v_opacity;
+          float alpha = smoothstep(0.0, 1.0, value) * v_weight;
           gl_FragColor = vec4(alpha, alpha, alpha, alpha);
         }`,
       uniforms: {
@@ -239,8 +248,7 @@ class Heatmap extends VectorLayer {
             u_gradientTexture: this.gradient_
           }
         }
-      ],
-      opacityCallback: this.weightFunction_
+      ]
     });
   }
 }

src/ol/webgl/ShaderBuilder.js

@@ -6,7 +6,7 @@ import {asArray} from '../color.js';
  */
 
 /**
- * Will return the number as a float with a dit separator, which is required by GLSL.
+ * Will return the number as a float with a dot separator, which is required by GLSL.
  * @param {number} v Numerical value.
  * @returns {string} The value as string.
  */
@@ -15,6 +15,19 @@ export function formatNumber(v) {
   return s.indexOf('.') === -1 ? s + '.0' : s;
 }
 
+/**
+ * Will normalize and converts to string a color array compatible with GLSL.
+ * @param {Array<number>} colorArray Color in [r, g, b, a] array form, with RGB components in the
+ * 0..255 range and the alpha component in the 0..1 range. Note that if the A component is
+ * missing, only 3 values will be output.
+ * @returns {string} The color components concatenated in `1.0, 1.0, 1.0, 1.0` form.
+ */
+export function formatColor(colorArray) {
+  return colorArray.map(function (c, i) {
+    return i < 3 ? c / 255 : c;
+  }).map(formatNumber).join(', ');
+}
+
 /**
  * Generates a symbol vertex shader from a literal style,
  * intended to be used on point geometries.
@@ -40,9 +53,6 @@ export function getSymbolVertexShader(parameters) {
   const color = parameters.color !== undefined ?
     (typeof parameters.color === 'string' ? asArray(parameters.color) : parameters.color) :
     [255, 255, 255, 1];
-  function normalizeColor(c, i) {
-    return i < 3 ? c / 255 : c;
-  }
 
   const f = formatNumber;
 
@@ -66,7 +76,7 @@ void main(void) {
   float v = a_index == 0.0 || a_index == 1.0 ? ${f(texCoord[1])} : ${f(texCoord[3])};
   v_texCoord = vec2(u, v);
   v_opacity = ${f(opacity)};
-  v_color = vec4(${color.map(normalizeColor).map(f).join(', ')});
+  v_color = vec4(${formatColor(color)});
 }`;
 
   return body;