Tiling support for custom WebGL layer views

Important notes:

  • This sample shows experimental functionality, please read the documentation carefully before using it in a product.
  • This sample targets expert developers familiar with WebGL and hardware-accelerated rendering.

This sample demonstrates how to render custom WebGL visuals by tile. It can be used as the starting point for complex visualizations where the developer has full control of the rendering process.

Tiled layer views are of primary importance when handling large datasets and/or datasets with a large extent; tiling schemes also naturally support wrap-around and require no special processing for features that cross the international date line.

This sample assumes familiarity with WebGL and custom WebGL layer views. Compared to the Custom WebGL layer view sample, it does not need to implement complex local origin manipulation code, because it relies on the tiling support exposed by the BaseLayerViewGL2D class.

Enabling tiling

Tiling is enabled for a layer view by creating a tileInfo on the parent layer.

1
2
3
4
5
6
7
8
9
10
11
12
const CustomLayer = Layer.createSubclass({
  tileInfo: TileInfo.create({ size: 512, spatialReference: { wkid: 3857 } }),

  createLayerView(view) {
    if (view.type === "2d") {
      return new CustomLayerView2D({
        view: view,
        layer: this
      });
    }
  }
});

In the custom layer view, the inherited BaseLayerViewGL2D.tiles array will, at any given time, contain the list of all the tiles required to cover the screen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const CustomLayerView2D = BaseLayerViewGL2D.createSubclass({
  ...

  render(renderParameters) {
    ...

    for (let i = 0; i < this.tiles.length; i++) {
      // Retrieve the current tile and its associated texture.
      const tile = this.tiles[i];

      ...

      // Draw the tile.
      gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
    }
  },

  ...

  tilesChanged() {
    // Respond to a change in the tile screen coverage, for
    // instance by fetching the required data from a server.
  }
});

Additional visualization samples and resources

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close