ol 10.4.1-dev.1740542736318 → 10.4.1-dev.1740574913397

package/layer/WebGLTile.js

@@ -9,11 +9,11 @@ import {
   uniformNameForVariable,
 } from '../expr/gpu.js';
 import LayerProperty from '../layer/Property.js';
+import {expressionToGlsl} from '../render/webgl/compileUtil.js';
 import WebGLTileLayerRenderer, {
   Attributes,
   Uniforms,
 } from '../renderer/webgl/TileLayer.js';
-import {expressionToGlsl} from '../webgl/styleparser.js';
 import BaseTileLayer from './BaseTile.js';
 
 /**
@@ -121,7 +121,6 @@ function parseStyle(style, bandCount) {
    */
   const context = {
     ...newCompilationContext(),
-    inFragmentShader: true,
     bandCount: bandCount,
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol",
-  "version": "10.4.1-dev.1740542736318",
+  "version": "10.4.1-dev.1740574913397",
   "description": "OpenLayers mapping library",
   "keywords": [
     "map",

package/render/webgl/MixedGeometryBatch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MixedGeometryBatch.d.ts","sourceRoot":"","sources":["MixedGeometryBatch.js"],"names":[],"mappings":";sBAQa,OAAO,kBAAkB,EAAE,OAAO;2BAGlC,OAAO,wBAAwB,EAAE,IAAI;;;;;;;;aAKpC,OAAO,GAAC,aAAa;;;;iBACrB,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;;;;;;;;;;;;;;;;;;4BAQrB,kBAAkB,GAAC,uBAAuB,GAAC,oBAAoB;;;;;;;;;;;;;;;qBAO9D,MAAM;;;;mBACN,MAAM;;;;gBACN,MAAM;;;;;;;;;;;;;;;;qBAON,MAAM;;;;mBACN,MAAM;;;;;;;;;;;;;;;;qBAON,MAAM;;AA1CpB;;GAEG;AACH;;GAEG;AAEH;;;;;;;;GAQG;AAEH;;GAEG;AAEH;;;;;;;GAOG;AAEH;;;;;;GAMG;AAEH;;;;;GAKG;AAEH;;;;;;;;;;;;;;;;;;GAkBG;AACH;IAEI;;OAEG;IACH,uBAAuB;IAEvB;;;;OAIG;IACH,sBAA8B;IAE9B;;;;OAIG;IACH,kBAA0B;IAE1B;;;;;OAKG;IACH,uBAAwB;IAExB;;OAEG;IACH,cAFU,oBAAoB,CAO7B;IAED;;OAEG;IACH,YAFU,kBAAkB,CAK3B;IAED;;OAEG;IACH,iBAFU,uBAAuB,CAMhC;IAGH;;;OAGG;IACH,sBAHW,KAAK,CAAC,OAAO,GAAC,aAAa,CAAC,wBAC5B,OAAO,eAAe,EAAE,iBAAiB,QAMnD;IAED;;;OAGG;IACH,oBAHW,OAAO,GAAC,aAAa,wBACrB,OAAO,eAAe,EAAE,iBAAiB,QAYnD;IAED;;;;OAIG;IACH,uCASC;IAED;;;;OAIG;IACH,4CAUC;IAED;;;;OAIG;IACH,yCAWC;IAED;;;;OAIG;IACH,qBA2GC;IAED;;;;;;;;;OASG;IACH,wBAyJC;IAED;;;;;OAKG;IACH,uBAYC;IAED;;;;;OAKG;IACH,mBAOC;IAED;;OAEG;IACH,uBAFW,OAAO,GAAC,aAAa,QAS/B;IAED;;OAEG;IACH,uBAFW,OAAO,GAAC,aAAa,QAS/B;IAED,cAcC;IAED;;;;OAIG;IACH,uBAHW,MAAM,GACL,OAAO,GAAC,aAAa,CAIhC;IAED,mBAEC;IAED;;;;;OAKG;IACH,sBAHW,CAAS,IAAuB,EAAvB,CAAC,OAAO,GAAC,aAAa,CAAC,KAAG,OAAO,GACzC,kBAAkB,CAU7B;CACF;0BAvkByB,yBAAyB"}
+{"version":3,"file":"MixedGeometryBatch.d.ts","sourceRoot":"","sources":["MixedGeometryBatch.js"],"names":[],"mappings":";sBAQa,OAAO,kBAAkB,EAAE,OAAO;2BAGlC,OAAO,wBAAwB,EAAE,IAAI;;;;;;;;aAKpC,OAAO,GAAC,aAAa;;;;iBACrB,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;;;;;;;;;;;;;;;;;;4BAQrB,kBAAkB,GAAC,uBAAuB,GAAC,oBAAoB;;;;;;;;;;;;;;;qBAO9D,MAAM;;;;mBACN,MAAM;;;;gBACN,MAAM;;;;;;;;;;;;;;;;qBAON,MAAM;;;;mBACN,MAAM;;;;;;;;;;;;;;;;qBAON,MAAM;;AA1CpB;;GAEG;AACH;;GAEG;AAEH;;;;;;;;GAQG;AAEH;;GAEG;AAEH;;;;;;;GAOG;AAEH;;;;;;GAMG;AAEH;;;;;GAKG;AAEH;;;;;;;;;;;;;;;;;;GAkBG;AACH;IAEI;;OAEG;IACH,uBAAuB;IAEvB;;;;OAIG;IACH,sBAA8B;IAE9B;;;;OAIG;IACH,kBAA0B;IAE1B;;;;;OAKG;IACH,uBAAwB;IAExB;;OAEG;IACH,cAFU,oBAAoB,CAO7B;IAED;;OAEG;IACH,YAFU,kBAAkB,CAK3B;IAED;;OAEG;IACH,iBAFU,uBAAuB,CAMhC;IAGH;;;OAGG;IACH,sBAHW,KAAK,CAAC,OAAO,GAAC,aAAa,CAAC,wBAC5B,OAAO,eAAe,EAAE,iBAAiB,QAMnD;IAED;;;OAGG;IACH,oBAHW,OAAO,GAAC,aAAa,wBACrB,OAAO,eAAe,EAAE,iBAAiB,QAYnD;IAED;;;;OAIG;IACH,uCASC;IAED;;;;OAIG;IACH,4CAUC;IAED;;;;OAIG;IACH,yCAWC;IAED;;;;OAIG;IACH,qBA2GC;IAED;;;;;;;;;OASG;IACH,wBAyJC;IAED;;;;;OAKG;IACH,uBAYC;IAED;;;;;OAKG;IACH,mBAOC;IAED;;OAEG;IACH,uBAFW,OAAO,GAAC,aAAa,QAa/B;IAED;;OAEG;IACH,uBAFW,OAAO,GAAC,aAAa,QAS/B;IAED,cAcC;IAED;;;;OAIG;IACH,uBAHW,MAAM,GACL,OAAO,GAAC,aAAa,CAIhC;IAED,mBAEC;IAED;;;;;OAKG;IACH,sBAHW,CAAS,IAAuB,EAAvB,CAAC,OAAO,GAAC,aAAa,CAAC,KAAG,OAAO,GACzC,kBAAkB,CAU7B;CACF;0BA3kByB,yBAAyB"}

package/render/webgl/MixedGeometryBatch.js

@@ -521,6 +521,10 @@ class MixedGeometryBatch {
    * @param {Feature|RenderFeature} feature Feature
    */
   changeFeature(feature) {
+    // the feature is not present in the batch; do not add it to avoid unexpected behaviors
+    if (!this.uidToRef_.get(getUid(feature))) {
+      return;
+    }
     this.removeFeature(feature);
     const geometry = feature.getGeometry();
     if (!geometry) {

package/{webgl → render/webgl}/ShaderBuilder.d.ts

@@ -1,10 +1,11 @@
 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} VaryingDescription
- * @property {string} name Varying name, as will be declared in the header.
- * @property {string} type Varying type, either `float`, `vec2`, `vec4`...
- * @property {string} expression Expression which will be assigned to the varying in the vertex shader, and
- * passed on to the fragment shader.
+ * @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} varyingType Varying type, either `float`, `vec2`, `vec4`...
+ * @property {string} varyingExpression GLSL expression to assign to the varying in the vertex shader
  */
 /**
  * @classdesc
@@ -33,16 +34,10 @@ export class ShaderBuilder {
     private uniforms_;
     /**
      * Attributes; these will be declared in the header (should include the type).
-     * @type {Array<string>}
+     * @type {Array<AttributeDescription>}
      * @private
      */
     private attributes_;
-    /**
-     * Varyings with a name, a type and an expression.
-     * @type {Array<VaryingDescription>}
-     * @private
-     */
-    private varyings_;
     /**
      * @type {boolean}
      * @private
@@ -148,19 +143,16 @@ export class 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
-     * @return {ShaderBuilder} the builder object
-     */
-    addAttribute(name: string): ShaderBuilder;
-    /**
-     * Adds a varying defined in the vertex shader and accessible from the fragment shader.
-     * The type and expression of the varying have to be specified separately.
-     * @param {string} name Varying name
      * @param {'float'|'vec2'|'vec3'|'vec4'} type Type
-     * @param {string} expression Expression used to assign a value to the varying.
+     * @param {string} [transform] 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;
+     * e.g. `vec4` after unpacking color components
      * @return {ShaderBuilder} the builder object
      */
-    addVarying(name: string, type: "float" | "vec2" | "vec3" | "vec4", expression: string): ShaderBuilder;
+    addAttribute(name: string, type: "float" | "vec2" | "vec3" | "vec4", transform?: string, transformedType?: "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
@@ -283,8 +275,8 @@ export class ShaderBuilder {
      * @return {string} The current fill color expression
      */
     getFillColorExpression(): string;
-    addVertexShaderFunction(code: any): void;
-    addFragmentShaderFunction(code: any): void;
+    addVertexShaderFunction(code: any): this;
+    addFragmentShaderFunction(code: any): this;
     /**
      * Generates a symbol vertex shader from the builder parameters
      * @return {string|null} The full shader as a string; null if no size or color specified
@@ -318,19 +310,26 @@ export class ShaderBuilder {
      */
     getFillFragmentShader(): string | null;
 }
-export type VaryingDescription = {
+export type AttributeDescription = {
     /**
-     * Varying name, as will be declared in the header.
+     * Attribute name, as will be declared in the headers (including a_)
      */
     name: string;
     /**
-     * Varying type, either `float`, `vec2`, `vec4`...
+     * Attribute type, either `float`, `vec2`, `vec4`...
      */
     type: string;
     /**
-     * Expression which will be assigned to the varying in the vertex shader, and
-     * passed on to the fragment shader.
+     * Varying name, as will be declared in the fragment shader (including v_)
+     */
+    varyingName: string;
+    /**
+     * Varying type, either `float`, `vec2`, `vec4`...
+     */
+    varyingType: string;
+    /**
+     * GLSL expression to assign to the varying in the vertex shader
      */
-    expression: string;
+    varyingExpression: string;
 };
 //# sourceMappingURL=ShaderBuilder.d.ts.map

package/render/webgl/ShaderBuilder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShaderBuilder.d.ts","sourceRoot":"","sources":["ShaderBuilder.js"],"names":[],"mappings":"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"}

package/{webgl → render/webgl}/ShaderBuilder.js

@@ -1,10 +1,10 @@
 /**
  * Class for generating shaders from literal style objects
- * @module ol/webgl/ShaderBuilder
+ * @module ol/render/webgl/ShaderBuilder
  */
-import {colorToGlsl, numberToGlsl, stringToGlsl} from '../expr/gpu.js';
-import {LINESTRING_ANGLE_COSINE_CUTOFF} from '../render/webgl/utils.js';
-import {createDefaultStyle} from '../style/flat.js';
+import {colorToGlsl, numberToGlsl, stringToGlsl} from '../../expr/gpu.js';
+import {createDefaultStyle} from '../../style/flat.js';
+import {LINESTRING_ANGLE_COSINE_CUTOFF} from './bufferUtil.js';
 
 export const COMMON_HEADER = `#ifdef GL_FRAGMENT_PRECISION_HIGH
 precision highp float;
@@ -33,11 +33,12 @@ float currentLineMetric = 0.; // an actual value will be used in the stroke shad
 const DEFAULT_STYLE = createDefaultStyle();
 
 /**
- * @typedef {Object} VaryingDescription
- * @property {string} name Varying name, as will be declared in the header.
- * @property {string} type Varying type, either `float`, `vec2`, `vec4`...
- * @property {string} expression Expression which will be assigned to the varying in the vertex shader, and
- * passed on to the fragment shader.
+ * @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} varyingType Varying type, either `float`, `vec2`, `vec4`...
+ * @property {string} varyingExpression GLSL expression to assign to the varying in the vertex shader
  */
 
 /**
@@ -69,18 +70,11 @@ export class ShaderBuilder {
 
     /**
      * Attributes; these will be declared in the header (should include the type).
-     * @type {Array<string>}
+     * @type {Array<AttributeDescription>}
      * @private
      */
     this.attributes_ = [];
 
-    /**
-     * Varyings with a name, a type and an expression.
-     * @type {Array<VaryingDescription>}
-     * @private
-     */
-    this.varyings_ = [];
-
     /**
      * @type {boolean}
      * @private
@@ -219,27 +213,22 @@ export class 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
-   * @return {ShaderBuilder} the builder object
-   */
-  addAttribute(name) {
-    this.attributes_.push(name);
-    return this;
-  }
-
-  /**
-   * Adds a varying defined in the vertex shader and accessible from the fragment shader.
-   * The type and expression of the varying have to be specified separately.
-   * @param {string} name Varying name
    * @param {'float'|'vec2'|'vec3'|'vec4'} type Type
-   * @param {string} expression Expression used to assign a value to the varying.
+   * @param {string} [transform] 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;
+   * e.g. `vec4` after unpacking color components
    * @return {ShaderBuilder} the builder object
    */
-  addVarying(name, type, expression) {
-    this.varyings_.push({
-      name: name,
-      type: type,
-      expression: expression,
+  addAttribute(name, type, transform, transformedType) {
+    this.attributes_.push({
+      name,
+      type,
+      varyingName: name.replace(/^a_/, 'v_'),
+      varyingType: transformedType ?? type,
+      varyingExpression: transform ?? name,
     });
     return this;
   }
@@ -451,15 +440,17 @@ export class ShaderBuilder {
 
   addVertexShaderFunction(code) {
     if (this.vertexShaderFunctions_.includes(code)) {
-      return;
+      return this;
     }
     this.vertexShaderFunctions_.push(code);
+    return this;
   }
   addFragmentShaderFunction(code) {
     if (this.fragmentShaderFunctions_.includes(code)) {
-      return;
+      return this;
     }
     this.fragmentShaderFunctions_.push(code);
+    return this;
   }
 
   /**
@@ -472,29 +463,23 @@ export class ShaderBuilder {
     }
 
     return `${COMMON_HEADER}
-${this.uniforms_
-  .map(function (uniform) {
-    return 'uniform ' + uniform + ';';
-  })
-  .join('\n')}
+${this.uniforms_.map((uniform) => `uniform ${uniform};`).join('\n')}
 attribute vec2 a_position;
 attribute float a_index;
 attribute vec4 a_hitColor;
-${this.attributes_
-  .map(function (attribute) {
-    return 'attribute ' + attribute + ';';
-  })
-  .join('\n')}
+
 varying vec2 v_texCoord;
 varying vec2 v_quadCoord;
 varying vec4 v_hitColor;
 varying vec2 v_centerPx;
 varying float v_angle;
 varying vec2 v_quadSizePx;
-${this.varyings_
-  .map(function (varying) {
-    return 'varying ' + varying.type + ' ' + varying.name + ';';
-  })
+
+${this.attributes_
+  .map(
+    (attribute) => `attribute ${attribute.type} ${attribute.name};
+varying ${attribute.varyingType} ${attribute.varyingName};`,
+  )
   .join('\n')}
 ${this.vertexShaderFunctions_.join('\n')}
 vec2 pxToScreen(vec2 coordPx) {
@@ -537,10 +522,11 @@ void main(void) {
   s = sin(-v_angle);
   centerOffsetPx = vec2(c * centerOffsetPx.x - s * centerOffsetPx.y, s * centerOffsetPx.x + c * centerOffsetPx.y); 
   v_centerPx = screenToPx(center.xy) + centerOffsetPx;
-${this.varyings_
-  .map(function (varying) {
-    return '  ' + varying.name + ' = ' + varying.expression + ';';
-  })
+${this.attributes_
+  .map(
+    (attribute) =>
+      `  ${attribute.varyingName} = ${attribute.varyingExpression};`,
+  )
   .join('\n')}
 }`;
   }
@@ -555,24 +541,26 @@ ${this.varyings_
     }
 
     return `${COMMON_HEADER}
-${this.uniforms_
-  .map(function (uniform) {
-    return 'uniform ' + uniform + ';';
-  })
-  .join('\n')}
+${this.uniforms_.map((uniform) => `uniform ${uniform};`).join('\n')}
 varying vec2 v_texCoord;
 varying vec4 v_hitColor;
 varying vec2 v_centerPx;
 varying float v_angle;
 varying vec2 v_quadSizePx;
-${this.varyings_
-  .map(function (varying) {
-    return 'varying ' + varying.type + ' ' + varying.name + ';';
-  })
+${this.attributes_
+  .map(
+    (attribute) => `varying ${attribute.varyingType} ${attribute.varyingName};`,
+  )
   .join('\n')}
 ${this.fragmentShaderFunctions_.join('\n')}
 
 void main(void) {
+${this.attributes_
+  .map(
+    (attribute) =>
+      `  ${attribute.varyingType} ${attribute.name} = ${attribute.varyingName}; // assign to original attribute name`,
+  )
+  .join('\n')}
   if (${this.discardExpression_}) { discard; }
   vec2 coordsPx = gl_FragCoord.xy / u_pixelRatio - v_centerPx; // relative to center
   float c = cos(v_angle);
@@ -597,11 +585,7 @@ void main(void) {
     }
 
     return `${COMMON_HEADER}
-${this.uniforms_
-  .map(function (uniform) {
-    return 'uniform ' + uniform + ';';
-  })
-  .join('\n')}
+${this.uniforms_.map((uniform) => `uniform ${uniform};`).join('\n')}
 attribute vec2 a_segmentStart;
 attribute vec2 a_segmentEnd;
 attribute float a_measureStart;
@@ -610,11 +594,7 @@ attribute float a_parameters;
 attribute float a_distance;
 attribute vec2 a_joinAngles;
 attribute vec4 a_hitColor;
-${this.attributes_
-  .map(function (attribute) {
-    return 'attribute ' + attribute + ';';
-  })
-  .join('\n')}
+
 varying vec2 v_segmentStart;
 varying vec2 v_segmentEnd;
 varying float v_angleStart;
@@ -624,10 +604,12 @@ varying vec4 v_hitColor;
 varying float v_distanceOffsetPx;
 varying float v_measureStart;
 varying float v_measureEnd;
-${this.varyings_
-  .map(function (varying) {
-    return 'varying ' + varying.type + ' ' + varying.name + ';';
-  })
+
+${this.attributes_
+  .map(
+    (attribute) => `attribute ${attribute.type} ${attribute.name};
+varying ${attribute.varyingType} ${attribute.varyingName};`,
+  )
   .join('\n')}
 ${this.vertexShaderFunctions_.join('\n')}
 vec2 worldToPx(vec2 worldPos) {
@@ -703,10 +685,11 @@ void main(void) {
   v_distanceOffsetPx = a_distance / u_resolution - (lineOffsetPx * angleTangentSum);
   v_measureStart = a_measureStart;
   v_measureEnd = a_measureEnd;
-${this.varyings_
-  .map(function (varying) {
-    return '  ' + varying.name + ' = ' + varying.expression + ';';
-  })
+${this.attributes_
+  .map(
+    (attribute) =>
+      `  ${attribute.varyingName} = ${attribute.varyingExpression};`,
+  )
   .join('\n')}
 }`;
   }
@@ -722,11 +705,7 @@ ${this.varyings_
     }
 
     return `${COMMON_HEADER}
-${this.uniforms_
-  .map(function (uniform) {
-    return 'uniform ' + uniform + ';';
-  })
-  .join('\n')}
+${this.uniforms_.map((uniform) => `uniform ${uniform};`).join('\n')}
 varying vec2 v_segmentStart;
 varying vec2 v_segmentEnd;
 varying float v_angleStart;
@@ -736,10 +715,10 @@ varying vec4 v_hitColor;
 varying float v_distanceOffsetPx;
 varying float v_measureStart;
 varying float v_measureEnd;
-${this.varyings_
-  .map(function (varying) {
-    return 'varying ' + varying.type + ' ' + varying.name + ';';
-  })
+${this.attributes_
+  .map(
+    (attribute) => `varying ${attribute.varyingType} ${attribute.varyingName};`,
+  )
   .join('\n')}
 ${this.fragmentShaderFunctions_.join('\n')}
 
@@ -826,7 +805,22 @@ float computeSegmentPointDistance(vec2 point, vec2 start, vec2 end, float width,
   return joinDistanceField(point, start, end, width, joinAngle, joinType);
 }
 
+float distanceFromSegment(vec2 point, vec2 start, vec2 end) {
+  vec2 tangent = end - start;
+  vec2 startToPoint = point - start;
+  // inspire by capsule fn in https://iquilezles.org/articles/distfunctions/
+  float h = clamp(dot(startToPoint, tangent) / dot(tangent, tangent), 0.0, 1.0);
+  return length(startToPoint - tangent * h);
+}
+
 void main(void) {
+${this.attributes_
+  .map(
+    (attribute) =>
+      `  ${attribute.varyingType} ${attribute.name} = ${attribute.varyingName}; // assign to original attribute name`,
+  )
+  .join('\n')}
+      
   vec2 currentPoint = gl_FragCoord.xy / u_pixelRatio;
   #ifdef GL_FRAGMENT_PRECISION_HIGH
   vec2 worldPos = pxToWorld(currentPoint);
@@ -847,24 +841,25 @@ void main(void) {
   vec2 segmentNormal = vec2(-segmentTangent.y, segmentTangent.x);
   vec2 startToPoint = currentPoint - v_segmentStart;
   float lengthToPoint = max(0., min(dot(segmentTangent, startToPoint), segmentLength));
-  float currentLengthPx = lengthToPoint + v_distanceOffsetPx; 
-  float currentRadiusPx = abs(dot(segmentNormal, startToPoint));
+  float currentLengthPx = lengthToPoint + v_distanceOffsetPx;
+  float currentRadiusPx = distanceFromSegment(currentPoint, v_segmentStart, v_segmentEnd);
   float currentRadiusRatio = dot(segmentNormal, startToPoint) * 2. / v_width;
   currentLineMetric = mix(v_measureStart, v_measureEnd, lengthToPoint / segmentLength);
 
   if (${this.discardExpression_}) { discard; }
 
-  vec4 color = ${this.strokeColorExpression_};
   float capType = ${this.strokeCapExpression_};
   float joinType = ${this.strokeJoinExpression_};
   float segmentStartDistance = computeSegmentPointDistance(currentPoint, v_segmentStart, v_segmentEnd, v_width, v_angleStart, capType, joinType);
   float segmentEndDistance = computeSegmentPointDistance(currentPoint, v_segmentEnd, v_segmentStart, v_width, v_angleEnd, capType, joinType);
-  float distance = max(
+  float distanceField = max(
     segmentDistanceField(currentPoint, v_segmentStart, v_segmentEnd, v_width),
     max(segmentStartDistance, segmentEndDistance)
   );
-  distance = max(distance, ${this.strokeDistanceFieldExpression_});
-  color.a *= smoothstep(0.5, -0.5, distance);
+  distanceField = max(distanceField, ${this.strokeDistanceFieldExpression_});
+
+  vec4 color = ${this.strokeColorExpression_};
+  color.a *= smoothstep(0.5, -0.5, distanceField);
   gl_FragColor = color;
   gl_FragColor.a *= u_globalAlpha;
   gl_FragColor.rgb *= gl_FragColor.a;
@@ -886,32 +881,27 @@ void main(void) {
     }
 
     return `${COMMON_HEADER}
-${this.uniforms_
-  .map(function (uniform) {
-    return 'uniform ' + uniform + ';';
-  })
-  .join('\n')}
+${this.uniforms_.map((uniform) => `uniform ${uniform};`).join('\n')}
 attribute vec2 a_position;
 attribute vec4 a_hitColor;
-${this.attributes_
-  .map(function (attribute) {
-    return 'attribute ' + attribute + ';';
-  })
-  .join('\n')}
+
 varying vec4 v_hitColor;
-${this.varyings_
-  .map(function (varying) {
-    return 'varying ' + varying.type + ' ' + varying.name + ';';
-  })
+
+${this.attributes_
+  .map(
+    (attribute) => `attribute ${attribute.type} ${attribute.name};
+varying ${attribute.varyingType} ${attribute.varyingName};`,
+  )
   .join('\n')}
 ${this.vertexShaderFunctions_.join('\n')}
 void main(void) {
   gl_Position = u_projectionMatrix * vec4(a_position, u_depth, 1.0);
   v_hitColor = a_hitColor;
-${this.varyings_
-  .map(function (varying) {
-    return '  ' + varying.name + ' = ' + varying.expression + ';';
-  })
+${this.attributes_
+  .map(
+    (attribute) =>
+      `  ${attribute.varyingName} = ${attribute.varyingExpression};`,
+  )
   .join('\n')}
 }`;
   }
@@ -926,16 +916,12 @@ ${this.varyings_
     }
 
     return `${COMMON_HEADER}
-${this.uniforms_
-  .map(function (uniform) {
-    return 'uniform ' + uniform + ';';
-  })
-  .join('\n')}
+${this.uniforms_.map((uniform) => `uniform ${uniform};`).join('\n')}
 varying vec4 v_hitColor;
-${this.varyings_
-  .map(function (varying) {
-    return 'varying ' + varying.type + ' ' + varying.name + ';';
-  })
+${this.attributes_
+  .map(
+    (attribute) => `varying ${attribute.varyingType} ${attribute.varyingName};`,
+  )
   .join('\n')}
 ${this.fragmentShaderFunctions_.join('\n')}
 vec2 pxToWorld(vec2 pxPos) {
@@ -949,6 +935,12 @@ vec2 worldToPx(vec2 worldPos) {
 }
 
 void main(void) {
+${this.attributes_
+  .map(
+    (attribute) =>
+      `  ${attribute.varyingType} ${attribute.name} = ${attribute.varyingName}; // assign to original attribute name`,
+  )
+  .join('\n')}
   vec2 pxPos = gl_FragCoord.xy / u_pixelRatio;
   vec2 pxOrigin = worldToPx(u_patternOrigin);
   #ifdef GL_FRAGMENT_PRECISION_HIGH

package/render/webgl/VectorStyleRenderer.d.ts

@@ -86,7 +86,7 @@ export type AsShaders = {
     /**
      * Shader builder with the appropriate presets.
      */
-    builder: import("../../webgl/ShaderBuilder.js").ShaderBuilder;
+    builder: import("./ShaderBuilder.js").ShaderBuilder;
     /**
      * Custom attributes made available in the vertex shaders.
      * Default shaders rely on the attributes in {@link Attributes}.
@@ -144,7 +144,7 @@ export type VectorStyle = AsRule | AsShaders;
  */
 /**
  * @typedef {Object} AsShaders
- * @property {import("../../webgl/ShaderBuilder.js").ShaderBuilder} builder Shader builder with the appropriate presets.
+ * @property {import("./ShaderBuilder.js").ShaderBuilder} builder Shader builder with the appropriate presets.
  * @property {AttributeDefinitions} [attributes] Custom attributes made available in the vertex shaders.
  * Default shaders rely on the attributes in {@link Attributes}.
  * @property {UniformDefinitions} [uniforms] Additional uniforms usable in shaders.

package/render/webgl/VectorStyleRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VectorStyleRenderer.d.ts","sourceRoot":"","sources":["VectorStyleRenderer.js"],"names":[],"mappings":";;;;yBAyCU,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;cAmBF,CAAS,IAAwD,EAAnD,OAAO,yBAAyB,EAAE,iBAAiB,EAAE,IAAmC,EAAnC,OAAO,eAAe,EAAE,WAAW,KAAE,MAAM,GAAC,KAAK,CAAC,MAAM,CAAC;;;;;;;;;;;;oBAW5H,KAAK,CAAC,gBAAgB,CAAC;;;;uBACvB,KAAK,CAAC,gBAAgB,CAAC;;;;kBACvB,KAAK,CAAC,gBAAgB,CAAC;;;;6BACvB,OAAO,oBAAoB,EAAE,SAAS;;;;;;yBAKtC,YAAY,GAAC,IAAI;;;;4BACjB,YAAY,GAAC,IAAI;;;;uBACjB,YAAY,GAAC,IAAI;;;;;;;;;YAKjB,MAAM;;;;cACN,MAAM;;;;;;aAKN,OAAO,8BAA8B,EAAE,aAAa;;;;;;;;;;;;;;;;;;;WAQpD,OAAO,qBAAqB,EAAE,SAAS;;;;;;0BAKxC,MAAM,GAAC,SAAS;AAlD7B;;;;;;;GAOG;AAEH;;;GAGG;AAEH;;;;;;GAMG;AAEH;;;;;GAKG;AAEH;;;;GAIG;AAEH;;;;;;GAMG;AAEH;;;;GAIG;AAEH;;GAEG;AAEH;;;;;;;;;;;;;GAaG;AACH;IACE;;;;;;OAMG;IACH,4BANW,WAAW,aACX,OAAO,qBAAqB,EAAE,cAAc,UAC5C,OAAO,uBAAuB,EAAE,OAAO,uBACvC,OAAO,WACP,OAAO,0BAA0B,EAAE,eAAe,EAiN5D;IA9MC;;;OAGG;IACH,gBAAY;IAEZ;;OAEG;IACH,6BAAgD;IAkBhD;;;OAGG;IACH,qBAAiB;IAEjB;;;OAGG;IACH,uBAAmB;IAEnB;;;OAGG;IACH,uBAAmB;IAEnB;;;OAGG;IACH,iBAAyD;IAEvD;;OAEG;IACH,0BAAgE;IAChE;;OAEG;IACH,4BAAoE;IAGtE;;;OAGG;IACH,mBAA6D;IAE3D;;OAEG;IACH,4BAAoE;IACpE;;OAEG;IACH,8BAAwE;IAG1E;;;OAGG;IACH,mBAA6D;IAE3D;;OAEG;IACH,4BAAoE;IACpE;;OAEG;IACH,8BAAwE;IAG1E;;;OAGG;IACH,uBAA0B;IAgB1B;;OAEG;IACH,0BAIC;IACD;;OAEG;IACH,kBAAmC;IASnC;;;OAGG;IACH,+BAOC;IACD;;;OAGG;IACH,kCAqCC;IACD;;;OAGG;IACH,6BAYC;IAKH;;;;;OAKG;IACH,6BAgCC;IAED;;;;OAIG;IACH,+BAJW,OAAO,yBAAyB,EAAE,OAAO,aACzC,OAAO,oBAAoB,EAAE,SAAS,GACrC,OAAO,CAAC,YAAY,GAAC,IAAI,CAAC,CA4CrC;IAED;;;;;OAKG;IACH,oCA+BC;IAED;;;;;;OAMG;IACH,gCAwEC;IAED;;;;;OAKG;IACH,gBAJW,YAAY,cACZ,OAAO,cAAc,EAAE,UAAU,qBACjC,MAAY,IAAI,QA8B1B;IAED;;;;;;;;OAQG;IACH,wBAkBC;IAED;;;OAGG;IACH,kBAHW,OAAO,uBAAuB,EAAE,OAAO,YACvC,YAAY,QAuCtB;CACF;6BAloB4B,uBAAuB"}
+{"version":3,"file":"VectorStyleRenderer.d.ts","sourceRoot":"","sources":["VectorStyleRenderer.js"],"names":[],"mappings":";;;;yBAyCU,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;cAmBF,CAAS,IAAwD,EAAnD,OAAO,yBAAyB,EAAE,iBAAiB,EAAE,IAAmC,EAAnC,OAAO,eAAe,EAAE,WAAW,KAAE,MAAM,GAAC,KAAK,CAAC,MAAM,CAAC;;;;;;;;;;;;oBAW5H,KAAK,CAAC,gBAAgB,CAAC;;;;uBACvB,KAAK,CAAC,gBAAgB,CAAC;;;;kBACvB,KAAK,CAAC,gBAAgB,CAAC;;;;6BACvB,OAAO,oBAAoB,EAAE,SAAS;;;;;;yBAKtC,YAAY,GAAC,IAAI;;;;4BACjB,YAAY,GAAC,IAAI;;;;uBACjB,YAAY,GAAC,IAAI;;;;;;;;;YAKjB,MAAM;;;;cACN,MAAM;;;;;;aAKN,OAAO,oBAAoB,EAAE,aAAa;;;;;;;;;;;;;;;;;;;WAQ1C,OAAO,qBAAqB,EAAE,SAAS;;;;;;0BAKxC,MAAM,GAAC,SAAS;AAlD7B;;;;;;;GAOG;AAEH;;;GAGG;AAEH;;;;;;GAMG;AAEH;;;;;GAKG;AAEH;;;;GAIG;AAEH;;;;;;GAMG;AAEH;;;;GAIG;AAEH;;GAEG;AAEH;;;;;;;;;;;;;GAaG;AACH;IACE;;;;;;OAMG;IACH,4BANW,WAAW,aACX,OAAO,qBAAqB,EAAE,cAAc,UAC5C,OAAO,uBAAuB,EAAE,OAAO,uBACvC,OAAO,WACP,OAAO,0BAA0B,EAAE,eAAe,EAiN5D;IA9MC;;;OAGG;IACH,gBAAY;IAEZ;;OAEG;IACH,6BAAgD;IAkBhD;;;OAGG;IACH,qBAAiB;IAEjB;;;OAGG;IACH,uBAAmB;IAEnB;;;OAGG;IACH,uBAAmB;IAEnB;;;OAGG;IACH,iBAAyD;IAEvD;;OAEG;IACH,0BAAgE;IAChE;;OAEG;IACH,4BAAoE;IAGtE;;;OAGG;IACH,mBAA6D;IAE3D;;OAEG;IACH,4BAAoE;IACpE;;OAEG;IACH,8BAAwE;IAG1E;;;OAGG;IACH,mBAA6D;IAE3D;;OAEG;IACH,4BAAoE;IACpE;;OAEG;IACH,8BAAwE;IAG1E;;;OAGG;IACH,uBAA0B;IAgB1B;;OAEG;IACH,0BAIC;IACD;;OAEG;IACH,kBAAmC;IASnC;;;OAGG;IACH,+BAOC;IACD;;;OAGG;IACH,kCAqCC;IACD;;;OAGG;IACH,6BAYC;IAKH;;;;;OAKG;IACH,6BAgCC;IAED;;;;OAIG;IACH,+BAJW,OAAO,yBAAyB,EAAE,OAAO,aACzC,OAAO,oBAAoB,EAAE,SAAS,GACrC,OAAO,CAAC,YAAY,GAAC,IAAI,CAAC,CA4CrC;IAED;;;;;OAKG;IACH,oCA+BC;IAED;;;;;;OAMG;IACH,gCAwEC;IAED;;;;;OAKG;IACH,gBAJW,YAAY,cACZ,OAAO,cAAc,EAAE,UAAU,qBACjC,MAAY,IAAI,QA8B1B;IAED;;;;;;;;OAQG;IACH,wBAkBC;IAED;;;OAGG;IACH,kBAHW,OAAO,uBAAuB,EAAE,OAAO,YACvC,YAAY,QAuCtB;CACF;6BAloB4B,uBAAuB"}

package/render/webgl/VectorStyleRenderer.js

@@ -13,17 +13,17 @@ import {
 } from '../../transform.js';
 import WebGLArrayBuffer from '../../webgl/Buffer.js';
 import {AttributeType} from '../../webgl/Helper.js';
-import {parseLiteralStyle} from '../../webgl/styleparser.js';
 import {ARRAY_BUFFER, DYNAMIC_DRAW, ELEMENT_ARRAY_BUFFER} from '../../webgl.js';
 import {create as createWebGLWorker} from '../../worker/webgl.js';
 import {WebGLWorkerMessageType} from './constants.js';
+import {colorEncodeId} from './encodeUtil.js';
 import {
   generateLineStringRenderInstructions,
   generatePointRenderInstructions,
   generatePolygonRenderInstructions,
   getCustomAttributesSize,
 } from './renderinstructions.js';
-import {colorEncodeId} from './utils.js';
+import {parseLiteralStyle} from './style.js';
 
 const tmpColor = [];
 /** @type {Worker|undefined} */
@@ -90,7 +90,7 @@ export const Attributes = {
 
 /**
  * @typedef {Object} AsShaders
- * @property {import("../../webgl/ShaderBuilder.js").ShaderBuilder} builder Shader builder with the appropriate presets.
+ * @property {import("./ShaderBuilder.js").ShaderBuilder} builder Shader builder with the appropriate presets.
  * @property {AttributeDefinitions} [attributes] Custom attributes made available in the vertex shaders.
  * Default shaders rely on the attributes in {@link Attributes}.
  * @property {UniformDefinitions} [uniforms] Additional uniforms usable in shaders.