Creating renderers

Reality Import handles loading your project's geographic data. You decide what your application does with it by writing renderers: scripts that turn individual features into something your users can see or interact with.

Creating a renderer

A renderer is a user-made script that extends the SDK's Renderer base class. It declares the render-definition name it implements and the geometry types it accepts, then implements a create function. The base class registers the renderer when its component wakes up in the scene.

The create function receives the feature's geographic geometry, including its coordinates, and properties from the source data, such as a tree's species or height.

You write the create function to handle the feature. Commonly, you'll instantiate a prefab at the feature's coordinates to visualize the data. The renderer below does this for point features assigned to the tree render definition.

import { Context, Renderer } from "../lib/Renderer";
import { Feature } from "../lib/model/feature";
import { GeometryType } from "../lib/model/geometry";
import { GeospatialManager } from "../managers/GeospatialManager";

@component
export class TreeRenderer extends Renderer {
  readonly definitionName = "tree";
  readonly types = [GeometryType.Point];

  @input
  treePrefab: ObjectPrefab;

  create(feature: Feature, ctx: Context): SceneObject {
    if (feature.geometry.type !== "Point") {
      throw new Error("TreeRenderer expects a point.");
    }

    // Read the feature's geographic coordinates.
    const [longitude, latitude] = feature.geometry.coordinates;

    // Use the GeospatialManager to convert a coordinate into a scene position.
    const localPosition = GeospatialManager.getLocalPosition(longitude, latitude);

    // Instantiate a prefab and place it at that position.
    const tree = this.treePrefab.instantiate(ctx.datasetRoot);
    tree.getTransform().setLocalPosition(localPosition);
    return tree;
  }
}

You can extend this same function to read feature properties, choose a different prefab for each species, or scale the tree using its height. The SDK handles getting the data to your renderer; the visual behavior stays in your script.

For more examples, check out the Examples page.