How to implement world copy in custom layer in version v5.0.0?

[tangzijun]

When using v4.0.0 or later, I can achieve the rendering of world replicas by using the following code in a custom layer.

1. Obtain the offset of the world copy.

public getWorldOffsets() {
    const bounds = this.map.getBounds()!;
    const west = bounds.getWest();
    const east = bounds.getEast();

    const x1 = 0 - Math.ceil((Math.abs(west) - 180) / 360);
    const x2 = Math.ceil((Math.abs(east) - 180) / 360);

    const worldOffsets = [];
    for (let i = x1; i <= x2; i++) {
      worldOffsets.push(i);
    }
    return worldOffsets;
  }

2. Loop and set uniforms offset when rendering.

render(matrix: mat4) {
    const worldOffsets = this.getWorldOffsets();

    worldOffsets.forEach((offset) => {
           twgl.setUniforms(this.programInfo, {
                u_matrix: matrix,
                u_worldXOffset: offset,
              });
    });
  }

3. Use u_worldXOffset in VS GLSL.

#version 300 es

in vec4 position;;
uniform mat4 u_matrix;
uniform float u_worldXOffset;

void main() {
    gl_Position = u_matrix * (position + vec4(u_worldXOffset , 0.0 , 0.0 , 0.0));
    u_texcoord = texcoord;
}

In 5.0, I tried to implement it with the same code, but it didn't work. What should I do?

#version 300 es

${options.shaderData.vertexShaderPrelude}
${options.shaderData.define}

uniform vec2 u_tl_parent;
uniform float u_scale_parent;
uniform float u_buffer_scale;
uniform vec4 u_coords_top;
uniform vec4 u_coords_bottom;

uniform float u_worldXOffset;

in vec2 a_pos;

out vec2 v_pos;

void main() {
    vec2 fractionalPos = a_pos / 8192.0;
    vec2 position = mix(mix(u_coords_top.xy, u_coords_top.zw, fractionalPos.x), mix(u_coords_bottom.xy, u_coords_bottom.zw, fractionalPos.x), fractionalPos.y); 
    gl_Position = projectTile(position,position) + vec4(u_worldXOffset, 0.0, 0.0, 0.0);

    v_pos = ((fractionalPos - 0.5) / u_buffer_scale) + 0.5;

    #ifdef GLOBE
      if (a_pos.y < -32767.5) {
          v_pos.y = 0.0;
      }
      if (a_pos.y > 32766.5) {
          v_pos.y = 1.0;
      }
    #endif
}

[HarelM]

In version 5 render method had a slightly different API, Please check the new API signature.

[tangzijun]

Using wrap

const projectionData = map.transform.getProjectionData({
    overscaledTileID: {
      wrap,
      canonical: {
        x: tileID.x,
        y: tileID.y,
        z: tileID.z,
      },
    } as any,
    aligned: false,
    applyTerrainMatrix: false,
    applyGlobeMatrix: map.getProjection()?.type === 'globe',
  });