fix(core): make sure camera and dpr is set correctly initially

Author: nartc

libs/core/src/lib/roots.ts

@@ -112,7 +112,7 @@ export function injectCanvasRootInitializer(injector?: Injector) {
 					if (!state.camera || (state.camera === lastCamera && !is.equ(lastCamera, cameraOptions, shallowLoose))) {
 						lastCamera = cameraOptions;
 						const isCamera = is.camera(cameraOptions);
-						let camera = isCamera ? cameraOptions : makeCameraInstance(orthographic, state.size);
+						let camera = isCamera ? cameraOptions : makeCameraInstance(orthographic, sizeOptions ?? state.size);
 
 						if (!isCamera) {
 							camera.position.z = 5;
@@ -260,7 +260,7 @@ export function injectCanvasRootInitializer(injector?: Injector) {
 					if (gl.setClearAlpha) {
 						gl.setClearAlpha(0);
 					}
-					gl.setPixelRatio(makeDpr(state.viewport.dpr ?? dpr));
+					gl.setPixelRatio(makeDpr(state.viewport.dpr));
 					gl.setSize(sizeOptions?.width ?? state.size.width, sizeOptions?.height ?? state.size.height);
 
 					if (
@@ -305,9 +305,7 @@ export function injectCanvasRootInitializer(injector?: Injector) {
 export type NgtCanvasConfigurator = ReturnType<ReturnType<typeof injectCanvasRootInitializer>>;
 
 function computeInitialSize(canvas: NgtCanvasElement, defaultSize?: NgtSize): NgtSize {
-	if (defaultSize) {
-		return defaultSize;
-	}
+	if (defaultSize) return defaultSize;
 
 	if (typeof HTMLCanvasElement !== 'undefined' && canvas instanceof HTMLCanvasElement && canvas.parentElement) {
 		return canvas.parentElement.getBoundingClientRect();

libs/core/src/lib/store.ts

@@ -1,3 +1,4 @@
+import { DOCUMENT } from '@angular/common';
 import { ElementRef, InjectOptions, InjectionToken, effect, inject } from '@angular/core';
 import { Subject } from 'rxjs';
 import { Clock, Vector2, Vector3 } from 'three';
@@ -10,6 +11,8 @@ import { updateCamera } from './utils/update';
 
 function storeFactory(previousStore: NgtSignalStore<NgtState> | null) {
 	const loop = injectLoop();
+	const document = inject(DOCUMENT);
+	const window = document.defaultView || undefined;
 
 	// NOTE: using Subject because we do not care about late-subscribers
 	const pointerMissed$ = new Subject<MouseEvent>();
@@ -88,8 +91,8 @@ function storeFactory(previousStore: NgtSignalStore<NgtState> | null) {
 
 			size: { width: 0, height: 0, top: 0, left: 0, updateStyle: false },
 			viewport: {
-				initialDpr: 0,
-				dpr: 0,
+				initialDpr: window?.devicePixelRatio || 1,
+				dpr: window?.devicePixelRatio || 1,
 				width: 0,
 				height: 0,
 				top: 0,