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.

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.

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

• Sample: Custom WebGL layer view