fix(core): pass through defaultGLOptions instead of just canvas for NgtGLOptions

Author: nartc

apps/examples/src/app/misc/webgpu-renderer/webgpu-renderer.ts

@@ -16,9 +16,10 @@ import { SceneGraph } from './scene';
 })
 export default class WebGPURenderer {
 	protected frameloop = signal<NgtFrameloop>('never');
-	protected glFactory: NgtGLOptions = (canvas) => {
+	protected glFactory: NgtGLOptions = (defaultOptions) => {
 		const renderer = new THREE.WebGPURenderer({
-			canvas: canvas as HTMLCanvasElement,
+			canvas: defaultOptions.canvas as HTMLCanvasElement,
+			powerPreference: 'high-performance',
 			antialias: true,
 			forceWebGL: false,
 		});

libs/core/src/lib/types.ts

@@ -43,9 +43,12 @@ export interface NgtRendererLike {
 export type NgtCanvasElement = HTMLCanvasElement | OffscreenCanvas;
 export type NgtGlobalRenderCallback = (timeStamp: number) => void;
 
+export type NgtGLDefaultOptions = Omit<THREE.WebGLRendererParameters, 'canvas'> & {
+	canvas: NgtCanvasElement;
+};
 export type NgtGLOptions =
 	| NgtRendererLike
-	| ((canvas: NgtCanvasElement) => NgtRendererLike)
+	| ((defaultGLOptions: NgtGLDefaultOptions) => NgtRendererLike)
 	| Partial<NgtProperties<THREE.WebGLRenderer> | THREE.WebGLRendererParameters>
 	| undefined;
 export type NgtDpr = number | [min: number, max: number];

libs/core/src/lib/utils/make.ts

@@ -1,5 +1,5 @@
 import * as THREE from 'three';
-import type { NgtCanvasElement, NgtDpr, NgtGLOptions, NgtIntersection, NgtSize } from '../types';
+import type { NgtCanvasElement, NgtDpr, NgtGLDefaultOptions, NgtGLOptions, NgtIntersection, NgtSize } from '../types';
 import { is } from './is';
 
 const idCache: { [id: string]: boolean | undefined } = {};
@@ -28,15 +28,18 @@ export function makeRendererInstance<TCanvas extends NgtCanvasElement>(
 	glOptions: NgtGLOptions,
 	canvas: TCanvas,
 ): THREE.WebGLRenderer {
-	const customRenderer = (typeof glOptions === 'function' ? glOptions(canvas) : glOptions) as THREE.WebGLRenderer;
-	if (is.renderer(customRenderer)) return customRenderer;
-	return new THREE.WebGLRenderer({
+	const defaultOptions: NgtGLDefaultOptions = {
 		powerPreference: 'high-performance',
 		canvas,
 		antialias: true,
 		alpha: true,
-		...glOptions,
-	});
+	};
+
+	const customRenderer = (
+		typeof glOptions === 'function' ? glOptions(defaultOptions) : glOptions
+	) as THREE.WebGLRenderer;
+	if (is.renderer(customRenderer)) return customRenderer;
+	return new THREE.WebGLRenderer({ ...defaultOptions, ...glOptions });
 }
 
 export function makeCameraInstance(isOrthographic: boolean, size: NgtSize) {