ol 7.5.1 → 8.0.0-dev.1692053484481

package/webgl/styleparser.js

@@ -5,33 +5,13 @@
 import {ShaderBuilder} from './ShaderBuilder.js';
 import {
   ValueTypes,
+  arrayToGlsl,
   expressionToGlsl,
   getStringNumberEquivalent,
   uniformNameForVariable,
 } from '../style/expressions.js';
 import {asArray} from '../color.js';
-
-/**
- * @param {import('../style/literal.js').SymbolType} type Symbol type
- * @param {string} sizeExpressionGlsl Size expression
- * @return {string} The GLSL opacity function
- */
-export function getSymbolOpacityGlslFunction(type, sizeExpressionGlsl) {
-  switch (type) {
-    case 'square':
-    case 'image':
-      return '1.0';
-    // taken from https://thebookofshaders.com/07/
-    case 'circle':
-      return `(1.0-smoothstep(1.-4./${sizeExpressionGlsl},1.,dot(v_quadCoord-.5,v_quadCoord-.5)*4.))`;
-    case 'triangle':
-      const st = '(v_quadCoord*2.-1.)';
-      const a = `(atan(${st}.x,${st}.y))`;
-      return `(1.0-smoothstep(.5-3./${sizeExpressionGlsl},.5,cos(floor(.5+${a}/2.094395102)*2.094395102-${a})*length(${st})))`;
-    default:
-      throw new Error(`Unexpected symbol type: ${type}`);
-  }
-}
+import {getUid} from '../util.js';
 
 /**
  * Packs all components of a color into a two-floats array
@@ -83,102 +63,531 @@ function getGlslTypeFromType(type) {
 }
 
 /**
- * @param {import("../style/literal").LiteralStyle} style Style
+ * @param {import("../style/literal.js").LiteralStyle} style Style
+ * @param {ShaderBuilder} builder Shader builder
+ * @param {import("../style/expressions.js").ParsingContext} vertContext Vertex shader parsing context
+ * @param {'shape-'|'circle-'|'icon-'} prefix Properties prefix
+ */
+function parseCommonSymbolProperties(style, builder, vertContext, prefix) {
+  let radius;
+  if (`${prefix}radius` in style && prefix !== 'icon-') {
+    radius = expressionToGlsl(
+      vertContext,
+      style[`${prefix}radius`],
+      ValueTypes.NUMBER
+    );
+  } else if (`${prefix}radius1` in style && prefix === 'shape-') {
+    radius = expressionToGlsl(
+      vertContext,
+      style[`${prefix}radius1`],
+      ValueTypes.NUMBER
+    );
+  }
+  if (radius !== undefined) {
+    if (`${prefix}stroke-width` in style) {
+      radius = `(${radius} + ${expressionToGlsl(
+        vertContext,
+        style[`${prefix}stroke-width`],
+        ValueTypes.NUMBER
+      )} * 0.5)`;
+    }
+    builder.setSymbolSizeExpression(`vec2(${radius} * 2. + 0.5)`); // adding some padding for antialiasing
+  }
+  if (`${prefix}scale` in style) {
+    const scale = expressionToGlsl(
+      vertContext,
+      style[`${prefix}scale`],
+      ValueTypes.NUMBER | ValueTypes.NUMBER_ARRAY
+    );
+    builder.setSymbolSizeExpression(
+      `${builder.getSymbolSizeExpression()} * ${scale}`
+    );
+  }
+  if (`${prefix}displacement` in style) {
+    builder.setSymbolOffsetExpression(
+      expressionToGlsl(
+        vertContext,
+        style[`${prefix}displacement`],
+        ValueTypes.NUMBER_ARRAY
+      )
+    );
+  }
+  if (`${prefix}rotation` in style) {
+    builder.setSymbolRotationExpression(
+      expressionToGlsl(
+        vertContext,
+        style[`${prefix}rotation`],
+        ValueTypes.NUMBER
+      )
+    );
+  }
+  if (`${prefix}rotate-with-view` in style) {
+    builder.setSymbolRotateWithView(!!style[`${prefix}rotate-with-view`]);
+  }
+}
+
+/**
+ * @param {string} distanceField The distance field expression
+ * @param {string|null} fillColor The fill color expression; null if no fill
+ * @param {string|null} strokeColor The stroke color expression; null if no stroke
+ * @param {string|null} strokeWidth The stroke width expression; null if no stroke
+ * @param {string|null} opacity The opacity expression; null if no stroke
+ * @return {string} The final color expression, based on the distance field and given params
+ */
+function getColorFromDistanceField(
+  distanceField,
+  fillColor,
+  strokeColor,
+  strokeWidth,
+  opacity
+) {
+  let color = 'vec4(0.)';
+  if (fillColor !== null) {
+    color = fillColor;
+  }
+  if (strokeColor !== null && strokeWidth !== null) {
+    const strokeFillRatio = `smoothstep(-${strokeWidth} + 0.63, -${strokeWidth} - 0.58, ${distanceField})`;
+    color = `mix(${strokeColor}, ${color}, ${strokeFillRatio})`;
+  }
+  const shapeOpacity = `(1.0 - smoothstep(-0.63, 0.58, ${distanceField}))`;
+  let result = `${color} * ${shapeOpacity}`;
+  if (opacity !== null) {
+    result = `${result} * ${opacity}`;
+  }
+  return result;
+}
+
+/**
+ * @param {import("../style/literal.js").LiteralStyle} style Style
  * @param {ShaderBuilder} builder Shader builder
  * @param {Object<string,import("../webgl/Helper").UniformValue>} uniforms Uniforms
  * @param {import("../style/expressions.js").ParsingContext} vertContext Vertex shader parsing context
  * @param {import("../style/expressions.js").ParsingContext} fragContext Fragment shader parsing context
  */
