ol 7.3.1-dev.1680098251703 → 7.3.1-dev.1680103314833

package/render/webgl/MixedGeometryBatch.js

@@ -5,10 +5,21 @@ import WebGLArrayBuffer from '../../webgl/Buffer.js';
 import {ARRAY_BUFFER, DYNAMIC_DRAW, ELEMENT_ARRAY_BUFFER} from '../../webgl.js';
 import {create as createTransform} from '../../transform.js';
 import {getUid} from '../../util.js';
+import {linearRingIsClockwise} from '../../geom/flat/orient.js';
+
+/**
+ * @typedef {import("../../render/Feature").default} RenderFeature
+ */
+/**
+ * @typedef {import("../../Feature").default} Feature
+ */
+/**
+ * @typedef {import("../../geom/Geometry.js").Type} GeometryType
+ */
 
 /**
  * @typedef {Object} GeometryBatchItem Object that holds a reference to a feature as well as the raw coordinates of its various geometries
- * @property {import("../../Feature").default} feature Feature
+ * @property {Feature|RenderFeature} feature Feature
  * @property {Array<Array<number>>} flatCoordss Array of flat coordinates arrays, one for each geometry related to the feature
  * @property {number} [verticesCount] Only defined for linestring and polygon batches
  * @property {number} [ringsCount] Only defined for polygon batches
@@ -29,7 +40,6 @@ import {getUid} from '../../util.js';
  * @property {WebGLArrayBuffer} verticesBuffer Vertices WebGL buffer
  * @property {WebGLArrayBuffer} indicesBuffer Indices WebGL buffer
  * @property {import("../../transform.js").Transform} renderInstructionsTransform Converts world space coordinates to screen space; applies to the rendering instructions
- * @property {import("../../transform.js").Transform} verticesBufferTransform Converts world space coordinates to screen space; applies to the webgl vertices buffer
  * @property {import("../../transform.js").Transform} invertVerticesBufferTransform Screen space to world space; applies to the webgl vertices buffer
  * @property {number} verticesCount Amount of vertices from geometries in the batch.
  * @property {number} ringsCount How many outer and inner rings in this batch.
@@ -45,7 +55,6 @@ import {getUid} from '../../util.js';
  * @property {WebGLArrayBuffer} verticesBuffer Vertices WebGL buffer
  * @property {WebGLArrayBuffer} indicesBuffer Indices WebGL buffer
  * @property {import("../../transform.js").Transform} renderInstructionsTransform Converts world space coordinates to screen space; applies to the rendering instructions
- * @property {import("../../transform.js").Transform} verticesBufferTransform Converts world space coordinates to screen space; applies to the webgl vertices buffer
  * @property {import("../../transform.js").Transform} invertVerticesBufferTransform Screen space to world space; applies to the webgl vertices buffer
  * @property {number} verticesCount Amount of vertices from geometries in the batch.
  */
@@ -60,7 +69,6 @@ import {getUid} from '../../util.js';
  * @property {WebGLArrayBuffer} verticesBuffer Vertices WebGL buffer
  * @property {WebGLArrayBuffer} indicesBuffer Indices WebGL buffer
  * @property {import("../../transform.js").Transform} renderInstructionsTransform Converts world space coordinates to screen space; applies to the rendering instructions
- * @property {import("../../transform.js").Transform} verticesBufferTransform Converts world space coordinates to screen space; applies to the webgl vertices buffer
  * @property {import("../../transform.js").Transform} invertVerticesBufferTransform Screen space to world space; applies to the webgl vertices buffer
  */
 
@@ -97,7 +105,6 @@ class MixedGeometryBatch {
       verticesBuffer: new WebGLArrayBuffer(ARRAY_BUFFER, DYNAMIC_DRAW),
       indicesBuffer: new WebGLArrayBuffer(ELEMENT_ARRAY_BUFFER, DYNAMIC_DRAW),
       renderInstructionsTransform: createTransform(),
-      verticesBufferTransform: createTransform(),
       invertVerticesBufferTransform: createTransform(),
     };
 
