Website updates

Author: tschaub

dist/en/main/examples/common.js

@@ -261,12 +261,12 @@ class Heatmap extends BaseVector {
     if (typeof this.getBlur() === 'number') {
       blurCompiled = 'a_blur';
       blurRadiusUniforms['a_blur'] = () => this.getBlur();
-      builder.addUniform('float a_blur');
+      builder.addUniform('a_blur', 'float');
     }
     if (typeof this.getRadius() === 'number') {
       radiusCompiled = 'a_radius';
       blurRadiusUniforms['a_radius'] = () => this.getRadius();
-      builder.addUniform('float a_radius');
+      builder.addUniform('a_radius', 'float');
     }
 
     /** @type {import('../render/webgl/VectorStyleRenderer.js').AttributeDefinitions} */

dist/en/main/examples/common.js.map

@@ -1,11 +1,16 @@
 export const COMMON_HEADER: "#ifdef GL_FRAGMENT_PRECISION_HIGH\nprecision highp float;\n#else\nprecision mediump float;\n#endif\nuniform mat4 u_projectionMatrix;\nuniform mat4 u_screenToWorldMatrix;\nuniform vec2 u_viewportSizePx;\nuniform float u_pixelRatio;\nuniform float u_globalAlpha;\nuniform float u_time;\nuniform float u_zoom;\nuniform float u_resolution;\nuniform float u_rotation;\nuniform vec4 u_renderExtent;\nuniform vec2 u_patternOrigin;\nuniform float u_depth;\nuniform mediump int u_hitDetection;\n\nconst float PI = 3.141592653589793238;\nconst float TWO_PI = 2.0 * PI;\nfloat currentLineMetric = 0.; // an actual value will be used in the stroke shaders\n";
 /**
  * @typedef {Object} AttributeDescription
- * @property {string} name Attribute name, as will be declared in the headers (including a_)
- * @property {string} type Attribute type, either `float`, `vec2`, `vec4`...
- * @property {string} varyingName Varying name, as will be declared in the fragment shader (including v_)
+ * @property {string} name Attribute name, as will be declared in the header of the vertex shader (including a_)
+ * @property {string} type Attribute GLSL type, either `float`, `vec2`, `vec4`...
+ * @property {string} varyingName Varying name, as will be declared in the header of both shaders (including v_)
  * @property {string} varyingType Varying type, either `float`, `vec2`, `vec4`...
- * @property {string} varyingExpression GLSL expression to assign to the varying in the vertex shader
+ * @property {string} varyingExpression GLSL expression to assign to the varying in the vertex shader (e.g. `unpackColor(a_myAttr)`)
+ */
+/**
+ * @typedef {Object} UniformDescription
+ * @property {string} name Uniform name, as will be declared in the header of the vertex shader (including u_)
+ * @property {string} type Uniform GLSL type, either `float`, `vec2`, `vec4`...
  */
 /**
  * @classdesc
@@ -14,8 +19,8 @@ export const COMMON_HEADER: "#ifdef GL_FRAGMENT_PRECISION_HIGH\nprecision highp
  *
  * ```js
  * const shader = new ShaderBuilder()
- *   .addVarying('v_width', 'float', 'a_width')
- *   .addUniform('u_time')
+ *   .addAttribute('a_width', 'float')
+ *   .addUniform('u_time', 'float)
  *   .setColorExpression('...')
  *   .setSymbolSizeExpression('...')
  *   .getSymbolFragmentShader();
@@ -28,7 +33,7 @@ export const COMMON_HEADER: "#ifdef GL_FRAGMENT_PRECISION_HIGH\nprecision highp
 export class ShaderBuilder {
     /**
      * Uniforms; these will be declared in the header (should include the type).
-     * @type {Array<string>}
+     * @type {Array<UniformDescription>}
      * @private
      */
     private uniforms_;
@@ -136,23 +141,24 @@ export class ShaderBuilder {
     /**
      * Adds a uniform accessible in both fragment and vertex shaders.
      * The given name should include a type, such as `sampler2D u_texture`.
-     * @param {string} name Uniform name
+     * @param {string} name Uniform name, including the `u_` prefix
+     * @param {'float'|'vec2'|'vec3'|'vec4'|'sampler2D'} type GLSL type
      * @return {ShaderBuilder} the builder object
      */
-    addUniform(name: string): ShaderBuilder;
+    addUniform(name: string, type: "float" | "vec2" | "vec3" | "vec4" | "sampler2D"): ShaderBuilder;
     /**
      * Adds an attribute accessible in the vertex shader, read from the geometry buffer.
      * The given name should include a type, such as `vec2 a_position`.
      * Attributes will also be made available under the same name in fragment shaders.
-     * @param {string} name Attribute name
-     * @param {'float'|'vec2'|'vec3'|'vec4'} type Type
-     * @param {string} [transform] Expression which will be assigned to the varying in the vertex shader, and
+     * @param {string} name Attribute name, including the `a_` prefix
+     * @param {'float'|'vec2'|'vec3'|'vec4'} type GLSL type
+     * @param {string} [varyingExpression] Expression which will be assigned to the varying in the vertex shader, and
      * passed on to the fragment shader.
-     * @param {'float'|'vec2'|'vec3'|'vec4'} [transformedType] Type of the attribute after transformation;
+     * @param {'float'|'vec2'|'vec3'|'vec4'} [varyingType] Type of the attribute after transformation;
      * e.g. `vec4` after unpacking color components
      * @return {ShaderBuilder} the builder object
      */
-    addAttribute(name: string, type: "float" | "vec2" | "vec3" | "vec4", transform?: string, transformedType?: "float" | "vec2" | "vec3" | "vec4"): ShaderBuilder;
+    addAttribute(name: string, type: "float" | "vec2" | "vec3" | "vec4", varyingExpression?: string, varyingType?: "float" | "vec2" | "vec3" | "vec4"): ShaderBuilder;
     /**
      * Sets an expression to compute the size of the shape.
      * This expression can use all the uniforms and attributes available
@@ -312,24 +318,34 @@ export class ShaderBuilder {
 }
 export type AttributeDescription = {
     /**
-     * Attribute name, as will be declared in the headers (including a_)
+     * Attribute name, as will be declared in the header of the vertex shader (including a_)
      */
     name: string;
     /**
-     * Attribute type, either `float`, `vec2`, `vec4`...
+     * Attribute GLSL type, either `float`, `vec2`, `vec4`...
      */
     type: string;
     /**
-     * Varying name, as will be declared in the fragment shader (including v_)
+     * Varying name, as will be declared in the header of both shaders (including v_)
      */
     varyingName: string;
     /**
      * Varying type, either `float`, `vec2`, `vec4`...
      */
     varyingType: string;
     /**
-     * GLSL expression to assign to the varying in the vertex shader
+     * GLSL expression to assign to the varying in the vertex shader (e.g. `unpackColor(a_myAttr)`)
      */
     varyingExpression: string;
 };
+export type UniformDescription = {
+    /**
+     * Uniform name, as will be declared in the header of the vertex shader (including u_)
+     */
+    name: string;
+    /**
+     * Uniform GLSL type, either `float`, `vec2`, `vec4`...
+     */
+    type: string;
+};
 //# sourceMappingURL=ShaderBuilder.d.ts.map

dist/en/main/examples/webgl-vector-tiles.js

@@ -34,11 +34,17 @@ const DEFAULT_STYLE = createDefaultStyle();
 
 /**
  * @typedef {Object} AttributeDescription
- * @property {string} name Attribute name, as will be declared in the headers (including a_)
- * @property {string} type Attribute type, either `float`, `vec2`, `vec4`...
- * @property {string} varyingName Varying name, as will be declared in the fragment shader (including v_)
+ * @property {string} name Attribute name, as will be declared in the header of the vertex shader (including a_)
+ * @property {string} type Attribute GLSL type, either `float`, `vec2`, `vec4`...
+ * @property {string} varyingName Varying name, as will be declared in the header of both shaders (including v_)
  * @property {string} varyingType Varying type, either `float`, `vec2`, `vec4`...
- * @property {string} varyingExpression GLSL expression to assign to the varying in the vertex shader
+ * @property {string} varyingExpression GLSL expression to assign to the varying in the vertex shader (e.g. `unpackColor(a_myAttr)`)
+ */
+
+/**
+ * @typedef {Object} UniformDescription
+ * @property {string} name Uniform name, as will be declared in the header of the vertex shader (including u_)
+ * @property {string} type Uniform GLSL type, either `float`, `vec2`, `vec4`...
  */
 
 /**
@@ -48,8 +54,8 @@ const DEFAULT_STYLE = createDefaultStyle();
  *
  * ```js
  * const shader = new ShaderBuilder()
- *   .addVarying('v_width', 'float', 'a_width')
- *   .addUniform('u_time')
+ *   .addAttribute('a_width', 'float')
+ *   .addUniform('u_time', 'float)
  *   .setColorExpression('...')
  *   .setSymbolSizeExpression('...')
  *   .getSymbolFragmentShader();
@@ -63,7 +69,7 @@ export class ShaderBuilder {
   constructor() {
     /**
      * Uniforms; these will be declared in the header (should include the type).
-     * @type {Array<string>}
+     * @type {Array<UniformDescription>}
      * @private
      */
     this.uniforms_ = [];
@@ -202,33 +208,37 @@ export class ShaderBuilder {
   /**
    * Adds a uniform accessible in both fragment and vertex shaders.
    * The given name should include a type, such as `sampler2D u_texture`.
-   * @param {string} name Uniform name
+   * @param {string} name Uniform name, including the `u_` prefix
+   * @param {'float'|'vec2'|'vec3'|'vec4'|'sampler2D'} type GLSL type
    * @return {ShaderBuilder} the builder object
    */
-  addUniform(name) {
-    this.uniforms_.push(name);
+  addUniform(name, type) {
+    this.uniforms_.push({
+      name,
+      type,
+    });
     return this;
   }
 
   /**
    * Adds an attribute accessible in the vertex shader, read from the geometry buffer.
    * The given name should include a type, such as `vec2 a_position`.
    * Attributes will also be made available under the same name in fragment shaders.
-   * @param {string} name Attribute name
-   * @param {'float'|'vec2'|'vec3'|'vec4'} type Type
-   * @param {string} [transform] Expression which will be assigned to the varying in the vertex shader, and
+   * @param {string} name Attribute name, including the `a_` prefix
+   * @param {'float'|'vec2'|'vec3'|'vec4'} type GLSL type
+   * @param {string} [varyingExpression] Expression which will be assigned to the varying in the vertex shader, and
    * passed on to the fragment shader.
-   * @param {'float'|'vec2'|'vec3'|'vec4'} [transformedType] Type of the attribute after transformation;
+   * @param {'float'|'vec2'|'vec3'|'vec4'} [varyingType] Type of the attribute after transformation;
    * e.g. `vec4` after unpacking color components
    * @return {ShaderBuilder} the builder object
    */
-  addAttribute(name, type, transform, transformedType) {
+  addAttribute(name, type, varyingExpression, varyingType) {
     this.attributes_.push({
       name,
       type,
       varyingName: name.replace(/^a_/, 'v_'),
-      varyingType: transformedType ?? type,
-      varyingExpression: transform ?? name,
+      varyingType: varyingType ?? type,
+      varyingExpression: varyingExpression ?? name,
     });
     return this;
   }
@@ -463,7 +473,7 @@ export class ShaderBuilder {
     }
 
     return `${COMMON_HEADER}
-${this.uniforms_.map((uniform) => `uniform ${uniform};`).join('\n')}
+${this.uniforms_.map((uniform) => `uniform ${uniform.type} ${uniform.name};`).join('\n')}
 attribute vec2 a_position;
 attribute float a_index;
 attribute vec4 a_hitColor;
@@ -540,7 +550,7 @@ ${this.attributes_
     }
 
     return `${COMMON_HEADER}
-${this.uniforms_.map((uniform) => `uniform ${uniform};`).join('\n')}
+${this.uniforms_.map((uniform) => `uniform ${uniform.type} ${uniform.name};`).join('\n')}
 varying vec2 v_texCoord;
 varying vec4 v_hitColor;
 varying vec2 v_centerPx;
@@ -584,7 +594,7 @@ ${this.attributes_
     }
 
     return `${COMMON_HEADER}
-${this.uniforms_.map((uniform) => `uniform ${uniform};`).join('\n')}
+${this.uniforms_.map((uniform) => `uniform ${uniform.type} ${uniform.name};`).join('\n')}
 attribute vec2 a_segmentStart;
 attribute vec2 a_segmentEnd;
 attribute float a_measureStart;
@@ -704,7 +714,7 @@ ${this.attributes_
     }
 
     return `${COMMON_HEADER}
-${this.uniforms_.map((uniform) => `uniform ${uniform};`).join('\n')}
+${this.uniforms_.map((uniform) => `uniform ${uniform.type} ${uniform.name};`).join('\n')}
 varying vec2 v_segmentStart;
 varying vec2 v_segmentEnd;
 varying float v_angleStart;
@@ -884,7 +894,7 @@ ${this.attributes_
     }
 
     return `${COMMON_HEADER}
-${this.uniforms_.map((uniform) => `uniform ${uniform};`).join('\n')}
+${this.uniforms_.map((uniform) => `uniform ${uniform.type} ${uniform.name};`).join('\n')}
 attribute vec2 a_position;
 attribute vec4 a_hitColor;
 
@@ -919,7 +929,7 @@ ${this.attributes_
     }
 
     return `${COMMON_HEADER}
-${this.uniforms_.map((uniform) => `uniform ${uniform};`).join('\n')}
+${this.uniforms_.map((uniform) => `uniform ${uniform.type} ${uniform.name};`).join('\n')}
 varying vec4 v_hitColor;
 ${this.attributes_
   .map(

dist/en/main/examples/webgl-vector-tiles.js.map

@@ -99,7 +99,7 @@ export function applyContextToBuilder(builder, context) {
       // we're not packing colors when they're passed as uniforms
       glslType = 'vec4';
     }
-    builder.addUniform(`${glslType} ${uniformName}`);
+    builder.addUniform(uniformName, glslType);
   }
 
   // for each feature attribute used in the fragment shader, define a varying that will be used to pass data
@@ -153,7 +153,12 @@ export function generateUniformsFromContext(context, variables) {
         return value ? 1 : 0;
       }
       if (variable.type === ColorType) {
-        return asArray(value || '#eee');
+        const color = [...asArray(value || '#eee')];
+        color[0] /= 255;
+        color[1] /= 255;
+        color[2] /= 255;
+        color[3] ??= 1;
+        return color;
       }
       if (typeof value === 'string') {
         return getStringNumberEquivalent(value);

dist/en/main/ol/dist/ol.js

@@ -157,11 +157,11 @@ function parseImageProperties(style, builder, uniforms, prefix, textureId) {
   uniforms[`u_texture${textureId}_size`] = () => {
     return image.complete ? [image.width, image.height] : [0, 0];
   };
-  builder.addUniform(`vec2 u_texture${textureId}_size`);
+  builder.addUniform(`u_texture${textureId}_size`, 'vec2');
   const size = `u_texture${textureId}_size`;
 
   uniforms[`u_texture${textureId}`] = image;
-  builder.addUniform(`sampler2D u_texture${textureId}`);
+  builder.addUniform(`u_texture${textureId}`, 'sampler2D');
   return size;
 }