adaptive

Author: nartc

libs/core/src/lib/store.ts

@@ -1,5 +1,15 @@
 import { DOCUMENT } from '@angular/common';
-import { ElementRef, InjectionToken, Injector, Optional, SkipSelf, effect, runInInjectionContext } from '@angular/core';
+import {
+	ChangeDetectorRef,
+	ElementRef,
+	InjectionToken,
+	Injector,
+	Optional,
+	SkipSelf,
+	effect,
+	inject,
+	runInInjectionContext,
+} from '@angular/core';
 import { Subject, type Observable } from 'rxjs';
 import * as THREE from 'three';
 import type { NgtCamera, NgtDomEvent, NgtEventManager, NgtPointerCaptureTarget, NgtThreeEvent } from './events';
@@ -8,6 +18,7 @@ import { NGT_LOOP, type NgtLoop } from './loop';
 import { createInjectionToken } from './utils/create-injection-token';
 import { is } from './utils/is';
 import { makeDpr } from './utils/make';
+import { safeDetectChanges } from './utils/safe-detect-changes';
 import { signalStore, type NgtSignalStore } from './utils/signal-store';
 import { updateCamera } from './utils/update';
 
@@ -152,6 +163,8 @@ function storeFactory(loop: NgtLoop, document: Document, injector: Injector, par
 			throw new Error(`[NGT] Window is not available.`);
 		}
 
+		const cdr = inject(ChangeDetectorRef);
+
 		// NOTE: using Subject because we do not care about late-subscribers
 		const pointerMissed$ = new Subject<MouseEvent>();
 
@@ -225,11 +238,12 @@ function storeFactory(loop: NgtLoop, document: Document, injector: Injector, par
 						// Set lower bound performance
 						if (state.performance.current !== state.performance.min)
 							setPerformanceCurrent(state.performance.min);
+
 						// Go back to upper bound performance after a while unless something regresses meanwhile
-						performanceTimeout = setTimeout(
-							() => setPerformanceCurrent(get('performance', 'max')),
-							state.performance.debounce,
-						);
+						performanceTimeout = setTimeout(() => {
+							setPerformanceCurrent(get('performance', 'max'));
+							safeDetectChanges(cdr);
+						}, state.performance.debounce);
 					},
 				},
 

libs/soba/controls/src/orbit-controls/orbit-controls.ts

@@ -80,10 +80,9 @@ export class NgtsOrbitControls {
 
 	private store = injectNgtStore();
 	private invalidate = this.store.select('invalidate');
-	private performance = this.store.select('performance');
+	private performanceRegress = this.store.select('performance', 'regress');
 	private defaultCamera = this.store.select('camera');
 	private glDomElement = this.store.select('gl', 'domElement');
-
 	private regress = this.inputs.select('regress');
 	private camera = this.inputs.select('camera');
 	private domElement = this.inputs.select('domElement');
@@ -157,16 +156,16 @@ export class NgtsOrbitControls {
 
 	private setEvents() {
 		effect((onCleanup) => {
-			const [controls, invalidate, performance, regress] = [
+			const [controls, invalidate, performanceRegress, regress] = [
 				this.controlsRef.nativeElement,
 				this.invalidate(),
-				this.performance(),
+				this.performanceRegress(),
 				this.regress(),
 			];
 			if (!controls) return;
 			const changeCallback: (e: THREE.Event) => void = (e) => {
 				invalidate();
-				if (regress) performance.regress();
+				if (regress) performanceRegress();
 				if (this.change.observed) this.change.emit(e);
 			};
 

libs/soba/performances/README.md

@@ -0,0 +1,3 @@
+# angular-three-soba/performances
+
+Secondary entry point of `angular-three-soba`. It can be used by importing from `angular-three-soba/performances`.

libs/soba/performances/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

libs/soba/performances/src/adaptive-dpr/adaptive-dpr.ts

@@ -0,0 +1,38 @@
+import { Directive, Input, effect, signal, untracked } from '@angular/core';
+import { injectNgtStore } from 'angular-three';
+
+@Directive({ selector: 'ngts-adaptive-dpr', standalone: true })
+export class NgtsAdaptiveDpr {
+	private pixelated = signal(false);
+	@Input({ alias: 'pixelated' }) set _pixelated(pixelated: boolean) {
+		this.pixelated.set(pixelated);
+	}
+
+	private store = injectNgtStore();
+	private current = this.store.select('performance', 'current');
+	private active = this.store.get('internal', 'active');
+	private setDpr = this.store.get('setDpr');
+	private initialDpr = this.store.get('viewport', 'initialDpr');
+	private domElement = this.store.get('gl', 'domElement');
+
+	constructor() {
+		effect((onCleanup) => {
+			onCleanup(() => {
+				if (this.active) {
+					this.setDpr(this.initialDpr);
+				}
+				if (this.pixelated() && this.domElement) {
+					this.domElement.style.imageRendering = 'auto';
+				}
+			});
+		});
+
+		effect(() => {
+			const current = this.current();
+			this.setDpr(current * this.initialDpr);
+			if (untracked(this.pixelated) && this.domElement) {
+				this.domElement.style.imageRendering = current === 1 ? 'auto' : 'pixelated';
+			}
+		});
+	}
+}

libs/soba/performances/src/adaptive-events/adaptive-events.ts

@@ -0,0 +1,23 @@
+import { Directive, effect } from '@angular/core';
+import { injectNgtStore } from 'angular-three';
+
+@Directive({ selector: 'ngts-adaptive-events', standalone: true })
+export class NgtsAdaptiveEvents {
+	private store = injectNgtStore();
+	private setEvents = this.store.get('setEvents');
+	private current = this.store.select('performance', 'current');
+
+	constructor() {
+		effect((onCleanup) => {
+			const enabled = this.store.get('events', 'enabled');
+			onCleanup(() => {
+				this.setEvents({ enabled });
+			});
+		});
+
+		effect(() => {
+			const current = this.current();
+			this.setEvents({ enabled: current === 1 });
+		});
+	}
+}

libs/soba/performances/src/index.ts

@@ -0,0 +1,2 @@
+export * from './adaptive-dpr/adaptive-dpr';
+export * from './adaptive-events/adaptive-events';