WebGL / render multiple worlds to wrap X in vector renderer

From https://github.com/jahow/openlayers/pull/1

Adds logic in WebGLVectorLayerRenderer to handle multiple worlds visible at once.

Co-authored-by: Tomas Burleigh <t.burleigh@gmail.com>
Co-authored-by: Olivier Guyot <olivier.guyot@camptocamp.com>

src/ol/render/webgl/BatchRenderer.js

@@ -8,6 +8,7 @@ import {
   create as createTransform,
   makeInverse as makeInverseTransform,
   multiply as multiplyTransform,
+  translate as translateTransform,
 } from '../../transform.js';
 
 /**
@@ -89,11 +90,12 @@ class AbstractBatchRenderer {
    * @param {import("./MixedGeometryBatch.js").GeometryBatch} batch Geometry batch
    * @param {import("../../transform.js").Transform} currentTransform Transform
    * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+   * @param {number} offsetX X offset
    */
-  render(batch, currentTransform, frameState) {
+  render(batch, currentTransform, frameState, offsetX) {
     // multiply the current projection transform with the invert of the one used to fill buffers
-    // FIXME: this should probably be done directly in the layer renderer
     this.helper_.makeProjectionTransform(frameState, currentTransform);
+    translateTransform(currentTransform, offsetX, 0);
     multiplyTransform(currentTransform, batch.invertVerticesBufferTransform);
 
     // enable program, buffers and attributes

src/ol/renderer/webgl/VectorLayer.js

@@ -11,7 +11,7 @@ import VectorEventType from '../../source/VectorEventType.js';
 import ViewHint from '../../ViewHint.js';
 import WebGLLayerRenderer from './Layer.js';
 import {DefaultUniform} from '../../webgl/Helper.js';
-import {buffer, createEmpty, equals} from '../../extent.js';
+import {buffer, createEmpty, equals, getWidth} from '../../extent.js';
 import {create as createTransform} from '../../transform.js';
 import {create as createWebGLWorker} from '../../worker/webgl.js';
 import {listen, unlistenByKey} from '../../events.js';
@@ -226,21 +226,42 @@ class WebGLVectorLayerRenderer extends WebGLLayerRenderer {
   renderFrame(frameState) {
     const gl = this.helper.getGL();
     this.preRender(gl, frameState);
-    this.polygonRenderer_.render(
-      this.batch_.polygonBatch,
-      this.currentTransform_,
-      frameState
-    );
-    this.lineStringRenderer_.render(
-      this.batch_.lineStringBatch,
-      this.currentTransform_,
-      frameState
-    );
-    this.pointRenderer_.render(
-      this.batch_.pointBatch,
-      this.currentTransform_,
-      frameState
-    );
+
+    const layer = this.getLayer();
+    const vectorSource = layer.getSource();
+    const projection = frameState.viewState.projection;
+    const multiWorld = vectorSource.getWrapX() && projection.canWrapX();
+    const projectionExtent = projection.getExtent();
+    const extent = frameState.extent;
+    const worldWidth = multiWorld ? getWidth(projectionExtent) : null;
+    const endWorld = multiWorld
+      ? Math.ceil((extent[2] - projectionExtent[2]) / worldWidth) + 1
+      : 1;
+    let world = multiWorld
+      ? Math.floor((extent[0] - projectionExtent[0]) / worldWidth)
+      : 0;
+
+    do {
+      this.polygonRenderer_.render(
+        this.batch_.polygonBatch,
+        this.currentTransform_,
+        frameState,
+        world * worldWidth
+      );
+      this.lineStringRenderer_.render(
+        this.batch_.lineStringBatch,
+        this.currentTransform_,
+        frameState,
+        world * worldWidth
+      );
+      this.pointRenderer_.render(
+        this.batch_.pointBatch,
+        this.currentTransform_,
+        frameState,
+        world * worldWidth
+      );
+    } while (++world < endWorld);
+
     this.helper.finalizeDraw(frameState);
 
     const canvas = this.helper.getCanvas();