@@ -111,7 +118,6 @@ class MixedGeometryBatch {
       verticesBuffer: new WebGLArrayBuffer(ARRAY_BUFFER, DYNAMIC_DRAW),
       indicesBuffer: new WebGLArrayBuffer(ELEMENT_ARRAY_BUFFER, DYNAMIC_DRAW),
       renderInstructionsTransform: createTransform(),
-      verticesBufferTransform: createTransform(),
       invertVerticesBufferTransform: createTransform(),
     };
 
@@ -126,13 +132,12 @@ class MixedGeometryBatch {
       verticesBuffer: new WebGLArrayBuffer(ARRAY_BUFFER, DYNAMIC_DRAW),
       indicesBuffer: new WebGLArrayBuffer(ELEMENT_ARRAY_BUFFER, DYNAMIC_DRAW),
       renderInstructionsTransform: createTransform(),
-      verticesBufferTransform: createTransform(),
       invertVerticesBufferTransform: createTransform(),
     };
   }
 
   /**
-   * @param {Array<import("../../Feature").default>} features Array of features to add to the batch
+   * @param {Array<Feature|RenderFeature>} features Array of features to add to the batch
    */
   addFeatures(features) {
     for (let i = 0; i < features.length; i++) {
@@ -141,7 +146,7 @@ class MixedGeometryBatch {
   }
 
   /**
-   * @param {import("../../Feature").default} feature Feature to add to the batch
+   * @param {Feature|RenderFeature} feature Feature to add to the batch
    */
   addFeature(feature) {
     const geometry = feature.getGeometry();
@@ -152,59 +157,7 @@ class MixedGeometryBatch {
   }
 
   /**
-   * @param {import("../../Feature").default} feature Feature
-   * @return {GeometryBatchItem} Batch item added (or existing one)
-   * @private
-   */
-  addFeatureEntryInPointBatch_(feature) {
-    const uid = getUid(feature);
-    if (!(uid in this.pointBatch.entries)) {
-      this.pointBatch.entries[uid] = {
-        feature: feature,
-        flatCoordss: [],
-      };
-    }
-    return this.pointBatch.entries[uid];
-  }
-
-  /**
-   * @param {import("../../Feature").default} feature Feature
-   * @return {GeometryBatchItem} Batch item added (or existing one)
-   * @private
-   */
-  addFeatureEntryInLineStringBatch_(feature) {
-    const uid = getUid(feature);
-    if (!(uid in this.lineStringBatch.entries)) {
-      this.lineStringBatch.entries[uid] = {
-        feature: feature,
-        flatCoordss: [],
-        verticesCount: 0,
-      };
-    }
-    return this.lineStringBatch.entries[uid];
-  }
-
-  /**
-   * @param {import("../../Feature").default} feature Feature
-   * @return {GeometryBatchItem} Batch item added (or existing one)
-   * @private
-   */
-  addFeatureEntryInPolygonBatch_(feature) {
-    const uid = getUid(feature);
-    if (!(uid in this.polygonBatch.entries)) {
-      this.polygonBatch.entries[uid] = {
-        feature: feature,
-        flatCoordss: [],
-        verticesCount: 0,
-        ringsCount: 0,
-        ringsVerticesCounts: [],
-      };
-    }
-    return this.polygonBatch.entries[uid];
-  }
-
-  /**
-   * @param {import("../../Feature").default} feature Feature
+   * @param {Feature|RenderFeature} feature Feature
    * @private
    */
   clearFeatureEntryInPointBatch_(feature) {
@@ -217,7 +170,7 @@ class MixedGeometryBatch {
   }
 
   /**
-   * @param {import("../../Feature").default} feature Feature
+   * @param {Feature|RenderFeature} feature Feature
    * @private
    */
   clearFeatureEntryInLineStringBatch_(feature) {
@@ -231,7 +184,7 @@ class MixedGeometryBatch {
   }
 
   /**
-   * @param {import("../../Feature").default} feature Feature
+   * @param {Feature|RenderFeature} feature Feature
    * @private
    */
   clearFeatureEntryInPolygonBatch_(feature) {
@@ -246,79 +199,245 @@ class MixedGeometryBatch {
   }
 
   /**
-   * @param {import("../../geom").Geometry} geometry Geometry
-   * @param {import("../../Feature").default} feature Feature
+   * @param {import("../../geom").Geometry|RenderFeature} geometry Geometry
+   * @param {Feature|RenderFeature} feature Feature
    * @private
    */
   addGeometry_(geometry, feature) {
     const type = geometry.getType();
-    let flatCoords;
-    let verticesCount;
-    let batchEntry;
     switch (type) {
       case 'GeometryCollection':
-        /** @type {import("../../geom").GeometryCollection} */ (geometry)
-          .getGeometries()
-          .map((geom) => this.addGeometry_(geom, feature));
+        const geometries =
+          /** @type {import("../../geom").GeometryCollection} */ (
+            geometry
+          ).getGeometriesArray();
+        for (const geometry of geometries) {
+          this.addGeometry_(geometry, feature);
+        }
         break;
       case 'MultiPolygon':
-        /** @type {import("../../geom").MultiPolygon} */ (geometry)
-          .getPolygons()
-          .map((polygon) => this.addGeometry_(polygon, feature));
+        const multiPolygonGeom =
+          /** @type {import("../../geom").MultiPolygon|RenderFeature} */ (
+            geometry
+          );
+        this.addCoordinates_(
+          type,
+          multiPolygonGeom.getFlatCoordinates(),
+          multiPolygonGeom.getEndss(),
+          feature,
+          getUid(feature)
+        );
         break;
       case 'MultiLineString':
-        /** @type {import("../../geom").MultiLineString} */ (geometry)
-          .getLineStrings()
-          .map((line) => this.addGeometry_(line, feature));
+        const multiLineGeom =
+          /** @type {import("../../geom").MultiLineString|RenderFeature} */ (
+            geometry
+          );
+        this.addCoordinates_(
+          type,
+          multiLineGeom.getFlatCoordinates(),
+          multiLineGeom.getEnds(),
+          feature,
+          getUid(feature)
+        );
         break;
       case 'MultiPoint':
-        /** @type {import("../../geom").MultiPoint} */ (geometry)
-          .getPoints()
-          .map((point) => this.addGeometry_(point, feature));
+        const multiPointGeom =
+          /** @type {import("../../geom").MultiPoint|RenderFeature} */ (
+            geometry
+          );
+        this.addCoordinates_(
+          type,
+          multiPointGeom.getFlatCoordinates(),
+          null,
+          feature,
+          getUid(feature)
+        );
         break;
       case 'Polygon':
-        const polygonGeom = /** @type {import("../../geom").Polygon} */ (
+        const polygonGeom =
+          /** @type {import("../../geom").Polygon|RenderFeature} */ (geometry);
+        this.addCoordinates_(
+          type,
+          polygonGeom.getFlatCoordinates(),
+          polygonGeom.getEnds(),
+          feature,
+          getUid(feature)
+        );
+        break;
+      case 'Point':
+        const pointGeom = /** @type {import("../../geom").Point} */ (geometry);
+        this.addCoordinates_(
+          type,
+          pointGeom.getFlatCoordinates(),
+          null,
+          feature,
+          getUid(feature)
+        );
+        break;
+      case 'LineString':
+      case 'LinearRing':
+        const lineGeom = /** @type {import("../../geom").LineString} */ (
           geometry
         );
-        batchEntry = this.addFeatureEntryInPolygonBatch_(feature);
-        flatCoords = polygonGeom.getFlatCoordinates();
-        verticesCount = flatCoords.length / 2;
-        const ringsCount = polygonGeom.getLinearRingCount();
-        const ringsVerticesCount = polygonGeom
-          .getEnds()
-          .map((end, ind, arr) =>
-            ind > 0 ? (end - arr[ind - 1]) / 2 : end / 2
+        this.addCoordinates_(
+          type,
+          lineGeom.getFlatCoordinates(),
+          null,
+          feature,
+          getUid(feature)
+        );
+        break;
+      default:
+      // pass
+    }
+  }
+
+  /**
+   * @param {GeometryType} type Geometry type
+   * @param {Array<number>} flatCoords Flat coordinates
+   * @param {Array<number> | Array<Array<number>> | null} ends Coordinate ends
+   * @param {Feature|RenderFeature} feature Feature
+   * @param {string} featureUid Feature uid
+   * @private
+   */
+  addCoordinates_(type, flatCoords, ends, feature, featureUid) {
+    /** @type {number} */
+    let verticesCount;
+    switch (type) {
+      case 'MultiPolygon':
+        const multiPolygonEndss = /** @type {Array<Array<number>>} */ (ends);
+        for (let i = 0, ii = multiPolygonEndss.length; i < ii; i++) {
+          let polygonEnds = multiPolygonEndss[i];
+          const prevPolygonEnds = i > 0 ? multiPolygonEndss[i - 1] : null;
+          const startIndex = prevPolygonEnds
+            ? prevPolygonEnds[prevPolygonEnds.length - 1]
+            : 0;
+          const endIndex = polygonEnds[polygonEnds.length - 1];
+          const polygonCoords = flatCoords.slice(startIndex, endIndex);
+          polygonEnds =
+            startIndex > 0
+              ? polygonEnds.map((end) => end - startIndex)
+              : polygonEnds;
+          this.addCoordinates_(
+            'Polygon',
+            polygonCoords,
+            polygonEnds,
+            feature,
+            featureUid
           );
+        }
+        break;
+      case 'MultiLineString':
+        const multiLineEnds = /** @type {Array<number>} */ (ends);
+        for (let i = 0, ii = multiLineEnds.length; i < ii; i++) {
+          const startIndex = i > 0 ? multiLineEnds[i - 1] : 0;
+          const ringCoords = flatCoords.slice(startIndex, multiLineEnds[i]);
+          this.addCoordinates_(
+            'LinearRing',
+            ringCoords,
+            null,
+            feature,
+            featureUid
+          );
+        }
+        break;
+      case 'MultiPoint':
+        for (let i = 0, ii = flatCoords.length; i < ii; i += 2) {
+          this.addCoordinates_(
+            'Point',
+            flatCoords.slice(i, i + 2),
+            null,
+            feature,
+            featureUid
+          );
+        }
+        break;
+      case 'Polygon':
+        const polygonEnds = /** @type {Array<number>} */ (ends);
+        // first look for a CW ring; if so, handle it and following rings as another polygon
+        for (let i = 1, ii = polygonEnds.length; i < ii; i++) {
+          const ringStartIndex = polygonEnds[i - 1];
+          if (
+            i > 0 &&
+            linearRingIsClockwise(flatCoords, ringStartIndex, polygonEnds[i], 2)
+          ) {
+            this.addCoordinates_(
+              'Polygon',
+              flatCoords.slice(0, ringStartIndex),
+              polygonEnds.slice(0, i),
+              feature,
+              featureUid
+            );
+            this.addCoordinates_(
+              'Polygon',
+              flatCoords.slice(ringStartIndex),
+              polygonEnds.slice(i).map((end) => end - polygonEnds[i - 1]),
+              feature,
+              featureUid
+            );
+            return;
+          }
+        }
+        if (!this.polygonBatch.entries[featureUid]) {
+          this.polygonBatch.entries[featureUid] = {
+            feature: feature,
+            flatCoordss: [],
+            verticesCount: 0,
+            ringsCount: 0,
+            ringsVerticesCounts: [],
+          };
+        }
+        verticesCount = flatCoords.length / 2;
+        const ringsCount = ends.length;
+        const ringsVerticesCount = ends.map((end, ind, arr) =>
+          ind > 0 ? (end - arr[ind - 1]) / 2 : end / 2
+        );
         this.polygonBatch.verticesCount += verticesCount;
         this.polygonBatch.ringsCount += ringsCount;
         this.polygonBatch.geometriesCount++;
-        batchEntry.flatCoordss.push(flatCoords);
-        batchEntry.ringsVerticesCounts.push(ringsVerticesCount);
-        batchEntry.verticesCount += verticesCount;
-        batchEntry.ringsCount += ringsCount;
-        polygonGeom
-          .getLinearRings()
-          .map((ring) => this.addGeometry_(ring, feature));
+        this.polygonBatch.entries[featureUid].flatCoordss.push(flatCoords);
+        this.polygonBatch.entries[featureUid].ringsVerticesCounts.push(
+          ringsVerticesCount
+        );
+        this.polygonBatch.entries[featureUid].verticesCount += verticesCount;
+        this.polygonBatch.entries[featureUid].ringsCount += ringsCount;
+        for (let i = 0, ii = polygonEnds.length; i < ii; i++) {
+          const startIndex = i > 0 ? polygonEnds[i - 1] : 0;
+          const ringCoords = flatCoords.slice(startIndex, polygonEnds[i]);
+          this.addCoordinates_(
+            'LinearRing',
+            ringCoords,
+            null,
+            feature,
+            featureUid
+          );
+        }
         break;
       case 'Point':
-        const pointGeom = /** @type {import("../../geom").Point} */ (geometry);
-        batchEntry = this.addFeatureEntryInPointBatch_(feature);
-        flatCoords = pointGeom.getFlatCoordinates();
+        if (!this.pointBatch.entries[featureUid]) {
+          this.pointBatch.entries[featureUid] = {
+            feature: feature,
+            flatCoordss: [],
+          };
+        }
         this.pointBatch.geometriesCount++;
-        batchEntry.flatCoordss.push(flatCoords);
+        this.pointBatch.entries[featureUid].flatCoordss.push(flatCoords);
         break;
       case 'LineString':
       case 'LinearRing':
-        const lineGeom = /** @type {import("../../geom").LineString} */ (
-          geometry
-        );
-        batchEntry = this.addFeatureEntryInLineStringBatch_(feature);
-        flatCoords = lineGeom.getFlatCoordinates();
+        if (!this.lineStringBatch.entries[featureUid]) {
+          this.lineStringBatch.entries[featureUid] = {
+            feature: feature,
+            flatCoordss: [],
+            verticesCount: 0,
+          };
+        }
         verticesCount = flatCoords.length / 2;
         this.lineStringBatch.verticesCount += verticesCount;
         this.lineStringBatch.geometriesCount++;
-        batchEntry.flatCoordss.push(flatCoords);
-        batchEntry.verticesCount += verticesCount;
+        this.lineStringBatch.entries[featureUid].flatCoordss.push(flatCoords);
+        this.lineStringBatch.entries[featureUid].verticesCount += verticesCount;
         break;
       default:
       // pass
@@ -326,7 +445,7 @@ class MixedGeometryBatch {
   }
 
   /**
-   * @param {import("../../Feature").default} feature Feature
+   * @param {Feature|RenderFeature} feature Feature
    */
   changeFeature(feature) {
     this.clearFeatureEntryInPointBatch_(feature);
@@ -340,7 +459,7 @@ class MixedGeometryBatch {
   }
 
   /**
-   * @param {import("../../Feature").default} feature Feature
+   * @param {Feature|RenderFeature} feature Feature
    */
   removeFeature(feature) {
     this.clearFeatureEntryInPointBatch_(feature);

package/renderer/webgl/VectorLayer.d.ts

@@ -1,3 +1,15 @@
+export const Uniforms: {
+    RENDER_EXTENT: string;
+    GLOBAL_ALPHA: string;
+    PROJECTION_MATRIX: string;
+    OFFSET_SCALE_MATRIX: string;
+    OFFSET_ROTATION_MATRIX: string;
+    TIME: string;
+    ZOOM: string;
+    RESOLUTION: string;
+    SIZE_PX: string;
+    PIXEL_RATIO: string;
+};
 export default WebGLVectorLayerRenderer;
 /**
  * A callback computing
@@ -88,6 +100,11 @@ declare class WebGLVectorLayerRenderer extends WebGLLayerRenderer<any> {
      * @private
      */
     private currentTransform_;
+    /**
+     * @type {import("../../transform.js").Transform}
+     * @private
+     */
+    private currentFrameStateTransform_;
     fillVertexShader_: string;
     fillFragmentShader_: string;
     fillAttributes_: import("../../render/webgl/BatchRenderer").CustomAttribute[];

package/renderer/webgl/VectorLayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VectorLayer.d.ts","sourceRoot":"","sources":["VectorLayer.js"],"names":[],"mappings":";;;;;;6CA2BsB,OAAO,eAAe,EAAE,OAAO;QAAS,MAAM;MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgChF;;;;;;;;;;;;;;;;;GAiBG;AACH;IACE;;;OAGG;IACH,mBAHW,OAAO,sBAAsB,EAAE,OAAO,WACtC,OAAO,EAmHjB;IAvGC,wBAAyB;IAEzB,kDAAoC;IAEpC;;;;;;OAMG;IACH,0BAAkD;IAmClD,0BACmE;IACnE,4BACuE;IACvE,8EAAwD;IAExD,4BACyE;IACzE,8BAEwB;IACxB,gFAA4D;IAE5D,2BACsE;IACtE,6BAC0E;IAC1E,+EAA0D;IAE1D;;OAEG;IACH,gBAAkC;IAElC;;OAEG;IACH,eAAsC;IAItC,yDAyBC;IAID,mDAMC;IACD,+CAMC;IACD,yDAMC;IAGH;;;OAGG;IACH,kCAGC;IAED;;;OAGG;IACH,oCAGC;IAED;;;OAGG;IACH,mCAGC;IAED;;OAEG;IACH,kCAEC;IAED;;;;OAIG;IACH,wBAHW,OAAO,cAAc,EAAE,UAAU,GAChC,WAAW,CAoDtB;CAgGF;+BA5Y8B,YAAY;iCAHV,4CAA4C;+BAD9C,0CAA0C;oCAFrC,+CAA+C"}
+{"version":3,"file":"VectorLayer.d.ts","sourceRoot":"","sources":["VectorLayer.js"],"names":[],"mappings":"AA+BA;;;;;;;;;;;EAIE;;;;;;;6CAGoB,OAAO,eAAe,EAAE,OAAO;QAAS,MAAM;MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgChF;;;;;;;;;;;;;;;;;GAiBG;AACH;IACE;;;OAGG;IACH,mBAHW,OAAO,sBAAsB,EAAE,OAAO,WACtC,OAAO,EA2HjB;IA7GC,wBAAyB;IAEzB,kDAAoC;IAEpC;;;;;;OAMG;IACH,0BAAkD;IAElD;;;OAGG;IACH,oCAAoD;IAmCpD,0BACmE;IACnE,4BACuE;IACvE,8EAAwD;IAExD,4BACyE;IACzE,8BAEwB;IACxB,gFAA4D;IAE5D,2BACsE;IACtE,6BAC0E;IAC1E,+EAA0D;IAE1D;;OAEG;IACH,gBAAkC;IAElC;;OAEG;IACH,eAAsC;IAItC,yDAyBC;IAID,mDAMC;IACD,+CAMC;IACD,yDAMC;IAGH;;;OAGG;IACH,kCAGC;IAED;;;OAGG;IACH,oCAGC;IAED;;;OAGG;IACH,mCAGC;IAED;;OAEG;IACH,kCAEC;IAED;;;;OAIG;IACH,wBAHW,OAAO,cAAc,EAAE,UAAU,GAChC,WAAW,CAkEtB;CAoGF;+BAjb8B,YAAY;iCAHV,4CAA4C;+BAD9C,0CAA0C;oCAFrC,+CAA+C"}

package/renderer/webgl/VectorLayer.js

@@ -20,10 +20,21 @@ import {
   packColor,
 } from './shaders.js';
 import {buffer, createEmpty, equals, getWidth} from '../../extent.js';
-import {create as createTransform} from '../../transform.js';
+import {
+  create as createTransform,
+  multiply as multiplyTransform,
+  setFromArray as setFromTransform,
+  translate as translateTransform,
+} from '../../transform.js';
 import {create as createWebGLWorker} from '../../worker/webgl.js';
 import {listen, unlistenByKey} from '../../events.js';
 
+export const Uniforms = {
+  ...DefaultUniform,
+  RENDER_EXTENT: 'u_renderExtent', // intersection of layer, source, and view extent
+  GLOBAL_ALPHA: 'u_globalAlpha',
+};
+
 /**
  * @typedef {function(import("../../Feature").default, Object<string, *>):number} CustomAttributeCallback A callback computing
  * the value of a custom attribute (different for each feature) to be passed on to the GPU.
@@ -83,7 +94,9 @@ class WebGLVectorLayerRenderer extends WebGLLayerRenderer {
   constructor(layer, options) {
     const uniforms = options.uniforms || {};
     const projectionMatrixTransform = createTransform();
-    uniforms[DefaultUniform.PROJECTION_MATRIX] = projectionMatrixTransform;
+    uniforms[Uniforms.PROJECTION_MATRIX] = projectionMatrixTransform;
+    uniforms[Uniforms.RENDER_EXTENT] = [0, 0, 0, 0];
+    uniforms[Uniforms.GLOBAL_ALPHA] = 1;
 
     super(layer, {
       uniforms: uniforms,
@@ -103,6 +116,12 @@ class WebGLVectorLayerRenderer extends WebGLLayerRenderer {
      */
     this.currentTransform_ = projectionMatrixTransform;
 
+    /**
+     * @type {import("../../transform.js").Transform}
+     * @private
+     */
+    this.currentFrameStateTransform_ = createTransform();
+
     const fillAttributes = {
       color: function () {
         return packColor('#ddd');
@@ -276,25 +295,39 @@ class WebGLVectorLayerRenderer extends WebGLLayerRenderer {
       ? Math.floor((extent[0] - projectionExtent[0]) / worldWidth)
       : 0;
 
+    const baseTransform = this.helper.makeProjectionTransform(
+      frameState,
+      this.currentFrameStateTransform_
+    );
+    translateTransform(baseTransform, world * worldWidth, 0);
+
     do {
-      this.polygonRenderer_.render(
-        this.batch_.polygonBatch,
+      setFromTransform(this.currentTransform_, baseTransform);
+      multiplyTransform(
         this.currentTransform_,
-        frameState,
-        world * worldWidth
+        this.batch_.polygonBatch.invertVerticesBufferTransform
       );
-      this.lineStringRenderer_.render(
-        this.batch_.lineStringBatch,
+      this.polygonRenderer_.preRender(this.batch_.polygonBatch, frameState);
+      this.polygonRenderer_.render(this.batch_.polygonBatch);
+      setFromTransform(this.currentTransform_, baseTransform);
+      multiplyTransform(
         this.currentTransform_,
-        frameState,
-        world * worldWidth
+        this.batch_.lineStringBatch.invertVerticesBufferTransform
       );
-      this.pointRenderer_.render(
-        this.batch_.pointBatch,
+      this.lineStringRenderer_.preRender(
+        this.batch_.lineStringBatch,
+        frameState
+      );
+      this.lineStringRenderer_.render(this.batch_.lineStringBatch);
+      setFromTransform(this.currentTransform_, baseTransform);
+      multiplyTransform(
         this.currentTransform_,
-        frameState,
-        world * worldWidth
+        this.batch_.lineStringBatch.invertVerticesBufferTransform
       );
+      this.pointRenderer_.preRender(this.batch_.pointBatch, frameState);
+      this.pointRenderer_.render(this.batch_.pointBatch);
+
+      translateTransform(baseTransform, worldWidth, 0);
     } while (++world < endWorld);
 
     this.helper.finalizeDraw(frameState);
@@ -346,28 +379,32 @@ class WebGLVectorLayerRenderer extends WebGLLayerRenderer {
         this.getLayer().changed();
       };
 
+      const transform = this.helper.makeProjectionTransform(
+        frameState,
+        createTransform()
+      );
+
       this.polygonRenderer_.rebuild(
         this.batch_.polygonBatch,
-        frameState,
+        transform,
         'Polygon',
         rebuildCb
       );
       this.lineStringRenderer_.rebuild(
         this.batch_.lineStringBatch,
-        frameState,
+        transform,
         'LineString',
         rebuildCb
       );
       this.pointRenderer_.rebuild(
         this.batch_.pointBatch,
-        frameState,
+        transform,
         'Point',
         rebuildCb
       );
       this.previousExtent_ = frameState.extent.slice();
     }
 
-    this.helper.makeProjectionTransform(frameState, this.currentTransform_);
     this.helper.prepareDraw(frameState);
 
     return true;