render tests

Author: Pessimistress

docs/api-reference/core/viewport.md

@@ -210,6 +210,14 @@ if (outDir) {
 
 ### Geometry Approximation
 
+![subdivision](https://raw.githubusercontent.com/visgl/deck.gl-data/refs/heads/master/images/docs/viewport-resolution.png)
+
+<small>Left to right: same polygons in resolution 0, 10, 60, rendering 487, 501, 591 outline vertices respectively.
+Notice the shape of the 49th-parallel.
+<br/><i>Natural Earth 1:110 country boundaries of continental Canada and United States. Albers projection, central metidian -96°, standard parallels 29.5° / 45.5°</i>
+</small>
+
+
 When a geometry is displayed in a different CRS from its definition, long segments are still rendered as straight lines, instead of warping along the surface of the new CRS.
 
 Use `resolution` to divide long straight lines into smaller segments to better follow the shape of the target CRS. Subdivision adds vertices before projection so paths, polygon edges and bitmap meshes can follow projected curves more closely. Higher values produce finer detail, with more processing and memory overhead. Subdivision is by default disabled.

modules/core/src/index.ts

@@ -38,6 +38,7 @@ export {default as DeckRenderer} from './lib/deck-renderer';
 
 // Viewports
 export {default as Viewport} from './viewports/viewport';
+export type {ProjectPositionOptions} from './viewports/viewport';
 export {default as WebMercatorViewport} from './viewports/web-mercator-viewport';
 export {default as _GlobeViewport} from './viewports/globe-viewport';
 export {default as OrbitViewport} from './viewports/orbit-viewport';

modules/layers/src/solid-polygon-layer/polygon-tesselator.ts

@@ -46,6 +46,7 @@ export default class PolygonTesselator extends Tesselator<
     wrapLongitude?: boolean;
     preproject?: (xy: number[]) => number[];
     full3d?: boolean;
+    geocentric?: boolean;
   }
 > {
   constructor(opts) {
@@ -215,7 +216,8 @@ export default class PolygonTesselator extends Tesselator<
       polygon,
       this.positionSize,
       this.opts.preproject,
-      this.opts.full3d
+      this.opts.full3d,
+      this.opts.geocentric
     );
 
     // make sure the buffer is large enough

modules/layers/src/solid-polygon-layer/polygon.ts

@@ -309,7 +309,8 @@ export function getSurfaceIndices(
   polygon: NormalizedPolygonGeometry,
   positionSize: number,
   preproject?: (xy: number[]) => number[],
-  full3d?: boolean
+  full3d?: boolean,
+  geocentric?: boolean
 ): number[] {
   let holeIndices = getHoleIndices(polygon);
   if (holeIndices) {
@@ -318,7 +319,15 @@ export function getSurfaceIndices(
 
   let positions = getPositions(polygon);
 
-  const is3d = full3d && positionSize === 3;
+  const is3d = full3d && (positionSize === 3 || geocentric);
+  let triangulationSize = positionSize;
+  if (is3d && positionSize === 2) {
+    // Geocentric tessellation needs XYZ even when the packed attribute is XY.
+    const xyz: number[] = [];
+    for (let i = 0; i < positions.length; i += 2) xyz.push(positions[i], positions[i + 1], 0);
+    positions = xyz;
+    triangulationSize = 3;
+  }
 
   if (preproject) {
     // When tesselating lnglat coordinates, project them to the common space for accuracy
@@ -328,12 +337,12 @@ export function getSurfaceIndices(
     positions = positions.slice();
 
     const p: number[] = [];
-    for (let i = 0; i < n; i += positionSize) {
+    for (let i = 0; i < n; i += triangulationSize) {
       p[0] = positions[i];
       p[1] = positions[i + 1];
 
       if (is3d) {
-        p[2] = positions[i + 2];
+        p[2] = positions[i + 2] ?? 0;
       }
 
       const xy = preproject(p);
@@ -347,6 +356,8 @@ export function getSurfaceIndices(
     }
   }
 
+  const geocentricPositions = geocentric ? positions.slice() : null;
+
   if (is3d) {
     // calculate plane with largest area
     const xyArea = getPlaneArea(positions, 0, 1);
@@ -375,6 +386,23 @@ export function getSurfaceIndices(
     }
   }
 
-  // Let earcut triangulate the polygon
-  return earcut(positions, holeIndices, positionSize);
+  const indices = earcut(positions, holeIndices, triangulationSize);
+  if (geocentricPositions) {
+    // Globe views cull inward-facing triangles. A planar earcut winding can face inward
+    // on either hemisphere; orient each triangle away from the geocentric origin.
+    for (let i = 0; i < indices.length; i += 3) {
+      const a = indices[i] * triangulationSize;
+      const b = indices[i + 1] * triangulationSize;
+      const c = indices[i + 2] * triangulationSize;
+      const p = geocentricPositions;
+      const orientation =
+        p[a] * (p[b + 1] * p[c + 2] - p[b + 2] * p[c + 1]) +
+        p[a + 1] * (p[b + 2] * p[c] - p[b] * p[c + 2]) +
+        p[a + 2] * (p[b] * p[c + 1] - p[b + 1] * p[c]);
+      if (orientation < 0) {
+        [indices[i + 1], indices[i + 2]] = [indices[i + 2], indices[i + 1]];
+      }
+    }
+  }
+  return indices;
 }

modules/layers/src/solid-polygon-layer/solid-polygon-layer.ts

@@ -172,25 +172,9 @@ export default class SolidPolygonLayer<DataT = any, ExtraPropsT extends {} = {}>
   }
 
   initializeState() {
-    const {viewport} = this.context;
-    const {_full3d} = this.props;
-
-    let preproject: ((xy: number[]) => number[]) | undefined;
-
-    if (this.state.packedCrs?.signature === 'WGS84') {
-      if (_full3d) {
-        preproject = viewport.projectPosition.bind(viewport);
-      } else {
-        preproject = viewport.projectFlat.bind(viewport);
-      }
-    }
-
     this.setState({
       numInstances: 0,
       polygonTesselator: new PolygonTesselator({
-        // Lnglat coordinates are usually projected non-linearly, which affects tesselation results
-        // Provide a preproject function if the coordinates are in lnglat
-        preproject,
         fp64: this.use64bitPositions(),
         IndexType: Uint32Array
       })
@@ -355,6 +339,9 @@ export default class SolidPolygonLayer<DataT = any, ExtraPropsT extends {} = {}>
   protected updateGeometry({props, oldProps, changeFlags}: UpdateParameters<this>) {
     const {viewport} = this.context;
     const subdivisionStep = this.getSubdivisionStep();
+    const geocentric = Boolean(
+      this.state.packedCrs && viewport.crs?.coordinateFrame === 'geocentric'
+    );
     const projectionChanged =
       changeFlags.projectionChanged ||
       this.state.subdivisionStep !== subdivisionStep ||
@@ -380,13 +367,10 @@ export default class SolidPolygonLayer<DataT = any, ExtraPropsT extends {} = {}>
         buffers,
         getGeometry: props.getPolygon,
         transform: this.usePositionTransforms().transform?.bind(this),
-        // Triangulate in the target projection even when CPU conversion packs WGS84.
-        preproject:
-          this.state.packedCrs?.signature === 'WGS84'
-            ? props._full3d
-              ? viewport.projectPosition.bind(viewport)
-              : viewport.projectFlat.bind(viewport)
-            : undefined,
+        // Tessellation uses a temporary target-space copy; attributes retain their shader-supported CRS.
+        preproject: this.state.packedCrs
+          ? position => viewport.projectPosition(position, {sourceCrs: this.state.packedCrs!})
+          : undefined,
         positionFormat: props.positionFormat,
         // Longitude cutting assumes geographic input and cannot run on preprojected coordinates.
         wrapLongitude:
@@ -396,7 +380,9 @@ export default class SolidPolygonLayer<DataT = any, ExtraPropsT extends {} = {}>
         resolution: subdivisionStep,
         fp64: this.use64bitPositions(),
         dataChanged: projectionChanged ? undefined : changeFlags.dataChanged,
-        full3d: props._full3d
+        // A geocentric target needs a polygon plane selected from XYZ, even for flat source data.
+        full3d: props._full3d || geocentric,
+        geocentric
       });
 
       this.setState({

test/data/crs/antarctica-coastline.geo.json

@@ -247,3 +247,16 @@ test('A layer in the custom viewport target CRS retains native attributes and GP
     manager.finalize();
   }
 });
+
+test('Viewport projects a declared source CRS independently of attribute packing', () => {
+  for (const viewport of [new WebMercatorViewport(), new GlobeViewport(), createTestViewport()]) {
+    const geographic = [10, 20, 30];
+    const sourcePosition = source.converter.WGS84.from(geographic);
+    const expected = viewport.projectPosition(geographic);
+    expect(viewport.projectPosition(sourcePosition, {sourceCrs: source})).toEqual(expected);
+    expect(viewport.projectPosition(geographic, {sourceCrs: WGS84_CRS})).toEqual(expected);
+    const targetPosition = viewport.crs!.converter.WGS84.from(geographic);
+    const actual = viewport.projectPosition(targetPosition, {sourceCrs: viewport.crs!});
+    for (let axis = 0; axis < 3; axis++) expect(actual[axis]).toBeCloseTo(expected[axis], 7);
+  }
+});