Visible "patches" in rendered structure

[maybebansky]

When I render a point cloud I can see different patches/segments (I assume from different levels in the 3D Tile's octree being rendered):

When I view the original LAS file in Cloud Compare I don't get the same issue, so I don't think it's inherent in my data:

Deployed site with the issue: https://three-loader-3dtiles-issue.vercel.app

Original LAS file: https://storage.googleapis.com/xoxo-test-bucket-1/las/merged_scan_2_2_84160092.las

3D Tiles entry point: https://storage.googleapis.com/xoxo-test-bucket-1/chunk2/tileset.json

Reproducible repo: https://github.com/maybebansky/three-loader-3dtiles_issue

Relevant code:

import { useRef, Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import { PerspectiveCamera, OrbitControls } from "@react-three/drei";
import { ErrorBoundary } from "react-error-boundary";
import { Euler } from "three";

import { Loader3DTilesR3FAsset } from "./loader-3dtiles-r3f";

export default function App() {
  const camera = useRef(null);

  return (
    <div className="h-screen w-screen bg-green-100 flex flex-col">
      <div className="h-full w-screen">
        <Canvas style={{ background: "#272730" }}>
          <PerspectiveCamera ref={camera}>
            <ErrorBoundary
              fallbackRender={() => (
                <mesh>
                  <sphereGeometry />
                  <meshBasicMaterial color="red" />
                </mesh>
              )}
            >
              <Suspense
                fallback={
                  <mesh>
                    <sphereGeometry />
                    <meshBasicMaterial color="yellow" />
                  </mesh>
                }
              >
                <Loader3DTilesR3FAsset
                  pointSize={1}
                  dracoDecoderPath={
                    "https://unpkg.com/three@0.160.0/examples/jsm/libs/draco"
                  }
                  basisTranscoderPath={
                    "https://unpkg.com/three@0.160.0/examples/jsm/libs/basis"
                  }
                  rotation={new Euler(-Math.PI / 2, 0, 0)}
                  url="https://storage.googleapis.com/xoxo-test-bucket-1/chunk2/tileset.json"
                  maximumScreenSpaceError={48}
                  resetTransform={true}
                />
              </Suspense>
            </ErrorBoundary>
          </PerspectiveCamera>
          <OrbitControls camera={camera.current} />
        </Canvas>
      </div>
      <p className="pl-2">three-loader-3dtiles</p>
    </div>
  );
}

import { Loader3DTiles, type LoaderProps } from "three-loader-3dtiles";
import { useLoader, useThree, useFrame } from "@react-three/fiber";
import { Loader, Vector2 } from "three";

class Loader3DTilesBridge extends Loader {
  props: LoaderProps;

  load(url, onLoad, onProgress, onError) {
    const loadTileset = async () => {
      try {
        const result = await Loader3DTiles.load({
          url,
          ...this.props,
          onProgress,
        });
        onLoad(result);
      } catch (e) {
        console.log("Error loading 3d tiles!", e);
        onError(e);
      }
    };
    loadTileset();
  }
  setProps(props) {
    this.props = props;
  }
}

function Loader3DTilesR3FAsset(props) {
  const threeState = useThree();
  const loaderProps = {
    renderer: threeState.gl,
    viewport: getViewport(threeState.gl),
    options: {
      ...props,
    },
  };

  // TODO: Getting type error
  // @ts-ignore
  const { model, runtime } = useLoader(
    Loader3DTilesBridge,
    props.url,
    (loader: Loader3DTilesBridge) => {
      loader.setProps(loaderProps);
    }
  );

  useFrame(({ size, camera }, dt) => {
    runtime.update(dt, camera);
  });

  return (
    <group {...props} dispose={runtime.dispose}>
      <primitive object={model} />
    </group>
  );
}
function getViewport(renderer) {
  const viewSize = renderer.getSize(new Vector2());
  return {
    width: viewSize.x,
    height: viewSize.y,
    devicePixelRatio: renderer.getPixelRatio(),
  };
}

export { Loader3DTilesR3FAsset };