-function parseSymbolProperties(
+function parseCircleProperties(
   style,
   builder,
   uniforms,
   vertContext,
   fragContext
 ) {
-  if (!('symbol' in style)) {
-    return;
+  // this function takes in screen coordinates in pixels and returns the signed distance field
+  // (0 on the boundary, negative inside the circle, positive outside, values in pixels)
+  fragContext.functions[
+    'circleDistanceField'
+  ] = `float circleDistanceField(vec2 point, float radius) {
+  return length(point) - radius;
+}`;
+
+  parseCommonSymbolProperties(style, builder, vertContext, 'circle-');
+
+  // OPACITY
+  let opacity = null;
+  if ('circle-opacity' in style) {
+    opacity = expressionToGlsl(
+      fragContext,
+      style['circle-opacity'],
+      ValueTypes.NUMBER
+    );
+  }
+
+  // SCALE
+  let currentPoint = 'coordsPx';
+  if ('circle-scale' in style) {
+    const scale = expressionToGlsl(
+      fragContext,
+      style['circle-scale'],
+      ValueTypes.NUMBER | ValueTypes.NUMBER_ARRAY
+    );
+    currentPoint = `coordsPx / ${scale}`;
   }
 
-  const symbolStyle = style.symbol;
-  if ('color' in symbolStyle) {
-    const color = symbolStyle.color;
-    const opacity = symbolStyle.opacity !== undefined ? symbolStyle.opacity : 1;
-    const parsedColor = expressionToGlsl(fragContext, color, ValueTypes.COLOR);
-    const parsedOpacity = expressionToGlsl(
+  // FILL COLOR
+  let fillColor = null;
+  if ('circle-fill-color' in style) {
+    fillColor = expressionToGlsl(
       fragContext,
-      opacity,
+      style['circle-fill-color'],
+      ValueTypes.COLOR
+    );
+  }
+
+  // STROKE COLOR
+  let strokeColor = null;
+  if ('circle-stroke-color' in style) {
+    strokeColor = expressionToGlsl(
+      fragContext,
+      style['circle-stroke-color'],
+      ValueTypes.COLOR
+    );
+  }
+
+  // RADIUS
+  let radius = expressionToGlsl(
+    fragContext,
+    style['circle-radius'],
+    ValueTypes.NUMBER
+  );
+
+  // STROKE WIDTH
+  let strokeWidth = null;
+  if ('circle-stroke-width' in style) {
+    strokeWidth = expressionToGlsl(
+      fragContext,
+      style['circle-stroke-width'],
       ValueTypes.NUMBER
     );
-    builder.setSymbolColorExpression(
-      `vec4(${parsedColor}.rgb, ${parsedColor}.a * ${parsedOpacity})`
+    radius = `(${radius} + ${strokeWidth} * 0.5)`;
+  }
+
+  // FINAL COLOR
+  const distanceField = `circleDistanceField(${currentPoint}, ${radius})`;
+  const colorExpression = getColorFromDistanceField(
+    distanceField,
+    fillColor,
+    strokeColor,
+    strokeWidth,
+    opacity
+  );
+  builder.setSymbolColorExpression(colorExpression);
+}
+
+/**
+ * @param {import("../style/literal.js").LiteralStyle} style Style
+ * @param {ShaderBuilder} builder Shader builder
+ * @param {Object<string,import("../webgl/Helper").UniformValue>} uniforms Uniforms
+ * @param {import("../style/expressions.js").ParsingContext} vertContext Vertex shader parsing context
+ * @param {import("../style/expressions.js").ParsingContext} fragContext Fragment shader parsing context
+ */
+function parseShapeProperties(
+  style,
+  builder,
+  uniforms,
+  vertContext,
+  fragContext
+) {
+  fragContext.functions['PI'] = 'const float PI = 3.141592653589793238;';
+  fragContext.functions['TWO_PI'] = 'const float TWO_PI = 2.0 * PI;';
+  fragContext.functions['round'] = `float round(float v) {
+  return sign(v) * floor(abs(v) + 0.5);
+}`;
+
+  // these functions take in screen coordinates in pixels and returns the signed distance field
+  // (0 on the boundary, negative inside the circle, positive outside, values in pixels)
+  // inspired by https://github.com/zranger1/PixelblazePatterns/blob/master/Toolkit/sdf2d.md#n-sided-regular-polygon
+  fragContext.functions[
+    'starDistanceField'
+  ] = `float starDistanceField(vec2 point, float numPoints, float radiusIn, float radiusOut, float angle) {
+  float startAngle = -PI * 0.5 + angle; // tip starts upwards and rotates clockwise with angle
+  float c = cos(startAngle);
+  float s = sin(startAngle);
+  vec2 pointRotated = vec2(c * point.x - s * point.y, s * point.x + c * point.y); 
+  float alpha = TWO_PI / numPoints; // the angle of one sector
+  float beta = atan(pointRotated.y, pointRotated.x);
+  float gamma = round(beta / alpha) * alpha; // angle in sector
+  c = cos(-gamma);
+  s = sin(-gamma);
+  vec2 inSector = vec2(c * pointRotated.x - s * pointRotated.y, abs(s * pointRotated.x + c * pointRotated.y));
+  vec2 tipToPoint = inSector + vec2(-radiusOut, 0.);
+  vec2 edgeNormal = vec2(radiusIn * sin(alpha * 0.5), -radiusIn * cos(alpha * 0.5) + radiusOut);
+  return dot(normalize(edgeNormal), tipToPoint);
+}`;
+  fragContext.functions[
+    'regularDistanceField'
+  ] = `float regularDistanceField(vec2 point, float numPoints, float radius, float angle) {
+  float startAngle = -PI * 0.5 + angle; // tip starts upwards and rotates clockwise with angle
+  float c = cos(startAngle);
+  float s = sin(startAngle);
+  vec2 pointRotated = vec2(c * point.x - s * point.y, s * point.x + c * point.y); 
+  float alpha = TWO_PI / numPoints; // the angle of one sector
+  float radiusIn = radius * cos(PI / numPoints);
+  float beta = atan(pointRotated.y, pointRotated.x);
+  float gamma = round((beta - alpha * 0.5) / alpha) * alpha + alpha * 0.5; // angle in sector from mid
+  c = cos(-gamma);
+  s = sin(-gamma);
+  vec2 inSector = vec2(c * pointRotated.x - s * pointRotated.y, abs(s * pointRotated.x + c * pointRotated.y));
+  return inSector.x - radiusIn;
+}`;
+
+  parseCommonSymbolProperties(style, builder, vertContext, 'shape-');
+
+  // OPACITY
+  let opacity = null;
+  if ('shape-opacity' in style) {
+    opacity = expressionToGlsl(
+      fragContext,
+      style['shape-opacity'],
+      ValueTypes.NUMBER
     );
   }
-  if (symbolStyle.symbolType === 'image' && symbolStyle.src) {
-    const texture = new Image();
-    texture.crossOrigin =
-      symbolStyle.crossOrigin === undefined
-        ? 'anonymous'
-        : symbolStyle.crossOrigin;
-    texture.src = symbolStyle.src;
-    builder
-      .addUniform('sampler2D u_texture')
-      .setSymbolColorExpression(
-        `${builder.getSymbolColorExpression()} * texture2D(u_texture, v_texCoord)`
-      );
-    uniforms['u_texture'] = texture;
-  } else if ('symbolType' in symbolStyle) {
-    let visibleSize = builder.getSymbolSizeExpression();
-    if ('size' in symbolStyle) {
-      visibleSize = expressionToGlsl(
-        fragContext,
-        symbolStyle.size,
-        ValueTypes.NUMBER_ARRAY | ValueTypes.NUMBER
-      );
+
+  // SCALE
+  let currentPoint = 'coordsPx';
+  if ('shape-scale' in style) {
+    const scale = expressionToGlsl(
+      fragContext,
+      style['shape-scale'],
+      ValueTypes.NUMBER | ValueTypes.NUMBER_ARRAY
+    );
+    currentPoint = `coordsPx / ${scale}`;
+  }
+
+  // FILL COLOR
+  let fillColor = null;
+  if ('shape-fill-color' in style) {
+    fillColor = expressionToGlsl(
+      fragContext,
+      style['shape-fill-color'],
+      ValueTypes.COLOR
+    );
+  }
+
+  // STROKE COLOR
+  let strokeColor = null;
+  if ('shape-stroke-color' in style) {
+    strokeColor = expressionToGlsl(
+      fragContext,
+      style['shape-stroke-color'],
+      ValueTypes.COLOR
+    );
+  }
+
+  // STROKE WIDTH
+  let strokeWidth = null;
+  if ('shape-stroke-width' in style) {
+    strokeWidth = expressionToGlsl(
+      fragContext,
+      style['shape-stroke-width'],
+      ValueTypes.NUMBER
+    );
+  }
+
+  // SHAPE TYPE
+  const numPoints = expressionToGlsl(
+    fragContext,
+    style['shape-points'],
+    ValueTypes.NUMBER
+  );
+  let angle = '0.';
+  if ('shape-angle' in style) {
+    angle = expressionToGlsl(
+      fragContext,
+      style['shape-angle'],
+      ValueTypes.NUMBER
+    );
+  }
+  let shapeField;
+  if ('shape-radius' in style) {
+    let radius = expressionToGlsl(
+      fragContext,
+      style['shape-radius'],
+      ValueTypes.NUMBER
+    );
+    if (strokeWidth !== null) {
+      radius = `${radius} + ${strokeWidth} * 0.5`;
     }
-    const symbolOpacity = getSymbolOpacityGlslFunction(
-      symbolStyle.symbolType,
-      `vec2(${visibleSize}).x`
+    shapeField = `regularDistanceField(${currentPoint}, ${numPoints}, ${radius}, ${angle})`;
+  } else {
+    let radiusOuter = expressionToGlsl(
+      fragContext,
+      style['shape-radius1'],
+      ValueTypes.NUMBER
     );
-    builder.setSymbolColorExpression(
-      `${builder.getSymbolColorExpression()} * vec4(1.0, 1.0, 1.0, ${symbolOpacity})`
+    let radiusInner = expressionToGlsl(
+      fragContext,
+      style['shape-radius2'],
+      ValueTypes.NUMBER
     );
+    if (strokeWidth !== null) {
+      radiusOuter = `${radiusOuter} + ${strokeWidth} * 0.5`;
+      radiusInner = `${radiusInner} + ${strokeWidth} * 0.5`;
+    }
+    shapeField = `starDistanceField(${currentPoint}, ${numPoints}, ${radiusInner}, ${radiusOuter}, ${angle})`;
   }
-  if ('size' in symbolStyle) {
-    const size = symbolStyle.size;
-    const parsedSize = expressionToGlsl(
-      vertContext,
-      size,
-      ValueTypes.NUMBER_ARRAY | ValueTypes.NUMBER
+
+  // FINAL COLOR
+  const colorExpression = getColorFromDistanceField(
+    shapeField,
+    fillColor,
+    strokeColor,
+    strokeWidth,
+    opacity
+  );
+  builder.setSymbolColorExpression(colorExpression);
+}
+
+/**
+ * @param {import("../style/literal.js").LiteralStyle} style Style
+ * @param {ShaderBuilder} builder Shader builder
+ * @param {Object<string,import("../webgl/Helper").UniformValue>} uniforms Uniforms
+ * @param {import("../style/expressions.js").ParsingContext} vertContext Vertex shader parsing context
+ * @param {import("../style/expressions.js").ParsingContext} fragContext Fragment shader parsing context
+ */
+function parseIconProperties(
+  style,
+  builder,
+  uniforms,
+  vertContext,
+  fragContext
+) {
+  fragContext.functions[
+    'samplePremultiplied'
+  ] = `vec4 samplePremultiplied(sampler2D sampler, vec2 texCoord) {
+  vec4 color = texture2D(sampler, texCoord);
+  return vec4(color.rgb * color.a, color.a);
+}`;
+
+  // COLOR
+  let color = 'vec4(1.0)';
+  if ('icon-color' in style) {
+    color = expressionToGlsl(
+      fragContext,
+      style['icon-color'],
+      ValueTypes.COLOR
     );
-    builder.setSymbolSizeExpression(`vec2(${parsedSize})`);
   }
-  if ('textureCoord' in symbolStyle) {
-    builder.setTextureCoordinateExpression(
-      expressionToGlsl(
+
+  // OPACITY
+  if ('icon-opacity' in style) {
+    color = `${color} * ${expressionToGlsl(
+      fragContext,
+      style['icon-opacity'],
+      ValueTypes.NUMBER
+    )}`;
+  }
+
+  // IMAGE & SIZE
+  let image;
+  let size;
+  const textureId = getUid(style);
+  if ('icon-src' in style) {
+    image = new Image();
+    image.crossOrigin =
+      style['icon-cross-origin'] === undefined
+        ? 'anonymous'
+        : style['icon-cross-origin'];
+    image.src = style['icon-src'];
+    // the size is provided asynchronously using a uniform
+    uniforms[`u_texture${textureId}_size`] = () => {
+      return image.complete ? [image.width, image.height] : [0, 0];
+    };
+    size = `u_texture${textureId}_size`;
+    builder.addUniform(`vec2 u_texture${textureId}_size`);
+  } else {
+    image = style['icon-img'];
+    const imgSize = style['icon-img-size'];
+    size = arrayToGlsl(imgSize);
+  }
+  uniforms[`u_texture${textureId}`] = image;
+  builder
+    .addUniform(`sampler2D u_texture${textureId}`)
+    .setSymbolColorExpression(
+      `${color} * samplePremultiplied(u_texture${textureId}, v_texCoord)`
+    )
+    .setSymbolSizeExpression(size);
+
+  // override size if width/height were specified
+  if ('icon-width' in style && 'icon-height' in style) {
+    builder.setSymbolSizeExpression(
+      `vec2(${expressionToGlsl(
         vertContext,
-        symbolStyle.textureCoord,
-        ValueTypes.NUMBER_ARRAY
-      )
+        style['icon-width'],
+        ValueTypes.NUMBER
+      )}, ${expressionToGlsl(
+        vertContext,
+        style['icon-height'],
+        ValueTypes.NUMBER
+      )})`
     );
   }
-  if ('offset' in symbolStyle) {
-    builder.setSymbolOffsetExpression(
-      expressionToGlsl(vertContext, symbolStyle.offset, ValueTypes.NUMBER_ARRAY)
+
+  // tex coord
+  if ('icon-offset' in style && 'icon-size' in style) {
+    let offset = expressionToGlsl(
+      vertContext,
+      style['icon-offset'],
+      ValueTypes.NUMBER_ARRAY
     );
-  }
-  if ('rotation' in symbolStyle) {
-    builder.setSymbolRotationExpression(
-      expressionToGlsl(vertContext, symbolStyle.rotation, ValueTypes.NUMBER)
+    const sampleSize = expressionToGlsl(
+      vertContext,
+      style['icon-size'],
+      ValueTypes.NUMBER_ARRAY
+    );
+    const fullsize = builder.getSymbolSizeExpression();
+    builder.setSymbolSizeExpression(sampleSize);
+
+    if ('icon-offset-origin' in style) {
+      switch (style['icon-offset-origin']) {
+        case 'top-right':
+          offset = `vec2(v_quadSizePx.x, 0.) + ${sampleSize} * vec2(-1., 0.) + ${offset} * vec2(-1., 1.)`;
+          break;
+        case 'bottom-left':
+          offset = `vec2(0., v_quadSizePx.y) + ${sampleSize} * vec2(0., -1.) + ${offset} * vec2(1., -1.)`;
+          break;
+        case 'bottom-right':
+          offset = `v_quadSizePx - ${sampleSize} - ${offset}`;
+          break;
+        default: // pass
+      }
+    }
+    builder.setTextureCoordinateExpression(
+      `(vec4((${offset}).xyxy) + vec4(0., 0., ${sampleSize})) / (${fullsize}).xyxy`
     );
   }
-  if ('rotateWithView' in symbolStyle) {
-    builder.setSymbolRotateWithView(!!symbolStyle.rotateWithView);
+
+  parseCommonSymbolProperties(style, builder, vertContext, 'icon-');
+
+  if ('icon-anchor' in style) {
+    const anchor = expressionToGlsl(
+      vertContext,
+      style['icon-anchor'],
+      ValueTypes.NUMBER_ARRAY
+    );
+    let scale = `1.0`;
+    if (`icon-scale` in style) {
+      scale = expressionToGlsl(
+        vertContext,
+        style[`icon-scale`],
+        ValueTypes.NUMBER | ValueTypes.NUMBER_ARRAY
+      );
+    }
+    let shiftPx;
+    if (
+      style['icon-anchor-x-units'] === 'pixels' &&
+      style['icon-anchor-y-units'] === 'pixels'
+    ) {
+      shiftPx = `${anchor} * ${scale}`;
+    } else if (style['icon-anchor-x-units'] === 'pixels') {
+      shiftPx = `${anchor} * vec2(vec2(${scale}).x, v_quadSizePx.y)`;
+    } else if (style['icon-anchor-y-units'] === 'pixels') {
+      shiftPx = `${anchor} * vec2(v_quadSizePx.x, vec2(${scale}).x)`;
+    } else {
+      shiftPx = `${anchor} * v_quadSizePx`;
+    }
+    // default origin is top-left
+    let offsetPx = `v_quadSizePx * vec2(0.5, -0.5) + ${shiftPx} * vec2(-1., 1.)`;
+    if ('icon-anchor-origin' in style) {
+      switch (style['icon-anchor-origin']) {
+        case 'top-right':
+          offsetPx = `v_quadSizePx * -0.5 + ${shiftPx}`;
+          break;
+        case 'bottom-left':
+          offsetPx = `v_quadSizePx * 0.5 - ${shiftPx}`;
+          break;
+        case 'bottom-right':
+          offsetPx = `v_quadSizePx * vec2(-0.5, 0.5) + ${shiftPx} * vec2(1., -1.)`;
+          break;
+        default: // pass
+      }
+    }
+    builder.setSymbolOffsetExpression(
+      `${builder.getSymbolOffsetExpression()} + ${offsetPx}`
+    );
   }
 }
 
 /**
- * @param {import("../style/literal").LiteralStyle} style Style
+ * @param {import("../style/literal.js").LiteralStyle} style Style
  * @param {ShaderBuilder} builder Shader Builder
  * @param {Object<string,import("../webgl/Helper").UniformValue>} uniforms Uniforms
  * @param {import("../style/expressions.js").ParsingContext} vertContext Vertex shader parsing context
@@ -205,7 +614,7 @@ function parseStrokeProperties(
 }
 
 /**
- * @param {import("../style/literal").LiteralStyle} style Style
+ * @param {import("../style/literal.js").LiteralStyle} style Style
  * @param {ShaderBuilder} builder Shader Builder
  * @param {Object<string,import("../webgl/Helper").UniformValue>} uniforms Uniforms
  * @param {import("../style/expressions.js").ParsingContext} vertContext Vertex shader parsing context
@@ -233,14 +642,14 @@ function parseFillProperties(
  */
 
 /**
- * Parses a {@link import("../style/literal").LiteralStyle} object and returns a {@link ShaderBuilder}
+ * Parses a {@link import("../style/literal.js").LiteralStyle} object and returns a {@link ShaderBuilder}
  * object that has been configured according to the given style, as well as `attributes` and `uniforms`
  * arrays to be fed to the `WebGLPointsRenderer` class.
  *
  * Also returns `uniforms` and `attributes` properties as expected by the
  * {@link module:ol/renderer/webgl/PointsLayer~WebGLPointsLayerRenderer}.
  *
- * @param {import("../style/literal").LiteralStyle} style Literal style.
+ * @param {import("../style/literal.js").LiteralStyle} style Literal style.
  * @return {StyleParseResult} Result containing shader params, attributes and uniforms.
  */
 export function parseLiteralStyle(style) {
@@ -273,7 +682,13 @@ export function parseLiteralStyle(style) {
   /** @type {Object<string,import("../webgl/Helper").UniformValue>} */
   const uniforms = {};
 
-  parseSymbolProperties(style, builder, uniforms, vertContext, fragContext);
+  if ('icon-src' in style || 'icon-img' in style) {
+    parseIconProperties(style, builder, uniforms, vertContext, fragContext);
+  } else if ('shape-points' in style) {
+    parseShapeProperties(style, builder, uniforms, vertContext, fragContext);
+  } else if ('circle-radius' in style) {
+    parseCircleProperties(style, builder, uniforms, vertContext, fragContext);
+  }
   parseStrokeProperties(style, builder, uniforms, vertContext, fragContext);
   parseFillProperties(style, builder, uniforms, vertContext, fragContext);