Skip to content
This repository has been archived by the owner on Mar 8, 2023. It is now read-only.

Commit

Permalink
HARP-10881: Fix visible building/polygon outlines for disabled buildi…
Browse files Browse the repository at this point in the history 
…ngs/polygons (#1721)
  • Loading branch information
@ninok
ninok authored Jul 27, 2020
1 parent 9191ffd commit 336862f
Show file tree
Hide file tree
Showing 4 changed files with 95 additions and 15 deletions.
6 changes: 6 additions & 0 deletions @here/harp-datasource-protocol/lib/DecodedTile.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,12 @@ export interface Geometry {
*/
featureStarts?: number[];

/**
* Optional sorted list of feature start indices for the outline geometry.
* Equivalent to {@link featureStarts} but pointing into the edgeIndex attribute.
*/
edgeFeatureStarts?: number[];

/**
* Optional array of objects. It can be used to pass user data from the geometry to the mesh.
*/
Expand Down
32 changes: 29 additions & 3 deletions @here/harp-mapview/lib/geometry/TileGeometryCreator.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -931,6 +931,7 @@ export class TileGeometryCreator {

if (renderDepthPrePass) {
const depthPassMesh = createDepthPrePassMesh(object as THREE.Mesh);
this.addUserData(tile, srcGeometry, technique, depthPassMesh);
// Set geometry kind for depth pass mesh so that it gets the displacement map
// for elevation overlay.
this.registerTileObject(tile, depthPassMesh, techniqueKind, {
Expand All @@ -956,6 +957,13 @@ export class TileGeometryCreator {

// Add the extruded building edges as a separate geometry.
if (isBuilding) {
// When the source geometry is split in groups, we
// should create objects with an array of materials.
const hasEdgeFeatureGroups =
Expr.isExpr(technique.enabled) &&
srcGeometry.edgeFeatureStarts &&
srcGeometry.edgeFeatureStarts.length > 0;

const buildingTechnique = technique as ExtrudedPolygonTechnique;
const edgeGeometry = new THREE.BufferGeometry();
edgeGeometry.setAttribute("position", bufferGeometry.getAttribute("position"));
Expand Down Expand Up @@ -1002,7 +1010,12 @@ export class TileGeometryCreator {
vertexColors: bufferGeometry.getAttribute("color") ? true : false
};
const edgeMaterial = new EdgeMaterial(materialParams);
const edgeObj = new THREE.LineSegments(edgeGeometry, edgeMaterial);
const edgeObj = new THREE.LineSegments(
edgeGeometry,
hasEdgeFeatureGroups ? [edgeMaterial] : edgeMaterial
);

this.addUserData(tile, srcGeometry, technique, edgeObj);

// Set the correct render order.
edgeObj.renderOrder = object.renderOrder + 0.1;
Expand Down Expand Up @@ -1042,6 +1055,11 @@ export class TileGeometryCreator {
// Add the fill area edges as a separate geometry.

if (isFillTechnique(technique) && attachment.info.edgeIndex) {
const hasEdgeFeatureGroups =
Expr.isExpr(technique.enabled) &&
srcGeometry.edgeFeatureStarts &&
srcGeometry.edgeFeatureStarts.length > 0;

const outlineGeometry = new THREE.BufferGeometry();
outlineGeometry.setAttribute(
"position",
Expand All @@ -1064,7 +1082,10 @@ export class TileGeometryCreator {
vertexColors: bufferGeometry.getAttribute("color") ? true : false
};
const outlineMaterial = new EdgeMaterial(materialParams);
const outlineObj = new THREE.LineSegments(outlineGeometry, outlineMaterial);
const outlineObj = new THREE.LineSegments(
outlineGeometry,
hasEdgeFeatureGroups ? [outlineMaterial] : outlineMaterial
);
outlineObj.renderOrder = object.renderOrder + 0.1;

FadingFeature.addRenderHelper(
Expand All @@ -1075,6 +1096,8 @@ export class TileGeometryCreator {
false
);

this.addUserData(tile, srcGeometry, technique, outlineObj);

this.registerTileObject(tile, outlineObj, techniqueKind, {
technique,
pickable: false
Expand Down Expand Up @@ -1527,9 +1550,12 @@ export class TileGeometryCreator {
} else {
// Set the feature data for picking with `MapView.intersectMapObjects()` except for
// solid-line which uses tile-based picking.
const isOutline =
object.type === "LineSegments" &&
(isExtrudedPolygonTechnique(technique) || isFillTechnique(technique));
const featureData: TileFeatureData = {
geometryType: srcGeometry.type,
starts: srcGeometry.featureStarts,
starts: isOutline ? srcGeometry.edgeFeatureStarts : srcGeometry.featureStarts,
objInfos: srcGeometry.objInfos
};
object.userData.feature = featureData;
Expand Down
8 changes: 8 additions & 0 deletions @here/harp-omv-datasource/lib/OmvDecodedTileEmitter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,11 @@ class MeshBuffers implements IMeshBuffers {
*/
readonly featureStarts: number[] = [];

/**
* Optional list of edge feature start indices. The indices point into the edge index attribute.
*/
readonly edgeFeatureStarts: number[] = [];

/**
* An optional list of additional data that can be used as additional data for the object
* picking.
Expand Down Expand Up @@ -1344,6 +1349,7 @@ export class OmvDecodedTileEmitter implements IOmvEmitter {

for (const polygon of polygons) {
const startIndexCount = indices.length;
const edgeStartIndexCount = edgeIndices.length;

for (let ringIndex = 0; ringIndex < polygon.length; ) {
const vertices: number[] = [];
Expand Down Expand Up @@ -1637,6 +1643,7 @@ export class OmvDecodedTileEmitter implements IOmvEmitter {
if (this.m_gatherFeatureAttributes) {
meshBuffers.objInfos.push(context.env.entries);
meshBuffers.featureStarts.push(startIndexCount);
meshBuffers.edgeFeatureStarts.push(edgeStartIndexCount);
}

const count = indices.length - startIndexCount;
Expand Down Expand Up @@ -1809,6 +1816,7 @@ export class OmvDecodedTileEmitter implements IOmvEmitter {
}

geometry.featureStarts = meshBuffers.featureStarts;
geometry.edgeFeatureStarts = meshBuffers.edgeFeatureStarts;
geometry.objInfos = meshBuffers.objInfos;

this.m_geometries.push(geometry);
Expand Down
64 changes: 52 additions & 12 deletions test/rendering/StylingTest.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,8 @@ function mapViewFeaturesRenderingTest(
styleSetName: "geojson",
geojson: options.geoJson,
decoder: new OmvTileDecoder(),
tiler: new GeoJsonTiler()
tiler: new GeoJsonTiler(),
gatherFeatureAttributes: true
});
mapView.addDataSource(dataSource);

Expand All @@ -177,7 +178,7 @@ function mapViewFeaturesRenderingTest(

const grid = new THREE.GridHelper(gridSize, gridDivisions, 0xff0000, 0x00ff00);
grid.geometry.rotateX(Math.PI / 2);
(grid as MapAnchor).geoPosition = position;
(grid as MapAnchor).anchor = position;
grid.setRotationFromMatrix(box.getRotationMatrix());
mapView.mapAnchors.add(grid);
}
Expand Down Expand Up @@ -746,22 +747,42 @@ describe("MapView Styling Test", function() {
}
}
];
const rectangle: Feature = {
const rectangle1: Feature = {
// sample rectangular polygon
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [
[
[0.004, 0.002],
[-0.004, 0.002],
[0.001, 0.001],
[-0.004, 0.001],
[-0.004, -0.002],
[0.004, -0.002]
[0.001, -0.002]
]
]
},
properties: {
name: "Awesome Building",
kind: "building",
height: 200
}
};
const rectangle2: Feature = {
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [
[
[0.001, 0.002],
[0.004, 0.002],
[0.004, -0.002],
[0.001, -0.002]
]
]
},
properties: {
kind: "mall",
name: "Not So Awesome Building",
kind: "building",
height: 200
}
};
Expand Down Expand Up @@ -790,7 +811,8 @@ describe("MapView Styling Test", function() {
type: "FeatureCollection",
features: [
// tested horizontal line
rectangle,
rectangle1,
rectangle2,
referenceBackground,
...extraFeatures
]
Expand Down Expand Up @@ -828,12 +850,23 @@ describe("MapView Styling Test", function() {
lineColor: "#7f7",
lineWidth: 200
},
"fiil-rgba-outline-rgba-200m": {
"fill-rgba-outline-rgba-200m": {
color: "#0b97c470",
lineColor: "#7f77",
lineWidth: 200
},
"fill-outline-disabled": {
color: "#0b97c4",
lineColor: "#7f7",
lineWidth: 200,
enabled: false
},
"fill-outline-partially-disabled": {
color: "#0b97c4",
lineColor: "#7f7",
lineWidth: 200,
enabled: ["match", ["get", "name"], "Awesome Building", true, false]
}

// TODO: not supported by typings
// "rect-rgba-outline-rgba-5px": {
// color: "#0b97c470",
Expand All @@ -849,7 +882,7 @@ describe("MapView Styling Test", function() {
{
geoJson: {
type: "FeatureCollection",
features: [rectangle, referenceBackground]
features: [rectangle1, rectangle2, referenceBackground]
},
theme: {
lights,
Expand Down Expand Up @@ -885,7 +918,7 @@ describe("MapView Styling Test", function() {
{
geoJson: {
type: "FeatureCollection",
features: [rectangle, referenceBackground]
features: [rectangle1, referenceBackground]
},
theme: {
lights,
Expand Down Expand Up @@ -987,6 +1020,13 @@ describe("MapView Styling Test", function() {
lineColorMix: 0,
lineColor: "#7f7",
enabled: false
},
"extruded-polygon-3d-rgba-outline-partialy-disabled": {
color: "#0b97c480",
lineWidth: 1,
lineColorMix: 0,
lineColor: "#7f7",
enabled: ["match", ["get", "name"], "Awesome Building", true, false]
}
},
viewOptions
Expand Down

0 comments on commit 336862f

Please sign in to comment.