createFromRenderGraphic MethodStatic @beta
Create a TileTreeReference that displays a pre-defined RenderGraphic. The reference can be used to add dynamic content to a Viewport's scene as a TiledGraphicsProvider, as in the following example:
/** Add a TiledGraphicsProvider to draw a sphere into the specified viewport. */
export function addTiledGraphics(viewport: Viewport): void {
  // Create a scene graphic with a 1cm chord tolerance.
  const builder = IModelApp.renderSystem.createGraphic({
    type: GraphicType.Scene,
    computeChordTolerance: () => 0.01,
  });
  // Produce the sphere graphic.
  builder.addSolidPrimitive(Sphere.createCenterRadius(new Point3d(0, 0, 0), 20));
  const graphic = builder.finish();
  // Create a TileTreeReference to draw the sphere.
  const treeRef = TileTreeReference.createFromRenderGraphic({
    graphic,
    modelId: viewport.iModel.transientIds.getNext(),
    iModel: viewport.iModel,
  });
  // Register a provider to draw the sphere as part of the viewport's scene.
  viewport.addTiledGraphicsProvider({
    forEachTileTreeRef: (_vp, func) => func(treeRef),
    getReferences: () => [treeRef],
  });
}
Or, it can be used as a DynamicSpatialClassifier to contextualize a reality model, like so:
/** A spatial region described by a bounding sphere, used to classify a reality model. */
interface ClassifiedRegion {
  /** The center point of the bounding sphere. */
  center: Point3d;
  /** The radius of the bounding sphere. */
  radius: number;
  /** The name of the region, to serve as a tooltip when the user hovers over the classified region of the reality model. */
  name: string;
  /** The color in which to draw the classified region of the reality model. */
  color: ColorDef;
}
/** Classify spherical regions of a reality model, either by planar projection (`classifyByVolume=false`) or by bounding volume (`classifyByVolume=true`). */
export function classifyRealityModel(model: ContextRealityModelState, regions: ClassifiedRegion[], classifyByVolume: boolean): void {
  const modelId = model.iModel.transientIds.getNext();
  // Create a GraphicBuilder to define the classifier geometry.
  const builder = IModelApp.renderSystem.createGraphic({
    type: GraphicType.Scene,
    computeChordTolerance: () => 0.01,
    pickable: {
      modelId,
      id: modelId,
      isVolumeClassifier: classifyByVolume,
    },
  });
  const regionIdsAndNames: Array<{ name: string, id: Id64String }> = [];
  for (const region of regions) {
    // Assign a unique Id to each region, so we can identify them when the user interacts with them in a viewport.
    const regionId = model.iModel.transientIds.getNext();
    regionIdsAndNames.push({ id: regionId, name: region.name });
    // Add a sphere representing the region.
    builder.setSymbology(region.color, region.color, 1);
    builder.activatePickableId(regionId);
    builder.addSolidPrimitive(Sphere.createCenterRadius(region.center, region.radius));
  }
  // Create a tile tree reference to provide the graphics at display time.
  const tileTreeReference = TileTreeReference.createFromRenderGraphic({
    graphic: builder.finish(),
    modelId,
    iModel: model.iModel,
    getToolTip: async (hit) => Promise.resolve(regionIdsAndNames.find((x) => x.id === hit.sourceId)?.name),
  });
  // Direct the reality model to use our tile tree reference for classification.
  model.classifiers.activeClassifier = {
    tileTreeReference,
    name: "Regions",
    flags: new SpatialClassifierFlags(undefined, undefined, classifyByVolume),
  };
}
It can also be used to mask out portions of the background map or terrain via PlanarClipMaskSettings, as shown below:
/** Mask out portions of the viewport's background map where it intersects a set of spherical regions. */
export function maskBackgroundMap(viewport: Viewport, regions: Iterable<Sphere>): void {
  // Use a GraphicBuilder to define the mask geometry.
  const builder = IModelApp.renderSystem.createGraphic({
    type: GraphicType.Scene,
    computeChordTolerance: () => 0.1,
  });
  for (const region of regions) {
    builder.addSolidPrimitive(region);
  }
  // Create a tile tree reference to provide the graphics defining the mask.
  const tileTreeReference = TileTreeReference.createFromRenderGraphic({
    modelId: viewport.iModel.transientIds.getNext(),
    graphic: builder.finish(),
    iModel: viewport.iModel,
    // Set the priority higher than the default of PlanarClipMaskPriority.DesignModel.
    planarClipMaskPriority: 4100,
  });
  // Add the tile tree reference to the viewport as a TiledGraphicsProvider.
  viewport.addTiledGraphicsProvider({
    forEachTileTreeRef: (_vp, func) => func(tileTreeReference),
    getReferences: () => [tileTreeReference],
  });
  // Enable masking by priority, with priority set just below that of our TileTreeReference so that the map will only be masked by
  // our geometry, not by any design models that may be present in the scene.
  viewport.changeBackgroundMapProps({
    planarClipMask: {
      mode: PlanarClipMaskMode.Priority,
      priority: 4000,
    },
  });
  viewport.invalidateRenderPlan();
}
createFromRenderGraphic(args: RenderGraphicTileTreeArgs): TileTreeReference
| Parameter | Type | Description | 
|---|---|---|
| args | RenderGraphicTileTreeArgs | 
Returns - TileTreeReference
Defined in
Last Updated: 24 October, 2025
Found something wrong, missing, or unclear on this page? Raise an issue in our repo.