[PoC] WebGPU Backend

build/generate-shaders.ts

@@ -12,24 +12,32 @@ console.log('Generating shaders');
  * It will also create a simple package.json file to allow importing this package in webpack
  */
 
-function glslToTs(code: string): string {
-    code = code
-        .trim() // strip whitespace at the start/end
-        .replace(/\s*\/\/[^\n]*\n/g, '\n') // strip double-slash comments
-        .replace(/\n+/g, '\n') // collapse multi line breaks
-        .replace(/\n\s+/g, '\n') // strip indentation
-        .replace(/\s?([+-\/*=,])\s?/g, '$1') // strip whitespace around operators
-        .replace(/([;\(\),\{\}])\n(?=[^#])/g, '$1'); // strip more line breaks
+function glslToTs(code: string, isWgsl: boolean = false): string {
+    if (!isWgsl) {
+        code = code
+            .trim() // strip whitespace at the start/end
+            .replace(/\s*\/\/[^\n]*\n/g, '\n') // strip double-slash comments
+            .replace(/\n+/g, '\n') // collapse multi line breaks
+            .replace(/\n\s+/g, '\n') // strip indentation
+            .replace(/\s?([+-\/*=,])\s?/g, '$1') // strip whitespace around operators
+            .replace(/([;\(\),\{\}])\n(?=[^#])/g, '$1'); // strip more line breaks
+    } else {
+        code = code.trim().replace(/\s*\/\/[^\n]*\n/g, '\n');
+        // For WGSL, be less aggressive with space stripping to avoid breaking parsers.
+    }
 
     return `// This file is generated. Edit build/generate-shaders.ts, then run \`npm run codegen\`.
 export default ${JSON.stringify(code).replaceAll('"', '\'')};\n`;
 }
 
-const shaderFiles = globSync('./src/shaders/glsl/*.glsl');
+const shaderFiles = [...globSync('./src/shaders/glsl/*.glsl'), ...globSync('./src/shaders/wgsl/*.wgsl')];
 for (const file of shaderFiles) {
-    const glslFile = fs.readFileSync(file, 'utf8');
-    const tsSource = glslToTs(glslFile);
-    const fileName = path.join('.', 'src', 'shaders', 'glsl', `${file.split(path.sep).splice(-1)}.g.ts`);
+    const shaderSource = fs.readFileSync(file, 'utf8');
+    const isWgsl = file.endsWith('.wgsl');
+    const tsSource = glslToTs(shaderSource, isWgsl);
+    // Output .g.ts files alongside the sources: glsl/ for GLSL, wgsl/ for WGSL
+    const outDir = path.dirname(file);
+    const fileName = path.join(outDir, `${path.basename(file)}.g.ts`);
     fs.writeFileSync(fileName, tsSource);
 }
 

package.json

@@ -139,7 +139,7 @@
     "generate-docs": "typedoc && node --no-warnings --loader ts-node/esm build/generate-docs.ts",
     "generate-images": "node --no-warnings --loader ts-node/esm build/generate-doc-images.ts",
     "build-dist": "npm run build-css && npm run generate-unicode-data && npm run generate-typings && npm run generate-shaders && npm run build-dev && npm run build-csp-dev && npm run build-prod && npm run build-csp",
-    "build-dev": "rollup --configPlugin @rollup/plugin-typescript -c --environment BUILD:dev",
+    "build-dev": "npm run generate-shaders && rollup --configPlugin @rollup/plugin-typescript -c --environment BUILD:dev",
     "watch-dev": "rollup --configPlugin @rollup/plugin-typescript -c --environment BUILD:dev --watch",
     "build-prod": "rollup --configPlugin @rollup/plugin-typescript -c --environment BUILD:production",
     "build-csp": "rollup --configPlugin @rollup/plugin-typescript -c rollup.config.csp.ts --environment BUILD:production",

rollup.config.ts

@@ -29,6 +29,9 @@
         minifyInternalExports: production
     },
     onwarn: (message) => {
+        if (message.code === 'CIRCULAR_DEPENDENCY' && message.ids && message.ids.some(id => id.includes('@luma.gl'))) {
+            return;
+        }
         console.error(message);
         throw message;
     },

src/geo/projection/covering_tiles.ts

@@ -181,14 +181,22 @@
  * @returns A list of tile coordinates, ordered by ascending distance from camera.
  */
 export function coveringTiles(transform: IReadonlyTransform, options: CoveringTilesOptionsInternal): OverscaledTileID[] {
+    if (!transform.width || !transform.height) {
+        console.log(`[coveringTiles] width or height is 0: ${transform.width}x${transform.height}`);
+        return [];
+    }
     const frustum = transform.getCameraFrustum();
+    if (!frustum) {
+        console.log(`[coveringTiles] no frustum`);
+        return [];
+    }
     const plane = transform.getClippingPlane();
     const cameraCoord = transform.screenPointToMercatorCoordinate(transform.getCameraPoint());
     const centerCoord = MercatorCoordinate.fromLngLat(transform.center, transform.elevation);
     cameraCoord.z = centerCoord.z + Math.cos(transform.pitchInRadians) * transform.cameraToCenterDistance / transform.worldSize;
     const detailsProvider = transform.getCoveringTilesDetailsProvider();
     const allowVariableZoom = detailsProvider.allowVariableZoom(transform, options);
-    
+
     const desiredZ = coveringZoomLevel(transform, options);
     const minZoom = options.minzoom || 0;
     const maxZoom = options.maxzoom !== undefined ? options.maxzoom : transform.maxZoom;

src/geo/projection/globe_projection_error_measurement.ts

@@ -171,7 +171,7 @@ export class ProjectionErrorMeasurement {
         program.draw(context, gl.TRIANGLES,
             DepthMode.disabled, StencilMode.disabled,
             ColorMode.unblended, CullFaceMode.disabled,
-            projectionErrorMeasurementUniformValues(input, outputExpected), null, null,
+            projectionErrorMeasurementUniformValues(input, outputExpected) as any, null, null,
             '$clipping', this._fullscreenTriangle.vertexBuffer, this._fullscreenTriangle.indexBuffer,
             this._fullscreenTriangle.segments);
 

src/geo/projection/mercator_transform.ts

@@ -291,6 +291,7 @@ export class MercatorTransform implements ITransform {
     }
 
     getCameraFrustum(): Frustum {
+        if (!this._invViewProjMatrix) return null;
         return Frustum.fromInvProjectionMatrix(this._invViewProjMatrix, this.worldSize);
     }
     getClippingPlane(): vec4 | null {
@@ -350,6 +351,10 @@ export class MercatorTransform implements ITransform {
         // unproject two points to get a line and then find the point on that
         // line with z=0
 
+        if (!this._pixelMatrixInverse) {
+            return new MercatorCoordinate(0, 0, 0);
+        }
+
         const coord0 = [p.x, p.y, 0, 1] as vec4;
         const coord1 = [p.x, p.y, 1, 1] as vec4;
 
@@ -598,10 +603,10 @@ export class MercatorTransform implements ITransform {
         const offset = this.centerOffset;
         const point = projectToWorldCoordinates(this.worldSize, this.center);
         const x = point.x, y = point.y;
-        this._helper._pixelPerMeter = mercatorZfromAltitude(1, this.center.lat) * this.worldSize;
 
         // Calculate the camera to sea-level distance in pixel in respect of terrain
         const limitedPitchRadians = degreesToRadians(Math.min(this.pitch, maxMercatorHorizonAngle));
+        this._helper._pixelPerMeter = mercatorZfromAltitude(1, this.center.lat) * this.worldSize;
         const cameraToSeaLevelDistance = Math.max(this._helper.cameraToCenterDistance / 2, this._helper.cameraToCenterDistance + this._helper._elevation * this._helper._pixelPerMeter / Math.cos(limitedPitchRadians));
 
         this._calculateNearFarZIfNeeded(cameraToSeaLevelDistance, limitedPitchRadians, offset);

src/geo/projection/vertical_perspective_transform.ts

@@ -781,6 +781,7 @@ export class VerticalPerspectiveTransform implements ITransform {
      * and returns its coordinates on screen in pixels.
      */
     private _projectSurfacePointToScreen(pos: vec3): Point {
+        if (!this.width || !this.height) return new Point(0, 0);
         const projected = createVec4f64();
         vec4.transformMat4(projected, [...pos, 1] as vec4, this._globeViewProjMatrixNoCorrection);
         projected[0] /= projected[3];
@@ -917,6 +918,9 @@ export class VerticalPerspectiveTransform implements ITransform {
      * @param terrain - Optional terrain.
      */
     private unprojectScreenPoint(p: Point): LngLat {
+        if (!this.width || !this.height) {
+            return new LngLat(0, 0);
+        }
         // Here we compute the intersection of the ray towards the pixel at `p` and the planet sphere.
         // As always, we assume that the planet is centered at 0,0,0 and has radius 1.
         // Ray origin is `_cameraPosition` and direction is `rayNormalized`.

src/geo/transform_helper.ts

@@ -569,6 +569,8 @@ export class TransformHelper implements ITransformGetters {
             this._pixelsToClipSpaceMatrix = m;
             const halfFov = this.fovInRadians / 2;
             this._cameraToCenterDistance = 0.5 / Math.tan(halfFov) * this._height;
+        } else {
+            this._cameraToCenterDistance = 1;
         }
         this._callbacks.calcMatrices();
     }
@@ -579,7 +581,7 @@ export class TransformHelper implements ITransformGetters {
 
         const {distanceToCenter, clampedElevation} = this._distanceToCenterFromAltElevationPitch(alt, this.elevation, cameraPitch);
         const {x, y} = cameraDirectionFromPitchBearing(cameraPitch, cameraBearing);
-        
+
         // The mercator transform scale changes with latitude. At high latitudes, there are more "Merc units" per meter
         // than at the equator. We treat the center point as our fundamental quantity. This means we want to convert
         // elevation to Mercator Z using the scale factor at the center point (not the camera point). Since the center point is
@@ -622,7 +624,7 @@ export class TransformHelper implements ITransformGetters {
         const originalCenterPixelX = originalCenterMercator.x / mercUnitsPerPixel;
         const originalCenterPixelY = originalCenterMercator.y / mercUnitsPerPixel;
         const originalCenterPixelZ = originalCenterMercator.z / mercUnitsPerPixel;
-        
+
         const cameraPitch = this.pitch;
         const cameraBearing = this.bearing;
         const {x, y, z} = cameraDirectionFromPitchBearing(cameraPitch, cameraBearing);