docs(examples): update stars routes

Author: nartc

apps/kitchen-sink-new/src/app/soba/soba.routes.ts

@@ -69,17 +69,17 @@ const routes: Routes = [
 			},
 		},
 	},
-	// {
-	// 	path: 'stars',
-	// 	loadComponent: () => import('./stars/stars'),
-	// 	data: {
-	// 		credits: {
-	// 			title: 'Stars',
-	// 			link: 'https://pmndrs.github.io/examples/demos/gatsby-stars',
-	// 			class: 'text-white',
-	// 		},
-	// 	},
-	// },
+	{
+		path: 'stars',
+		loadComponent: () => import('./stars/stars'),
+		data: {
+			credits: {
+				title: 'Stars',
+				link: 'https://pmndrs.github.io/examples/demos/gatsby-stars',
+				class: 'text-white',
+			},
+		},
+	},
 	{
 		path: 'skydiving',
 		loadComponent: () => import('./skydiving/skydiving'),

apps/kitchen-sink-new/src/app/soba/stars/scene.ts

@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, viewChild } from '@angular/core';
+import { injectBeforeRender } from 'angular-three';
+import { NgtsOrbitControls } from 'angular-three-soba/controls';
+import { NgtsPointMaterial } from 'angular-three-soba/materials';
+import { NgtsPointsBuffer } from 'angular-three-soba/performances';
+import { random } from 'maath';
+
+@Component({
+	selector: 'app-stars-scene-graph',
+	template: `
+		<ngt-group [rotation]="[0, 0, Math.PI / 4]">
+			<ngts-points-buffer [positions]="sphere" [stride]="3" [options]="{ frustumCulled: false }">
+				<ngts-point-material
+					[options]="{ transparent: true, color: '#ccc', size: 0.005, sizeAttenuation: true, depthWrite: false }"
+				/>
+			</ngts-points-buffer>
+		</ngt-group>
+
+		<ngts-orbit-controls [options]="{ enableZoom: false, enablePan: false }" />
+	`,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [NgtsPointsBuffer, NgtsPointMaterial, NgtsOrbitControls],
+})
+export class SceneGraph {
+	protected readonly Math = Math;
+	protected readonly sphere = random.inSphere(new Float32Array(5000), { radius: 1.5 }) as Float32Array;
+
+	private pointsBufferRef = viewChild.required(NgtsPointsBuffer);
+
+	constructor() {
+		injectBeforeRender(({ delta }) => {
+			const points = this.pointsBufferRef().pointsRef().nativeElement;
+			points.rotation.x -= delta / 10;
+			points.rotation.y -= delta / 15;
+		});
+	}
+}

apps/kitchen-sink-new/src/app/soba/stars/stars.ts

@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgtCanvas, NgtCanvasContent } from 'angular-three/dom';
+import { SceneGraph } from './scene';
+
+@Component({
+	template: `
+		<div style="position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0)">
+			<h1
+				style="margin: 0; padding: 0; font-size: 15em; font-weight: 500; letter-spacing: -0.05em; line-height: 1; text-align: center;"
+			>
+				<code>angular three</code>
+			</h1>
+		</div>
+		<ngt-canvas [camera]="{ position: [0, 0, 1] }">
+			<app-stars-scene-graph *canvasContent />
+		</ngt-canvas>
+	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: { class: 'stars-soba' },
+	styles: `
+		:host {
+			display: block;
+			height: 100%;
+			width: 100%;
+			background: #12071f;
+		}
+
+		h1 {
+			background: linear-gradient(30deg, #c850c0, #ffcc70);
+			-webkit-background-clip: text;
+			-webkit-text-fill-color: transparent;
+		}
+	`,
+	imports: [NgtCanvas, SceneGraph, NgtCanvasContent],
+})
+export default class Stars {}

libs/core/src/lib/renderer/renderer.ts

@@ -57,6 +57,9 @@ export class NgtRendererFactory2 implements RendererFactory2 {
 		if (renderer) {
 			if (renderer instanceof NgtRenderer2) {
 				renderer.count += 1;
+				if (renderer.delegateRenderer !== delegateRenderer) {
+					renderer.delegateRenderer = delegateRenderer;
+				}
 			}
 			return renderer;
 		}
@@ -94,7 +97,7 @@ export class NgtRenderer2 implements Renderer2 {
 	private portalInjectors: Array<Injector> = [];
 
 	constructor(
-		private delegateRenderer: Renderer2,
+		public delegateRenderer: Renderer2,
 		private catalogue: Record<string, NgtConstructorRepresentation>,
 		private document: Document,
 		public count = 1,