10000) {
- const t = 1 - 10000 / distance;
- positionVector = Cartesian3.lerp(positionVector, viewVector, t, new Cartesian3());
- }
-
- return { positionVector, viewVector };
- }
-
- destroy() {
- if (this._isDestroyed) return;
-
- // Remove pre-update listener
- if (this.preUpdateListener) {
- this.scene?.preUpdate.removeEventListener(this.preUpdateListener);
- this.preUpdateListener = null;
- }
-
- // Dispose of shadow map
- if (this.viewShadowMap) {
- // Just null it out and let GC handle the rest
- this.viewShadowMap._shadowMapTexture = undefined; // Optional: force release texture
- this.viewShadowMap = null;
- }
-
- // Remove post-process stage
- if (this.postProcess) {
- this.scene?.postProcessStages.remove(this.postProcess);
- this.postProcess = null;
- }
-
- // Remove from scene primitives if added
- if (this.scene?.primitives.contains(this)) {
- this.scene.primitives.remove(this);
- }
-
- // Nullify scene reference
- this.scene = null;
-
- // Set destroyed flag
- this._isDestroyed = true;
-
- // Remove all other properties
- for (let property in this) {
- if (Object.prototype.hasOwnProperty.call(this, property)) {
- delete this[property];
- }
- }
- }
-
- isDestroyed() {
- // Return the destroyed status
- return this._isDestroyed;
- }
-
-
- /**
- * Adds the SensorShadow to the scene.
- *
- * @private
- */
- _addToScene() {
- this._createShadowMap();
- this._addPostProcess();
-
- this.scene.primitives.add(this);
-
- }
-
- /**
- * Creates the shadow map.
- *
- * @private
- */
- _createShadowMap(updateOnly) {
- let { positionVector, viewVector } = this._getVectors;
-
- const distance = Number(
- Cartesian3.distance(viewVector, positionVector).toFixed(1)
- );
-
- if (distance > 10000) {
- const multiple = 1 - 10000 / distance;
- positionVector = Cartesian3.lerp(
- positionVector,
- viewVector,
- multiple,
- new Cartesian3()
- );
- }
-
- const scene = this.scene;
-
- const camera = new Camera(scene);
-
- camera.position = positionVector;
-
- camera.direction = Cartesian3.subtract(
- viewVector,
- positionVector,
- new Cartesian3(0, 0, 0)
- );
-
- camera.up = Cartesian3.normalize(positionVector, new Cartesian3(0, 0, 0));
-
- camera.frustum = new PerspectiveFrustum({
- fov: CesiumMath.toRadians(120),
- aspectRatio: scene.canvas.clientWidth / scene.canvas.clientHeight,
- near: 0.1,
- far: distance,
- });
-
- if (!updateOnly) {
- this.viewShadowMap = new ShadowMap({
- lightCamera: camera,
- enable: true,
- isPointLight: false,
- isSpotLight: true,
- cascadesEnabled: false,
- context: scene.context,
- size: this.size,
- pointLightRadius: distance,
- fromLightSource: false,
- maximumDistance: distance,
- });
- } else {
- this.viewShadowMap._lightCamera.position = positionVector;
- }
-
- this.viewShadowMap.normalOffset = true;
- this.viewShadowMap._terrainBias.depthBias = 0.0;
- }
-
- /**
- * Adds post processing to the SensorShadow.
- *
- * @private
- */
- _addPostProcess() {
- const SensorShadow = this;
-
- const viewShadowMap = this.viewShadowMap;
- const primitiveBias = viewShadowMap._isPointLight
- ? viewShadowMap._pointBias
- : viewShadowMap._primitiveBias;
- this.postProcess = this.scene.postProcessStages.add(
- new PostProcessStage({
- fragmentShader: fsShader,
- uniforms: {
- view_distance: function () {
- return SensorShadow.distance;
- },
- viewArea_color: function () {
- return SensorShadow.viewAreaColor;
- },
- shadowArea_color: function () {
- return SensorShadow.shadowAreaColor;
- },
- percentShade: function () {
- return SensorShadow.alpha;
- },
- shadowMap: function () {
- return viewShadowMap._shadowMapTexture;
- },
- _shadowMap_cascadeSplits: function () {
- return viewShadowMap._cascadeSplits;
- },
- _shadowMap_cascadeMatrices: function () {
- return viewShadowMap._cascadeMatrices;
- },
- _shadowMap_cascadeDistances: function () {
- return viewShadowMap._cascadeDistances;
- },
- shadowMap_matrix: function () {
- return viewShadowMap._shadowMapMatrix;
- },
- shadowMap_camera_positionEC: function () {
- return viewShadowMap._lightPositionEC;
- },
- shadowMap_camera_directionEC: function () {
- return viewShadowMap._lightDirectionEC;
- },
- cameraPosition_WC: function () {
- return SensorShadow.scene.camera.positionWC;
- },
- viewPosition_WC: function () {
- return SensorShadow.viewPosition.getValue(
- SensorShadow.scene.clock.currentTime
- );
- },
- shadowMap_camera_up: function () {
- return viewShadowMap._lightCamera.up;
- },
- shadowMap_camera_dir: function () {
- return viewShadowMap._lightCamera.direction;
- },
- shadowMap_camera_right: function () {
- return viewShadowMap._lightCamera.right;
- },
- ellipsoidInverseRadii: function () {
- let radii = SensorShadow.scene.globe.ellipsoid.radii;
- return new Cartesian3(1 / radii.x, 1 / radii.y, 1 / radii.z);
- },
- shadowMap_texelSizeDepthBiasAndNormalShadingSmooth: function () {
- var viewShed2D = new Cartesian2();
- viewShed2D.x = 1 / viewShadowMap._textureSize.x;
- viewShed2D.y = 1 / viewShadowMap._textureSize.y;
-
- return Cartesian4.fromElements(
- viewShed2D.x,
- viewShed2D.y,
- this.depthBias,
- primitiveBias.normalShadingSmooth,
- this.combinedUniforms1
- );
- },
- shadowMap_normalOffsetScaleDistanceMaxDistanceAndDarkness:
- function () {
- return Cartesian4.fromElements(
- primitiveBias.normalOffsetScale,
- viewShadowMap._distance,
- viewShadowMap.maximumDistance,
- viewShadowMap._darkness,
- this.combinedUniforms2
- );
- },
- exclude_terrain: function () {
- return (
- SensorShadow.scene.terrainProvider instanceof
- EllipsoidTerrainProvider
- );
- },
- },
- })
- );
-
- // If a previous listener was added, remove it
- if (this.preUpdateListener) {
- this.scene.preUpdate.removeEventListener(this.preUpdateListener);
- }
-
- // Add a new listener
- this.preUpdateListener = () => {
- if (!this.viewShadowMap._shadowMapTexture) {
- this.postProcess.enabled = false;
- } else {
- this.postProcess.enabled = true;
- }
- };
-
- this.scene.preUpdate.addEventListener(this.preUpdateListener);
- }
-
- update(frameState) {
- this._createShadowMap(true);
- frameState.shadowMaps.push(this.viewShadowMap);
- }
-
- get size() {
- return this._size;
- }
-
- set size(v) {
- this._size = v;
- }
-
- get depthBias() {
- return this._depthBias;
- }
-
- set depthBias(v) {
- this._depthBias = v;
- }
-
- get cameraPosition() {
- return this._cameraPosition;
- }
-
- set cameraPosition(v) {
- this._cameraPosition = v;
- }
-
- get viewPosition() {
- return this._viewPosition;
- }
-
- set viewPosition(v) {
- this._viewPosition = v;
- }
-
- get frustum() {
- return this._frustum;
- }
-
- set frustum(v) {
- this._frustum = v;
- }
-
- get distance() {
- return this._distance;
- }
-
- set distance(v) {
- this._distance = v;
- }
-
- get viewAreaColor() {
- return this._viewAreaColor;
- }
-
- set viewAreaColor(v) {
- this._viewAreaColor = v;
- }
-
- get shadowAreaColor() {
- return this._shadowAreaColor;
- }
-
- set shadowAreaColor(v) {
- this._shadowAreaColor = v;
- }
-
- get alpha() {
- return this._alpha;
- }
-
- set alpha(v) {
- this._alpha = v;
- }
-}
-
-export default SensorShadow;
\ No newline at end of file
diff --git a/src/functions/SensorShadow.ts b/src/functions/SensorShadow.ts
new file mode 100644
index 0000000..bb06e7d
--- /dev/null
+++ b/src/functions/SensorShadow.ts
@@ -0,0 +1,334 @@
+import {
+ ConstantPositionProperty,
+ Cartesian2,
+ Cartesian3,
+ Cartesian4,
+ EllipsoidTerrainProvider,
+ Color,
+ PostProcessStageComposite,
+ PerspectiveFrustum,
+ ShadowMap,
+ PostProcessStage,
+ Camera,
+ JulianDate
+} from "cesium";
+import type { Scene } from "cesium";
+import { Math as CesiumMath } from "cesium";
+import fsText from "./SensorShadow.fragment.shader";
+
+const fsShader = fsText.replace("export default `", "").replace("`;", "");
+
+interface SensorShadowOptions {
+ cameraPosition?: ConstantPositionProperty | Cartesian3;
+ viewPosition?: ConstantPositionProperty | Cartesian3;
+ viewAreaColor?: Color;
+ shadowAreaColor?: Color;
+ alpha?: number;
+ shadowAlpha?: number;
+ frustum?: boolean;
+ size?: number;
+ depthBias?: number;
+}
+
+const defaultValues = {
+ cameraPosition: new ConstantPositionProperty(),
+ viewPosition: new ConstantPositionProperty(),
+ viewAreaColor: new Color(0, 1, 0),
+ shadowAreaColor: new Color(1, 0, 0),
+ alpha: 0.6,
+ shadowAlpha: 0.5,
+ frustum: true,
+ size: 4096,
+ depthBias: .00001,
+};
+
+class SensorShadow {
+ private scene: Scene | null;
+ private shadow: ShadowMap | null = null;
+ private post: PostProcessStage | PostProcessStageComposite | null = null;
+
+ private preUpdateFn: (() => void) | null = null;
+ private destroyed = false;
+
+ // Internal
+ private _size: number;
+ private _depthBias: number;
+ private _cameraPosition: ConstantPositionProperty;
+ private _viewPosition: ConstantPositionProperty;
+ private _frustum: boolean;
+ private _distance = 0;
+
+ private _viewAreaColor: Color;
+ private _shadowAreaColor: Color;
+ private _alpha: number;
+ private _shadowAlpha: number;
+
+ constructor(scene: Scene, opts: SensorShadowOptions = {}) {
+ this.scene = scene;
+
+ const {
+ cameraPosition = defaultValues.cameraPosition,
+ viewPosition = defaultValues.viewPosition,
+ viewAreaColor = defaultValues.viewAreaColor,
+ shadowAreaColor = defaultValues.shadowAreaColor,
+ alpha = defaultValues.alpha,
+ shadowAlpha = defaultValues.shadowAlpha,
+ frustum = defaultValues.frustum,
+ size = defaultValues.size,
+ depthBias = defaultValues.depthBias,
+ } = opts;
+
+ this._cameraPosition =
+ cameraPosition instanceof ConstantPositionProperty
+ ? cameraPosition
+ : new ConstantPositionProperty(cameraPosition);
+
+ this._viewPosition =
+ viewPosition instanceof ConstantPositionProperty
+ ? viewPosition
+ : new ConstantPositionProperty(viewPosition);
+
+ this._viewAreaColor = viewAreaColor;
+ this._shadowAreaColor = shadowAreaColor;
+ this._alpha = alpha;
+ this._shadowAlpha = shadowAlpha;
+ this._size = size;
+ this._frustum = frustum;
+ this._depthBias = depthBias;
+
+ this._init();
+ }
+
+ /** ------------------------------------------------------------
+ * Compact vector getter
+ * ------------------------------------------------------------- */
+ private get _vectors() {
+ const time = JulianDate.now();
+ if (!time)
+ return { pos: Cartesian3.ZERO, view: Cartesian3.ZERO };
+
+ const get = (p: ConstantPositionProperty) =>
+ p.getValue(time) ?? Cartesian3.ZERO;
+
+ let pos = get(this._cameraPosition);
+ let view = get(this._viewPosition);
+
+ const dist = Cartesian3.distance(view, pos);
+ if (dist > 10000) {
+ const t = 1 - 10000 / dist;
+ pos = Cartesian3.lerp(pos, view, t, new Cartesian3());
+ }
+
+ return { pos, view };
+ }
+
+ /** ------------------------------------------------------------
+ * Init
+ * ------------------------------------------------------------- */
+ private _init() {
+ this._createShadow(false);
+ this._createPostProcess();
+ this.scene!.primitives.add(this as any);
+ }
+
+ /** ------------------------------------------------------------
+ * Shadow creation/updates
+ * ------------------------------------------------------------- */
+ private _createShadow(updateOnly: boolean) {
+ if (!this.scene) return; // guard
+
+ const { pos, view } = this._vectors;
+ this._distance = +Cartesian3.distance(view, pos).toFixed(1);
+
+ // Reuse camera if shadow already exists
+ let cam: Camera;
+ if (updateOnly && this.shadow) {
+ cam = (this.shadow as any)._lightCamera;
+ } else {
+ cam = new Camera(this.scene); // safe now
+ }
+
+ cam.position = pos;
+ Cartesian3.subtract(view, pos, cam.direction);
+ Cartesian3.normalize(cam.direction, cam.direction); // normalize the direction
+
+ cam.frustum = new PerspectiveFrustum({
+ fov: CesiumMath.toRadians(130),
+ aspectRatio: this.scene.canvas.clientWidth / this.scene.canvas.clientHeight,
+ near: 0.1,
+ far: this._distance,
+ });
+
+ if (!updateOnly || !this.shadow) {
+ // @ts-ignore private context
+ this.shadow = new ShadowMap({
+ // @ts-ignore private context
+ context: this.scene.context,
+ lightCamera: cam,
+ enable: true,
+ isSpotLight: true,
+ size: this._size,
+ maximumDistance: this._distance,
+ pointLightRadius: this._distance,
+ cascadesEnabled: false,
+ fromLightSource: false,
+ });
+ } else {
+ // Keep camera already set above
+ }
+
+ const sh: any = this.shadow;
+ sh.normalOffset = true;
+ sh._terrainBias.depthBias = 0.0;
+ }
+
+ /** ------------------------------------------------------------
+ * Post-process stage
+ * ------------------------------------------------------------- */
+ private _createPostProcess() {
+ const s = this.scene!;
+ const shadow = this.shadow!;
+ const sh: any = shadow;
+ const bias = sh._isPointLight ? sh._pointBias : sh._primitiveBias;
+
+ this.post = s.postProcessStages.add(
+ new PostProcessStage({
+ fragmentShader: fsShader,
+ uniforms: {
+ view_distance: () => this._distance,
+ viewArea_color: () => this._viewAreaColor,
+ shadowArea_color: () => this._shadowAreaColor,
+ percentShade: () => this._alpha,
+ shadowAlpha: () => this._shadowAlpha,
+ shadowMap: () => sh._shadowMapTexture,
+ shadowDepthStart: () => 10.0, // start fade at 10 meters
+ shadowDepthEnd: () => Math.max(100.0, this._distance), // fully opaque at 100m or _distance
+ shadowMap_matrix: () => sh._shadowMapMatrix,
+ shadowMap_camera_positionEC: () => sh._lightPositionEC,
+ shadowMap_camera_directionEC: () => sh._lightDirectionEC,
+
+ cameraPosition_WC: () => s.camera.positionWC,
+ // @ts-ignore: Ignore error if scene.clock is not writable
+ viewPosition_WC: () => this._viewPosition.getValue(JulianDate.now()),
+
+ shadowMap_camera_up: () => sh._lightCamera.up,
+ shadowMap_camera_dir: () => sh._lightCamera.direction,
+ shadowMap_camera_right: () => sh._lightCamera.right,
+
+ ellipsoidInverseRadii: () => {
+ const r = s.globe.ellipsoid.radii;
+ return new Cartesian3(1 / r.x, 1 / r.y, 1 / r.z);
+ },
+
+ shadowMap_texelSizeDepthBiasAndNormalShadingSmooth: () => {
+ const size = sh._textureSize;
+ const tex = new Cartesian2(1 / size.x, 1 / size.y);
+ return Cartesian4.fromElements(tex.x, tex.y, this._depthBias, bias.normalShadingSmooth);
+ },
+
+ shadowMap_normalOffsetScaleDistanceMaxDistanceAndDarkness: () =>
+ Cartesian4.fromElements(
+ bias.normalOffsetScale,
+ sh._distance,
+ shadow.maximumDistance,
+ sh._darkness
+ ),
+
+ exclude_terrain: () => s.terrainProvider instanceof EllipsoidTerrainProvider,
+ },
+ })
+ );
+
+ // Enable PP only when shadow texture exists
+ this.preUpdateFn = () => {
+ const tex = (this.shadow as any)?._shadowMapTexture;
+ this.post!.enabled = !!tex;
+ };
+
+ s.preUpdate.addEventListener(this.preUpdateFn);
+ }
+
+ /** ------------------------------------------------------------
+ * Lifecycle
+ * ------------------------------------------------------------- */
+ update(frameState: any) {
+ if (this.destroyed || !this.scene) return; // guard
+
+ this._createShadow(true);
+ if (this.shadow) {
+ frameState.shadowMaps.push(this.shadow);
+ }
+ }
+
+
+ // In destroy()
+ destroy() {
+ if (this.destroyed) return;
+
+ const s = this.scene;
+
+ // Remove preUpdate listener and post-process
+ if (s && this.preUpdateFn) {
+ s.preUpdate.removeEventListener(this.preUpdateFn);
+ }
+ if (s && this.post) {
+ s.postProcessStages.remove(this.post);
+ }
+
+ // IMPORTANT: remove the primitive from the scene so update() is no longer called
+ if (s) {
+ try {
+ s.primitives.remove(this as any);
+ } catch {}
+ }
+
+ this.shadow = null;
+ this.post = null;
+ this.preUpdateFn = null;
+ this.scene = null;
+
+ this.destroyed = true;
+ }
+
+ isDestroyed() {
+ return this.destroyed;
+ }
+
+ /** ------------------------------------------------------------
+ * Getters/setters
+ * ------------------------------------------------------------- */
+ get cameraPosition() { return this._cameraPosition; }
+ set cameraPosition(v) {
+ this._cameraPosition =
+ v instanceof ConstantPositionProperty ? v : new ConstantPositionProperty(v);
+ }
+
+ get viewPosition() { return this._viewPosition; }
+ set viewPosition(v) {
+ this._viewPosition =
+ v instanceof ConstantPositionProperty ? v : new ConstantPositionProperty(v);
+ }
+
+ get size() { return this._size; }
+ set size(v) { this._size = v; }
+
+ get depthBias() { return this._depthBias; }
+ set depthBias(v) { this._depthBias = v; }
+
+ get frustum() { return this._frustum; }
+ set frustum(v) { this._frustum = v; }
+
+ get distance() { return this._distance; }
+ set distance(v) { this._distance = v; }
+
+ get viewAreaColor() { return this._viewAreaColor; }
+ set viewAreaColor(v) { this._viewAreaColor = v; }
+
+ get shadowAreaColor() { return this._shadowAreaColor; }
+ set shadowAreaColor(v) { this._shadowAreaColor = v; }
+
+ get alpha() { return this._alpha; }
+ set alpha(v) { this._alpha = v; }
+}
+
+export default SensorShadow;
diff --git a/src/functions/loadTrees.ts b/src/functions/loadTrees.ts
new file mode 100644
index 0000000..16559b4
--- /dev/null
+++ b/src/functions/loadTrees.ts
@@ -0,0 +1,220 @@
+import {
+ Cartographic,
+ Cartesian3,
+ Ellipsoid,
+ HeadingPitchRoll,
+ Math as CesiumMath,
+ Transforms,
+ Model,
+ sampleTerrainMostDetailed,
+ ShadowMode,
+ Scene,
+ EllipsoidGeodesic,
+ Cartesian2
+} from "cesium";
+import GeoJSON from "ol/format/GeoJSON";
+
+export async function loadTreesIncremental(layer: any, scene: Scene, model: any): Promise
{
+// Key tunables
+const RADIUS_M = 700;
+const MOVE_THRESHOLD_M = 100;
+const TICK_MS = 500;
+const MAX_LIVE_MODELS = 100000; // pool budget
+const TERRAIN_CHUNK = 64;
+
+type TreeMeta = {
+ fid: string;
+ lon: number;
+ lat: number;
+ modelUrl: string;
+ scale: number;
+ height: number; // 0 until sampled
+};
+
+// State
+const allTrees = new Map(); // all features (metadata only)
+const live = new Map(); // currently instantiated
+const byFid = new Map(); // convenience
+let lastCamLon = NaN, lastCamLat = NaN;
+let inProgress = false;
+
+// Throttle helper
+function throttlevoid>(fn:T, ms:number) {
+ let last = 0, trailing:any;
+ return (...a:any[]) => {
+ const now = performance.now();
+ if (now - last >= ms) { last = now; fn(...a); }
+ else { clearTimeout(trailing); trailing = setTimeout(() => { last = performance.now(); fn(...a); }, ms - (now - last)); }
+ };
+}
+
+function geodesicDistanceMeters(lon1:number, lat1:number, lon2:number, lat2:number) {
+ const geod = new EllipsoidGeodesic(Cartographic.fromDegrees(lon1, lat1), Cartographic.fromDegrees(lon2, lat2));
+ return geod.surfaceDistance;
+}
+
+// 1) Fetch all features once
+async function fetchAllOnce() {
+ const url =
+ `${layer.get('dataSource')}?service=WFS&version=1.0.0&request=GetFeature` +
+ `&typeName=${encodeURIComponent(layer.get('name'))}` +
+ `&outputFormat=application/json&srsName=EPSG:4326`;
+ const resp = await fetch(url);
+ const geojson = await resp.json();
+ const features = new GeoJSON().readFeatures(geojson);
+
+ for (const f of features) {
+ const g = f.getGeometry?.(); if (!g) continue;
+ let coords:any = null;
+ if (g.getType?.() === 'Point') coords = (g as any).getCoordinates();
+ else {
+ try { coords = (g as any).getInteriorPoint?.()?.getCoordinates?.(); } catch {}
+ if (!coords) {
+ const e = g.getExtent?.(); if (e) coords = [(e[0]+e[2])/2, (e[1]+e[3])/2];
+ }
+ }
+ if (!coords) continue;
+ const [lon, lat] = coords;
+
+ const fid = f.getId?.() || f.get('id') || `${lon},${lat}`;
+ const speciesAttr = model.gltf.speciesAttr;
+ const speciesName = f.get(speciesAttr) || "";
+ const speciesSettings = model.gltf.species?.[speciesName];
+ const modelUrl = speciesSettings ? speciesSettings.model : model.gltf.baseModel;
+ const rawHeight = parseFloat(f.get(model.gltf.heightAttr || "")) || 1;
+ const modelHeight = speciesSettings?.modelHeight ?? model.gltf.baseModelHeight ?? 1;
+ const scale = rawHeight / modelHeight;
+
+ const meta: TreeMeta = { fid, lon, lat, modelUrl, scale, height: 0 };
+ allTrees.set(fid, meta);
+ byFid.set(fid, meta);
+ }
+}
+
+// 2) Ensure near set is materialized with a pool
+
+function getViewCenterCartographic(scene: Scene): Cartographic | null {
+ const w = scene.canvas.clientWidth;
+ const h = scene.canvas.clientHeight;
+ const screenCenter = new Cartesian2(w * 0.5, h * 0.5);
+
+ const ray = scene.camera.getPickRay(screenCenter);
+ const cartesian = ray ? scene.globe.pick(ray, scene) : undefined;
+ if (cartesian) return Cartographic.fromCartesian(cartesian);
+
+ const ellipsoidCartesian = scene.camera.pickEllipsoid(screenCenter, Ellipsoid.WGS84);
+ return ellipsoidCartesian ? Cartographic.fromCartesian(ellipsoidCartesian) : null;
+}
+
+async function ensureNear(scene: Scene) {
+ if (inProgress) return;
+ inProgress = true;
+ try {
+ // 1) Stable center (view center preferred; fallback to camera cartographic)
+ const center = getViewCenterCartographic(scene) ?? scene.camera.positionCartographic;
+ const centerLon = CesiumMath.toDegrees(center.longitude);
+ const centerLat = CesiumMath.toDegrees(center.latitude);
+
+ // 2) Throttle by movement of the same center
+ const moved = Number.isFinite(lastCamLon)
+ ? geodesicDistanceMeters(lastCamLon, lastCamLat, centerLon, centerLat)
+ : Infinity;
+ if (moved < MOVE_THRESHOLD_M) return;
+ lastCamLon = centerLon; lastCamLat = centerLat;
+
+ // 3) Compute AGL at center and horizontal budget of the 3D sphere
+ const terrainH = scene.globe.getHeight(center) ?? 0; // undefined -> 0 for a frame
+ const cam = scene.camera.positionCartographic;
+ const camAGL = Math.max(0, cam.height - terrainH);
+
+ if (camAGL >= RADIUS_M) {
+ // Too high: hide everything and bail
+ for (const mdl of live.values()) mdl.show = false;
+ return;
+ }
+ const horizMax = Math.sqrt(RADIUS_M * RADIUS_M - camAGL * camAGL);
+
+ // 4) Determine target set using horizMax (not RADIUS_M)
+ const target: TreeMeta[] = [];
+ for (const t of allTrees.values()) {
+ if (geodesicDistanceMeters(centerLon, centerLat, t.lon, t.lat) <= horizMax) {
+ target.push(t);
+ }
+ }
+
+ // 5) Sort by distance (closest first)
+ target.sort((a, b) =>
+ geodesicDistanceMeters(centerLon, centerLat, a.lon, a.lat) -
+ geodesicDistanceMeters(centerLon, centerLat, b.lon, b.lat)
+ );
+
+ // 6) Hide those no longer near
+ for (const [fid, mdl] of live.entries()) {
+ if (!target.find(t => t.fid === fid)) mdl.show = false;
+ }
+
+ // 7) Create/show up to budget
+ const need: TreeMeta[] = [];
+ for (const t of target) {
+ const existing = live.get(t.fid);
+ if (existing) { existing.show = layer.get('visible'); continue; }
+ need.push(t);
+ if (live.size + need.length >= MAX_LIVE_MODELS) break;
+ }
+
+ // 8) Create models (unchanged from your code)
+ const toSample: TreeMeta[] = [];
+ await Promise.all(need.slice(0, Math.max(0, MAX_LIVE_MODELS - live.size)).map(async (it) => {
+ const position0 = Cartesian3.fromDegrees(it.lon, it.lat, 0);
+ const randomHeading = CesiumMath.toRadians(Math.random() * 360);
+ const randomPitch = CesiumMath.toRadians((Math.random() - 0.5) * 20);
+ const hpr = new HeadingPitchRoll(randomHeading, randomPitch, 0);
+ const modelMatrix0 = Transforms.headingPitchRollToFixedFrame(position0, hpr, Ellipsoid.WGS84);
+
+ const m = await Model.fromGltfAsync({
+ url: it.modelUrl,
+ modelMatrix: modelMatrix0,
+ scale: it.scale,
+ minimumPixelSize: 0,
+ asynchronous: true,
+ allowPicking: false,
+ });
+ m.backFaceCulling = true;
+ m.shadows = ShadowMode.DISABLED;
+ m.show = layer.get('visible');
+ live.set(it.fid, m);
+ layer.CesiumModels = layer.CesiumModels || [];
+ layer.CesiumModels.push(m);
+ scene.primitives.add(m);
+ toSample.push(it);
+ }));
+
+ // 9) Sample terrain and update heights (your code)
+ for (let i = 0; i < toSample.length; i += TERRAIN_CHUNK) {
+ const chunk = toSample.slice(i, i + TERRAIN_CHUNK);
+ const cartos = chunk.map(t => Cartographic.fromDegrees(t.lon, t.lat));
+ await sampleTerrainMostDetailed(scene.terrainProvider, cartos);
+ for (let k = 0; k < chunk.length; k++) {
+ const t = chunk[k];
+ t.height = cartos[k].height ?? 0;
+ const mdl = live.get(t.fid);
+ if (!mdl) continue;
+ const posH = Cartesian3.fromDegrees(t.lon, t.lat, t.height);
+ const modelMatrix = Transforms.headingPitchRollToFixedFrame(posH, new HeadingPitchRoll(0,0,0), Ellipsoid.WGS84);
+ mdl.modelMatrix = modelMatrix;
+ }
+ }
+ } finally {
+ inProgress = false;
+ }
+}
+
+// Wire up frequent updates during motion
+scene.camera.percentageChanged = 0.001;
+const onChanged = throttle(() => { ensureNear(scene); }, TICK_MS);
+scene.camera.changed.addEventListener(onChanged);
+
+// Init
+await fetchAllOnce();
+await ensureNear(scene);
+}
\ No newline at end of file
diff --git a/src/layer/threedtile.ts b/src/layer/threedtile.ts
index 1fbf01f..a019fa9 100644
--- a/src/layer/threedtile.ts
+++ b/src/layer/threedtile.ts
@@ -7,6 +7,7 @@ import {
Cartesian3,
Cartographic,
sampleTerrainMostDetailed,
+ ShadowMode,
Model,
Transforms,
HeadingPitchRoll,
@@ -21,6 +22,7 @@ import {
} from 'cesium';
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
+import { loadTreesIncremental } from '../functions/loadTrees';
interface LayerOptions {
dataSource?: string;
@@ -119,67 +121,7 @@ export default async function load3DLayers(
}
} else if (type === 'THREEDTILE' && model) {
- const url = `${layer.get('dataSource')}?service=WFS&version=1.0.0&request=GetFeature&typeName=${layer.get('name')}&outputFormat=application/json&srsName=EPSG:4326`;
- try {
- const response = await fetch(url);
- const geojson = await response.json();
- const features = new GeoJSON().readFeatures(geojson);
-
- for (const feature of features) {
- const geometry = feature.getGeometry();
- if (!geometry) continue;
-
- let coords: [number, number];
- if (geometry.getType() === 'Point') {
- coords = (geometry as any).getCoordinates();
- } else if (geometry.getType() === 'Polygon') {
- coords = (geometry as any).getCoordinates()[0][0];
- } else if (geometry.getType() === 'MultiPolygon') {
- coords = (geometry as any).getCoordinates()[0][0][0];
- } else {
- continue;
- }
- const [lon, lat] = coords;
-
- const speciesAttr = model.gltf.speciesAttr;
- const speciesName = feature.get(speciesAttr) || "";
- const speciesSettings = model.gltf.species?.[speciesName];
- const useSpeciesModel = speciesSettings !== undefined;
- const modelUrl = useSpeciesModel ? speciesSettings.model : model.gltf.baseModel;
-
- const rawHeight = parseFloat(feature.get(model.gltf.heightAttr || "")) || 1;
- const modelHeight = useSpeciesModel && speciesSettings.modelHeight
- ? speciesSettings.modelHeight
- : model.gltf.baseModelHeight || 1;
- const scale = rawHeight / modelHeight;
-
- const cartoPosition = Cartographic.fromDegrees(lon, lat);
- await sampleTerrainMostDetailed(scene.terrainProvider, [cartoPosition]);
- const terrainHeight = cartoPosition.height ?? 0;
- const position = Cartesian3.fromDegrees(lon, lat, terrainHeight);
-
- const randomHeading = CesiumMath.toRadians(Math.random() * 360);
- const hpr = new HeadingPitchRoll(randomHeading, 0, 0);
- const modelMatrix = Transforms.headingPitchRollToFixedFrame(position, hpr, Ellipsoid.WGS84);
-
- const modelPrimitive = await Model.fromGltfAsync({
- url: modelUrl,
- modelMatrix,
- scale,
- minimumPixelSize: 0,
- asynchronous: true,
- });
-
- modelPrimitive.show = layer.get('visible');
-
- layer.CesiumModels = layer.CesiumModels || [];
- layer.CesiumModels.push(modelPrimitive);
- scene.primitives.add(modelPrimitive);
- }
- } catch (err) {
- console.error('Error loading WFS GLTF layer:', err);
- }
-
+ await loadTreesIncremental(layer, scene, model);
} else if (type === 'THREEDTILE' && dataType === 'model') {
const models = layer.get('models');
@@ -225,6 +167,7 @@ export default async function load3DLayers(
dynamicScreenSpaceError: true,
show: layer.get('visible'),
});
+
} else if (url === 'OSM-Buildings' && cesiumIontoken !== "") {
layerTileset = await createOsmBuildingsAsync({
showOutline: layer.get('showOutline')
@@ -236,6 +179,10 @@ export default async function load3DLayers(
// preloadFlightDestinations: true,
show: layer.get('visible')
});
+ // layerTileset.debugShowBoundingVolume = true;
+ // layerTileset.debugShowContentBoundingVolume = true;
+ // layerTileset.debugShowViewerRequestVolume = true;
+ // layerTileset.debugWireframe = true;
}
const tileset = scene.primitives.add(layerTileset!);
From 92ebedec1094b6b0d7cc4eda745aa11ea2435816 Mon Sep 17 00:00:00 2001
From: Micael Makenzius <112689339+sweco-seiamm@users.noreply.github.com>
Date: Wed, 10 Dec 2025 17:16:17 +0100
Subject: [PATCH 14/37] optimised treeLoadFunction
---
src/functions/loadTrees.ts | 402 ++++++++++++++++++++-----------------
1 file changed, 221 insertions(+), 181 deletions(-)
diff --git a/src/functions/loadTrees.ts b/src/functions/loadTrees.ts
index 16559b4..71f8bc5 100644
--- a/src/functions/loadTrees.ts
+++ b/src/functions/loadTrees.ts
@@ -9,212 +9,252 @@ import {
sampleTerrainMostDetailed,
ShadowMode,
Scene,
- EllipsoidGeodesic,
- Cartesian2
+ Cartesian2,
+ Matrix4,
+ BillboardCollection,
+ VerticalOrigin
} from "cesium";
import GeoJSON from "ol/format/GeoJSON";
+import RBush from "rbush";
-export async function loadTreesIncremental(layer: any, scene: Scene, model: any): Promise {
-// Key tunables
-const RADIUS_M = 700;
-const MOVE_THRESHOLD_M = 100;
-const TICK_MS = 500;
-const MAX_LIVE_MODELS = 100000; // pool budget
-const TERRAIN_CHUNK = 64;
-
-type TreeMeta = {
- fid: string;
- lon: number;
- lat: number;
- modelUrl: string;
- scale: number;
- height: number; // 0 until sampled
-};
-
-// State
-const allTrees = new Map(); // all features (metadata only)
-const live = new Map(); // currently instantiated
-const byFid = new Map(); // convenience
-let lastCamLon = NaN, lastCamLat = NaN;
-let inProgress = false;
-
-// Throttle helper
-function throttlevoid>(fn:T, ms:number) {
- let last = 0, trailing:any;
- return (...a:any[]) => {
- const now = performance.now();
- if (now - last >= ms) { last = now; fn(...a); }
- else { clearTimeout(trailing); trailing = setTimeout(() => { last = performance.now(); fn(...a); }, ms - (now - last)); }
- };
+// --- Tunables ------------------------------------------------
+const RADIUS_M = 1200;
+const MOVE_THRESHOLD = 100;
+const TICK_MS = 400;
+const MAX_LIVE = 100000;
+const TERRAIN_BATCH = 60;
+const CHUNK_CREATE = 18;
+const NEAR = 300;
+const LOD_BB = 700;
+
+// --- Fast distance (Haversine) --------------------------------
+function dMeters(lon1: number, lat1: number, lon2: number, lat2: number) {
+ const R = 6371008.8;
+ const φ1 = CesiumMath.toRadians(lat1),
+ φ2 = CesiumMath.toRadians(lat2);
+ const dφ = φ2 - φ1;
+ const dλ = CesiumMath.toRadians(lon2 - lon1);
+ const a =
+ Math.sin(dφ / 2) ** 2 +
+ Math.cos(φ1) * Math.cos(φ2) * Math.sin(dλ / 2) ** 2;
+ return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
}
-function geodesicDistanceMeters(lon1:number, lat1:number, lon2:number, lat2:number) {
- const geod = new EllipsoidGeodesic(Cartographic.fromDegrees(lon1, lat1), Cartographic.fromDegrees(lon2, lat2));
- return geod.surfaceDistance;
+// --- Matrix Builder ------------------------------------------
+function buildMatrix(t: any) {
+ const pos = Cartesian3.fromDegrees(t.lon, t.lat, t.height || 0);
+ const hpr = new HeadingPitchRoll(t.rot, 0, 0);
+ const m = Transforms.headingPitchRollToFixedFrame(pos, hpr, Ellipsoid.WGS84);
+ return Matrix4.multiplyByScale(m, new Cartesian3(t.scale, t.scale, t.scale), new Matrix4());
}
-// 1) Fetch all features once
-async function fetchAllOnce() {
- const url =
- `${layer.get('dataSource')}?service=WFS&version=1.0.0&request=GetFeature` +
- `&typeName=${encodeURIComponent(layer.get('name'))}` +
- `&outputFormat=application/json&srsName=EPSG:4326`;
- const resp = await fetch(url);
- const geojson = await resp.json();
- const features = new GeoJSON().readFeatures(geojson);
-
- for (const f of features) {
- const g = f.getGeometry?.(); if (!g) continue;
- let coords:any = null;
- if (g.getType?.() === 'Point') coords = (g as any).getCoordinates();
- else {
- try { coords = (g as any).getInteriorPoint?.()?.getCoordinates?.(); } catch {}
- if (!coords) {
- const e = g.getExtent?.(); if (e) coords = [(e[0]+e[2])/2, (e[1]+e[3])/2];
- }
- }
- if (!coords) continue;
- const [lon, lat] = coords;
-
- const fid = f.getId?.() || f.get('id') || `${lon},${lat}`;
- const speciesAttr = model.gltf.speciesAttr;
- const speciesName = f.get(speciesAttr) || "";
- const speciesSettings = model.gltf.species?.[speciesName];
- const modelUrl = speciesSettings ? speciesSettings.model : model.gltf.baseModel;
- const rawHeight = parseFloat(f.get(model.gltf.heightAttr || "")) || 1;
- const modelHeight = speciesSettings?.modelHeight ?? model.gltf.baseModelHeight ?? 1;
- const scale = rawHeight / modelHeight;
-
- const meta: TreeMeta = { fid, lon, lat, modelUrl, scale, height: 0 };
- allTrees.set(fid, meta);
- byFid.set(fid, meta);
- }
+// --- Visibility helper ---------------------------------------
+function setVisible(item: any, on: boolean) {
+ if (!item) return;
+ if (item.type === "model") item.model.show = on;
+ if (item.type === "billboard") item.billboard.show = on;
}
-// 2) Ensure near set is materialized with a pool
+// -----------------------------------------------------------------------
+export async function loadTreesIncremental(layer: any, scene: Scene, modelCfg: any) {
+ const all = new Map();
+ const live = new Map();
+ const index = new RBush();
+ const meshPools = new Map();
+
+ const billboards = scene.primitives.add(new BillboardCollection());
+
+ // --- Fetch features from WFS -------------------------------
+ const url = `${layer.get("dataSource")}?service=WFS&version=1.0.0&request=GetFeature&typeName=${encodeURIComponent(
+ layer.get("name")
+ )}&outputFormat=application/json&srsName=EPSG:4326`;
+
+ const gj = await (await fetch(url)).json();
+ const feats = new GeoJSON().readFeatures(gj);
+
+ for (const f of feats) {
+ const [lon, lat] = (f as any).getGeometry().getCoordinates();
+ const spec = f.get(modelCfg.gltf.speciesAttr) || "_d";
+ const set = modelCfg.gltf.species?.[spec];
+
+ const meta = {
+ fid: f.getId(),
+ lon,
+ lat,
+ species: spec,
+ url: set?.model || modelCfg.gltf.baseModel,
+ rot: CesiumMath.toRadians(Math.random() * 360),
+ scale:
+ (parseFloat(f.get(modelCfg.gltf.heightAttr || "")) || 1) /
+ (set?.modelHeight || modelCfg.gltf.baseModelHeight || 1),
+ height: 0
+ };
+ all.set(meta.fid, meta);
+ index.insert({ minX: lon, minY: lat, maxX: lon, maxY: lat, t: meta });
+ }
+
+ // --- Create tree clone per species --------------------------
+// --- Create tree clone per species --------------------------
+async function createTree(t: any) {
+ let pool = meshPools.get(t.species);
-function getViewCenterCartographic(scene: Scene): Cartographic | null {
- const w = scene.canvas.clientWidth;
- const h = scene.canvas.clientHeight;
- const screenCenter = new Cartesian2(w * 0.5, h * 0.5);
+ // Load model once per species
+ if (!pool) {
+ pool = await Model.fromGltfAsync({
+ url: t.url,
+ allowPicking: false
+ });
+ pool.show = false; // master model hidden
+ pool.shadows = ShadowMode.DISABLED;
+ scene.primitives.add(pool);
+ meshPools.set(t.species, pool);
+ }
- const ray = scene.camera.getPickRay(screenCenter);
- const cartesian = ray ? scene.globe.pick(ray, scene) : undefined;
- if (cartesian) return Cartographic.fromCartesian(cartesian);
+ // Clone by creating a new Model from the same GLTF URL
+ const clone = await Model.fromGltfAsync({
+ url: t.url,
+ modelMatrix: buildMatrix(t),
+ allowPicking: false
+ });
- const ellipsoidCartesian = scene.camera.pickEllipsoid(screenCenter, Ellipsoid.WGS84);
- return ellipsoidCartesian ? Cartographic.fromCartesian(ellipsoidCartesian) : null;
+ clone.shadows = ShadowMode.DISABLED;
+ clone.show = false;
+ scene.primitives.add(clone);
+
+ live.set(t.fid, { type: "model", model: clone });
}
-async function ensureNear(scene: Scene) {
- if (inProgress) return;
- inProgress = true;
- try {
- // 1) Stable center (view center preferred; fallback to camera cartographic)
- const center = getViewCenterCartographic(scene) ?? scene.camera.positionCartographic;
- const centerLon = CesiumMath.toDegrees(center.longitude);
- const centerLat = CesiumMath.toDegrees(center.latitude);
-
- // 2) Throttle by movement of the same center
- const moved = Number.isFinite(lastCamLon)
- ? geodesicDistanceMeters(lastCamLon, lastCamLat, centerLon, centerLat)
- : Infinity;
- if (moved < MOVE_THRESHOLD_M) return;
- lastCamLon = centerLon; lastCamLat = centerLat;
-
- // 3) Compute AGL at center and horizontal budget of the 3D sphere
- const terrainH = scene.globe.getHeight(center) ?? 0; // undefined -> 0 for a frame
- const cam = scene.camera.positionCartographic;
- const camAGL = Math.max(0, cam.height - terrainH);
-
- if (camAGL >= RADIUS_M) {
- // Too high: hide everything and bail
- for (const mdl of live.values()) mdl.show = false;
- return;
+
+ // --- Chunked creation for performance -----------------------
+ function chunkCreate(list: any) {
+ return new Promise((resolve) => {
+ const q = list.slice();
+ const step = () => {
+ q.splice(0, CHUNK_CREATE).forEach((t: any) => createTree(t));
+ q.length ? requestAnimationFrame(step) : resolve();
+ };
+ step();
+ });
+ }
+
+ // --- Billboard fallback -------------------------------------
+ function showBB(t: any) {
+ const img = modelCfg.gltf.species?.[t.species]?.imposter || modelCfg.gltf.imposter;
+ const b = billboards.add({
+ position: Cartesian3.fromDegrees(t.lon, t.lat, t.height),
+ image: img,
+ verticalOrigin: VerticalOrigin.BOTTOM
+ });
+ live.set(t.fid, { type: "billboard", billboard: b });
+ }
+
+ // --- Camera center helper -----------------------------------
+ function centerCarto() {
+ const c = scene.canvas;
+ const p = new Cartesian2(c.clientWidth / 2, c.clientHeight / 2);
+ const ray = scene.camera.getPickRay(p);
+ if (!ray) return undefined;
+ const cartesian = scene.globe.pick(ray, scene);
+ return cartesian ? Cartographic.fromCartesian(cartesian) : undefined;
+ }
+
+ // --- Main LOD update ----------------------------------------
+ let lastLon: number | undefined,
+ lastLat: number | undefined;
+ let lock = false;
+
+ async function updateLOD() {
+ if (lock) return;
+ lock = true;
+
+ let c = centerCarto();
+ let lon, lat;
+
+ if (c) {
+ lon = CesiumMath.toDegrees(c.longitude);
+ lat = CesiumMath.toDegrees(c.latitude);
+ } else {
+ c = scene.camera.positionCartographic;
+ lon = CesiumMath.toDegrees(c.longitude);
+ lat = CesiumMath.toDegrees(c.latitude);
}
- const horizMax = Math.sqrt(RADIUS_M * RADIUS_M - camAGL * camAGL);
- // 4) Determine target set using horizMax (not RADIUS_M)
- const target: TreeMeta[] = [];
- for (const t of allTrees.values()) {
- if (geodesicDistanceMeters(centerLon, centerLat, t.lon, t.lat) <= horizMax) {
- target.push(t);
+ if (lastLon !== undefined && lastLat !== undefined) {
+ if (dMeters(lon, lat, lastLon, lastLat) < MOVE_THRESHOLD) {
+ lock = false;
+ return;
}
}
+ lastLon = lon;
+ lastLat = lat;
- // 5) Sort by distance (closest first)
- target.sort((a, b) =>
- geodesicDistanceMeters(centerLon, centerLat, a.lon, a.lat) -
- geodesicDistanceMeters(centerLon, centerLat, b.lon, b.lat)
- );
+ const camH = scene.camera.positionCartographic.height;
+ const terr = scene.globe.getHeight(c) || 0;
+ const camAGL = camH - terr;
- // 6) Hide those no longer near
- for (const [fid, mdl] of live.entries()) {
- if (!target.find(t => t.fid === fid)) mdl.show = false;
+ if (camAGL > RADIUS_M) {
+ live.forEach((i) => setVisible(i, false));
+ lock = false;
+ return;
}
- // 7) Create/show up to budget
- const need: TreeMeta[] = [];
- for (const t of target) {
- const existing = live.get(t.fid);
- if (existing) { existing.show = layer.get('visible'); continue; }
- need.push(t);
- if (live.size + need.length >= MAX_LIVE_MODELS) break;
- }
+ const deg = RADIUS_M / 111320;
+ const hits = index
+ .search({ minX: lon - deg, minY: lat - deg, maxX: lon + deg, maxY: lat + deg })
+ .map((r: any) => r.t)
+ .filter((t: any) => dMeters(lon, lat, t.lon, t.lat) <= RADIUS_M)
+ .sort((a: any, b: any) => dMeters(lon, lat, a.lon, a.lat) - dMeters(lon, lat, b.lon, b.lat));
+
+ // hide out-of-range
+ const keep = new Set(hits.map((h: any) => h.fid));
+ [...live.keys()].forEach((fid) => !keep.has(fid) && live.delete(fid));
- // 8) Create models (unchanged from your code)
- const toSample: TreeMeta[] = [];
- await Promise.all(need.slice(0, Math.max(0, MAX_LIVE_MODELS - live.size)).map(async (it) => {
- const position0 = Cartesian3.fromDegrees(it.lon, it.lat, 0);
- const randomHeading = CesiumMath.toRadians(Math.random() * 360);
- const randomPitch = CesiumMath.toRadians((Math.random() - 0.5) * 20);
- const hpr = new HeadingPitchRoll(randomHeading, randomPitch, 0);
- const modelMatrix0 = Transforms.headingPitchRollToFixedFrame(position0, hpr, Ellipsoid.WGS84);
-
- const m = await Model.fromGltfAsync({
- url: it.modelUrl,
- modelMatrix: modelMatrix0,
- scale: it.scale,
- minimumPixelSize: 0,
- asynchronous: true,
- allowPicking: false,
- });
- m.backFaceCulling = true;
- m.shadows = ShadowMode.DISABLED;
- m.show = layer.get('visible');
- live.set(it.fid, m);
- layer.CesiumModels = layer.CesiumModels || [];
- layer.CesiumModels.push(m);
- scene.primitives.add(m);
- toSample.push(it);
- }));
-
- // 9) Sample terrain and update heights (your code)
- for (let i = 0; i < toSample.length; i += TERRAIN_CHUNK) {
- const chunk = toSample.slice(i, i + TERRAIN_CHUNK);
- const cartos = chunk.map(t => Cartographic.fromDegrees(t.lon, t.lat));
- await sampleTerrainMostDetailed(scene.terrainProvider, cartos);
- for (let k = 0; k < chunk.length; k++) {
- const t = chunk[k];
- t.height = cartos[k].height ?? 0;
- const mdl = live.get(t.fid);
- if (!mdl) continue;
- const posH = Cartesian3.fromDegrees(t.lon, t.lat, t.height);
- const modelMatrix = Transforms.headingPitchRollToFixedFrame(posH, new HeadingPitchRoll(0,0,0), Ellipsoid.WGS84);
- mdl.modelMatrix = modelMatrix;
+ const need3: any[] = [];
+ const needBB: any[] = [];
+ const needSample: any[] = [];
+
+ for (const t of hits) {
+ const dist = dMeters(lon, lat, t.lon, t.lat);
+ const item = live.get(t.fid);
+
+ if (dist < NEAR) {
+ if (!item || item.type === "billboard") {
+ if (item) live.delete(t.fid);
+ need3.push(t);
+ }
+ needSample.push(t);
+ } else if (dist < LOD_BB) {
+ if (!item || item.type !== "billboard") {
+ if (item) live.delete(t.fid);
+ needBB.push(t);
+ }
+ } else {
+ if (item) live.delete(t.fid);
}
+
+ if (live.size + need3.length > MAX_LIVE) break;
+ }
+
+ // Sample terrain heights
+ const samp = [...new Set(need3.concat(needSample))];
+ for (let i = 0; i < samp.length; i += TERRAIN_BATCH) {
+ const ch = samp.slice(i, i + TERRAIN_BATCH);
+ const cart = ch.map((t) => Cartographic.fromDegrees(t.lon, t.lat));
+ await sampleTerrainMostDetailed(scene.terrainProvider, cart);
+ ch.forEach((t, ix) => (t.height = cart[ix].height));
}
- } finally {
- inProgress = false;
+
+ if (need3.length) await chunkCreate(need3);
+
+ need3.forEach((t) => setVisible(live.get(t.fid), layer.get("visible")));
+ needBB.forEach(showBB);
+ lock = false;
}
-}
-// Wire up frequent updates during motion
-scene.camera.percentageChanged = 0.001;
-const onChanged = throttle(() => { ensureNear(scene); }, TICK_MS);
-scene.camera.changed.addEventListener(onChanged);
+ // --- Attach to camera events --------------------------------
+ scene.camera.changed.addEventListener(updateLOD);
+ scene.camera.percentageChanged = 0.001;
-// Init
-await fetchAllOnce();
-await ensureNear(scene);
-}
\ No newline at end of file
+ // --- Initial LOD pass ---------------------------------------
+ updateLOD();
+}
From e023c418556d18173486baed08d022a1a3c34502 Mon Sep 17 00:00:00 2001
From: Micael Makenzius <112689339+sweco-seiamm@users.noreply.github.com>
Date: Fri, 12 Dec 2025 18:03:46 +0100
Subject: [PATCH 15/37] Updated treeLoad function
---
src/functions/loadTrees.ts | 359 +++++++++++++++++++++----------------
1 file changed, 206 insertions(+), 153 deletions(-)
diff --git a/src/functions/loadTrees.ts b/src/functions/loadTrees.ts
index 71f8bc5..9c3adb3 100644
--- a/src/functions/loadTrees.ts
+++ b/src/functions/loadTrees.ts
@@ -9,23 +9,17 @@ import {
sampleTerrainMostDetailed,
ShadowMode,
Scene,
- Cartesian2,
- Matrix4,
- BillboardCollection,
- VerticalOrigin
+ Matrix4
} from "cesium";
import GeoJSON from "ol/format/GeoJSON";
import RBush from "rbush";
// --- Tunables ------------------------------------------------
-const RADIUS_M = 1200;
-const MOVE_THRESHOLD = 100;
-const TICK_MS = 400;
-const MAX_LIVE = 100000;
-const TERRAIN_BATCH = 60;
-const CHUNK_CREATE = 18;
-const NEAR = 300;
-const LOD_BB = 700;
+const RADIUS_M = 700;
+const MEDIUM_DISTANCE = 300;
+const HIGH_DISTANCE = 120;
+const MOVE_THRESHOLD = 70;
+const CHUNK_CREATE = 100;
// --- Fast distance (Haversine) --------------------------------
function dMeters(lon1: number, lat1: number, lon2: number, lat2: number) {
@@ -45,24 +39,27 @@ function buildMatrix(t: any) {
const pos = Cartesian3.fromDegrees(t.lon, t.lat, t.height || 0);
const hpr = new HeadingPitchRoll(t.rot, 0, 0);
const m = Transforms.headingPitchRollToFixedFrame(pos, hpr, Ellipsoid.WGS84);
- return Matrix4.multiplyByScale(m, new Cartesian3(t.scale, t.scale, t.scale), new Matrix4());
+ return Matrix4.multiplyByScale(
+ m,
+ new Cartesian3(t.scale, t.scale, t.scale),
+ new Matrix4()
+ );
}
// --- Visibility helper ---------------------------------------
function setVisible(item: any, on: boolean) {
if (!item) return;
- if (item.type === "model") item.model.show = on;
- if (item.type === "billboard") item.billboard.show = on;
+ if (item.type === "model" && item.model) {
+ item.model.show = on;
+ }
}
// -----------------------------------------------------------------------
export async function loadTreesIncremental(layer: any, scene: Scene, modelCfg: any) {
- const all = new Map();
- const live = new Map();
+ const all = new Map();
+ const live = new Map();
const index = new RBush();
- const meshPools = new Map();
-
- const billboards = scene.primitives.add(new BillboardCollection());
+ const lodPools = new Map();
// --- Fetch features from WFS -------------------------------
const url = `${layer.get("dataSource")}?service=WFS&version=1.0.0&request=GetFeature&typeName=${encodeURIComponent(
@@ -72,189 +69,245 @@ export async function loadTreesIncremental(layer: any, scene: Scene, modelCfg: a
const gj = await (await fetch(url)).json();
const feats = new GeoJSON().readFeatures(gj);
+ const cartos: Cartographic[] = [];
+
for (const f of feats) {
const [lon, lat] = (f as any).getGeometry().getCoordinates();
- const spec = f.get(modelCfg.gltf.speciesAttr) || "_d";
- const set = modelCfg.gltf.species?.[spec];
+ const spec = f.get(modelCfg.speciesAttr) || "_d";
+ const set = modelCfg.species?.[spec];
const meta = {
fid: f.getId(),
lon,
lat,
species: spec,
- url: set?.model || modelCfg.gltf.baseModel,
+ url: set?.high || modelCfg.high,
rot: CesiumMath.toRadians(Math.random() * 360),
scale:
- (parseFloat(f.get(modelCfg.gltf.heightAttr || "")) || 1) /
- (set?.modelHeight || modelCfg.gltf.baseModelHeight || 1),
+ (parseFloat(f.get(modelCfg.heightAttr || "")) || 1) /
+ (set?.modelHeight || modelCfg.baseModelHeight || 1),
height: 0
};
- all.set(meta.fid, meta);
+ all.set(String(meta.fid), meta);
index.insert({ minX: lon, minY: lat, maxX: lon, maxY: lat, t: meta });
+
+ cartos.push(Cartographic.fromDegrees(lon, lat));
}
- // --- Create tree clone per species --------------------------
-// --- Create tree clone per species --------------------------
-async function createTree(t: any) {
- let pool = meshPools.get(t.species);
+ // --- Sample terrain once -----------------------------------
+ // --- Sample terrain once -----------------------------------
+ const heights = await sampleTerrainMostDetailed(scene.terrainProvider, cartos);
+ feats.forEach((f, i) => {
+ const fid = f.getId();
+ const t = all.get(String(fid));
+ t.height = heights[i].height;
+ });
- // Load model once per species
- if (!pool) {
- pool = await Model.fromGltfAsync({
- url: t.url,
- allowPicking: false
- });
- pool.show = false; // master model hidden
- pool.shadows = ShadowMode.DISABLED;
- scene.primitives.add(pool);
- meshPools.set(t.species, pool);
+ // --- Preload all LOD URLs ----------------------------------
+ const urls = new Set();
+ all.forEach(t => urls.add(t.url));
+ for (const url of urls) {
+ await preloadLOD(url);
}
- // Clone by creating a new Model from the same GLTF URL
- const clone = await Model.fromGltfAsync({
- url: t.url,
- modelMatrix: buildMatrix(t),
- allowPicking: false
- });
+ // --- Chunked creation / LOD updates will follow ----------
- clone.shadows = ShadowMode.DISABLED;
- clone.show = false;
- scene.primitives.add(clone);
- live.set(t.fid, { type: "model", model: clone });
-}
+ // --- Preload model once per URL ---------------------------
+ async function preloadLOD(url: string) {
+ if (!lodPools.has(url)) {
+ const model = await Model.fromGltfAsync({ url, allowPicking: false });
+ model.show = false;
+ model.shadows = ShadowMode.DISABLED;
+ scene.primitives.add(model);
+ lodPools.set(url, model);
+ }
+ }
+ // --- Clone preloaded model -------------------------------
+ async function createTree(t: any) {
+ const url = t.url;
- // --- Chunked creation for performance -----------------------
- function chunkCreate(list: any) {
- return new Promise((resolve) => {
- const q = list.slice();
- const step = () => {
- q.splice(0, CHUNK_CREATE).forEach((t: any) => createTree(t));
- q.length ? requestAnimationFrame(step) : resolve();
- };
- step();
+ // Make sure the model is preloaded (optional)
+ await preloadLOD(url);
+
+ const model = await Model.fromGltfAsync({
+ url,
+ modelMatrix: buildMatrix(t),
+ allowPicking: false
});
+
+ model.shadows = ShadowMode.DISABLED;
+ model.show = true;
+ scene.primitives.add(model);
+
+ live.set(t.fid, { type: "model", model, url });
}
- // --- Billboard fallback -------------------------------------
- function showBB(t: any) {
- const img = modelCfg.gltf.species?.[t.species]?.imposter || modelCfg.gltf.imposter;
- const b = billboards.add({
- position: Cartesian3.fromDegrees(t.lon, t.lat, t.height),
- image: img,
- verticalOrigin: VerticalOrigin.BOTTOM
+
+ // --- Chunked creation ------------------------------------
+async function chunkCreate(list: any[]) {
+ const q = list.slice();
+
+ while (q.length) {
+ const batch = q.splice(0, CHUNK_CREATE);
+
+ // Start all models in parallel without awaiting each one
+ const promises = batch.map(async t => {
+ const item = live.get(t.fid);
+ if (item) return; // already exists
+ await createTree(t);
});
- live.set(t.fid, { type: "billboard", billboard: b });
- }
- // --- Camera center helper -----------------------------------
- function centerCarto() {
- const c = scene.canvas;
- const p = new Cartesian2(c.clientWidth / 2, c.clientHeight / 2);
- const ray = scene.camera.getPickRay(p);
- if (!ray) return undefined;
- const cartesian = scene.globe.pick(ray, scene);
- return cartesian ? Cartographic.fromCartesian(cartesian) : undefined;
+ // Wait for all in this batch
+ await Promise.all(promises);
+
+ // Yield to the render loop
+ await new Promise(r => requestAnimationFrame(r));
}
+}
- // --- Main LOD update ----------------------------------------
- let lastLon: number | undefined,
- lastLat: number | undefined;
+ // --- LOD update ------------------------------------------
+ let lastLon: number | undefined;
+ let lastLat: number | undefined;
let lock = false;
+// --- Queue for tree creation --------------------------------
+let treeQueue: any[] = [];
+let queueLock = false;
+
+// --- Chunked creation with queue ---------------------------
+async function processQueue() {
+ if (queueLock || treeQueue.length === 0) return;
+ queueLock = true;
+
+ while (treeQueue.length) {
+ const batch = treeQueue.splice(0, CHUNK_CREATE);
+
+ // Only create trees still in view
+ const batchToCreate = batch.filter(t => {
+ const c = Cartographic.fromCartesian(scene.camera.positionWC);
+ return dMeters(CesiumMath.toDegrees(c.longitude), CesiumMath.toDegrees(c.latitude), t.lon, t.lat) <= RADIUS_M;
+ });
- async function updateLOD() {
- if (lock) return;
- lock = true;
+ await Promise.all(batchToCreate.map(t => createTree(t)));
- let c = centerCarto();
- let lon, lat;
+ // Yield to the render loop
+ await new Promise(r => requestAnimationFrame(r));
- if (c) {
- lon = CesiumMath.toDegrees(c.longitude);
- lat = CesiumMath.toDegrees(c.latitude);
- } else {
- c = scene.camera.positionCartographic;
- lon = CesiumMath.toDegrees(c.longitude);
- lat = CesiumMath.toDegrees(c.latitude);
- }
+ // If the queue has been replaced due to camera movement, stop this batch
+ if (treeQueue.length === 0) break;
+ }
- if (lastLon !== undefined && lastLat !== undefined) {
- if (dMeters(lon, lat, lastLon, lastLat) < MOVE_THRESHOLD) {
- lock = false;
- return;
- }
- }
- lastLon = lon;
- lastLat = lat;
+ queueLock = false;
+}
- const camH = scene.camera.positionCartographic.height;
- const terr = scene.globe.getHeight(c) || 0;
- const camAGL = camH - terr;
+// --- LOD update --------------------------------------------
+async function updateLOD() {
+ if (lock) return;
+ lock = true;
- if (camAGL > RADIUS_M) {
- live.forEach((i) => setVisible(i, false));
+ const c = Cartographic.fromCartesian(scene.camera.positionWC);
+ const lon = CesiumMath.toDegrees(c.longitude);
+ const lat = CesiumMath.toDegrees(c.latitude);
+
+ if (lastLon !== undefined && lastLat !== undefined) {
+ if (dMeters(lon, lat, lastLon, lastLat) < MOVE_THRESHOLD) {
lock = false;
return;
}
+ }
+ lastLon = lon;
+ lastLat = lat;
+
+ const terr = scene.globe.getHeight(c) || 0;
+ const camAGL = c.height - terr;
+ if (camAGL > RADIUS_M) {
+ live.forEach(i => setVisible(i, false));
+ treeQueue = []; // cancel old batches
+ lock = false;
+ return;
+ }
- const deg = RADIUS_M / 111320;
- const hits = index
- .search({ minX: lon - deg, minY: lat - deg, maxX: lon + deg, maxY: lat + deg })
- .map((r: any) => r.t)
- .filter((t: any) => dMeters(lon, lat, t.lon, t.lat) <= RADIUS_M)
- .sort((a: any, b: any) => dMeters(lon, lat, a.lon, a.lat) - dMeters(lon, lat, b.lon, b.lat));
+ const deg = RADIUS_M / 111320;
+ const hits = index
+ .search({ minX: lon - deg, minY: lat - deg, maxX: lon + deg, maxY: lat + deg })
+ .map((r: any) => r.t)
+ .filter(t => dMeters(lon, lat, t.lon, t.lat) <= RADIUS_M)
+ .sort((a, b) => dMeters(lon, lat, a.lon, a.lat) - dMeters(lon, lat, b.lon, b.lat));
- // hide out-of-range
- const keep = new Set(hits.map((h: any) => h.fid));
- [...live.keys()].forEach((fid) => !keep.has(fid) && live.delete(fid));
- const need3: any[] = [];
- const needBB: any[] = [];
- const needSample: any[] = [];
- for (const t of hits) {
- const dist = dMeters(lon, lat, t.lon, t.lat);
- const item = live.get(t.fid);
+ const keep = new Set(hits.map(h => h.fid));
+ [...live.keys()].forEach(fid => {
+ if (!keep.has(fid)) setVisible(live.get(fid), false);
+ });
- if (dist < NEAR) {
- if (!item || item.type === "billboard") {
- if (item) live.delete(t.fid);
- need3.push(t);
- }
- needSample.push(t);
- } else if (dist < LOD_BB) {
- if (!item || item.type !== "billboard") {
- if (item) live.delete(t.fid);
- needBB.push(t);
- }
- } else {
- if (item) live.delete(t.fid);
- }
-
- if (live.size + need3.length > MAX_LIVE) break;
- }
+ // Determine which trees need to be created
+ const newQueue: any[] = [];
+ hits.forEach(t => {
+ const dist = dMeters(lon, lat, t.lon, t.lat);
- // Sample terrain heights
- const samp = [...new Set(need3.concat(needSample))];
- for (let i = 0; i < samp.length; i += TERRAIN_BATCH) {
- const ch = samp.slice(i, i + TERRAIN_BATCH);
- const cart = ch.map((t) => Cartographic.fromDegrees(t.lon, t.lat));
- await sampleTerrainMostDetailed(scene.terrainProvider, cart);
- ch.forEach((t, ix) => (t.height = cart[ix].height));
- }
+ if (dist < HIGH_DISTANCE) t.url = modelCfg.species?.[t.species]?.high || modelCfg.high;
+ else if (dist < MEDIUM_DISTANCE) t.url = modelCfg.species?.[t.species]?.medium || modelCfg.medium;
+ else t.url = modelCfg.species?.[t.species]?.low || modelCfg.low;
- if (need3.length) await chunkCreate(need3);
+ const item = live.get(t.fid);
+ if (!item || item.url !== t.url) {
+ if (item) setVisible(item, false);
+ newQueue.push(t);
+ }
+ });
- need3.forEach((t) => setVisible(live.get(t.fid), layer.get("visible")));
- needBB.forEach(showBB);
- lock = false;
+ // Replace old queue (cancel old batches)
+ treeQueue = newQueue;
+
+ // Start processing queue asynchronously
+ processQueue();
+
+ // Update matrices for visible trees
+hits.forEach(t => {
+ const dist = dMeters(lon, lat, t.lon, t.lat);
+
+ // Determine LOD
+ let lodUrl;
+ if (dist < HIGH_DISTANCE) lodUrl = modelCfg.species?.[t.species]?.high || modelCfg.high;
+ else if (dist < MEDIUM_DISTANCE) lodUrl = modelCfg.species?.[t.species]?.medium || modelCfg.medium;
+ else lodUrl = modelCfg.species?.[t.species]?.low || modelCfg.low;
+
+ const item = live.get(t.fid);
+
+ if (item) {
+ // Update model if LOD changed
+ if (item.url !== lodUrl) {
+ // hide old model
+ setVisible(item, false);
+ // enqueue for creation
+ treeQueue.push({ ...t, url: lodUrl });
+ // remove from live temporarily
+ live.delete(t.fid);
+ } else {
+ // just update position
+ item.model.modelMatrix = buildMatrix(t);
+ item.model.show = true;
+ }
+ } else {
+ // not created yet -> enqueue
+ treeQueue.push({ ...t, url: lodUrl });
}
+});
- // --- Attach to camera events --------------------------------
- scene.camera.changed.addEventListener(updateLOD);
- scene.camera.percentageChanged = 0.001;
+ lock = false;
+}
+// --- Throttle camera updates --------------------------------
+let lastUpdate = 0;
+scene.camera.changed.addEventListener(() => {
+ const now = performance.now();
+ if (now - lastUpdate > 700) {
+ lastUpdate = now;
+ updateLOD();
+ }
+});
// --- Initial LOD pass ---------------------------------------
updateLOD();
}
From c01cd61b317da90f118efaf33c98a5ba87a0ba4f Mon Sep 17 00:00:00 2001
From: Micael Makenzius <112689339+sweco-seiamm@users.noreply.github.com>
Date: Fri, 12 Dec 2025 20:09:16 +0100
Subject: [PATCH 16/37] Update loadTrees.ts
---
src/functions/loadTrees.ts | 375 ++++++++++++++++++++-----------------
1 file changed, 198 insertions(+), 177 deletions(-)
diff --git a/src/functions/loadTrees.ts b/src/functions/loadTrees.ts
index 9c3adb3..f198b81 100644
--- a/src/functions/loadTrees.ts
+++ b/src/functions/loadTrees.ts
@@ -19,7 +19,8 @@ const RADIUS_M = 700;
const MEDIUM_DISTANCE = 300;
const HIGH_DISTANCE = 120;
const MOVE_THRESHOLD = 70;
-const CHUNK_CREATE = 100;
+const CHUNK_CREATE = 40; // smaller batches are smoother
+const CAMERA_THROTTLE_MS = 250; // throttle updates while panning
// --- Fast distance (Haversine) --------------------------------
function dMeters(lon1: number, lat1: number, lon2: number, lat2: number) {
@@ -50,14 +51,16 @@ function buildMatrix(t: any) {
function setVisible(item: any, on: boolean) {
if (!item) return;
if (item.type === "model" && item.model) {
- item.model.show = on;
+ try {
+ item.model.show = on;
+ } catch (e) {}
}
}
// -----------------------------------------------------------------------
export async function loadTreesIncremental(layer: any, scene: Scene, modelCfg: any) {
const all = new Map();
- const live = new Map();
+ const live = new Map(); // fid -> { type:'model', model, url }
const index = new RBush();
const lodPools = new Map();
@@ -77,44 +80,49 @@ export async function loadTreesIncremental(layer: any, scene: Scene, modelCfg: a
const set = modelCfg.species?.[spec];
const meta = {
- fid: f.getId(),
+ fid: String(f.getId()),
lon,
lat,
species: spec,
- url: set?.high || modelCfg.high,
+ // we store base LOD url; LOD selection happens later
+ urlHigh: set?.high || modelCfg.high,
+ urlMedium: set?.medium || modelCfg.medium,
+ urlLow: set?.low || modelCfg.low,
rot: CesiumMath.toRadians(Math.random() * 360),
scale:
(parseFloat(f.get(modelCfg.heightAttr || "")) || 1) /
(set?.modelHeight || modelCfg.baseModelHeight || 1),
height: 0
};
- all.set(String(meta.fid), meta);
- index.insert({ minX: lon, minY: lat, maxX: lon, maxY: lat, t: meta });
+ all.set(meta.fid, meta);
+ index.insert({ minX: lon, minY: lat, maxX: lon, maxY: lat, t: meta });
cartos.push(Cartographic.fromDegrees(lon, lat));
}
// --- Sample terrain once -----------------------------------
- // --- Sample terrain once -----------------------------------
- const heights = await sampleTerrainMostDetailed(scene.terrainProvider, cartos);
- feats.forEach((f, i) => {
- const fid = f.getId();
- const t = all.get(String(fid));
- t.height = heights[i].height;
- });
-
- // --- Preload all LOD URLs ----------------------------------
- const urls = new Set();
- all.forEach(t => urls.add(t.url));
- for (const url of urls) {
- await preloadLOD(url);
+ if (cartos.length) {
+ // sample in batches to avoid provider limits if huge
+ const TERRAIN_BATCH = 200;
+ for (let i = 0; i < cartos.length; i += TERRAIN_BATCH) {
+ const slice = cartos.slice(i, i + TERRAIN_BATCH);
+ await sampleTerrainMostDetailed(scene.terrainProvider, slice);
+ // assign heights back to all
+ for (let j = 0; j < slice.length; j++) {
+ const c = slice[j];
+ // find corresponding fid by coords (we preserved order earlier)
+ // simpler: feats index matches cartos order
+ const f = feats[i + j];
+ const fid = String(f.getId());
+ const t = all.get(fid);
+ if (t) t.height = c.height;
+ }
+ }
}
- // --- Chunked creation / LOD updates will follow ----------
-
-
- // --- Preload model once per URL ---------------------------
+ // --- Preload LOD URLs (all species) ------------------------
async function preloadLOD(url: string) {
+ if (!url) return;
if (!lodPools.has(url)) {
const model = await Model.fromGltfAsync({ url, allowPicking: false });
model.show = false;
@@ -124,190 +132,203 @@ export async function loadTreesIncremental(layer: any, scene: Scene, modelCfg: a
}
}
- // --- Clone preloaded model -------------------------------
- async function createTree(t: any) {
- const url = t.url;
-
- // Make sure the model is preloaded (optional)
- await preloadLOD(url);
+ // Gather all LOD URLs and preload (non-blocking serial)
+ const lodUrls = new Set();
+ all.forEach((t) => {
+ if (t.urlHigh) lodUrls.add(t.urlHigh);
+ if (t.urlMedium) lodUrls.add(t.urlMedium);
+ if (t.urlLow) lodUrls.add(t.urlLow);
+ });
+ for (const u of lodUrls) await preloadLOD(u);
+ // --- createTree (simple, no post-check) -------------------
+ async function createTree(t: any) {
const model = await Model.fromGltfAsync({
- url,
+ url: t.url,
modelMatrix: buildMatrix(t),
allowPicking: false
});
-
model.shadows = ShadowMode.DISABLED;
model.show = true;
scene.primitives.add(model);
- live.set(t.fid, { type: "model", model, url });
+ // register
+ live.set(t.fid, { type: "model", model, url: t.url });
}
+ // --- queue + processing (sequential-ish, chunked per frame) --
+ let treeQueue: any[] = [];
+ let queueLock = false;
+
+ async function processQueueSequential() {
+ if (queueLock || treeQueue.length === 0) return;
+ queueLock = true;
+
+ while (treeQueue.length) {
+ const batch = treeQueue.splice(0, CHUNK_CREATE);
+
+ // sequential create per item inside batch to reduce parallel GPU uploads
+ for (const t of batch) {
+ // quick check: skip if already live with right url
+ const existing = live.get(t.fid);
+ if (existing && existing.url === t.url) {
+ // update transform and ensure visible
+ try {
+ existing.model.modelMatrix = buildMatrix(t);
+ existing.model.show = true;
+ } catch (e) {}
+ continue;
+ }
+
+ // pre-check distance (hybrid approach)
+ const c = Cartographic.fromCartesian(scene.camera.positionWC);
+ const camLon = CesiumMath.toDegrees(c.longitude);
+ const camLat = CesiumMath.toDegrees(c.latitude);
+ if (dMeters(camLon, camLat, t.lon, t.lat) > RADIUS_M) {
+ // skip creating this one
+ continue;
+ }
+
+ // create (no post-check)
+ try {
+ await createTree(t);
+ } catch (e) {
+ // continue and avoid breaking the queue on single model failure
+ }
+ }
+
+ // yield to render loop
+ await new Promise((r) => requestAnimationFrame(r));
+ }
- // --- Chunked creation ------------------------------------
-async function chunkCreate(list: any[]) {
- const q = list.slice();
-
- while (q.length) {
- const batch = q.splice(0, CHUNK_CREATE);
-
- // Start all models in parallel without awaiting each one
- const promises = batch.map(async t => {
- const item = live.get(t.fid);
- if (item) return; // already exists
- await createTree(t);
- });
-
- // Wait for all in this batch
- await Promise.all(promises);
-
- // Yield to the render loop
- await new Promise(r => requestAnimationFrame(r));
+ queueLock = false;
}
-}
- // --- LOD update ------------------------------------------
- let lastLon: number | undefined;
- let lastLat: number | undefined;
+ // --- robust updateLOD -------------------------------------
+ let lastLon: number | undefined = undefined;
+ let lastLat: number | undefined = undefined;
let lock = false;
-// --- Queue for tree creation --------------------------------
-let treeQueue: any[] = [];
-let queueLock = false;
-
-// --- Chunked creation with queue ---------------------------
-async function processQueue() {
- if (queueLock || treeQueue.length === 0) return;
- queueLock = true;
-
- while (treeQueue.length) {
- const batch = treeQueue.splice(0, CHUNK_CREATE);
-
- // Only create trees still in view
- const batchToCreate = batch.filter(t => {
- const c = Cartographic.fromCartesian(scene.camera.positionWC);
- return dMeters(CesiumMath.toDegrees(c.longitude), CesiumMath.toDegrees(c.latitude), t.lon, t.lat) <= RADIUS_M;
- });
- await Promise.all(batchToCreate.map(t => createTree(t)));
+ async function updateLOD() {
+ if (lock) return;
+ lock = true;
- // Yield to the render loop
- await new Promise(r => requestAnimationFrame(r));
+ const c = Cartographic.fromCartesian(scene.camera.positionWC);
+ const lon = CesiumMath.toDegrees(c.longitude);
+ const lat = CesiumMath.toDegrees(c.latitude);
- // If the queue has been replaced due to camera movement, stop this batch
- if (treeQueue.length === 0) break;
- }
-
- queueLock = false;
-}
-
-// --- LOD update --------------------------------------------
-async function updateLOD() {
- if (lock) return;
- lock = true;
-
- const c = Cartographic.fromCartesian(scene.camera.positionWC);
- const lon = CesiumMath.toDegrees(c.longitude);
- const lat = CesiumMath.toDegrees(c.latitude);
-
- if (lastLon !== undefined && lastLat !== undefined) {
- if (dMeters(lon, lat, lastLon, lastLat) < MOVE_THRESHOLD) {
+ // movement threshold
+ if (lastLon !== undefined && lastLat !== undefined) {
+ if (dMeters(lon, lat, lastLon, lastLat) < MOVE_THRESHOLD) {
+ lock = false;
+ return;
+ }
+ }
+ lastLon = lon;
+ lastLat = lat;
+
+ const terr = scene.globe.getHeight(c) || 0;
+ const camAGL = c.height - terr;
+ if (camAGL > RADIUS_M) {
+ // camera far above, clear everything
+ for (const [fid, item] of Array.from(live.entries())) {
+ try {
+ scene.primitives.remove(item.model);
+ item.model.destroy?.();
+ } catch (e) {}
+ live.delete(fid);
+ }
+ treeQueue = [];
lock = false;
return;
}
- }
- lastLon = lon;
- lastLat = lat;
-
- const terr = scene.globe.getHeight(c) || 0;
- const camAGL = c.height - terr;
- if (camAGL > RADIUS_M) {
- live.forEach(i => setVisible(i, false));
- treeQueue = []; // cancel old batches
- lock = false;
- return;
- }
-
- const deg = RADIUS_M / 111320;
- const hits = index
- .search({ minX: lon - deg, minY: lat - deg, maxX: lon + deg, maxY: lat + deg })
- .map((r: any) => r.t)
- .filter(t => dMeters(lon, lat, t.lon, t.lat) <= RADIUS_M)
- .sort((a, b) => dMeters(lon, lat, a.lon, a.lat) - dMeters(lon, lat, b.lon, b.lat));
+ // query RBush for candidates inside bounding box then precise filter
+ const deg = RADIUS_M / 111320;
+ const hits = index
+ .search({ minX: lon - deg, minY: lat - deg, maxX: lon + deg, maxY: lat + deg })
+ .map((r: any) => r.t)
+ .filter((t: any) => {
+ // precise meters
+ return dMeters(lon, lat, t.lon, t.lat) <= RADIUS_M;
+ });
+
+ // build keep set
+ const keep = new Set(hits.map((h: any) => h.fid));
+
+ // remove live items not in keep (immediate removal + optional destroy)
+ for (const [fid, item] of Array.from(live.entries())) {
+ if (!keep.has(fid)) {
+ try {
+ scene.primitives.remove(item.model);
+ item.model.destroy?.();
+ } catch (e) {}
+ live.delete(fid);
+ }
+ }
+ // build new queue (deduped) for items that need creation or LOD change
+ const queued = new Set();
+ const newQueue: any[] = [];
- const keep = new Set(hits.map(h => h.fid));
- [...live.keys()].forEach(fid => {
- if (!keep.has(fid)) setVisible(live.get(fid), false);
- });
+ for (const t of hits) {
+ const dist = dMeters(lon, lat, t.lon, t.lat);
- // Determine which trees need to be created
- const newQueue: any[] = [];
- hits.forEach(t => {
- const dist = dMeters(lon, lat, t.lon, t.lat);
+ // choose LOD URL
+ let lodUrl = t.urlLow || modelCfg.low;
+ if (dist < HIGH_DISTANCE) lodUrl = t.urlHigh || modelCfg.high;
+ else if (dist < MEDIUM_DISTANCE) lodUrl = t.urlMedium || modelCfg.medium;
- if (dist < HIGH_DISTANCE) t.url = modelCfg.species?.[t.species]?.high || modelCfg.high;
- else if (dist < MEDIUM_DISTANCE) t.url = modelCfg.species?.[t.species]?.medium || modelCfg.medium;
- else t.url = modelCfg.species?.[t.species]?.low || modelCfg.low;
+ // annotate target url on the temporary tree object
+ const qItem = { ...t, url: lodUrl };
- const item = live.get(t.fid);
- if (!item || item.url !== t.url) {
- if (item) setVisible(item, false);
- newQueue.push(t);
+ const item = live.get(t.fid);
+ if (!item) {
+ if (!queued.has(t.fid)) {
+ newQueue.push(qItem);
+ queued.add(t.fid);
+ }
+ } else {
+ // LOD changed?
+ if (item.url !== lodUrl) {
+ // remove old model immediately
+ try {
+ scene.primitives.remove(item.model);
+ item.model.destroy?.();
+ } catch (e) {}
+ live.delete(t.fid);
+
+ if (!queued.has(t.fid)) {
+ newQueue.push(qItem);
+ queued.add(t.fid);
+ }
+ } else {
+ // same LOD, just update transform & ensure visible
+ try {
+ item.model.modelMatrix = buildMatrix(t);
+ item.model.show = true;
+ } catch (e) {}
+ }
+ }
}
- });
- // Replace old queue (cancel old batches)
- treeQueue = newQueue;
-
- // Start processing queue asynchronously
- processQueue();
-
- // Update matrices for visible trees
-hits.forEach(t => {
- const dist = dMeters(lon, lat, t.lon, t.lat);
-
- // Determine LOD
- let lodUrl;
- if (dist < HIGH_DISTANCE) lodUrl = modelCfg.species?.[t.species]?.high || modelCfg.high;
- else if (dist < MEDIUM_DISTANCE) lodUrl = modelCfg.species?.[t.species]?.medium || modelCfg.medium;
- else lodUrl = modelCfg.species?.[t.species]?.low || modelCfg.low;
-
- const item = live.get(t.fid);
-
- if (item) {
- // Update model if LOD changed
- if (item.url !== lodUrl) {
- // hide old model
- setVisible(item, false);
- // enqueue for creation
- treeQueue.push({ ...t, url: lodUrl });
- // remove from live temporarily
- live.delete(t.fid);
- } else {
- // just update position
- item.model.modelMatrix = buildMatrix(t);
- item.model.show = true;
- }
- } else {
- // not created yet -> enqueue
- treeQueue.push({ ...t, url: lodUrl });
+ // replace queue and start processing
+ treeQueue = newQueue;
+ processQueueSequential();
+
+ lock = false;
}
-});
- lock = false;
-}
+ // throttle + attach camera
+ let lastUpdate = 0;
+ scene.camera.changed.addEventListener(() => {
+ const now = performance.now();
+ if (now - lastUpdate > CAMERA_THROTTLE_MS) {
+ lastUpdate = now;
+ updateLOD();
+ }
+ });
-// --- Throttle camera updates --------------------------------
-let lastUpdate = 0;
-scene.camera.changed.addEventListener(() => {
- const now = performance.now();
- if (now - lastUpdate > 700) {
- lastUpdate = now;
- updateLOD();
- }
-});
- // --- Initial LOD pass ---------------------------------------
+ // initial pass
updateLOD();
}
From 21b3d2991dba756699c64ae00d1ff36122e372df Mon Sep 17 00:00:00 2001
From: Micael Makenzius <112689339+sweco-seiamm@users.noreply.github.com>
Date: Fri, 12 Dec 2025 20:18:56 +0100
Subject: [PATCH 17/37] Update loadTrees.ts
---
src/functions/loadTrees.ts | 33 +++++++++++++++++++++++----------
1 file changed, 23 insertions(+), 10 deletions(-)
diff --git a/src/functions/loadTrees.ts b/src/functions/loadTrees.ts
index f198b81..ff1ccd5 100644
--- a/src/functions/loadTrees.ts
+++ b/src/functions/loadTrees.ts
@@ -20,7 +20,11 @@ const MEDIUM_DISTANCE = 300;
const HIGH_DISTANCE = 120;
const MOVE_THRESHOLD = 70;
const CHUNK_CREATE = 40; // smaller batches are smoother
-const CAMERA_THROTTLE_MS = 250; // throttle updates while panning
+let moving = false;
+let stableTimer: number | undefined; // timeout ID
+let stableRAF: number | undefined; // rAF ID
+const STABLE_DELAY = 900;
+
// --- Fast distance (Haversine) --------------------------------
function dMeters(lon1: number, lat1: number, lon2: number, lat2: number) {
@@ -210,6 +214,7 @@ export async function loadTreesIncremental(layer: any, scene: Scene, modelCfg: a
let lock = false;
async function updateLOD() {
+ if (moving) return;
if (lock) return;
lock = true;
@@ -318,16 +323,24 @@ export async function loadTreesIncremental(layer: any, scene: Scene, modelCfg: a
lock = false;
}
+ // --- Freeze LOD while camera moves ---------------------------
+ function onCameraMove() {
+ moving = true;
+
+ // cancel previous timers
+ if (stableTimer) clearTimeout(stableTimer);
+ if (stableRAF) cancelAnimationFrame(stableRAF);
+
+ // schedule stability check
+ stableRAF = requestAnimationFrame(() => {
+ stableTimer = window.setTimeout(() => {
+ moving = false;
+ updateLOD(); // run once after stabilized
+ }, STABLE_DELAY);
+ });
+ }
- // throttle + attach camera
- let lastUpdate = 0;
- scene.camera.changed.addEventListener(() => {
- const now = performance.now();
- if (now - lastUpdate > CAMERA_THROTTLE_MS) {
- lastUpdate = now;
- updateLOD();
- }
- });
+ scene.camera.changed.addEventListener(onCameraMove);
// initial pass
updateLOD();
From 5b1efb9fe78fa7a1f9dff5a0cc807915c8697e56 Mon Sep 17 00:00:00 2001
From: Micael Makenzius <112689339+sweco-seiamm@users.noreply.github.com>
Date: Fri, 12 Dec 2025 20:50:09 +0100
Subject: [PATCH 18/37] Update loadTrees.ts
---
src/functions/loadTrees.ts | 128 ++++++++++++++++++++-----------------
1 file changed, 69 insertions(+), 59 deletions(-)
diff --git a/src/functions/loadTrees.ts b/src/functions/loadTrees.ts
index ff1ccd5..aef18bf 100644
--- a/src/functions/loadTrees.ts
+++ b/src/functions/loadTrees.ts
@@ -23,7 +23,7 @@ const CHUNK_CREATE = 40; // smaller batches are smoother
let moving = false;
let stableTimer: number | undefined; // timeout ID
let stableRAF: number | undefined; // rAF ID
-const STABLE_DELAY = 900;
+const STABLE_DELAY = 500;
// --- Fast distance (Haversine) --------------------------------
@@ -125,16 +125,22 @@ export async function loadTreesIncremental(layer: any, scene: Scene, modelCfg: a
}
// --- Preload LOD URLs (all species) ------------------------
- async function preloadLOD(url: string) {
- if (!url) return;
- if (!lodPools.has(url)) {
- const model = await Model.fromGltfAsync({ url, allowPicking: false });
- model.show = false;
- model.shadows = ShadowMode.DISABLED;
- scene.primitives.add(model);
- lodPools.set(url, model);
- }
- }
+// --- Preload and pool ----------------------------------------
+async function preloadLOD(url: string) {
+ if (!url || lodPools.has(url)) return;
+
+ // Warm GPU + shader pipeline without creating a visible model
+ const m = await Model.fromGltfAsync({
+ url,
+ allowPicking: false,
+ asynchronous: true
+ });
+
+ // <- DO NOT add to scene!
+ lodPools.set(url, m); // store Model instance
+}
+
+
// Gather all LOD URLs and preload (non-blocking serial)
const lodUrls = new Set();
@@ -143,22 +149,24 @@ export async function loadTreesIncremental(layer: any, scene: Scene, modelCfg: a
if (t.urlMedium) lodUrls.add(t.urlMedium);
if (t.urlLow) lodUrls.add(t.urlLow);
});
- for (const u of lodUrls) await preloadLOD(u);
+ Promise.all([...lodUrls].map(preloadLOD));
// --- createTree (simple, no post-check) -------------------
- async function createTree(t: any) {
- const model = await Model.fromGltfAsync({
- url: t.url,
- modelMatrix: buildMatrix(t),
- allowPicking: false
- });
- model.shadows = ShadowMode.DISABLED;
- model.show = true;
- scene.primitives.add(model);
+async function createTree(t: any) {
+ // Fast because GLTF + textures already in cache
+ const model = await Model.fromGltfAsync({
+ url: t.url,
+ modelMatrix: buildMatrix(t),
+ allowPicking: false
+ });
- // register
- live.set(t.fid, { type: "model", model, url: t.url });
- }
+ model.shadows = ShadowMode.DISABLED;
+ model.show = true;
+
+ scene.primitives.add(model);
+
+ live.set(t.fid, { model, url: t.url });
+}
// --- queue + processing (sequential-ish, chunked per frame) --
let treeQueue: any[] = [];
@@ -239,7 +247,7 @@ export async function loadTreesIncremental(layer: any, scene: Scene, modelCfg: a
for (const [fid, item] of Array.from(live.entries())) {
try {
scene.primitives.remove(item.model);
- item.model.destroy?.();
+ // item.model.destroy?.();
} catch (e) {}
live.delete(fid);
}
@@ -250,13 +258,25 @@ export async function loadTreesIncremental(layer: any, scene: Scene, modelCfg: a
// query RBush for candidates inside bounding box then precise filter
const deg = RADIUS_M / 111320;
+// --- optimized bounding-box query + single distance compute ---
+ const bbox = {
+ minX: lon - deg,
+ minY: lat - deg,
+ maxX: lon + deg,
+ maxY: lat + deg
+ };
+
const hits = index
- .search({ minX: lon - deg, minY: lat - deg, maxX: lon + deg, maxY: lat + deg })
- .map((r: any) => r.t)
- .filter((t: any) => {
- // precise meters
- return dMeters(lon, lat, t.lon, t.lat) <= RADIUS_M;
- });
+ .search(bbox)
+ .map((r: any) => {
+ const t = r.t;
+ return {
+ t,
+ dist: dMeters(lon, lat, t.lon, t.lat)
+ };
+ })
+ .filter(o => o.dist <= RADIUS_M);
+
// build keep set
const keep = new Set(hits.map((h: any) => h.fid));
@@ -266,7 +286,7 @@ export async function loadTreesIncremental(layer: any, scene: Scene, modelCfg: a
if (!keep.has(fid)) {
try {
scene.primitives.remove(item.model);
- item.model.destroy?.();
+ // item.model.destroy?.();
} catch (e) {}
live.delete(fid);
}
@@ -276,8 +296,9 @@ export async function loadTreesIncremental(layer: any, scene: Scene, modelCfg: a
const queued = new Set();
const newQueue: any[] = [];
- for (const t of hits) {
- const dist = dMeters(lon, lat, t.lon, t.lat);
+ for (const o of hits) {
+ const t = o.t;
+ const dist = o.dist;
// choose LOD URL
let lodUrl = t.urlLow || modelCfg.low;
@@ -288,33 +309,22 @@ export async function loadTreesIncremental(layer: any, scene: Scene, modelCfg: a
const qItem = { ...t, url: lodUrl };
const item = live.get(t.fid);
- if (!item) {
- if (!queued.has(t.fid)) {
- newQueue.push(qItem);
- queued.add(t.fid);
- }
- } else {
- // LOD changed?
- if (item.url !== lodUrl) {
- // remove old model immediately
- try {
- scene.primitives.remove(item.model);
- item.model.destroy?.();
- } catch (e) {}
- live.delete(t.fid);
-
+ if (!item || item.url !== lodUrl) {
+ // remove old model
+ if (item) {
+ scene.primitives.remove(item.model);
+ live.delete(t.fid);
+ }
if (!queued.has(t.fid)) {
- newQueue.push(qItem);
- queued.add(t.fid);
+ newQueue.push(qItem);
+ queued.add(t.fid);
}
- } else {
- // same LOD, just update transform & ensure visible
- try {
- item.model.modelMatrix = buildMatrix(t);
- item.model.show = true;
- } catch (e) {}
- }
+ } else {
+ // same LOD
+ item.model.modelMatrix = buildMatrix(t);
+ item.model.show = true;
}
+
}
// replace queue and start processing
@@ -340,7 +350,7 @@ export async function loadTreesIncremental(layer: any, scene: Scene, modelCfg: a
});
}
- scene.camera.changed.addEventListener(onCameraMove);
+ scene.camera.moveStart.addEventListener(onCameraMove);
// initial pass
updateLOD();
From bf0a9636d1fdc751c076d107026046efb3db9faf Mon Sep 17 00:00:00 2001
From: Micael Makenzius <112689339+sweco-seiamm@users.noreply.github.com>
Date: Mon, 15 Dec 2025 10:07:06 +0100
Subject: [PATCH 19/37] fixed small bugs
---
src/functions/ViewShed.ts | 2 +-
src/functions/dynamicResolutionScaling.ts | 4 +-
src/globe.ts | 59 ++++++++++++++---------
src/globeState.ts | 6 ++-
4 files changed, 44 insertions(+), 27 deletions(-)
diff --git a/src/functions/ViewShed.ts b/src/functions/ViewShed.ts
index e856185..221ad97 100644
--- a/src/functions/ViewShed.ts
+++ b/src/functions/ViewShed.ts
@@ -46,7 +46,7 @@ export default function setupViewshed(
/** Disables and cleans up viewshed mode */
function disableViewshed(): void {
isViewShed = false;
- scene.globe.shadows = Cesium.ShadowMode.DISABLED;
+ // scene.globe.shadows = Cesium.ShadowMode.DISABLED;
points = { start: null, end: null };
// Remove all primitives
diff --git a/src/functions/dynamicResolutionScaling.ts b/src/functions/dynamicResolutionScaling.ts
index 58e267e..bdc4cce 100644
--- a/src/functions/dynamicResolutionScaling.ts
+++ b/src/functions/dynamicResolutionScaling.ts
@@ -38,7 +38,7 @@ export default function dynamicResolutionScaling(oGlobe: GlobeLike, scene: Cesiu
maxFrameTime: 50,
tiltEnter: Cesium.Math.toRadians(1.8),
tiltExit: Cesium.Math.toRadians(1.2),
- mseHigh: 3,
+ mseHigh: 1,
mseLow: 6,
lowDetailMinTime: 800,
idleRenderDelay: 500,
@@ -126,7 +126,7 @@ export default function dynamicResolutionScaling(oGlobe: GlobeLike, scene: Cesiu
cfg.tiltEnter = Cesium.Math.toRadians(2.2);
cfg.tiltExit = Cesium.Math.toRadians(1.4);
cfg.mseLow = 7;
- cfg.mseHigh = 2;
+ cfg.mseHigh = 1;
cfg.idleRenderDelay = 300;
if (cfg.debugLogs) console.warn("Low-end GPU detected → enabling low-end mode.");
}
diff --git a/src/globe.ts b/src/globe.ts
index 83ca2f4..18c57c4 100644
--- a/src/globe.ts
+++ b/src/globe.ts
@@ -15,7 +15,6 @@ import {
JulianDate,
Clock,
} from 'cesium';
-import isGlobeActive from './functions/isglobeactive';
import measureTool from './functions/measureTool';
import addGLTF from './layer/gltf';
import add3DTile from './layer/threedtile';
@@ -26,7 +25,7 @@ import StreetView from './functions/StreetView';
import CameraControls from './functions/CameraControls';
import dynamicResolutionScaling from './functions/dynamicResolutionScaling';
import patchCollections from './functions/patchCollections';
-import { setCameraHeight, getCameraHeight, setIsStreetMode, getIsStreetMode } from './globeState';
+import { setCameraHeight, getCameraHeight, setIsStreetMode, getIsStreetMode, isGlobeActive } from './globeState';
declare global {
interface Window {
@@ -213,7 +212,7 @@ const Globe = function Globe(options: GlobeOptions = {}) {
enableTime: true,
defaultDate: new Date(),
enableSeconds: true,
- disableMobile: false,
+ disableMobile: true,
time_24hr: true,
});
},
@@ -394,27 +393,41 @@ const Globe = function Globe(options: GlobeOptions = {}) {
},
addMeasureTool: (scene: Cesium.Scene): void => {
let tool: ReturnType | null = null;
- const originalButton = document.getElementsByClassName('o-measure')[0] as HTMLElement;
-
- // Clone the element to remove existing listeners
- const newButton = originalButton.cloneNode(true) as HTMLElement;
- originalButton.replaceWith(newButton);
-
- // Add your own toggle behavior
- newButton.addEventListener('click', () => {
- if (!tool) {
- // Start measuring
- tool = measureTool(scene);
- tool.measureDistance();
- newButton.classList.add('active'); // optional visual highlight
- } else {
- // Clear/destroy measurement
- tool.destroy();
- tool = null;
- newButton.classList.remove('active');
- }
- });
+
+ const button = document.getElementsByClassName('o-measure')[0] as HTMLElement;
+
+ const originalOnClick = button.onclick;
+ button.onclick = null;
+
+ button.addEventListener(
+ 'click',
+ (e) => {
+ if (!isGlobeActive(oGlobe)) {
+ // Let Origo behave exactly as before
+ originalOnClick?.call(button, e);
+ return;
+ }
+
+ e.preventDefault();
+ e.stopImmediatePropagation();
+ e.stopPropagation();
+
+ // --- Globe behavior ---
+ if (!tool) {
+ tool = measureTool(scene);
+ tool.measureDistance();
+ button.classList.add('active');
+ } else {
+ tool.destroy();
+ tool = null;
+ button.classList.remove('active');
+ }
+ },
+ true // 👈 capture phase (VERY important)
+ );
}
+
+
};
const assets = {
diff --git a/src/globeState.ts b/src/globeState.ts
index 87db547..66752c3 100644
--- a/src/globeState.ts
+++ b/src/globeState.ts
@@ -35,4 +35,8 @@ export function getHandler(): ScreenSpaceEventHandler | null {
export function setHandler(scene: Scene): void {
handler = new ScreenSpaceEventHandler(scene.canvas);
-}
\ No newline at end of file
+}
+
+export function isGlobeActive(oGlobe: any): boolean {
+ return oGlobe.getEnabled();
+}
From 2376dc74cd6ea851cdd73e6c062ea274a2cb24f7 Mon Sep 17 00:00:00 2001
From: Micael Makenzius <112689339+sweco-seiamm@users.noreply.github.com>
Date: Mon, 15 Dec 2025 16:14:45 +0100
Subject: [PATCH 20/37] optimized loadTree
---
src/functions/TreeLoadScheduler.ts | 309 ++++++++++++++++++++++++++
src/functions/loadTrees.ts | 334 ++---------------------------
src/layer/threedtile.ts | 4 +-
3 files changed, 332 insertions(+), 315 deletions(-)
create mode 100644 src/functions/TreeLoadScheduler.ts
diff --git a/src/functions/TreeLoadScheduler.ts b/src/functions/TreeLoadScheduler.ts
new file mode 100644
index 0000000..8b2565f
--- /dev/null
+++ b/src/functions/TreeLoadScheduler.ts
@@ -0,0 +1,309 @@
+import {
+ Cartographic,
+ Cartesian3,
+ Ellipsoid,
+ HeadingPitchRoll,
+ Math as CesiumMath,
+ Transforms,
+ Model,
+ ShadowMode,
+ Scene,
+ Matrix4,
+ Resource,
+ Request
+} from "cesium";
+import RBush from "rbush";
+
+/* ---------------- Tunables ---------------- */
+
+const RADIUS_M = 700;
+const HIGH_DISTANCE = 120;
+const MEDIUM_DISTANCE = 300;
+const MOVE_THRESHOLD = 70;
+const STABLE_DELAY = 500;
+const MAX_CONCURRENT = 2;
+
+/* ---------------- Types ---------------- */
+
+type TreeMeta = {
+ fid: string;
+ lon: number;
+ lat: number;
+ height: number;
+ scale: number;
+ rot: number;
+ urlHigh?: string;
+ urlMedium?: string;
+ urlLow?: string;
+ url: string;
+};
+
+type LiveTree = {
+ model: Model;
+ url: string;
+};
+
+/* ====================================================== */
+
+export class TreeLoadScheduler {
+ private scene: Scene;
+ private index = new RBush();
+ private all = new Map();
+ private live = new Map();
+
+ private queue: TreeMeta[] = [];
+ private loading = 0;
+
+ private lastLon?: number;
+ private lastLat?: number;
+ private moving = false;
+ private lock = false;
+
+ private stableTimer?: number;
+
+ /* ---------------- Debug HUD ---------------- */
+
+ private hud = document.createElement("div");
+
+ constructor(scene: Scene) {
+ this.scene = scene;
+ this.hookCamera();
+ this.createHUD();
+ }
+
+ /* ---------------- Public API ---------------- */
+
+ addTree(meta: TreeMeta) {
+ this.all.set(meta.fid, meta);
+ this.index.insert({
+ minX: meta.lon,
+ minY: meta.lat,
+ maxX: meta.lon,
+ maxY: meta.lat,
+ t: meta
+ });
+ }
+
+ start() {
+ this.updateLOD();
+ }
+
+ destroy() {
+ this.scene.camera.moveStart.removeEventListener(this.onMove);
+
+ for (const { model } of this.live.values()) {
+ try {
+ this.scene.primitives.remove(model);
+ if (!model.isDestroyed()) model.destroy();
+ } catch {}
+ }
+
+ this.live.clear();
+ this.hud.remove();
+ }
+
+ /* ---------------- Camera ---------------- */
+
+ private hookCamera() {
+ this.scene.camera.moveStart.addEventListener(this.onMove);
+ }
+
+ private onMove = () => {
+ this.moving = true;
+
+ if (this.stableTimer) clearTimeout(this.stableTimer);
+
+ this.stableTimer = window.setTimeout(() => {
+ this.moving = false;
+ this.updateLOD();
+ }, STABLE_DELAY);
+ };
+
+ /* ---------------- LOD ---------------- */
+
+ private updateLOD() {
+ if (this.lock || this.moving) return;
+ this.lock = true;
+
+ const cam = Cartographic.fromCartesian(this.scene.camera.positionWC);
+ const lon = CesiumMath.toDegrees(cam.longitude);
+ const lat = CesiumMath.toDegrees(cam.latitude);
+
+ if (
+ this.lastLon !== undefined &&
+ this.lastLat !== undefined &&
+ this.distance(lon, lat, this.lastLon, this.lastLat) < MOVE_THRESHOLD
+ ) {
+ this.lock = false;
+ return;
+ }
+
+ this.lastLon = lon;
+ this.lastLat = lat;
+
+ const deg = RADIUS_M / 111320;
+ const bbox = {
+ minX: lon - deg,
+ minY: lat - deg,
+ maxX: lon + deg,
+ maxY: lat + deg
+ };
+
+ const hits = this.index
+ .search(bbox)
+ .map((r: any) => ({
+ t: r.t,
+ d: this.distance(lon, lat, r.t.lon, r.t.lat)
+ }))
+ .filter(h => h.d <= RADIUS_M);
+
+ const keep = new Set(hits.map(h => h.t.fid));
+
+ /* --- Remove far trees (safe) --- */
+ for (const [fid, item] of Array.from(this.live.entries())) {
+ if (!keep.has(fid)) {
+ try {
+ this.scene.primitives.remove(item.model);
+ if (!item.model.isDestroyed()) item.model.destroy();
+ } catch {}
+ this.live.delete(fid);
+ }
+ }
+
+ /* --- Queue new / changed LODs --- */
+ const queued = new Set();
+ const newQueue: TreeMeta[] = [];
+
+ for (const h of hits) {
+ const t = h.t;
+ let url = t.urlLow;
+ if (h.d < HIGH_DISTANCE) url = t.urlHigh || url;
+ else if (h.d < MEDIUM_DISTANCE) url = t.urlMedium || url;
+
+ const existing = this.live.get(t.fid);
+
+ // Keep existing model
+ if (existing && existing.url === url) {
+ existing.model.modelMatrix = this.buildMatrix(t);
+ continue;
+ }
+
+ // Replace model
+ if (existing) {
+ try {
+ this.scene.primitives.remove(existing.model);
+ if (!existing.model.isDestroyed()) existing.model.destroy();
+ } catch {}
+ this.live.delete(t.fid);
+ }
+
+ if (!queued.has(t.fid)) {
+ newQueue.push({ ...t, url });
+ queued.add(t.fid);
+ }
+ }
+
+ this.queue = newQueue;
+ this.processQueue();
+ this.lock = false;
+ }
+
+ /* ---------------- Loading ---------------- */
+
+ private async processQueue() {
+ while (this.queue.length && this.loading < MAX_CONCURRENT) {
+ const t = this.queue.shift()!;
+ this.loading++;
+
+ this.loadTree(t)
+ .catch(() => {})
+ .finally(() => {
+ this.loading--;
+ // 🔥 THIS IS THE MISSING LINE
+ this.processQueue();
+ });
+ }
+ }
+
+
+ private async loadTree(t: TreeMeta) {
+ const resource = new Resource({
+ url: t.url!,
+ request: new Request({
+ throttle: true,
+ priority: 100
+ })
+ });
+
+ const model = await Model.fromGltfAsync({
+ url: resource,
+ modelMatrix: this.buildMatrix(t),
+ allowPicking: false,
+ asynchronous: true
+ });
+
+ model.shadows = ShadowMode.DISABLED;
+ this.scene.primitives.add(model);
+ this.live.set(t.fid, { model, url: t.url! });
+ }
+
+ /* ---------------- Helpers ---------------- */
+
+ private buildMatrix(t: TreeMeta) {
+ const pos = Cartesian3.fromDegrees(t.lon, t.lat, t.height || 0);
+ const hpr = new HeadingPitchRoll(t.rot, 0, 0);
+ const m = Transforms.headingPitchRollToFixedFrame(
+ pos,
+ hpr,
+ Ellipsoid.WGS84
+ );
+ return Matrix4.multiplyByScale(
+ m,
+ new Cartesian3(t.scale, t.scale, t.scale),
+ new Matrix4()
+ );
+ }
+
+ private distance(lon1: number, lat1: number, lon2: number, lat2: number) {
+ const R = 6371008.8;
+ const φ1 = CesiumMath.toRadians(lat1);
+ const φ2 = CesiumMath.toRadians(lat2);
+ const dφ = φ2 - φ1;
+ const dλ = CesiumMath.toRadians(lon2 - lon1);
+ const a =
+ Math.sin(dφ / 2) ** 2 +
+ Math.cos(φ1) * Math.cos(φ2) * Math.sin(dλ / 2) ** 2;
+ return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+ }
+
+ /* ---------------- Debug HUD ---------------- */
+
+ private createHUD() {
+ Object.assign(this.hud.style, {
+ position: "absolute",
+ top: "10px",
+ left: "10px",
+ background: "rgba(0,0,0,0.7)",
+ color: "#0f0",
+ fontFamily: "monospace",
+ padding: "8px",
+ zIndex: "9999",
+ fontSize: "12px"
+ });
+
+ document.body.appendChild(this.hud);
+
+ const update = () => {
+ this.hud.innerHTML = `
+ Trees live: ${this.live.size}
+ Queued: ${this.queue.length}
+ Loading: ${this.loading}
+ Camera moving: ${this.moving}
+ `;
+ requestAnimationFrame(update);
+ };
+
+ update();
+ }
+
+}
diff --git a/src/functions/loadTrees.ts b/src/functions/loadTrees.ts
index aef18bf..9cfdf4d 100644
--- a/src/functions/loadTrees.ts
+++ b/src/functions/loadTrees.ts
@@ -1,74 +1,17 @@
import {
Cartographic,
- Cartesian3,
- Ellipsoid,
- HeadingPitchRoll,
Math as CesiumMath,
- Transforms,
- Model,
sampleTerrainMostDetailed,
- ShadowMode,
Scene,
- Matrix4
} from "cesium";
import GeoJSON from "ol/format/GeoJSON";
-import RBush from "rbush";
+import { TreeLoadScheduler } from "./TreeLoadScheduler";
-// --- Tunables ------------------------------------------------
-const RADIUS_M = 700;
-const MEDIUM_DISTANCE = 300;
-const HIGH_DISTANCE = 120;
-const MOVE_THRESHOLD = 70;
-const CHUNK_CREATE = 40; // smaller batches are smoother
-let moving = false;
-let stableTimer: number | undefined; // timeout ID
-let stableRAF: number | undefined; // rAF ID
-const STABLE_DELAY = 500;
-
-
-// --- Fast distance (Haversine) --------------------------------
-function dMeters(lon1: number, lat1: number, lon2: number, lat2: number) {
- const R = 6371008.8;
- const φ1 = CesiumMath.toRadians(lat1),
- φ2 = CesiumMath.toRadians(lat2);
- const dφ = φ2 - φ1;
- const dλ = CesiumMath.toRadians(lon2 - lon1);
- const a =
- Math.sin(dφ / 2) ** 2 +
- Math.cos(φ1) * Math.cos(φ2) * Math.sin(dλ / 2) ** 2;
- return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-}
-
-// --- Matrix Builder ------------------------------------------
-function buildMatrix(t: any) {
- const pos = Cartesian3.fromDegrees(t.lon, t.lat, t.height || 0);
- const hpr = new HeadingPitchRoll(t.rot, 0, 0);
- const m = Transforms.headingPitchRollToFixedFrame(pos, hpr, Ellipsoid.WGS84);
- return Matrix4.multiplyByScale(
- m,
- new Cartesian3(t.scale, t.scale, t.scale),
- new Matrix4()
- );
-}
-
-// --- Visibility helper ---------------------------------------
-function setVisible(item: any, on: boolean) {
- if (!item) return;
- if (item.type === "model" && item.model) {
- try {
- item.model.show = on;
- } catch (e) {}
- }
-}
-
-// -----------------------------------------------------------------------
-export async function loadTreesIncremental(layer: any, scene: Scene, modelCfg: any) {
- const all = new Map();
- const live = new Map(); // fid -> { type:'model', model, url }
- const index = new RBush();
- const lodPools = new Map();
-
- // --- Fetch features from WFS -------------------------------
+export async function loadTrees(
+ layer: any,
+ scene: Scene,
+ modelCfg: any
+) {
const url = `${layer.get("dataSource")}?service=WFS&version=1.0.0&request=GetFeature&typeName=${encodeURIComponent(
layer.get("name")
)}&outputFormat=application/json&srsName=EPSG:4326`;
@@ -77,6 +20,8 @@ export async function loadTreesIncremental(layer: any, scene: Scene, modelCfg: a
const feats = new GeoJSON().readFeatures(gj);
const cartos: Cartographic[] = [];
+ const metas: any[] = [];
+
for (const f of feats) {
const [lon, lat] = (f as any).getGeometry().getCoordinates();
@@ -87,271 +32,34 @@ export async function loadTreesIncremental(layer: any, scene: Scene, modelCfg: a
fid: String(f.getId()),
lon,
lat,
- species: spec,
- // we store base LOD url; LOD selection happens later
- urlHigh: set?.high || modelCfg.high,
- urlMedium: set?.medium || modelCfg.medium,
- urlLow: set?.low || modelCfg.low,
+ height: 0,
rot: CesiumMath.toRadians(Math.random() * 360),
scale:
(parseFloat(f.get(modelCfg.heightAttr || "")) || 1) /
(set?.modelHeight || modelCfg.baseModelHeight || 1),
- height: 0
+ urlHigh: set?.high || modelCfg.high,
+ urlMedium: set?.medium || modelCfg.medium,
+ urlLow: set?.low || modelCfg.low
};
- all.set(meta.fid, meta);
- index.insert({ minX: lon, minY: lat, maxX: lon, maxY: lat, t: meta });
+ metas.push(meta);
cartos.push(Cartographic.fromDegrees(lon, lat));
}
- // --- Sample terrain once -----------------------------------
- if (cartos.length) {
- // sample in batches to avoid provider limits if huge
- const TERRAIN_BATCH = 200;
- for (let i = 0; i < cartos.length; i += TERRAIN_BATCH) {
- const slice = cartos.slice(i, i + TERRAIN_BATCH);
- await sampleTerrainMostDetailed(scene.terrainProvider, slice);
- // assign heights back to all
- for (let j = 0; j < slice.length; j++) {
- const c = slice[j];
- // find corresponding fid by coords (we preserved order earlier)
- // simpler: feats index matches cartos order
- const f = feats[i + j];
- const fid = String(f.getId());
- const t = all.get(fid);
- if (t) t.height = c.height;
- }
- }
- }
-
- // --- Preload LOD URLs (all species) ------------------------
-// --- Preload and pool ----------------------------------------
-async function preloadLOD(url: string) {
- if (!url || lodPools.has(url)) return;
-
- // Warm GPU + shader pipeline without creating a visible model
- const m = await Model.fromGltfAsync({
- url,
- allowPicking: false,
- asynchronous: true
- });
-
- // <- DO NOT add to scene!
- lodPools.set(url, m); // store Model instance
-}
-
-
-
- // Gather all LOD URLs and preload (non-blocking serial)
- const lodUrls = new Set();
- all.forEach((t) => {
- if (t.urlHigh) lodUrls.add(t.urlHigh);
- if (t.urlMedium) lodUrls.add(t.urlMedium);
- if (t.urlLow) lodUrls.add(t.urlLow);
- });
- Promise.all([...lodUrls].map(preloadLOD));
-
- // --- createTree (simple, no post-check) -------------------
-async function createTree(t: any) {
- // Fast because GLTF + textures already in cache
- const model = await Model.fromGltfAsync({
- url: t.url,
- modelMatrix: buildMatrix(t),
- allowPicking: false
- });
-
- model.shadows = ShadowMode.DISABLED;
- model.show = true;
-
- scene.primitives.add(model);
-
- live.set(t.fid, { model, url: t.url });
-}
-
- // --- queue + processing (sequential-ish, chunked per frame) --
- let treeQueue: any[] = [];
- let queueLock = false;
-
- async function processQueueSequential() {
- if (queueLock || treeQueue.length === 0) return;
- queueLock = true;
-
- while (treeQueue.length) {
- const batch = treeQueue.splice(0, CHUNK_CREATE);
-
- // sequential create per item inside batch to reduce parallel GPU uploads
- for (const t of batch) {
- // quick check: skip if already live with right url
- const existing = live.get(t.fid);
- if (existing && existing.url === t.url) {
- // update transform and ensure visible
- try {
- existing.model.modelMatrix = buildMatrix(t);
- existing.model.show = true;
- } catch (e) {}
- continue;
- }
-
- // pre-check distance (hybrid approach)
- const c = Cartographic.fromCartesian(scene.camera.positionWC);
- const camLon = CesiumMath.toDegrees(c.longitude);
- const camLat = CesiumMath.toDegrees(c.latitude);
- if (dMeters(camLon, camLat, t.lon, t.lat) > RADIUS_M) {
- // skip creating this one
- continue;
- }
-
- // create (no post-check)
- try {
- await createTree(t);
- } catch (e) {
- // continue and avoid breaking the queue on single model failure
- }
- }
-
- // yield to render loop
- await new Promise((r) => requestAnimationFrame(r));
- }
-
- queueLock = false;
- }
-
- // --- robust updateLOD -------------------------------------
- let lastLon: number | undefined = undefined;
- let lastLat: number | undefined = undefined;
- let lock = false;
-
- async function updateLOD() {
- if (moving) return;
- if (lock) return;
- lock = true;
-
- const c = Cartographic.fromCartesian(scene.camera.positionWC);
- const lon = CesiumMath.toDegrees(c.longitude);
- const lat = CesiumMath.toDegrees(c.latitude);
-
- // movement threshold
- if (lastLon !== undefined && lastLat !== undefined) {
- if (dMeters(lon, lat, lastLon, lastLat) < MOVE_THRESHOLD) {
- lock = false;
- return;
- }
- }
- lastLon = lon;
- lastLat = lat;
-
- const terr = scene.globe.getHeight(c) || 0;
- const camAGL = c.height - terr;
- if (camAGL > RADIUS_M) {
- // camera far above, clear everything
- for (const [fid, item] of Array.from(live.entries())) {
- try {
- scene.primitives.remove(item.model);
- // item.model.destroy?.();
- } catch (e) {}
- live.delete(fid);
- }
- treeQueue = [];
- lock = false;
- return;
- }
-
- // query RBush for candidates inside bounding box then precise filter
- const deg = RADIUS_M / 111320;
-// --- optimized bounding-box query + single distance compute ---
- const bbox = {
- minX: lon - deg,
- minY: lat - deg,
- maxX: lon + deg,
- maxY: lat + deg
- };
-
- const hits = index
- .search(bbox)
- .map((r: any) => {
- const t = r.t;
- return {
- t,
- dist: dMeters(lon, lat, t.lon, t.lat)
- };
- })
- .filter(o => o.dist <= RADIUS_M);
-
-
- // build keep set
- const keep = new Set(hits.map((h: any) => h.fid));
-
- // remove live items not in keep (immediate removal + optional destroy)
- for (const [fid, item] of Array.from(live.entries())) {
- if (!keep.has(fid)) {
- try {
- scene.primitives.remove(item.model);
- // item.model.destroy?.();
- } catch (e) {}
- live.delete(fid);
- }
- }
-
- // build new queue (deduped) for items that need creation or LOD change
- const queued = new Set();
- const newQueue: any[] = [];
-
- for (const o of hits) {
- const t = o.t;
- const dist = o.dist;
-
- // choose LOD URL
- let lodUrl = t.urlLow || modelCfg.low;
- if (dist < HIGH_DISTANCE) lodUrl = t.urlHigh || modelCfg.high;
- else if (dist < MEDIUM_DISTANCE) lodUrl = t.urlMedium || modelCfg.medium;
-
- // annotate target url on the temporary tree object
- const qItem = { ...t, url: lodUrl };
-
- const item = live.get(t.fid);
- if (!item || item.url !== lodUrl) {
- // remove old model
- if (item) {
- scene.primitives.remove(item.model);
- live.delete(t.fid);
- }
- if (!queued.has(t.fid)) {
- newQueue.push(qItem);
- queued.add(t.fid);
- }
- } else {
- // same LOD
- item.model.modelMatrix = buildMatrix(t);
- item.model.show = true;
- }
+ if (cartos.length) {
+ await sampleTerrainMostDetailed(scene.terrainProvider, cartos);
+ for (let i = 0; i < metas.length; i++) {
+ metas[i].height = cartos[i].height || 0;
}
-
- // replace queue and start processing
- treeQueue = newQueue;
- processQueueSequential();
-
- lock = false;
}
- // --- Freeze LOD while camera moves ---------------------------
- function onCameraMove() {
- moving = true;
- // cancel previous timers
- if (stableTimer) clearTimeout(stableTimer);
- if (stableRAF) cancelAnimationFrame(stableRAF);
+ const scheduler = new TreeLoadScheduler(scene);
- // schedule stability check
- stableRAF = requestAnimationFrame(() => {
- stableTimer = window.setTimeout(() => {
- moving = false;
- updateLOD(); // run once after stabilized
- }, STABLE_DELAY);
- });
+ for (const meta of metas) {
+ scheduler.addTree(meta);
}
- scene.camera.moveStart.addEventListener(onCameraMove);
+ scheduler.start();
- // initial pass
- updateLOD();
}
diff --git a/src/layer/threedtile.ts b/src/layer/threedtile.ts
index a019fa9..f8345d1 100644
--- a/src/layer/threedtile.ts
+++ b/src/layer/threedtile.ts
@@ -22,7 +22,7 @@ import {
} from 'cesium';
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
-import { loadTreesIncremental } from '../functions/loadTrees';
+import { loadTrees } from '../functions/loadTrees';
interface LayerOptions {
dataSource?: string;
@@ -121,7 +121,7 @@ export default async function load3DLayers(
}
} else if (type === 'THREEDTILE' && model) {
- await loadTreesIncremental(layer, scene, model);
+ await loadTrees(layer, scene, model);
} else if (type === 'THREEDTILE' && dataType === 'model') {
const models = layer.get('models');
From e3aae804c67826a02a2fa7897949cbb1496ce138 Mon Sep 17 00:00:00 2001
From: Micael Makenzius <112689339+sweco-seiamm@users.noreply.github.com>
Date: Mon, 15 Dec 2025 18:07:12 +0100
Subject: [PATCH 21/37] Updated treeloader
---
src/functions/TreeLoadScheduler.ts | 246 ++++++++++++++---------------
src/functions/loadTrees.ts | 7 +-
2 files changed, 123 insertions(+), 130 deletions(-)
diff --git a/src/functions/TreeLoadScheduler.ts b/src/functions/TreeLoadScheduler.ts
index 8b2565f..4d78616 100644
--- a/src/functions/TreeLoadScheduler.ts
+++ b/src/functions/TreeLoadScheduler.ts
@@ -10,21 +10,21 @@ import {
Scene,
Matrix4,
Resource,
- Request
+ Cartesian2
} from "cesium";
import RBush from "rbush";
/* ---------------- Tunables ---------------- */
-
-const RADIUS_M = 700;
-const HIGH_DISTANCE = 120;
-const MEDIUM_DISTANCE = 300;
-const MOVE_THRESHOLD = 70;
-const STABLE_DELAY = 500;
-const MAX_CONCURRENT = 2;
-
-/* ---------------- Types ---------------- */
-
+/* ---------------- Tunables ---------------- */
+const RADIUS_M = 800;
+const HIGH_DISTANCE = 70;
+const MEDIUM_DISTANCE = 200;
+const MOVE_THRESHOLD = 100;
+const STABLE_DELAY = 600;
+const MAX_CONCURRENT = 3;
+const QUEUE_THROTTLE_MS = 8;
+
+/* ---------------- Helpers ---------------- */
type TreeMeta = {
fid: string;
lon: number;
@@ -41,49 +41,47 @@ type TreeMeta = {
type LiveTree = {
model: Model;
url: string;
+ matrix?: Matrix4; // cached for reuse if not facing camera
};
-/* ====================================================== */
-
export class TreeLoadScheduler {
private scene: Scene;
private index = new RBush();
private all = new Map();
private live = new Map();
-
private queue: TreeMeta[] = [];
private loading = 0;
+ private pauseQueue = false;
+ private lock = false;
private lastLon?: number;
private lastLat?: number;
private moving = false;
- private lock = false;
-
private stableTimer?: number;
- /* ---------------- Debug HUD ---------------- */
-
private hud = document.createElement("div");
constructor(scene: Scene) {
this.scene = scene;
- this.hookCamera();
+ this.scene.camera.moveStart.addEventListener(this.onMove);
this.createHUD();
}
- /* ---------------- Public API ---------------- */
+ addTrees(metas: TreeMeta[]) {
+ metas.forEach(meta => this.all.set(meta.fid, meta));
- addTree(meta: TreeMeta) {
- this.all.set(meta.fid, meta);
- this.index.insert({
+ const items = metas.map(meta => ({
minX: meta.lon,
minY: meta.lat,
maxX: meta.lon,
maxY: meta.lat,
t: meta
- });
+ }));
+
+ this.index.load(items);
}
+
start() {
this.updateLOD();
}
@@ -91,177 +89,177 @@ export class TreeLoadScheduler {
destroy() {
this.scene.camera.moveStart.removeEventListener(this.onMove);
- for (const { model } of this.live.values()) {
- try {
- this.scene.primitives.remove(model);
- if (!model.isDestroyed()) model.destroy();
- } catch {}
+ // Batch removal
+ const modelsToRemove = Array.from(this.live.values()).map(l => l.model);
+ for (const m of modelsToRemove) {
+ this.scene.primitives.remove(m);
+ if (!m.isDestroyed()) m.destroy();
}
-
this.live.clear();
this.hud.remove();
}
/* ---------------- Camera ---------------- */
+private onMove = () => {
+ this.moving = true;
+ clearTimeout(this.stableTimer);
+ this.stableTimer = window.setTimeout(() => {
+ this.moving = false;
+ this.updateLOD(); // trigger LOD update when camera stops moving
+ }, STABLE_DELAY);
+};
- private hookCamera() {
- this.scene.camera.moveStart.addEventListener(this.onMove);
- }
-
- private onMove = () => {
- this.moving = true;
-
- if (this.stableTimer) clearTimeout(this.stableTimer);
-
- this.stableTimer = window.setTimeout(() => {
- this.moving = false;
- this.updateLOD();
- }, STABLE_DELAY);
- };
/* ---------------- LOD ---------------- */
-
private updateLOD() {
if (this.lock || this.moving) return;
this.lock = true;
- const cam = Cartographic.fromCartesian(this.scene.camera.positionWC);
- const lon = CesiumMath.toDegrees(cam.longitude);
- const lat = CesiumMath.toDegrees(cam.latitude);
+ const camCart = Cartographic.fromCartesian(this.scene.camera.positionWC);
+ const camLon = CesiumMath.toDegrees(camCart.longitude);
+ const camLat = CesiumMath.toDegrees(camCart.latitude);
+ const camHeight = camCart.height || 0;
if (
this.lastLon !== undefined &&
this.lastLat !== undefined &&
- this.distance(lon, lat, this.lastLon, this.lastLat) < MOVE_THRESHOLD
+ this.distance(camLon, camLat, this.lastLon, this.lastLat) < MOVE_THRESHOLD
) {
this.lock = false;
return;
}
- this.lastLon = lon;
- this.lastLat = lat;
+ this.lastLon = camLon;
+ this.lastLat = camLat;
const deg = RADIUS_M / 111320;
- const bbox = {
- minX: lon - deg,
- minY: lat - deg,
- maxX: lon + deg,
- maxY: lat + deg
- };
+ const bbox = { minX: camLon - deg, minY: camLat - deg, maxX: camLon + deg, maxY: camLat + deg };
const hits = this.index
.search(bbox)
- .map((r: any) => ({
- t: r.t,
- d: this.distance(lon, lat, r.t.lon, r.t.lat)
- }))
- .filter(h => h.d <= RADIUS_M);
+ .map((r: any) => {
+ const horizontal = this.distance(camLon, camLat, r.t.lon, r.t.lat);
+ const vertical = r.t.height ?? 0;
+ return { t: r.t, horizontal, vertical };
+ })
+ .filter(h => h.horizontal <= RADIUS_M && Math.abs(h.vertical - camHeight) <= RADIUS_M);
+
const keep = new Set(hits.map(h => h.t.fid));
- /* --- Remove far trees (safe) --- */
- for (const [fid, item] of Array.from(this.live.entries())) {
+ // Batch remove far/out-of-cylinder trees
+ const removeModels: Model[] = [];
+ for (const [fid, item] of this.live.entries()) {
if (!keep.has(fid)) {
- try {
- this.scene.primitives.remove(item.model);
- if (!item.model.isDestroyed()) item.model.destroy();
- } catch {}
+ removeModels.push(item.model);
this.live.delete(fid);
}
}
+ for (const m of removeModels) {
+ this.scene.primitives.remove(m);
+ if (!m.isDestroyed()) m.destroy();
+ }
- /* --- Queue new / changed LODs --- */
- const queued = new Set();
+ // Queue new/updated LODs
const newQueue: TreeMeta[] = [];
+ const queued = new Set();
- for (const h of hits) {
- const t = h.t;
+ for (const { t, horizontal: d } of hits) {
let url = t.urlLow;
- if (h.d < HIGH_DISTANCE) url = t.urlHigh || url;
- else if (h.d < MEDIUM_DISTANCE) url = t.urlMedium || url;
+ let faceCamera = false;
- const existing = this.live.get(t.fid);
+ if (d < HIGH_DISTANCE) url = t.urlHigh || url;
+ else if (d < MEDIUM_DISTANCE) url = t.urlMedium || url;
+ else faceCamera = true; // low-poly single-faced
- // Keep existing model
- if (existing && existing.url === url) {
- existing.model.modelMatrix = this.buildMatrix(t);
+ const existing = this.live.get(t.fid);
+ if (existing?.url === url) {
+ // Reuse matrix if not facing camera
+ if (existing && !faceCamera && existing.matrix) {
+ existing.model.modelMatrix = existing.matrix;
+ } else if (existing && faceCamera) {
+ console.log('ja')
+ const m = this.buildMatrix(t, faceCamera, camCart);
+ existing.model.modelMatrix = m;
+ if (!faceCamera) existing.matrix = m;
+ }
continue;
}
- // Replace model
- if (existing) {
- try {
- this.scene.primitives.remove(existing.model);
- if (!existing.model.isDestroyed()) existing.model.destroy();
- } catch {}
- this.live.delete(t.fid);
- }
-
if (!queued.has(t.fid)) {
- newQueue.push({ ...t, url });
+ newQueue.push({ ...t, url, faceCamera });
queued.add(t.fid);
}
}
this.queue = newQueue;
+ this.scheduleQueueRunner();
this.processQueue();
this.lock = false;
}
/* ---------------- Loading ---------------- */
+ private queueRunnerScheduled = false;
+
+ private scheduleQueueRunner() {
+ if (this.queueRunnerScheduled) return;
+ this.queueRunnerScheduled = true;
+ requestAnimationFrame(() => {
+ this.queueRunnerScheduled = false;
+ this.processQueue();
+ // Reschedule if queue still has items
+ if (this.queue.length > 0 && !this.pauseQueue) this.scheduleQueueRunner();
+ });
+ }
private async processQueue() {
+ if (this.pauseQueue) return;
+
while (this.queue.length && this.loading < MAX_CONCURRENT) {
const t = this.queue.shift()!;
this.loading++;
-
this.loadTree(t)
.catch(() => {})
.finally(() => {
this.loading--;
- // 🔥 THIS IS THE MISSING LINE
- this.processQueue();
+ // Throttle next load to prevent spikes
+ setTimeout(() => this.processQueue(), QUEUE_THROTTLE_MS);
});
}
}
-
- private async loadTree(t: TreeMeta) {
- const resource = new Resource({
- url: t.url!,
- request: new Request({
- throttle: true,
- priority: 100
- })
- });
-
+ private async loadTree(t: TreeMeta & { faceCamera?: boolean }) {
+ const resource = new Resource({ url: t.url! });
const model = await Model.fromGltfAsync({
url: resource,
- modelMatrix: this.buildMatrix(t),
+ modelMatrix: this.buildMatrix(t, t.faceCamera),
allowPicking: false,
asynchronous: true
});
model.shadows = ShadowMode.DISABLED;
this.scene.primitives.add(model);
- this.live.set(t.fid, { model, url: t.url! });
+
+ this.live.set(t.fid, { model, url: t.url!, matrix: t.faceCamera ? undefined : model.modelMatrix });
}
/* ---------------- Helpers ---------------- */
-
- private buildMatrix(t: TreeMeta) {
+ private buildMatrix(t: TreeMeta, faceCamera = false, camCart?: Cartographic) {
const pos = Cartesian3.fromDegrees(t.lon, t.lat, t.height || 0);
+
+ // if (faceCamera && camCart) {
+ // const camPos = Ellipsoid.WGS84.cartographicToCartesian(camCart);
+ // const direction = Cartesian3.subtract(camPos, pos, new Cartesian3());
+ // let heading = Math.atan2(direction.y, direction.x);
+ // // heading += Math.PI / 6; // rotate 90 deg
+ // const hpr = new HeadingPitchRoll(heading, 0, 0);
+ // const m = Transforms.headingPitchRollToFixedFrame(pos, hpr, Ellipsoid.WGS84);
+ // return Matrix4.multiplyByScale(m, new Cartesian3(t.scale, t.scale, t.scale), new Matrix4());
+ // }
+
const hpr = new HeadingPitchRoll(t.rot, 0, 0);
- const m = Transforms.headingPitchRollToFixedFrame(
- pos,
- hpr,
- Ellipsoid.WGS84
- );
- return Matrix4.multiplyByScale(
- m,
- new Cartesian3(t.scale, t.scale, t.scale),
- new Matrix4()
- );
+ const m = Transforms.headingPitchRollToFixedFrame(pos, hpr, Ellipsoid.WGS84);
+ return Matrix4.multiplyByScale(m, new Cartesian3(t.scale, t.scale, t.scale), new Matrix4());
}
private distance(lon1: number, lat1: number, lon2: number, lat2: number) {
@@ -270,14 +268,11 @@ export class TreeLoadScheduler {
const φ2 = CesiumMath.toRadians(lat2);
const dφ = φ2 - φ1;
const dλ = CesiumMath.toRadians(lon2 - lon1);
- const a =
- Math.sin(dφ / 2) ** 2 +
- Math.cos(φ1) * Math.cos(φ2) * Math.sin(dλ / 2) ** 2;
+ const a = Math.sin(dφ / 2) ** 2 + Math.cos(φ1) * Math.cos(φ2) * Math.sin(dλ / 2) ** 2;
return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
}
/* ---------------- Debug HUD ---------------- */
-
private createHUD() {
Object.assign(this.hud.style, {
position: "absolute",
@@ -290,20 +285,17 @@ export class TreeLoadScheduler {
zIndex: "9999",
fontSize: "12px"
});
-
document.body.appendChild(this.hud);
const update = () => {
this.hud.innerHTML = `
- Trees live: ${this.live.size}
- Queued: ${this.queue.length}
- Loading: ${this.loading}
- Camera moving: ${this.moving}
- `;
+ Trees live: ${this.live.size}
+ Queued: ${this.queue.length}
+ Loading: ${this.loading}
+ Camera moving: ${this.moving}
+ `;
requestAnimationFrame(update);
};
-
update();
}
-
}
diff --git a/src/functions/loadTrees.ts b/src/functions/loadTrees.ts
index 9cfdf4d..d754919 100644
--- a/src/functions/loadTrees.ts
+++ b/src/functions/loadTrees.ts
@@ -56,10 +56,11 @@ export async function loadTrees(
const scheduler = new TreeLoadScheduler(scene);
- for (const meta of metas) {
- scheduler.addTree(meta);
- }
+ // for (const meta of metas) {
+ // scheduler.addTree(meta);
+ // }
+ scheduler.addTrees(metas);
scheduler.start();
}
From 0b4644363679078607723bdce44bdeddb389e138 Mon Sep 17 00:00:00 2001
From: Micael Makenzius <112689339+sweco-seiamm@users.noreply.github.com>
Date: Mon, 15 Dec 2025 18:32:41 +0100
Subject: [PATCH 22/37] Update TreeLoadScheduler.ts
---
src/functions/TreeLoadScheduler.ts | 32 +++++++++++++++---------------
1 file changed, 16 insertions(+), 16 deletions(-)
diff --git a/src/functions/TreeLoadScheduler.ts b/src/functions/TreeLoadScheduler.ts
index 4d78616..7d96921 100644
--- a/src/functions/TreeLoadScheduler.ts
+++ b/src/functions/TreeLoadScheduler.ts
@@ -10,17 +10,16 @@ import {
Scene,
Matrix4,
Resource,
- Cartesian2
} from "cesium";
import RBush from "rbush";
/* ---------------- Tunables ---------------- */
/* ---------------- Tunables ---------------- */
-const RADIUS_M = 800;
+const RADIUS_M = 700;
const HIGH_DISTANCE = 70;
const MEDIUM_DISTANCE = 200;
-const MOVE_THRESHOLD = 100;
-const STABLE_DELAY = 600;
+const MOVE_THRESHOLD = 50;
+const STABLE_DELAY = 400;
const MAX_CONCURRENT = 3;
const QUEUE_THROTTLE_MS = 8;
@@ -142,8 +141,8 @@ private onMove = () => {
const vertical = r.t.height ?? 0;
return { t: r.t, horizontal, vertical };
})
- .filter(h => h.horizontal <= RADIUS_M && Math.abs(h.vertical - camHeight) <= RADIUS_M);
-
+ // Keep only trees inside the cylinder
+ .filter(h => h.horizontal <= RADIUS_M && h.vertical >= camHeight - RADIUS_M);
const keep = new Set(hits.map(h => h.t.fid));
@@ -151,7 +150,8 @@ private onMove = () => {
const removeModels: Model[] = [];
for (const [fid, item] of this.live.entries()) {
if (!keep.has(fid)) {
- removeModels.push(item.model);
+ this.scene.primitives.remove(item.model);
+ if (!item.model.isDestroyed()) item.model.destroy();
this.live.delete(fid);
}
}
@@ -247,15 +247,15 @@ private onMove = () => {
private buildMatrix(t: TreeMeta, faceCamera = false, camCart?: Cartographic) {
const pos = Cartesian3.fromDegrees(t.lon, t.lat, t.height || 0);
- // if (faceCamera && camCart) {
- // const camPos = Ellipsoid.WGS84.cartographicToCartesian(camCart);
- // const direction = Cartesian3.subtract(camPos, pos, new Cartesian3());
- // let heading = Math.atan2(direction.y, direction.x);
- // // heading += Math.PI / 6; // rotate 90 deg
- // const hpr = new HeadingPitchRoll(heading, 0, 0);
- // const m = Transforms.headingPitchRollToFixedFrame(pos, hpr, Ellipsoid.WGS84);
- // return Matrix4.multiplyByScale(m, new Cartesian3(t.scale, t.scale, t.scale), new Matrix4());
- // }
+ if (faceCamera && camCart) {
+ const camPos = Ellipsoid.WGS84.cartographicToCartesian(camCart);
+ const direction = Cartesian3.subtract(camPos, pos, new Cartesian3());
+ let heading = Math.atan2(direction.y, direction.x);
+ // heading += Math.PI / 6; // rotate 90 deg
+ const hpr = new HeadingPitchRoll(heading, 0, 0);
+ const m = Transforms.headingPitchRollToFixedFrame(pos, hpr, Ellipsoid.WGS84);
+ return Matrix4.multiplyByScale(m, new Cartesian3(t.scale, t.scale, t.scale), new Matrix4());
+ }
const hpr = new HeadingPitchRoll(t.rot, 0, 0);
const m = Transforms.headingPitchRollToFixedFrame(pos, hpr, Ellipsoid.WGS84);
From d6c71a5e91f16f04ad7e1bf112a5ceff0d685ea2 Mon Sep 17 00:00:00 2001
From: Micael Makenzius <112689339+sweco-seiamm@users.noreply.github.com>
Date: Tue, 16 Dec 2025 09:52:32 +0100
Subject: [PATCH 23/37] Fixed bug where toggeling trees did not work
---
src/functions/TreeLoadScheduler.ts | 17 ++++++++++++++---
src/functions/loadTrees.ts | 1 +
src/layer/layerhelper.js | 24 ++++++++++++++++--------
3 files changed, 31 insertions(+), 11 deletions(-)
diff --git a/src/functions/TreeLoadScheduler.ts b/src/functions/TreeLoadScheduler.ts
index 7d96921..981e39b 100644
--- a/src/functions/TreeLoadScheduler.ts
+++ b/src/functions/TreeLoadScheduler.ts
@@ -13,7 +13,6 @@ import {
} from "cesium";
import RBush from "rbush";
-/* ---------------- Tunables ---------------- */
/* ---------------- Tunables ---------------- */
const RADIUS_M = 700;
const HIGH_DISTANCE = 70;
@@ -53,6 +52,8 @@ export class TreeLoadScheduler {
private pauseQueue = false;
private lock = false;
+ private visible = true;
+
private lastLon?: number;
private lastLat?: number;
private moving = false;
@@ -98,6 +99,15 @@ export class TreeLoadScheduler {
this.hud.remove();
}
+ public setVisible(visible: boolean) {
+ this.visible = visible;
+
+ for (const { model } of this.live.values()) {
+ model.show = visible;
+ }
+}
+
+
/* ---------------- Camera ---------------- */
private onMove = () => {
this.moving = true;
@@ -111,6 +121,8 @@ private onMove = () => {
/* ---------------- LOD ---------------- */
private updateLOD() {
+ console.log(this.visible)
+ if (!this.visible) return;
if (this.lock || this.moving) return;
this.lock = true;
@@ -178,7 +190,6 @@ private onMove = () => {
if (existing && !faceCamera && existing.matrix) {
existing.model.modelMatrix = existing.matrix;
} else if (existing && faceCamera) {
- console.log('ja')
const m = this.buildMatrix(t, faceCamera, camCart);
existing.model.modelMatrix = m;
if (!faceCamera) existing.matrix = m;
@@ -237,7 +248,7 @@ private onMove = () => {
asynchronous: true
});
- model.shadows = ShadowMode.DISABLED;
+ model.show = this.visible;
this.scene.primitives.add(model);
this.live.set(t.fid, { model, url: t.url!, matrix: t.faceCamera ? undefined : model.modelMatrix });
diff --git a/src/functions/loadTrees.ts b/src/functions/loadTrees.ts
index d754919..34227ba 100644
--- a/src/functions/loadTrees.ts
+++ b/src/functions/loadTrees.ts
@@ -55,6 +55,7 @@ export async function loadTrees(
}
const scheduler = new TreeLoadScheduler(scene);
+ layer.treeScheduler = scheduler;
// for (const meta of metas) {
// scheduler.addTree(meta);
diff --git a/src/layer/layerhelper.js b/src/layer/layerhelper.js
index 507af71..ae7f9fe 100644
--- a/src/layer/layerhelper.js
+++ b/src/layer/layerhelper.js
@@ -22,18 +22,26 @@ class ThreedTile extends Layer {
this.Opacity = 1;
this.setVisible = (visible) => {
this.set(LayerProperty.VISIBLE, visible);
- if(this.CesiumTileset) {
- this.CesiumTileset.show = !this.CesiumTileset.show;
- } else if (this.CesiumModels) {
- this.CesiumModels.forEach(element => {
- element.show = !element.show;
+ console.log(this.treeScheduler)
+ this.treeScheduler.setVisible(visible);
+
+ if (this.CesiumTileset) {
+ this.CesiumTileset.show = visible;
+ }
+
+ if (this.CesiumModels) {
+ this.CesiumModels.forEach(m => {
+ m.show = visible;
});
- } else if(this.CesiumExtrusions) {
- this.CesiumExtrusions.forEach(element => {
- element.show = !element.show;
+ }
+
+ if (this.CesiumExtrusions) {
+ this.CesiumExtrusions.forEach(e => {
+ e.show = visible;
});
}
};
+
this.setSource(new Source({ projection: 'EPSG:3857' || 'EPSG:4326' }));
this.getMaxResolution = () => 10000000;
this.getMinResolution = () => 0;
From 86cb2b749fb9709b1a4365449ded2e814dfea1e8 Mon Sep 17 00:00:00 2001
From: Micael Makenzius <112689339+sweco-seiamm@users.noreply.github.com>
Date: Tue, 16 Dec 2025 17:04:45 +0100
Subject: [PATCH 24/37] Update TreeLoadScheduler.ts
---
src/functions/TreeLoadScheduler.ts | 308 ++++++++++++++---------------
1 file changed, 150 insertions(+), 158 deletions(-)
diff --git a/src/functions/TreeLoadScheduler.ts b/src/functions/TreeLoadScheduler.ts
index 981e39b..2a84f1c 100644
--- a/src/functions/TreeLoadScheduler.ts
+++ b/src/functions/TreeLoadScheduler.ts
@@ -1,15 +1,13 @@
import {
Cartographic,
Cartesian3,
- Ellipsoid,
HeadingPitchRoll,
Math as CesiumMath,
Transforms,
Model,
- ShadowMode,
Scene,
Matrix4,
- Resource,
+ Resource
} from "cesium";
import RBush from "rbush";
@@ -17,12 +15,13 @@ import RBush from "rbush";
const RADIUS_M = 700;
const HIGH_DISTANCE = 70;
const MEDIUM_DISTANCE = 200;
-const MOVE_THRESHOLD = 50;
const STABLE_DELAY = 400;
const MAX_CONCURRENT = 3;
const QUEUE_THROTTLE_MS = 8;
-/* ---------------- Helpers ---------------- */
+/* ---------------- Types ---------------- */
+type LOD = "high" | "medium" | "low";
+
type TreeMeta = {
fid: string;
lon: number;
@@ -33,31 +32,37 @@ type TreeMeta = {
urlHigh?: string;
urlMedium?: string;
urlLow?: string;
+ matrixCache?: Partial>;
+};
+
+type QueueItem = {
+ meta: TreeMeta;
url: string;
+ lod: LOD;
+ version: number;
};
type LiveTree = {
model: Model;
url: string;
- matrix?: Matrix4; // cached for reuse if not facing camera
+ lod: LOD;
};
+/* ========================================================= */
+
export class TreeLoadScheduler {
private scene: Scene;
+
private index = new RBush();
- private all = new Map();
private live = new Map();
- private queue: TreeMeta[] = [];
- private loading = 0;
- private pauseQueue = false;
- private lock = false;
+ private queue: QueueItem[] = [];
+ private loading = 0;
private visible = true;
- private lastLon?: number;
- private lastLat?: number;
private moving = false;
private stableTimer?: number;
+ private lodVersion = 0;
private hud = document.createElement("div");
@@ -67,223 +72,210 @@ export class TreeLoadScheduler {
this.createHUD();
}
- addTrees(metas: TreeMeta[]) {
- metas.forEach(meta => this.all.set(meta.fid, meta));
+ /* ---------------- Public API ---------------- */
- const items = metas.map(meta => ({
- minX: meta.lon,
- minY: meta.lat,
- maxX: meta.lon,
- maxY: meta.lat,
- t: meta
- }));
-
- this.index.load(items);
+ addTrees(metas: TreeMeta[]) {
+ for (const m of metas) {
+ this.index.insert({
+ minX: m.lon,
+ minY: m.lat,
+ maxX: m.lon,
+ maxY: m.lat,
+ t: m
+ });
+ }
}
-
start() {
this.updateLOD();
}
destroy() {
this.scene.camera.moveStart.removeEventListener(this.onMove);
-
- // Batch removal
- const modelsToRemove = Array.from(this.live.values()).map(l => l.model);
- for (const m of modelsToRemove) {
- this.scene.primitives.remove(m);
- if (!m.isDestroyed()) m.destroy();
+ for (const { model } of this.live.values()) {
+ this.scene.primitives.remove(model);
}
this.live.clear();
- this.hud.remove();
}
- public setVisible(visible: boolean) {
- this.visible = visible;
-
- for (const { model } of this.live.values()) {
- model.show = visible;
+ setVisible(visible: boolean) {
+ this.visible = visible;
+ for (const { model } of this.live.values()) {
+ model.show = visible;
+ }
+ if (!visible) this.queue.length = 0;
}
-}
-
/* ---------------- Camera ---------------- */
-private onMove = () => {
- this.moving = true;
- clearTimeout(this.stableTimer);
- this.stableTimer = window.setTimeout(() => {
- this.moving = false;
- this.updateLOD(); // trigger LOD update when camera stops moving
- }, STABLE_DELAY);
-};
+ private onMove = () => {
+ this.moving = true;
+ clearTimeout(this.stableTimer);
+ this.stableTimer = window.setTimeout(() => {
+ this.moving = false;
+ this.updateLOD();
+ }, STABLE_DELAY);
+ };
/* ---------------- LOD ---------------- */
+
private updateLOD() {
- console.log(this.visible)
if (!this.visible) return;
- if (this.lock || this.moving) return;
- this.lock = true;
-
- const camCart = Cartographic.fromCartesian(this.scene.camera.positionWC);
- const camLon = CesiumMath.toDegrees(camCart.longitude);
- const camLat = CesiumMath.toDegrees(camCart.latitude);
- const camHeight = camCart.height || 0;
-
- if (
- this.lastLon !== undefined &&
- this.lastLat !== undefined &&
- this.distance(camLon, camLat, this.lastLon, this.lastLat) < MOVE_THRESHOLD
- ) {
- this.lock = false;
- return;
- }
- this.lastLon = camLon;
- this.lastLat = camLat;
+ const camCart = Cartographic.fromCartesian(
+ this.scene.camera.positionWC
+ );
+ const lon = CesiumMath.toDegrees(camCart.longitude);
+ const lat = CesiumMath.toDegrees(camCart.latitude);
+ const height = camCart.height || 0;
- const deg = RADIUS_M / 111320;
- const bbox = { minX: camLon - deg, minY: camLat - deg, maxX: camLon + deg, maxY: camLat + deg };
+ const hits = this.queryTrees(lon, lat, height);
+ const keep = new Set(hits.map(h => h.t.fid));
+
+ this.removeOutOfRange(keep);
- const hits = this.index
- .search(bbox)
+ if (this.moving) return;
+
+ this.enqueueMissing(hits);
+ this.processQueue();
+ }
+
+ private queryTrees(lon: number, lat: number, height: number) {
+ const deg = RADIUS_M / 111320;
+ return this.index
+ .search({
+ minX: lon - deg,
+ minY: lat - deg,
+ maxX: lon + deg,
+ maxY: lat + deg
+ })
.map((r: any) => {
- const horizontal = this.distance(camLon, camLat, r.t.lon, r.t.lat);
- const vertical = r.t.height ?? 0;
- return { t: r.t, horizontal, vertical };
+ const d = this.distance(lon, lat, r.t.lon, r.t.lat);
+ return { t: r.t as TreeMeta, d };
})
- // Keep only trees inside the cylinder
- .filter(h => h.horizontal <= RADIUS_M && h.vertical >= camHeight - RADIUS_M);
+ .filter(h => h.d <= RADIUS_M && (h.t.height ?? 0) >= height - RADIUS_M);
+ }
- const keep = new Set(hits.map(h => h.t.fid));
+ private resolveLOD(t: TreeMeta, d: number): { url: string; lod: LOD } {
+ if (d < HIGH_DISTANCE)
+ return { url: t.urlHigh ?? t.urlLow!, lod: "high" };
+ if (d < MEDIUM_DISTANCE)
+ return { url: t.urlMedium ?? t.urlLow!, lod: "medium" };
+ return { url: t.urlLow!, lod: "low" };
+ }
- // Batch remove far/out-of-cylinder trees
- const removeModels: Model[] = [];
- for (const [fid, item] of this.live.entries()) {
+ private removeOutOfRange(keep: Set) {
+ for (const [fid, item] of this.live) {
if (!keep.has(fid)) {
this.scene.primitives.remove(item.model);
- if (!item.model.isDestroyed()) item.model.destroy();
this.live.delete(fid);
}
}
- for (const m of removeModels) {
- this.scene.primitives.remove(m);
- if (!m.isDestroyed()) m.destroy();
- }
-
- // Queue new/updated LODs
- const newQueue: TreeMeta[] = [];
- const queued = new Set();
-
- for (const { t, horizontal: d } of hits) {
- let url = t.urlLow;
- let faceCamera = false;
+ }
- if (d < HIGH_DISTANCE) url = t.urlHigh || url;
- else if (d < MEDIUM_DISTANCE) url = t.urlMedium || url;
- else faceCamera = true; // low-poly single-faced
+ private enqueueMissing(hits: any[]) {
+ this.queue.length = 0;
+ this.lodVersion++;
+ const version = this.lodVersion;
+ for (const { t, d } of hits) {
+ const { url, lod } = this.resolveLOD(t, d);
const existing = this.live.get(t.fid);
- if (existing?.url === url) {
- // Reuse matrix if not facing camera
- if (existing && !faceCamera && existing.matrix) {
- existing.model.modelMatrix = existing.matrix;
- } else if (existing && faceCamera) {
- const m = this.buildMatrix(t, faceCamera, camCart);
- existing.model.modelMatrix = m;
- if (!faceCamera) existing.matrix = m;
- }
- continue;
- }
- if (!queued.has(t.fid)) {
- newQueue.push({ ...t, url, faceCamera });
- queued.add(t.fid);
- }
- }
+ if (existing && existing.url === url && existing.lod === lod) continue;
- this.queue = newQueue;
- this.scheduleQueueRunner();
- this.processQueue();
- this.lock = false;
+ this.queue.push({ meta: t, url, lod, version });
+ }
}
/* ---------------- Loading ---------------- */
- private queueRunnerScheduled = false;
-
- private scheduleQueueRunner() {
- if (this.queueRunnerScheduled) return;
- this.queueRunnerScheduled = true;
- requestAnimationFrame(() => {
- this.queueRunnerScheduled = false;
- this.processQueue();
- // Reschedule if queue still has items
- if (this.queue.length > 0 && !this.pauseQueue) this.scheduleQueueRunner();
- });
- }
private async processQueue() {
- if (this.pauseQueue) return;
-
while (this.queue.length && this.loading < MAX_CONCURRENT) {
- const t = this.queue.shift()!;
+ const item = this.queue.shift()!;
this.loading++;
- this.loadTree(t)
+
+ this.loadTree(item)
.catch(() => {})
.finally(() => {
this.loading--;
- // Throttle next load to prevent spikes
setTimeout(() => this.processQueue(), QUEUE_THROTTLE_MS);
});
}
}
- private async loadTree(t: TreeMeta & { faceCamera?: boolean }) {
- const resource = new Resource({ url: t.url! });
- const model = await Model.fromGltfAsync({
- url: resource,
- modelMatrix: this.buildMatrix(t, t.faceCamera),
- allowPicking: false,
- asynchronous: true
- });
+private async loadTree(item: QueueItem) {
+ const matrix = this.getCachedMatrix(item.meta, item.lod);
- model.show = this.visible;
- this.scene.primitives.add(model);
+ const model = await Model.fromGltfAsync({
+ url: new Resource({ url: item.url }),
+ modelMatrix: matrix,
+ allowPicking: false,
+ asynchronous: true
+ });
- this.live.set(t.fid, { model, url: t.url!, matrix: t.faceCamera ? undefined : model.modelMatrix });
+ // ❗ Abort outdated loads
+ if (!this.visible || item.version !== this.lodVersion) {
+ return;
}
- /* ---------------- Helpers ---------------- */
- private buildMatrix(t: TreeMeta, faceCamera = false, camCart?: Cartographic) {
- const pos = Cartesian3.fromDegrees(t.lon, t.lat, t.height || 0);
+ // ❗ Remove previous model for this tree
+ const existing = this.live.get(item.meta.fid);
+ if (existing) {
+ this.scene.primitives.remove(existing.model);
+ }
+ if (existing && existing.lod === item.lod && existing.url === item.url) {
+ return;
+ }
+
+ this.scene.primitives.add(model);
+
+ this.live.set(item.meta.fid, {
+ model,
+ url: item.url,
+ lod: item.lod
+ });
+}
- if (faceCamera && camCart) {
- const camPos = Ellipsoid.WGS84.cartographicToCartesian(camCart);
- const direction = Cartesian3.subtract(camPos, pos, new Cartesian3());
- let heading = Math.atan2(direction.y, direction.x);
- // heading += Math.PI / 6; // rotate 90 deg
- const hpr = new HeadingPitchRoll(heading, 0, 0);
- const m = Transforms.headingPitchRollToFixedFrame(pos, hpr, Ellipsoid.WGS84);
- return Matrix4.multiplyByScale(m, new Cartesian3(t.scale, t.scale, t.scale), new Matrix4());
+
+ /* ---------------- Matrix Cache ---------------- */
+
+ private getCachedMatrix(t: TreeMeta, lod: LOD): Matrix4 {
+ t.matrixCache ??= {};
+ if (!t.matrixCache[lod]) {
+ t.matrixCache[lod] = this.buildMatrix(t);
}
+ return t.matrixCache[lod]!;
+ }
- const hpr = new HeadingPitchRoll(t.rot, 0, 0);
- const m = Transforms.headingPitchRollToFixedFrame(pos, hpr, Ellipsoid.WGS84);
- return Matrix4.multiplyByScale(m, new Cartesian3(t.scale, t.scale, t.scale), new Matrix4());
+ private buildMatrix(t: TreeMeta): Matrix4 {
+ const pos = Cartesian3.fromDegrees(t.lon, t.lat, t.height || 0);
+ return Matrix4.multiplyByScale(
+ Transforms.headingPitchRollToFixedFrame(
+ pos,
+ new HeadingPitchRoll(t.rot, 0, 0)
+ ),
+ new Cartesian3(t.scale, t.scale, t.scale),
+ new Matrix4()
+ );
}
+ /* ---------------- Helpers ---------------- */
+
private distance(lon1: number, lat1: number, lon2: number, lat2: number) {
const R = 6371008.8;
const φ1 = CesiumMath.toRadians(lat1);
const φ2 = CesiumMath.toRadians(lat2);
const dφ = φ2 - φ1;
const dλ = CesiumMath.toRadians(lon2 - lon1);
- const a = Math.sin(dφ / 2) ** 2 + Math.cos(φ1) * Math.cos(φ2) * Math.sin(dλ / 2) ** 2;
+ const a =
+ Math.sin(dφ / 2) ** 2 +
+ Math.cos(φ1) * Math.cos(φ2) * Math.sin(dλ / 2) ** 2;
return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
}
/* ---------------- Debug HUD ---------------- */
+
private createHUD() {
Object.assign(this.hud.style, {
position: "absolute",
From 46e5aa0847df4461053317ebe73280db1980aaed Mon Sep 17 00:00:00 2001
From: Micael Makenzius <112689339+sweco-seiamm@users.noreply.github.com>
Date: Tue, 16 Dec 2025 17:05:04 +0100
Subject: [PATCH 25/37] Update dynamicResolutionScaling.ts
---
src/functions/dynamicResolutionScaling.ts | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/functions/dynamicResolutionScaling.ts b/src/functions/dynamicResolutionScaling.ts
index bdc4cce..eb8d2c5 100644
--- a/src/functions/dynamicResolutionScaling.ts
+++ b/src/functions/dynamicResolutionScaling.ts
@@ -38,8 +38,8 @@ export default function dynamicResolutionScaling(oGlobe: GlobeLike, scene: Cesiu
maxFrameTime: 50,
tiltEnter: Cesium.Math.toRadians(1.8),
tiltExit: Cesium.Math.toRadians(1.2),
- mseHigh: 1,
- mseLow: 6,
+ mseHigh: 0,
+ mseLow: 4,
lowDetailMinTime: 800,
idleRenderDelay: 500,
lodThrottleMs: 300,
@@ -125,7 +125,7 @@ export default function dynamicResolutionScaling(oGlobe: GlobeLike, scene: Cesiu
cfg.maxFrameTime = 35;
cfg.tiltEnter = Cesium.Math.toRadians(2.2);
cfg.tiltExit = Cesium.Math.toRadians(1.4);
- cfg.mseLow = 7;
+ cfg.mseLow = 6;
cfg.mseHigh = 1;
cfg.idleRenderDelay = 300;
if (cfg.debugLogs) console.warn("Low-end GPU detected → enabling low-end mode.");
From 9671a436e0e1d5cab53c658a2ee4cbdd700c236c Mon Sep 17 00:00:00 2001
From: Micael Makenzius <112689339+sweco-seiamm@users.noreply.github.com>
Date: Thu, 12 Feb 2026 13:22:37 +0100
Subject: [PATCH 26/37] documentation, optimization, and clean up
---
README.md | 66 +-
data/cameraControls.png | Bin 0 -> 1285 bytes
data/streetView.png | Bin 0 -> 961773 bytes
data/viewShed.png | Bin 0 -> 225455 bytes
scss/globe.scss | 13 +-
src/functions/WMSThrottler.ts | 206 ++--
src/functions/dynamicResolutionScaling.ts | 187 ++-
src/functions/featureinfo.ts | 2 +-
src/functions/quickTimePicker.ts | 120 ++
src/globe.ts | 912 ++++++++-------
src/globeOld1.txt | 778 -------------
src/globeOld2.txt | 1247 ---------------------
src/layer/layerhelper.js | 103 --
src/layer/layerhelper.ts | 204 ++++
src/layer/threedtile.ts | 514 ++++++---
15 files changed, 1562 insertions(+), 2790 deletions(-)
create mode 100644 data/cameraControls.png
create mode 100644 data/streetView.png
create mode 100644 data/viewShed.png
create mode 100644 src/functions/quickTimePicker.ts
delete mode 100644 src/globeOld1.txt
delete mode 100644 src/globeOld2.txt
delete mode 100644 src/layer/layerhelper.js
create mode 100644 src/layer/layerhelper.ts
diff --git a/README.md b/README.md
index 5df0ba0..f31aac1 100644
--- a/README.md
+++ b/README.md
@@ -1,23 +1,75 @@
# Origo globe plugin
-A plugin for [Origo map](https://github.com/origo-map/origo) to enable [CesiumJS](https://cesium.com/platform/cesiumjs/) globe using [Ol-Cesium](https://openlayers.org/ol-cesium/)
+A plugin for [Origo map](https://github.com/origo-map/origo) to enable a [CesiumJS](https://cesium.com/platform/cesiumjs/) globe using [Ol-Cesium](https://openlayers.org/ol-cesium/).
-
+
## Setup
-See [index_example.html](https://github.com/haninge-geodata/origo-globe-plugin/blob/main/index_example.html) and [index_example.json](https://github.com/haninge-geodata/origo-globe-plugin/blob/main/index_example.json) to get you started with configuration.
-Copy files in build folder and put in Origos, plugins/globe folder.
+See [index_example.html](https://github.com/haninge-geodata/origo-globe-plugin/blob/main/index_example.html) and [index_example.json](https://github.com/haninge-geodata/origo-globe-plugin/blob/main/index_example.json) to get started with configuration.
-ℹ️ Due to loading issues ol-cesium needs to be loaded from Origo-map.
+Copy the files in the `build` folder and place them in Origo's `plugins/globe` folder.
-Install ol-cesium
+ℹ️ Due to loading issues, ol-cesium needs to be loaded from Origo-map.
+
+Install ol-cesium:
```
npm install olcs
```
-In [origo.js](https://github.com/origo-map/origo/blob/master/origo.js) do
+In [origo.js](https://github.com/origo-map/origo/blob/master/origo.js), add:
```
import OLCesium from 'olcs/OLCesium';
window.OLCesium = OLCesium;
```
+
+## Functions
+
+All functions described in this section can be enabled or disabled in the `Globe` configuration (see below) within `index.html`:
+
+```js
+const globe = Globe({
+ viewShed: true,
+ streetView: true,
+ cameraControls: true,
+ measure: true,
+ shadowDates: true,
+ // ...
+});
+```
+
+### ViewShed
+
+The ViewShed feature analyzes the visible area from a selected point, taking into account terrain and 3D objects (such as buildings and trees) that may obstruct the view.
+
+To use this function:
+1. Activate the ViewShed tool.
+2. Select the origin point for the analysis.
+3. Select the endpoint to define the direction and extent of the viewshed.
+
+
+
+### StreetView
+
+The StreetView feature allows users to navigate through the 3D environment at ground level, providing an immersive experience similar to real-world street-level exploration. This feature lets you move around, look in different directions, and explore the environment as if you were walking through it.
+
+To use this function:
+1. Activate StreetView by pressing the person icon at the bottom left corner.
+2. Select the point on the map where you want to enter StreetView.
+3. To exit StreetView mode, press the person icon again.
+
+While in this mode, you can change the simulated height by pressing the up and down arrows beside the person icon, tilt the camera, and click on the ground in the viewer to pan to new areas.
+
+
+
+### CameraControls
+
+If enabled, extra controls are added to the map in the bottom left corner.
+With these controls, the user can tilt and rotate the camera using buttons.
+
+
+
+### measure
+
+
+### shadowDates
diff --git a/data/cameraControls.png b/data/cameraControls.png
new file mode 100644
index 0000000000000000000000000000000000000000..4e413e3ab9c9e83f45b9459393e6cd47df07f6b0
GIT binary patch
literal 1285
zcmV+g1^W7lP)Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D1e!@iK~#8N?VDR@
zR7V)czg*Z$MN}$Ai*7bnsd14$^d+`7i4|*1OtjJ}D){EDCYvT2D72402wrN8*wRNq
z#S3aQO=HA1@ft-RL=2)nBTt1Db
zFYvp;7z+8Kw2+rx%GkDb3w^n41r^NxggjmkZ*ev~FM6os@
zlEii)w>vx8_XWI*d_!5_BQOINF>58l${{O79p`RO3Ny!WZ@#m
zNKq~%R>u6#OQ@u55tWu#u(A`RC>0Xw?xr92)U(7Fl$28WlBK+bSUD;MebCnqlnR+R
zaS~0Kki!x$t60KoUjr${bLX)>=xYZ`g}B@<3f9!c%?y#HUoEHV+B(+P4wUa9-gmsb
zG&CNsc^|7#F2w0*Ap%;6fEFU4g$PI!az7MeukBQTaWI}0ND&h1>Z090Y^R3$9n{}v
z_&1L<@cp}YZD-?QT-hWo1VJ^_@1$_Jmp&~lri{!C-eL{-{=%ZUY&?uBTS`(wVr8sY
zwVDb(R`c!^<6ykr-X7^vMl2*M13{^j5e4HdTfS1dlo1Jum4TpC%ZM_ks93rbDVu6K
zF(M&8zn`kAYsu~Q(BVS|sN>Q_-lCQZ?QLv)#DRDaSF((FhQvxaxPPB=DHu<-43N~4
ziAr&~+)T=~t5P%h-f^XI%YG>P=F3Z+8AyOP`-zJke^R$)@`J$tSly=rMZckPM%<8)S(T1>_WK^kRJ%VnkmgqC#kii`PIxo
zo1NGq1Yj1d+fc|Q3Z*eV2IiP*hNVzFI_)6hZ$v=9L;M8H%C
zUe&4k6Wa<9J90=AQz1B&go8M#3SvhNiDD`QN3?J%sqMG3DK%3ND`H0M$RSbmnL7bP
zAq5`=*s;!Z&
vhdk>3wqp7#^R}Ud2xuV!T8Mxa5(m-$@AmSKzH+o400000NkvXXu0mjfmoQMW
literal 0
HcmV?d00001
diff --git a/data/streetView.png b/data/streetView.png
new file mode 100644
index 0000000000000000000000000000000000000000..528abe0a271521359f94348cfc35a1947933d29c
GIT binary patch
literal 961773
zcmZU)Wl&sA*tLrUw*+?xt^>i{-6gmM86>#71q%eX!3n|Lok0fogrLD0Tm}yedh)#Q
zsZ;fR=f|$SyZ?1nci;C~>)Nqe8j3iWndAAiS0;%SnIq
zGd~5ReP>kGd$kZec$|w=??;j}LL`!p{Sk)F@`DzM?hB&aJ3`{*j!2a8RKoN=IwmN1tQ*T
z*NJ`pn;dy>rfgRS+=5R`Ht2#jeM9ZWYj6bvihj2Hdb5>Wsu7c|6&pPE-Q9&$(XJp)mcrxw37fv*~39jHh=BhySPE!Gn
zT8<;dUK+fS0P*Eh=52K*0`aHLOCf@$&L8Gn0IukezWSwneZ`&Qn9q#mg?7!A5@=<=
zE2(Ksreg9aWBnMYo`xs6aWbRT^moQ>4?@yr;Wg$5n8axIuC0Uid~=&b`0B0Z3zJrz
zSwWkI_L1ZE_^9CU5bC56OR>fdCTQ#knjh-NDk5=EHBdaF*0D{-Zqi1WJV{0%4M%sJ
zxgwpt$gsgqaMk1rY#uFBM5|~nvFbUvO{-Q$?5c64TW5F=?cMdx`OPg2VD^uF^0eJ(7c^(FfD?}ZnoULNT!ukNA?!q)>L*Yi
zQZ>Z@^$*EQLD-=@tpSMl5-EM3L{eu79@PS>_}TGlL5+vD*_9*w)T39K2WFYNBn4q&
zIB0`ES?13?wPCr-!4U(rHdZfUFKbh~inq7tsA-mTB*!0$x;dEe^~-GTfF9Xrcd}Az
zd#U3{{_3Tt2)79b{R}2p-~@g!YC?uW>gED+H9lxqmklHd{=77615o430}PV
z$zDlw6;mS~ucJL7I?-fa!MG>4;a^^G$Ii7lI~zKl#@Ls6H@yF&SM*aJdt}OPE6r+H
z?ZWLv4hSq=e_;86Qquh5;eg2l<}GSmj(Gl=iC1-_JZf*Rp|!JeDc?tRf_pLlRLzFv
zF5|Q}W1U^u@A)r-SG!1nI63ZMb-|Sg7?q~Gi@K`Yl}wT<{;ua`v}J~+VwN8(5Dt+S
zM-Dk}>-I>zHHo`^-}hwMEkW%!uzo1yjPDTvEz7;;MR3?IQF1rlRtsg+^r}hSnHrSr
zd(;kane6cUdCml#>~V`Vr~G|vD5xK2)kX`Qs
zU=lJ4ET(r~@q})(Y*!okOMqH0gK;GQViTj|!rM%xKN75gVH~e3CZ?Rq)C|t~iF@q2
zoY5I(>;X81IdZ}^^|kB=oPzPQHj$6r1>cjWV{VZt0@htxWwm!!0%wFDI*qF%UCPUs
z)?rfqXjySRV^nt$acdw>!;otfS|fmKht7Q~iEge|{+ot5~&7N~_!U07`lw=Lz!
z!_tKfdq~gO_`msGG%PPxf~B@K39;*fxFh(Ffog+Tb#HjT>$55sC>AkNz6m;+a2ym4
ztX=D{vm7`+{Rp8#Kj**-eN*B|EX?H{*MvmyZtRmtvd3C|VRvnX
zlF`k`cFJ8qPlyEh%aO@Bj-+36;nzYJwJayRVfX-|J1GZ&JZ{K5*x?5->2+=;A)sQ+VVkS)&J>ELKqBrp5As=9IteTj>%FecwDe@)l+r
zyz+Ojw=ydq_^YsbkJ$ruRD<@*D2-8R9+W@4SkYXosW@d1e^#biXn-z}liW%!|?_B~!RnIBBL?
zH|qLe7p@~(`{i#u=$EJkiel<4HOgo#O3dkLS7WLVh<3AqlA;*J%ep!-sKwH$5+K0~
zH|fx2yzHkooq~=YUS>}C^1DEI0JU)U6Z-V;(eGco_|BGtS9BKTsiPx$(_Xqso8RsXi7}Bn#ImB5eD+D$1SYU|DqwLX44VO3OF)+tX&vHl(FQ
zwaLy(${WKoiZ~G4+Y6AO?wC&`ne{sw=Fw`nI#czh<&_ebQ-;-R*B0PWR5RhFmz%>n
zO^tQ|=atx6(!E(&T;O}Xfai43OVyL>W*zO=Ml#g(dlyw>nwM&tg%e)P7~3a>VTX*Y->8)zXRJ!1a_Qvb2+Il2
zgC`>*4V*j^*EmQN%%E<+v)!tD_=kpN1e{!4qO^B=Rvg}Q$d|HBC}F!wRj=z5Kvfp4
zDwE@<(I9tm+S{00#H&43$)x^X-BjD6f8#yygoA=$sHEQ)oMQrtiD(!m%#M20lMmo^H2TjL21#P;trspnz)HU2B47djuw(dXi;lsFdqMi8W
zi#WEV`+MD|WGuW1GMVnHCb5NuMoXPMht
zIh?IYHw7jB4|#N*{}-$zDp$dcWw
zP@d;YftC=3~5BH0@)*7S?xb3AVau)7@)Q4!)#te$tA$zSH`
zM!Y`N*H_{%S%|s$u)Bx%NeI$u=pgx2^?Qq*b8@B5Os3<91?=A@f=E#~#%!*PnV$sB
z=dH#=suwXWZ*%m(3jVBSx>s~|&GNz=>U<$yK4G{_^p)|!U)Jb>Zwue!#FoNrMSI}G
zu5%~F+dHr44ws)P8jrAyVke0j@>;{=5-jRWF@Q&W{nCr+sl?=(1|NBv`D63Nc$9XN
z(@-_Y-O=Eip{>)O^;Grr=8+)gp8<^ia?%M`_}|B_F0?j&+)NGM;mOysGarcJOZoei
ztK2`~W@Stfo=Si%Ak>;QyoE}3#E;%*W2R(@-u!#e%!Im+Z%Ul;MZrcUBEl1Zmqf_C
zE+4DyARpV}4ViM%P+4K?^;f~fy}(&f7NvZ7e_W+{UxjPu)?sXTQw2AKncIheX
zi_QKDOj07Na{F|n?kyGj6cd>sp1Kkte^`TrnL6VV>8$E7nZ
zV$VObw{gEM(fGK-Al;da_1N23cNbB5O)RI88SVe=PN%d6nWRPnvH3o&D8sdW9cwRo
zVWnp5>E~bJMqAiHYY+kf@BD8eODZ0yGLP~_UU{#~>}W)Ubq~P&B6oJ-8mrKbxbONt
zfkaYyR-UY)!^r|ZwG?&G_hLk6F$wki`D=hptJGi37hsUe)A)c`0jlquN5vF%9@gHa
z9w)zZ=IU;5!O%Zv>sBeEMfMJRB5ja-0=;TW7P43gxa0_(@rI@W@(E7D`++i~&b^qPZ0Y-x>+e0h+*Lgf%*5OI`&v53Hu00aVP
z?ir%3XeQ>2T#z_yTWU4(PPN-NMuVL#Jdmm=j!9C8
zO!;=!jg+Ro*pD#?p)l&a3z1~|@v{=)XssT*V7z9PA*UkM8&tl!Lw<179+kw0Q)Rzk
zEIf$=pfR1gh6;+?nbPFj4%U1kLsb)as!dI5zJa#DE{c%dn-aU6Y)qP#gLFk)4s|!;
zcAXI!%9jJU;-&FtV<9*C1F412%Ev}rEoRbO{ueEFd#99d8Tm#&o4<13d!PVR-0N2_
zp4u+dLA+z5Vnw;`U?j2`Re#ZsXzxyH$bShbg03g7WbTWwXlx2mT;a>-NAO>F0bdF<
zaeCqt6KspAT>>d`?UymEW;C$tej*Ys)^hd0Sq(P6{JR32`2h91pCmY0bxM>{{=4V@
zj}Lc&tw>HcJiUz{!Xf>^=fOXn1}fiNhHeegV42jm%}@@-rc!XcP*97uu8TwoDPstk
zW37>Zp+L(x$#nb6fQqJG8W5U|jDD^DI(fQLBYAVgmwgXmr@B8^E}8lbVziCBd3z=J
zCRw)5c4WgkDSHRMYo=8`=w?iP2YM)r)jzc6o1jUYsn06S%?gv$A8@*@@62+#$rfcz
z**9S`!Of+D3){cnD&yoYd^=kG^GBzz1(ut62V@6$_Q%xC8uJuK$=5CM*~*Dyb6|_F
zPwiF#?OWt*MkejXoub{kgOm#U(x%Xv`jm;>Xr#u{1H}Mygd;KaPP~<9gYoNVhHZE(
z)i!Nj$b~Y?3nLvo9k>mhRmu*lNK4zQY02FO7@wlB(97p4A|Jj?Z|S%O?Wfu8Pp0wR
zs};|xAwBiBiMBDI)1E-aCY*CN%`-LO>O1)NQ}N^prfO}wziRD7q2?^|2Iw(u{^?OB
zTUPnPuHh%mQ(<0KMmTP(+KxkHw?P8fqI5@wpr$=Fs|*dYPDUw2VWq5E_1vR6gG)O{
zcjvQJ^iq^uOU4b4$`&xC@{CJ(?)l!l2VpYavAsm*!l!B~fH2~u$>@NN@Q0^A*P%vl
zKD`HT&q<un#7VAGfz3-v|B#1X&y6-TP
z{B}ln%6aj$gIM?7M=%&UhjkM^LjKz)?mk|0gE+++fjyXUuN_b*9nA{EbG(Uz3LG{RcmxTjm$=1nOz-1_U%sIv@aS)06fy_
zrXSV6;$6UOdad^;1|iVTaLL5&s6HHK`t4-_^Wml@8iRLig|T8)$s{30Q0hPzG4g2b
zT^hp_qOevS`yn9Q4fBBLqFnsI^ljI#;X%km
z-0spd)P+e5Z3*2i*JD@EIi=iW_zK)T#%`c$$>K12&UNVGO^_&0ri~kRzmlY=^P{j)
z$VVeAK9AW-@6Y)SL3?!2c^$FG)d7H+#c^WLjHwAPA>w`=leBs_Xm|~bXhuZ}L^bfl
zT9O&pw@dtyt9(oe#P$MyR%53GEfm9K$pq8j#=Aw%f6*Hs<_KRZ076!smdg2t=veL7
zH#&H%j=p-aPWgjZ;C~8Fybf_)oF2}mOog;N&es{nGXh+|}QN_~uYKBwI1CiCHZ#I*`zIl;n`FBNQf8<2&L>*yWTOL+h(A=ydhC2~y;|tG|Ty(9_?q@^1fM>Y@iolK_>h6=%o^(grf_AEpdeR+@j$*LZ7y={n
zES@zu;Gw=(YnB-^tv_~qhh)22e|PPq>Jhu4q3L^s71!vc+{W+2;`UXTvZ&Rb{urp#
z>9|Oz`3?gGb{#Uj@krqCue8HH#^&xkY}?!_3zFqsBB`oAImsC3{5!uw1Ro@Mp1y5%
z*&Y7^Xd={zr{cuvrLrk4LP#?cIvChr-
zE+wuJC+5+VF=Ix1`y&j1Qzu&AFCTt1!bnQ39zb00LA|XAHT_6x>r{^u_AdFFXJ)S{
ze)u4BMYR1y^+DuUL-ey}ayEO7!CfumgyD`a36dL|7e=qY5CE2EGU)v$1#cjMJV9Yh
zKc1xjJYR5;AwR9cD-6%l3mT_Fn3s_{-qXCHjNQFu#$u%X8EIm4GGclwPd0V)rGv(e
z0K;uEC3eE@;28m)0t?vVu9oUzdVg!u0c{A-3})A>?d^Z2
z3HH5Cz?r>pU&=M(MSvlcf>vP4lJ&1HeOK3tEEs&od$(*
zA-9v&Ik61wAx%NxI=Hs}YaY$bzp(PB%`3Qaif>hEp1s6r;_SeC`1#=6Q70!I+7RD&
z15-=@gdWTTOpfukgZ&dBTJhNHdl$jRFpj38k9lM!78bv$_|}by$j*k4Kx90H&rk_8
zUf+^YPPc_&sej(pK&M4>P51%9q!nwSbNPvm&#w%`b2b2v7+6hhzbw5@&7r|*7BSB4UyHdCRAF12_+eFq+;ZEI
zH+pw)vQM;V?NnlJGVpUVYE{A1mHlA5{SZ48k#W1t6r4#2ALvZTAIS<^>^JC4*8EX8TH@jx$E2n|5}q?C%;CZZEkh
ze?iTbo9)@}tw@FaM>yTk2Bi-%mQW2lAoaGTN>WWXzQoi`S45dkTTBcL*u@25ez{m9
z3(9e>TLKg~vJ$*Fw_}fOay~Fjq)B6oSTqCYcH{8rHbl6`q~5)1JFuFlGg`4@4;JJr
zMta9j`3XkY6bod@TlBwrSa6(JMOYkm^R{qM(IA-Nxa*$5s$N**t3N_Ycd#Qhvq5K8
z=Fnpd-uIZh`Z^PK<%4Y{=4O1H>q$`O39SC+WV7y&J^bMa()H(-E^as56he_Q?kA+7
z&wZkB+IYGRN@rhQUdBFgJgMqNsL4tUd~#Uv*{S+T?IK&YAN}rasKhZJwRgM4;qRkX<;>-TpJiehu5hwd^&Tb>gnF(#>7Sng2ez_|u2JqBe0#vh%}Ibk=^K>8
zsKbM1tPidauL+T9Z~YxK98i0`wj^aLjWG-FkINzJuE9(9XWo}Jf@b(H+t)PwQ8_&&
zlq`P^X)eBhpvIGNbd)9E&7>Yq^-_>`*xHi^k~Ob?D_qM1DB5%IwP;Hl#nF(~^WGa3
z{VEQ(UYgXYEt&l}-f0!nH9Lo!?qzf&#NJx=GIANN`4rr7o)4?Nn})`myA@vidKL4F
zx&QU41P6DLQ0v0MQ%Zy(FMf!Vvyg2|sl5v$HU8NFj!W*GF)+Iiec})bw5DU
zu~S%SsBU_DyrROQ!fc#A)6NhPv;W1bcg`~7+c5XfJ$h_nOy$mwKH4>Z8+oR&%o}a}
z-3{O@|ES?{OGw$wm~;SGELoUmu_;yTGB>k%cY0!aH#R8PA5*lKPI*onKm<9I;+p?E
zuZK~GX^}#+y|SyMu#;}rRs3_sNwv4?I0g#^(1aT4e9J))7tsT7=-R}4s(AT3C)vTr
z!3j9tmF@feYu#D77&aC6#mGj@O5(ogE;?}YTJa`3f9G!F@xiV98|=qY$!@A-4@1yy
zGYtj}d`%G&+lH;`JT`obh)NrOo-sH{jzH;V(yKVG(m{E_3pItbM}}%VSl^<2
zOCfmt64?{U8YF1I$HI?B)28m+@{n&`H?&!U`#Kv8(ou1Cn;IL|H>cKtJirRS*``jcW7qI+(L4%%pa
zJ5lC`X9jH~(sTd=vcq`0IkJ@HwdC^vcx;DqBjQt>f7vQz+i>
zv{un6f{{Y=Is7s1?j^Gzu-3fe#_k|!i2BRH)8+Mzm_^w>UPpyZ=OHa>g|%{o-v@D30;32GmsH~AVHc9j5NBU!T|LI
zizfZH4;Q7HcqHWf>%`>PEnS9u=}0czo`v$~Qh|{Hr{WP_D(hRwe;Z&%;R;!c9##!K
zZ0_U>7=pSxpaEtP$v+0S)7`5D^%K>E;bIgDggrXg1ZO6XEc{wMcJLQH)N1`e^0wfS
z1){TTM=z~#^|8({+luuJQx+9}9MvX2BnwBYZDjUJEVK4|VcN}5l@y#_Rg=blPD5WS
z9g$$dd#g9dY-TLO1A(nth~OJONNhIqRHCbXyKDR~FPE!(Y;eKAtax#9FK3z~v0P`+
zYE@-4H%Tw6!89D}>*V>#tU?t7AGdDeps#XRnEJ}G>f$}`mSkuTp1uuE#cOkHX;JrwbZKqTk6zYDmE{R}*diR4Q@bu_%`2~a
zBTd+eHd+R40jktr@jiurwUX|faPCts@A*}}`kE^^=o^zlzKzGYzMI0|B4Od*Mt8+Y_aS0
zn}3bDV7BcedR@gir7wDQ&7V|KD@d%t|hMSvhFw5P}9zOlcf
zsJ7oGgS}cNxSkG{Yg1!>8@O)s`p#d;=A()Y*6ftL27ks)3zW$XukQpp82I`)i*GS~
z0a?r$zHK;%Gm6uY39cdRJbB(7!@pe5{JQ@2NmxRI)<*L0sqw#lic0csK-zDnT)|TL
zcpgNphs)JBIxw+PW!fjx`?xckDXV)t-Yg-E*>`Wr{$w4_H&xF1e|xR}tL$b_^O8~O
zOg49_uSa2_g$+Gkr;Pb`0R|R=9LSPBlcs*tc*KLwnLFvyLraTx+pMpA*fjTD4vXjh
z(gH!JMXUOOijY4K3VyF>lH^VPnHNoOXseswjbqOkAy3XG6jYz2gc^R>Gw{#!mc!blENe(5!AlbB>f1PV!)G80NHD#iSM8Pdox`CII>nr#saYSz
z=2eZ|2OcgCmAt2!Y#{Y0G6uxl<}D~T{8hj1UNZzR)-f8JaHgyXr5_6rs8pP8V0e^t
z9l)U^nKvf){pZ$90=Al0TFI1KY(o<+bin1T=6;}o?x#HgeKI7Dt;O0D%%*#c$@BZ_J((s&5`3o~{n(7TASAA(!D?
zkO++TCc;uu>~#q*IHnEQOVIPOUXNwsTn$<`U$Xt>s1F*uYo-qId!4@)%0Yo)y`BoQ
zDQXo?{vJ+RZtD-8U=I=J5FmkIg?M*!div$R(R{6Cj=XktzjnJEEG#Xwxa&2D(O&bv
zJCeM05~qn2*8XQ{``E??TGL|g3%NaM=DinkDP(~Xg=+zpMC({F3vMkh#bV;CA+xnnf6*l^%&nPW(vVb)Vw
z+SnEP0|?;6y|x4eAofU)*1U^(2gxp)w=6L^yiXCc9EHuQ^>&c?dhnG=K>m2cP3WV-
zJW7N;*|(^&^E-$ir37jfzE7^Nq*WvU1{uec@x>RXr!Bsw5HF%^JQuH
zDq|=TpJG@}xLDDC6qp~y7UE*6@uw3HGy-Rix4Ottzdt2G4SH;$E60)^6NB!jyG{0jHYAfEG*6>Ka_05Rl}I4Q
z1J~D+z6Fr!I?LFk=<812f8EVtr%3plo(FLKd^7t6CB4J0>AU-?(Ow?0$6C-~E7t)k
z^o2zYZ7yr*>eRV)p%Cwra(lNBsm4@c4O9u!l-wfd($5%OfMBqJjk?|;x#a!HFlyLl
z&{2>dx2Hywn^S>5Y}7&mSpIkP51iQ5P7b?(ba6&6=VTbE0bM~>FfeSSv25Qj>b
zI!sMA4(Jtf%{f#RG9b?WDncaJ2FWV~;H2liNcbt@&TrarXr;Rs3zN-#y>>w?FuMRU
zNB!7<&dh2Hc_N&((Ak2s*{s?@Gf*aojcDp)uqQyLB1GR>FQ*fBi_Z(?_l5-LE~}
zPlO+mPV)7tlaVs_)k=`lxNdmkCPtcYv_^QO<`Olfj8mHNzE?~}kaA4|O*8o`4RT_#
z6oc^7h@*mH@IG}MKI{TFW?JOdl=8WWJ`lfj7
z@0>+P-JD>!!MyP4T0TVmU87qf^62XjSz@kfwC>t`iaz|GU9?6jH1!tt)o(TzR(gOY
z4zmuBpnQQ*Nmjl%Bcf`bYHvf23jO9EZ?HG+V(`%Mo=Wi!Zy#U(hFkJb#uVOH_ASkx
zzob2$ka4#a4gV@XvoD1OhPkey51#}bbe_MW;Fnes{u^}b!FuA4vQ?U@%Ak2dIS
zylfC8gc15jB8bm1Tv-ry%v@s*R{>6ZCBB#l98~xS^oG-Uay*rqHecjUezSb;4*`$R
zvd>Xs_!3sNmbul8vD>VfB~HlgsA0#a*quOVybns&=?24Y}5R9j3*K$c(#CZ0PLGCaoZ{y}xVa+xlEDdd#p!0Jqr*CSzs4
z7uk9=F3P+J+RMetj8~+Y#fcEAZR}Ji?7R%=YP(;y#p_
zd^fpJVac?32lnc1z+ZLA+hjY@2d2Lzj~`4zvp
z3qHxsrovhMlVsf=)f${B8+np(ZFr%wBZYP`5=s+e@~mxvS9g%nK8ietuyQwwr|$TF
zrO5xUXPp6VCCqxo_eFC2IO*X+3YNP^#*?V@}xxN*)edzl|Lfiq}Xam}n4|}*)C;iJM
z#`c}?iU3Sg@Irf
z(i^8}%*l_1Jr(nlS9wNo;kCH8zIcuXE7zexN4d9RuHmA`M&t_X`l-yejafu_?Qd@O
z&>(1`NfMtM0wH=&lkt94kLPD}S6X
zH*&a@o8dD9sX>dMSdTyLdlPd6mpDH6ca;&?*hVGe{l#w1G^Z}%G#HEN>Gnu&nYAji
z@;=TiUE#*{=eR5$W_R#*T-(-H^dAH~
z!$GzT3_fwjk!^1!BmXAA`wa!==L8(H4M3~wQK)wf9&o-n-BT6ojf^$wE`Ql+>kiv|
zT0dao9hGHeZtq`bEx3zuq9s1z9S4<|KX@*AJ71-?OBfudg7FBH^#O!~kT0D~omWk+
zsGA6`LPyau)38CfIGjsQjrgAw>~Qvb;Q~V>C{b+xh336Xn+9S>-T^N-@E1MJ2WPMZ
z$LZgbtsCF+WXN0gN%x(h0uihf%>Tt3*4|uR`bx^oMqF|@nL5<1_^b!jyYWHIYZDT*
zZ1rrtu9t)xiWGc4`7f#1?@eDN@10*1%w&v+W6^IL>UHDwet^k`lt2&EDhQo|Fz_5r
z?WA`{q}MR6E|dQ#5>UZMhRM^Ik$=
zTR_=knxTk+M);qp-M`;r*AGv6$gDT6{V^M^QJ;1pc`v6eh2F+?C9?T2ZoF$4`CvpZ%=H+j-4l0+C)5Tx=i4;*
zpt{*EsLdZ_COCnk98n5c1CDtUM(q!By6v5cW#90ts(Zh;8;jKbs5uWJkr6eX)mPa|
z9=9XNE>gP)+JZpL-kZW}*%uaoyvJ1NeZS*~7wKZoa4wpPxE#ECJA0aHMBaRYy;TFa
zIhwMxE!Mthw^5&WwhIY%x_Ub6LMRvjoauoWqi^)q42DFC9=@r4c)H1N7o>ZHCOst<
zuulgxd1M}}5W0xFDBOA8g?=e$cMrhfKEDF{el<`W`Ili;G6a0>zZ|_Ei;*y7tHOA)
z7s|j~3+EFFy{x;dzz|cxVas55(m{c-_TPSe(mVH;Z?f6mQ#1mI)%OEeP;gA^fm}U=
zb$s}XUqS2(+|n
z7H{!$2m){aF*L(dom|W=TF#cUkcdIbx9YP#8dpKnNlyI!$LZKkWa+XWLg7>M0j;k8
zcBJ6pbaLxR$rNM8=ySjiCo7DACTw|_ZYUkf3hmZoniz88${4cSjeFSz*SzKNYrA91^rE|%fHfuht(b^^@`
z?W|2#BUC6|En?eWOmdP)|4`M(vE(lap26E9WtqQxL+NjQvBF&
zlkX`OCAk_QdfO9bq_8-aw=g$a)6qa#=xrc%)nR)KLwl17T52R%nMvH^s(}u`X2!kn
z`YOy2n>Uf$`JCIt#YmtTau6om(50>cqp8p#Pdj9vvNFgoA}898%~
zR`o6;Jtbfdh+=h#*|8P)h!j<;NvlpV3{d}ktTh0GaQ0~}4FKK;*
zFux?pHT|u`GE2|FcsaKL#z8-n$zkm+07upjX8|b#YwJzqrMjqzxP;Pej}B6)SXAnl
z`%vt2|KCZ+-U|O{_}}*c%0q3f;ezn>$76~LYar=V}jxf5?#0lvc;yH~;jFE|G&Lx(_TQ$S(Y{>bzbtWH5YkjYh5x-K;JugBg7iZUJZRn|8kI>=ii^wTEdEyW3pMLpE&GPTTj
zw@<5Y#Xgh8i?wg&=hYCevi}$jjIZuF^HNcwJ1}l_E_Ldq<
zlcgSYZmYU&2fLkoAbWa2o4P1(bYxB0{CMvRo>#j+iGba^!C!BvzMjd2JC=I?NCuUP
z8yvZC*pu%QzWYDWwf`?DcNd`jpA5{$ZRLH|_SPp}Iu3N-T8@|u;6EeS{{CCN1_YQp
zT5j|Fx75jR-r0G7%f4f0qI$5su0w_M`R9$NkE66?p_ve?kLeN(bMn{j&_{7dQt)Q*
zU~u1K%#I)$6dnqPTqIe%bnO2G;qEs1=j&N1O0)jds$76Tu2jU%F;Q4OIe;s*Z`nnB
zs%rGBMO63eu&=W77ENp~DhNzB?=&Q9`lg`-7VwWfRz5D|Ouya72pRbepNX$UWdC7t
zM#R->7#6q!9|zqC9CdBKW3I@I&6EI|TCAoLA9bg3RF&OkaPQa5E%5TEr@0URLhOaK
zu+(h_vMixBa1yfaM`YX7h7r9JdAK>Ki$JHvaM#~AuMVEhcb!dUQ~;Hj6>a|V&^vaw
z=Ggps@XUy(Aj2!or^dkOuNEsvR(ozcGwBcNSawU!LdlrY+*f(dquM3%fI<;=P$5Rr
zMQop8NzG|6BTm4kTgeji{Z-RlftdBeq)sSDTBq&rj_@@THew`EHLKw6u3n*_vPNSh3v-Wdt1Uap^T5pk8;A7t6qG#!j+12
zC4P~~35!+fX)afcilH{DdVak+oT_BBx~uc*g5lNNyj&g`p)b_$eQ|jIA%Ty>wo12X
z;(nSO;t1?UJ3B_UCF?S6nq5BF{qBJzHOzf9FghvpZ}CHcw(ZK7wZV99+@n%Tf?eV~zAZPmHR
zCio(D7OU{N@D&~CfLCUe@;sGEp#3tG#QyG~isrs9&{1R{P~u*rQW2$Dt$tD7yj4zP
z3_;Z%a^5D|)rh?PUZl62@*@)+G&V?hKiRJDB4IW<^!ZOY#LU&Y`;nS@KK&$?{*BwW
z2im9e-hwe(ZCBv}`ho3`o}xrTL3~^T($UbhhR_(*flC@ea$HbW?#}-nn7W8ic#L8c
zJK)igYP8Vz8(LI-2#iw%=2Q(Vy$R#Pl
zZ8728{xtG_KEU0|Ym2?`nb!=4D_D)?IzolC=ESykCn#)Nf!gVAwAsMW7H{wibN2}x5|q&bVRbVg<)a46qK~2gzF|hY>UC+>k-l<%YOGGU#=F;_N>=DP+XC6Kx$aXsW=Dkq+v=
z{LS5_&OOEe)B{o8!tILVHy)+a^cEy}$!(}3N6;;PpDq&a50}s}o*GPkpTrKEljXN#*ds}Lb6+
zbmmJm>-IcOy5d;$?qhBD)jjKUtZ$qrZWfR?WUn;#P~GIYA
zgkdRJ6hzEfVG1jRVKIweNS=C?$3_KTDZ1wu4(B!8*
z?7rLb7yz04bhyV)_vobzaCVR?KBt9vhDx1oW!q`dZV>_PrWVWKU(Z@m-;1`1>ENx^
z1N^gqwnbewz&^*NA7XZWts>xtpDpL?tzE5}jmSBQ#q{UuHy4eU_|O1u#pu$Ac?=+>XBGL#nKmJmWE~7an;bgf(b7e
zwg$2|8=I;OeV@FZ&uwWbMoXWxiQf?eaHihuv9C_r^q49Ode1y>dyc5xR;-yB
zoiUm*X8^IPIXFBu^KZC%EmreA#bo_jYa}*GY5@On{7t^q1%g)MXd&PESti`3Yxj~1
zd-kQaoUymX12`Emcx_%W`CUo`b(ZAvzFX+S6wKQ7dwK>eo}ADT
znExeqEG)P_j94wFqMv{%^=BYem|6H@3eqM@&~=2n8#6KuuO#W3Y|kC%?V!pUulyrc
zt@BcL=685$p8dsnHToW(H_10HQF*0U^u84lcjBTl)*_F*f2<9u;1X2V#;k&%LH#Hr
z;ufCUNU-AcduNBAg|));9Er_q^>M4K_vs0#!+8809Fjs7#kI9eG2Prj7xIfYIfYBi3;aT1P{)dD-H;EuUiobTd
zlrGJ@8~84czTWBrDc?SUMdN|vJSC11CV&UQ>2}?Yd%q~W28Z$7mwcKp4qor08yXxz
zA;y2e2KPV4&n4Og1m9oZk1d3j9~kC5ga&$=O^nYWN3To!4Vkr>37XPS{_);`3AF1o
z!hX3u2W=&eia1_2V>VmLAT
zomjji5H^87@(F#E!`(_4UWsW|41XK~i7U_U9iCEhSL<1{OjJ*h!*gBj!9m(Vzmmh3
zBwpHYo^AwJ%ar&?>w~7+QvY6Zh5RURV5mySiL~#xvlaH?5xdT-Ko7YTH7`?HyGkwn
z*0ENP9b&nrs9CC|hf)`TI!ZzHRPn%{51m5_(W%{DS^KP7Zl7@K)aI-_S(875-Sven
z26A!%p}rgW^A0KB;oAhGfdsNG30M~ipeThFaRqbxUVPQ^+YP{xjYIGG1(F-z2e;&9K)Mwfrvp9)1Mtq-Y%4)=v
z3mOk*@6P1w1Mu3S1=H$+BzWn0kn2u;#(h+pxxYT6h1h_bhkuFZr?R`T-lM{pHQu
z!L8tnfXtL$OSTA+JCxy(FXr`LTIA=&Yg!vR?P12)L(){3KrUHZsB!{GaMtuT!S(RA
zV^*yx1IJ%J1cq!t)bSzhhPSRCNZi%FfMxQyQ|6soP3Z9Yc2uDAJ8|Nq5cA
z-7P6y5{{yTYk*Zunj
zY@$clvcFl{WFVODW6@~Huf(CI(#htzLPU;VIG7^4yNB2v5bsC_+7)a1z7`}8xpMWRi*<{_Z$Oh28OJz?o0G6Oczs?fs{?*>-CwZ6lN`pSt<5-Iz%LLR2Y
zFB(jDE&rQvmMDUDL2Xu@|Cg$vH~PkWm2!|(t-2yjcwQ#0hd5YhPeOLnE_x({42}?$
z{jKlN9T)2eF#mzi%$$2vw^9#pwPLrO%_iehPEU~x3t@f#C-q#mpaNry4Y;wW6$>^~
zZ%xzW2%7A#wxPFOVeKcE%TL@1KL13U`&X3@Z{FuFpQ&y$^++kSKR4yYfma?Q=P(3C
zJ!9tePQN*O`fdwtUDfP~NXTbM`Nj@LtOv%D?t`h_DU!m&Jcx)ia_Nc!3G4QqJylMI9S(Q*a827N4qndJFlk8QK@
zhMg)Eo&uS}pK3(?e+-@}8xRh#2p@THN(Mvm*idGxr}}N}gYiPnzS`NH|Cg)^XzvNZ
zABN7CP-+Za<5qPm>#4qSu9%~y{`~AorPY%qt6;3QY|WVJz<;pI`!FZ}+KCcK7%Lx_
zCovVxU%
z*Yj)okK_v#Vk+A_WXPND%B#
z9Ep_?YL!4vAG22K)7fM9OId>SGl2vm`Lbjc%TLcR!fyp)MnlqAt}ba5c1BJSj4P;g
zt5DwzS+fX--2H3KO6b?&-qB$+{o0ER{ApFJW&OtRQi>%VJSl6jUT@w
zTF&a}*Eg=SQ>En@L6;ocQTC2UJuJg#+l3-4FtYv)b>ItK0>cgY!@MjVr&9zn1l7@Lm7T1d
zgp7nEmta_aRJ&9Nt%KB%Iq7HKd`ZOLkk!;-$7*&;Qz#h+-6qr7g6*moH78+a!Mw8a
zumBq}%opoNd7DgUi6a%lYc9G{TGAL7`WxIOESZC$(7pOTt?3(^{6t;T>7j;=jx0;n
zkON*b{z>1GH|~7x;pxJ{N6V&44JQ9h{P_ABCMBKhrA}MoLTxY427XFBdv&ZXQE{D`
z7G;UY*!wbZNJRB5om643H(kd!taz~x^_nVplQBsJi(*(#NoZHUhQSWOQW^}4l3mXOJM(v6S)g5A(x)|
z)%^6+)%(WAd8GZ<K%YLCdMsdK6`)5wbM
z7UnP(fyMhPlw1N(`0^X$9}?sf4HSBc7;(yVO1fK@qQNnFosAAf?eu<~wbq%lA{>kM
z4q$l9r#Gu1(q{
zsm4-Ar)vnXRtU5VkT0m55pkf4
zTI-^`Jpi{A$pjT@)%H1;kId~$_KWZNpKhb@cMPf`8*wJfSei`Mx($l0-?a#rUiR?UA0wxU
zLyYJCetknF+X^*|pRml@Yj+?&bPWndJjUoUKK}TIguNH>%2Fa8%Z98!7&~(1SgUU0
z5sV4UmMh(>!f~hnXAc}
zm0F>t4=69B(BSuZGM$?LY05X`EQE{QM{Lf7`uU$QYsO^jnNA+HKeh4GmD7kAH)gW1
zcXv>iX-1cxSCNk%?Au-r?}b{<^ot2Pz+Vu#V?OgWBH^h}Xj3l>xETH@vS-ja9~Tqodi)Wv>KX07
zR-f4>HS4R3TmKG;oO}zJbffdZQmCHWMJ{|Md~p5dbAU@MBHo5@5Ur5*)^Fjtn&va?
zLB04N|E-V#3CN{-sWV~PcF8p@
zf!ftpy%i^*X`moU7$nbNHSl9~o+GKCCUMDV%fScsAunQX$5T&-vG$d=k5^I%0XmDx
znm0}#*2kG7wSFc$RHaWQ%i5&lq#i>Z?btpoGYiy^R{o8Ut}Zy4x8?C)ol;A(IU~8&
zp0*=(h5a_*;k^FJB2OineBSKp?pOOS64hM}9hU-tcePKJw|-E*Ns=~1odJ4>7W869
zh`x~^$sY7&)1%9fUnLwu*x0bQd#5-7!MP7M4P;f+tlG{z^cT!;?SuiKo{)-|fkCIV`TajMA33BUgk
z7_($SEbo8qQ4802CWfN&dZY$|t>B`Q?zXMtR=o0#Rk^1XjkDl>qRw%NpCieLK!WCX
zL8^ObJ?;0-FJwD^qZc4z03$(EHqeBn8>hkHr*el=1o!W52s>e;=nI`)+pk)Bi{8%C
zdJ8;~+uCW^e_FsQukZ?Ytd2mjeAmY2rfv?=SLKSvD79|R&${o@X0b=?w6>;QdkzzJ+#UU4#D@5lB<>YV~8vRHE+QURp_}#_f|M^<5oI`bqvUjs@J|{=ZHBA&H}R
zv2FZDr|&J#El4~ha8`}fg%VrxD!@|LKLT-ef&S69BXjN{tciH${^cYdqRVk2l)N5D
zip=Bbjg#BKH;=Vm?uLH1QqR&>kpq96-@83nB8pjtG72i2F)|joBeKbktd6dEnmxw1
zt{6{7^bS5h<;WBnP4CruS^SIU%URXJW0SBvOpB&5!UbZOH13bG-^M)DjL-)#lBN{_
z+bwhSk*>v7;}TEHP=6@IOjxq1{N{6aF-p0u3Kgd2P3HEV2AnvZW+H=x*Te5sB
z3~jiNB5?ul?L3*PTb26_jBs!S>&M|LkTIr&_%(Tsz;|&+hROLVeKCCu`koorD((n
zSq8b!JJXsfJyO`VvrN_y=HT>w9;Fvbib{_{n4A_g>DHeVDtun@e|r32;Q-g}GD`c?
zCC+xLZPdfIi%G+EtSF*8yUPL?DYL^oq#|#-ifHi*-6i6i`QFBWH}rwcX3KY{z+HL*
z*V3}q3?xVhbv4;l4v@#Uiv4abqZYT1U|^O
z0y8;Ks?_@9R+C5O$ooBq+g@imMNBj2(U4IkIbs&;B+=w*Oxm00V*C^3q$yN+F$s;Y
zx-f@yKkVO{Miu|AbsU^~x(55--GyXoo05j+@a|6g@KmQBX6C?1>jJc^a9q4&;+fCG>hue6CtGi2Q-@s;ZdcC200&ca
z;F3is?a!jKATNdUj_ByQxbfxIyg1$q&rm~ZMS`xugktiN5O&VdjR0fY9xcq7ZAnk-
zS$_q!B;DIlM862LQ9}`Xdp$jbjvEH51}6ToHR1XOI=X0){cRy(kDxMo**g-s%51Vv
z*B|I8sVT|R=FnQ`%{tm$c2|_nS2TvxqcrTdCL2hI91?%@5v86c3Z|yA?u^Ws4i<@i
zi#S5eqM;Pa{gc}P@kQML6;Xan3e|nIy$p-8e=_{I35c2t-KF1w66|7#Q)krcY!Qbr
z$PCGOS`al9(K+>j)cw{E(qq|oK0~L6LpDv4jM{hCDB+Smb!
z*`?q)BmIU6Mx*Nk!N{gBbGqMGD%S)j^&o2RgGAL0J-tLf+BwL=hyhEDOzfk1iElzS
z3)xP;4Wl*_Nb=Ox)O>K^`W6i-=R75HB*Lx-A8@tFRHI)pIQeFOvkNGXU;6Y$dqX$y
zlEp`o7B?}r!2BUt9k`6$_-8CDWZ?xC219Ytl2MJ{s*t}=$wVsr&*xa5b8Mv=?%IVF
z9(v<$xY5fQ^7^}1FY%%pqqC2xlxrzxPN*0)Enp=h~2Pa*6)UJ_|dh{Fr&Lu8vaQgj4Do^
zC=cuCL)(a&5E==qV-?fnN5YmDKW0vK=cAV{)t{*ayIYD^rY1jd9Fzg&;&I*=@Ok9O
zr6Qdn?wQdg&1vF_W|P={b0O|JHE?jf3F>hnzGL9+_GGm|VLr=5rd8N$1zQFz1Ne+$
zTi+!4eK2PKX1@eSEdFpBT6HeDBGyolfdNmv1rU8@?ZLC;Nz_8z{FzJNw(89euO7~U
zPv3g;*4BjOGl0e~?vxmoTG7rgi*=|92fYQ`7{w;&AF=K<7lKG-4vWr4!&A~>NE?-Z
z+J=b>RQJ>lak==g`T=jQ24wbMf9`Iv)m_6P{p1tPL+PFPZ_~@%RC3;eB&sj@;o=D%
zd)|HZM62IRy47|P$NS|!V7R}s9Z~u4(RAf^U9}f2$cHZEgAD*3&xdOoUEdi2LZJX33))WZ$4s1D*=m2!d9v#V
zvci)!DwZlZGMMk=L2U$ogzE(@!poN%ix83gBg~=6#e)2I(DtLIKYtk!c
znB}ULI!o_y;*8kk5WR0m>$CJXkl;Hy>4l-IJctL=m-25(MtN{icLm?;-$%mhMWbT*
zI+Ma$6HET-$YcvJeC){zbQC{eAckCM*lAf_DiKq`ok=Ob5+?|zplI6)$`*s(Zi9LS
zCeiqU9vMCqrWhr=W)iKW*)!Ik5wXzym0oWvU$u!SLS3%-
z$=@IFcg&>U@~(?FTK#RWO`(7|?QYa7H92Cl^+<
zB)qI~PjJ`UD^!2NeTAU;IVwavB()b`C96L=NFc)>Mm*b@Yj2CQp>jP0fk!s4XHiV+
zs>E&ZpJ~h+w{E{xh>@`UM<$NT*Re1&{PX%5AS~7VFSnDz`gT3)DW28e)CLD8`$VFEHuGHHG=Z$>gF&(ajPYpbx@NBIQ|0RTSmSMv
z-IQ~vAqZHX-HSeG$P;>VZEseNHusD`2Ve?w9s24>@D1|P?&Oh#0TrOLP@M2;7>XmA
zn6rBx{76a7a3i=(oG)?(SJsM4l*
zd#MRj2hO%|wb|4={MQY|edKmo>2Ftd$tg-MdP-NJQQ5NG0q{Ny{9(U$3qV;fvpO8X
zLM&Ifh`;&DpeFeEMwmF0-;4@HJoQJpf^*KhP%OP+>I_M-e|P<6_qYoNA1$$4j$T00wZn?tYaW-H~us^V=Cb@N>G>C=&ctf0$y
z2RJZL7aSdQf^bq9XT4FM3utT$jtH3KIuwb#Na_;eF_*3H-Td}Sy+OK0My+CX+D@Ou
zg3|`P7@kr%`j5gC2wzTNsS)b__k8d=2gO~Uz#Mi>?Hm&LQgSn=#YUL#TilDeB?Ll5
zAu_cOhXk+X+{og#^HLvqnycl`4!#@o3&<_bBzpBjqwe9AQ^zYw%%-1E@FJJ0;F8R(
zB3=|chiI6Bq;vhZ&gx?*i&L=R+Q(I&PyGa0(u{&04YK+==ahdvuNqC6or9F>xvQx3l8#_s(m*YtDaAo%;$hRG$S%<<;QnmrP^$$?gOoXH3@QWq@U0Iu0YZA
zyByfPJ`|b=kDwIaDYz%R)PE0S-BBB?3g>SDmjS4~6W7Ch;?!
zd&lEZ-a+h5OK3$r95d=GUr~ro43C{Nj3H{xlqn?R0%)LmBBH8q0&(4wS}Ss{%sF};
zNc&&gJCb3bQYq~DiVl_H`l+>=I@vq1m>VAMjb_VSu6!D+SS|&Cv`1
z)ogM%V+mnCzQM+E+C4Eo|4tSdDh|_}#F~6`@ZF1N^Y$#_s8jLK8rRWnVMXSqww^t_s;Tp
za6DRoA16$O)++DP1ASvGbe|JPhzN!@PhgJK<0_j)@$mZ-DjTMHQsN1&^v%e3o3d*D
zuT~pFpZ`YqW0?z5vI!wGZ1Q&Ov?H$vQni&t+vc9O_N?HLi
zg4C)j{Rm3RW!}}cmi}o_G$M5QQtbp3rpqKKpyCp;Mj7$suI|!C4XkEz?>?kvR*5Fx
zvJ_ZylEYcIG_~s`JR+x6ew;)qi-f6R4*lfbyCf>IR|%!hZ+D#J)2xN8B=OcYY{08)
z?FYbNk+TIQlOKmA$u4`KB!7KtAaFk!srZp5??;Q
zEqarH1SfMa(7NS+{S^PZ8@Hu0=xnedy22aD_t!>hB@4-_V)nA4Q+2lRvBzMAJu`3(
zYI-vgIe{=f$!KEK8R#wm^q!mBggg1MxwRO6!7gVYS27T5rCkWz1{WP`CO2DE8r{e@
zbV~$(R}V)$`LUsE^oSzC$F|Lyt)~*aw3Tk
zRctOnF{_>vhHXUD;Vir}sL19?zT*0J%-7KwcRfN(X
z%eSi`3!9@~T43b1{s;A+FKmW%FNR$xW{x-sx-`~So!e49=W@*DBa3db1Tx|aKct_d
z0Qy@&4z=kR)68G5t0R|wcj>mxixp;qnv
zNY`~r{8WNJd42RxT(tb@?B(S8*heDXH(WP?X;jyg7rS1#V5p*~I9Zg3Sw%+34qm8w
z0SD2E<-D`JK=>=dZidKvuIDxt%?DY{Zm=6G85B**a%d%wV`or~heU|G^Iek@_fr`$
zF`4Q$*d_z3=Mv!u*P^C0^B5JWzRt+Jmhe`C)f&6l@sTe~KF;ar$`K{7Aj(hagcs@R
z9tFpJ(YIw+mUYv_2iLQMyh2I77(`GDCYn7Uov_8R^i6e=>vwu%Odi6xz!oo
zX#nJmavKd2HCjKyfxCWf=nh&0G~>7|jScH=@vs|OB9{mU3=kPY?aM1L`~6DfC&Z|5
zdUsO;zf?;Lj1CwIdN?>#ji#*$BN9XOHtQP0oiV(Od)9fw;tU$jg@EN>tuia9-7}BO
zcdn|9hz^wp@OWvsC}angummk9Kvo#30t+@N#HrNk&s~H7n5+<$MO@
zm2sr$CiIOMOePGa#^&Q#OfE5N0HBi2n7gmTE0?jNAZx7Yj{J`F`bctBoWrpre2%Sc
z)|*pj7_1mX1TMA63{Osj7@Z|Yy$)FB4p7d!=ttCrFxo&tBjhvmJ)@$`BvtH;xeBNa
z=cWvJ(rlJPCCpA(SAVUZ!i5dAIp<;AysSy$VZwX^WeYw3co^|Y31I>maLNbJJGUgm
z0ngy>xP7{BU0>oGalxg{&WM`#X#o;Y
zB95P%uDgD->O&kE<<}Bz$#WeOh0=eocYv
z9fkHf9@YDeu(zTKf(xoUqjzUt)}OF^o~i;L%p1)()i_kg!{i}1#{s}nOnUG+U~jl7>JHV(
zKVI+_Q*pzU%BN<1T>1Iz?iHyV!3wrHBIuNwd3!6sn?K>(UVMHrkfzp^>efoFS3TNq
z&jXd*_x4VCQ#8Y$qi_^+p!`98h6OwSG=KhC`}nQPv~JuTZM5l6in>}l8r&IJhhtqr
ztj*B}+>lS|$Zd_2Dcp+>PSIIm?=FmT!tDc6_-C01fWyFeU-??smF7Uhwaw6Vb3ZhZ
z1P_^flf9X(zMksOlHr=c*CRiTtE|qxkw{7I&{JZgd{pbX;vSIj))AG~h{G-Vx@2?`
zj1{JGvQSVhxf#qU5!^D73_>RMB85^N-M5C%2T<#p$_J
zjW<>VsPv(&9$z=+8L}&|*FLHqk||Bvj;EAcFtndw*_yjc3<2ad0WAFt`n79H&#P8$
zB9r(eqtsWao`V-Wah^TNBW;Ntc5I`A0KsrS1YY<}i3Vr5em{Khru`M&D@5YSMSsE(
zSCFcpK2h}@)qvctC6tv}*G^G9sc3j^#DpC*PQ5>rJCuC(g>*$#@0u8P@tXM)wMHqh
zaq>M#5)UlF_Z|=ViO}-IWYMCas=a}l))c%pObLtr3(!mcHs`iAM_m|;^H>90
zH1@Ee86QLo>?MNieXT_1Blx@I
z=prqV*_2n9`hjEEL<%&G4V{D~e=5o^&C2hESU93}huqwaLAq6a<=lkK=PAvYg$ei@
z@fJy`w*&kZLHF!3*_Oc_4H3{13qz!#xhDm2SJ6m|tfN1beC8nf#8@w5-8_Ed*sg&;hTY|?x8gQ`@_$M!5J*{0g`M3^%|T>&3AcV$Lko)&(HW1nd!{BsupZ_
zwt`VyxjXLAjn*`OJ#q2td(z!wGD$ra@|zxNKKFXEr&%qWg(|%{
zi8qt5qe8KF&yJ=9RHs0Rf99Z@le5s~JDzq)mbd4|;58Pl4J0lT6QxXVJK&dSw(5o9TQ2p;_{D1d*cM<^>_&L8OT4oQunSk
zqQ;qgPE_t04cKHj|AO9mJ;KC9{&gDQwMssTtFv)92C(;oOp+6?;hkjYHbAK4jdlyk@U#NYXYz7{3dJAfmuAgpZY@w|3
zVZ!V)s%HRVx(0Gws>G+K90|ZA^mnvx@C+8|gQH``fmQZdbO5QcN3(rf6p>l|(o{4Q
zfo(c7<7my-2y$KKbRfWnddD$CC{S{NGjsN(rO9@_ooy6rz}U~Pa|svraNNAwyvVWA
zH&YU>0FEn}Voz1({nu2>-8MKl%)CAYvk*Mud$cALx(8);2>y(eQzQX?^khL!jQVE!
zL+*#+_YBec5KR#~CRU8Fb@~xW2w?2P$i}91F51QeQic|m5^u*kK!9zmE1UCA)X-E?
ztH|a&vooUkmA#6Zo%(i6|azhWo#(`gRBMF5?W_
zfI^$~
zMOBli{;Bj--O^^KqKa@9-*e3{O88&YnI0bb`R*kyv@+gj$Y
zLfF$T_*lTe!I~P-g4{>HBi!Kx&zhT%_8&wW1HsW#s|_$)9_n>vtlr7oCdhlZ^S`9i
zbQ}26Z(Hd5lzcAIEqD=n+aQ3=ti3#ESKEWlfZb-b+Sb38BHWz)CkN$@=Ngjdj1bn0
z9bQF5jQDm+IZ=Gp)fct_}xH)4KURpm>J+yC|7{b17qKKb1|9xpE1aD!uhT7IyPZ_GO3jgMJ
zI2|cU?qa%_d}?knG*V3G;t=e2NceMC(UYVjEUja!!of!C*_jgLF`yGk^RJNqPI+Vfpy)EyaR2
z-6qV0u_Bjh@cuYDWk}}}@!(~nB?o&&ngAy-kJ^yC&gH8vqCD1A{19o?o3o3^Zki7i
zI)+=G#QbGfpH9P29U1j+dY;^W1nkiD)}BoPz`OP=n?(C)#F)t&<)S~KN&^0%u}m#
zm3#AnunN-H7