Render LabelGraphics and PointGraphics on top of tileset

CesiumJS
1

Hello, Cesium community!

I am relatively new to CesiumJS and have a very basic setup. I am loading a tileset from Cesium Ion and when I left-click on the tileset I am adding a new entity at the clicked position.

Everything works fine except my entities with LabelGraphics and PointGraphics get cut-off/clipped into the tileset if they are too close to it. Here are a few examples.

image
image1919×1079 196 KB

image
image1919×1079 137 KB

What I am essentially trying to achieve is for my Points and Labels to be always drawn on top of the tileset rather than through it. I can’t find any documented way to do this so any help is greatly appreciated.

For more context, I am using React with Resium for this project. Here is the code snippet that I used for the example screenshots.

import { useEffect, useRef, useState } from "react"
import * as Resium from "resium"
import * as Cesium from "cesium"

const EntityClipping = () => {
  const [ionResource, setIonResource] = useState<Cesium.IonResource | null>()

  const [entityPositions, setEntityPositions] = useState<Cesium.Cartesian3[]>(
    []
  )

  const viewerRef = useRef<Resium.CesiumComponentRef<Cesium.Viewer>>(null)
  const sceneRef = useRef<Resium.CesiumComponentRef<Cesium.Scene>>(null)

  const loadTileset = async () => {
    const tileSet = await Cesium.IonResource.fromAssetId(1610607)
    setIonResource(tileSet)
  }

  useEffect(() => {
    loadTileset()
  }, [])

  const onTileSetReady = (tileset: Cesium.Cesium3DTileset) => {
    viewerRef.current?.cesiumElement?.flyTo(tileset)
  }

  const onTileSetClick = (
    event: Resium.CesiumMovementEvent,
    target: Cesium.Cesium3DTileFeature
  ) => {
    if (event.position) {
      const entityPosition = sceneRef.current?.cesiumElement?.pickPosition(
        event.position
      )

      if (entityPosition) {
        setEntityPositions([...entityPositions, entityPosition])
      }
    }
  }

  return (
    <main className="h-screen w-full">
      <Resium.Viewer full ref={viewerRef}>
        <Resium.Scene ref={sceneRef}>
          {ionResource && (
            <Resium.Cesium3DTileset
              url={ionResource}
              onReady={onTileSetReady}
              onClick={onTileSetClick}
            />
          )}

          {entityPositions.map((position) => (
            <Resium.Entity position={position}>
              <Resium.PointGraphics
                pixelSize={50}
                color={Cesium.Color.ORANGERED}
              />

              <Resium.LabelGraphics
                text="Label Example"
                backgroundColor={Cesium.Color.BLACK}
                fillColor={Cesium.Color.YELLOW}
                verticalOrigin={Cesium.VerticalOrigin.BOTTOM}
                showBackground
              />
            </Resium.Entity>
          ))}
        </Resium.Scene>
      </Resium.Viewer>
    </main>
  )
}

export default EntityClipping