Solid line styles with opacity less than 0.98 AND dynamic-properties will not render

[J-Rojas]

I've noticed rendering solid lines with opacity less than 0.98 will fail - the lines will not appear at all. Dashed lines continue to work.

Curiously, if the stencil buffer is disabled, the lines render with the specified opacity.

{
      when: "$geometryType == 'line' && type == 'ridges'",
      technique: "solid-line",
      renderOrder: 10003,
      attr: {
          color: "#fc3",
          lineWidth: 15,
          metricUnit: "Pixel",
          opacity: 0.97
     }
},

The bug appears to be in the SolidLineMaterials.ts shader code - see the test for opacity < 0.98.

I'm using the Harp v0.120.

[nzjony]

@J-Rojas , thanks for creating the issue.

I tried the following style, i.e. replaced getStyleSet() in datasource_features_lines-and-points.ts to:

{
    when: "$geometryType == 'line'",
    technique: "solid-line",
    renderOrder: 10003,
    color: "#fc3",
    lineWidth: 10,
    metricUnit: "Pixel",
    opacity: 0.5
}

And get some lines showing with opacity too (note that attr is deprecated / no longer required).

Though this was done using the main line, release 0.12 is quite old, have you considered to upgrade?

[J-Rojas]

@nzjony I'm actually using v0.20.1.

[J-Rojas]

I forgot to mention the issue is related to both dynamic-properties and opacity when used together.

You will see inconsistent rendering based on the zoom factor or camera angle when a style has both of these properties. You will have to zoom in on a line a few times to get the incorrect rendering.

Error Image Correct Image

Make the following changes to the code:

// snippet:harp_demo_features_linespoints_3.ts
const featuresDataSource = new FeaturesDataSource({
    name: "geojson",
    styleSetName: "myStyleSet",
    features: getFeatures(faults),
    gatherFeatureAttributes: true // <-----
});
    ....
mapView.setDynamicProperty("testEnabled", true);

Use these styles below:

     {
            when: "$geometryType == 'line' && type == 'ridges'",
            technique: "dashed-line",
            renderOrder: 10003,
            attr: {
                color: "#fc3",
                lineWidth: 30,
                metricUnit: "Pixel",
                gapSize: 15,
                dashSize: 1,
                opacity: 0.5
            }
        },
        {
            when: "$geometryType == 'line' && type == 'ridges'",
            technique: "solid-line",
            renderOrder: 10004,
            enabled: ["get", "testEnabled", ["dynamic-properties"]],
            attr: {
                color: "#fc3",
                lineWidth: 30,
                metricUnit: "Pixel",
                opacity: 0.97
            }
        },

[J-Rojas]

@nzjony please have another look at this based on my updated description

[nzjony]

@J-Rojas , thanks for the update, I can reproduce. Will take a look into what the issue is.

[J-Rojas]

@nzjony you might want to look at the interaction of this shader with the stencil buffer. I originally was not enabling the stencil buffer and was not seeing this issue until after I enabled it.

[nzjony]

@J-Rojas , yes it is related to the stencil buffer, the stencilRef value isn't set here correctly: https://github.com/heremaps/harp.gl/blob/86d054d65de40e6d0f90293e529b69ca9d100d79/%40here/harp-mapview/lib/MapView.ts#L3891

This is because the material isn't a SolidLineMaterial, but rather a [SolidLineMaterial], this is because the style has an enabled property, see: https://github.com/heremaps/harp.gl/blob/86d054d65de40e6d0f90293e529b69ca9d100d79/%40here/harp-mapview/lib/geometry/TileGeometryCreator.ts#L832

and: https://github.com/heremaps/harp.gl/blob/86d054d65de40e6d0f90293e529b69ca9d100d79/%40here/harp-mapview/lib/geometry/TileGeometryCreator.ts#L839

I have made a fix, but I'll check with the team if this is correct. Maybe there needs to be some refactoring done. I will push a PR soon and it can be discussed.

Thanks again @J-Rojas for noticing this and creating an issue!