update stories

Author: nartc

apps/astro-docs/src/content/docs/core/testing/test-bed.mdx

@@ -19,6 +19,7 @@ ngtTestBed.canvas; // the mocked HTMLCanvasElement
 ngtTestBed.destroy; // method to destroy the fixture
 ngtTestBed.fireEvent; // method to fire events on an element in the scene graph
 ngtTestBed.advance; // method to advance the animation loop manually per frame
+ngtTestBed.toGraph; // method to convert the scene graph to a simple object
 ```
 
 

libs/soba/src/materials/mesh-refraction-materials.stories.ts

@@ -12,12 +12,18 @@ import {
 import {
 	NgtsAccumulativeShadows,
 	NgtsCaustics,
+	NgtsCausticsOptions,
 	NgtsEnvironment,
 	NgtsRandomizedLights,
 } from 'angular-three-soba/staging';
 import { RGBELoader } from 'three-stdlib';
 import { makeDecorators, makeStoryObject } from '../setup-canvas';
 
+injectLoader.preload(
+	() => RGBELoader,
+	() => 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/aerodynamics_workshop_1k.hdr',
+);
+
 @Component({
 	selector: 'diamond-flat',
 	standalone: true,
@@ -28,13 +34,13 @@ import { makeDecorators, makeStoryObject } from '../setup-canvas';
 					@if (gltf(); as gltf) {
 						<ngts-caustics
 							[options]="{
-								backfaces: true,
+								backside: true,
 								color: 'white',
 								position: [0, -0.5, 0],
-								lightSource: [5, 5, -10],
+								lightSource: lightSource(),
 								worldRadius: 0.1,
 								ior: 1.8,
-								backfaceIor: 1.1,
+								backsideIOR: 1.1,
 								intensity: 0.1,
 							}"
 						>
@@ -59,6 +65,7 @@ import { makeDecorators, makeStoryObject } from '../setup-canvas';
 class Diamond {
 	rotation = input([0, 0, 0]);
 	position = input([0, 0, 0]);
+	lightSource = input<NgtsCausticsOptions['lightSource']>();
 	options = input({} as NgtsMeshRefractionMaterialOptions);
 
 	gltf = injectGLTF(() => './dflat.glb') as Signal<any | null>;
@@ -75,7 +82,12 @@ class Diamond {
 		<ngt-spot-light #spotLight [position]="[5, 5, -10]" [angle]="0.15" [penumbra]="1" />
 		<ngt-point-light [position]="[-10, -10, -10]" />
 
-		<diamond-flat [rotation]="[0, 0, 0.715]" [position]="[0, -0.175 + 0.5, 0]" [options]="options()" />
+		<diamond-flat
+			[lightSource]="spotLight"
+			[rotation]="[0, 0, 0.715]"
+			[position]="[0, -0.175 + 0.5, 0]"
+			[options]="options()"
+		/>
 
 		<ngts-caustics
 			[options]="{

libs/soba/src/staging/caustics.stories.ts

@@ -39,14 +39,14 @@ import { makeDecorators, makeStoryFunction } from '../setup-canvas';
 
 				<ngts-caustics
 					[options]="{
-						backfaces: true,
+						backside: true,
 						color,
 						focus: [0, -1.2, 0],
 						lightSource: [-1.2, 3, -2],
 						intensity: 0.003,
 						worldRadius: 0.26 / 10,
 						ior: 0.9,
-						backfaceIor: 1.26,
+						backsideIOR: 1.26,
 					}"
 				>
 					<ngt-mesh [castShadow]="true" [receiveShadow]="true" [geometry]="gltf.nodes.glass.geometry">
@@ -94,15 +94,7 @@ class Scene {
 	selector: 'caustics-env',
 	standalone: true,
 	template: `
-		<ngts-environment
-			[options]="{
-				frames: Infinity,
-				preset: 'city',
-				resolution: 256,
-				background: true,
-				blur: 0.8,
-			}"
-		>
+		<ngts-environment [options]="{ frames: Infinity, preset: 'city', resolution: 256, background: true, blur: 0.8 }">
 			<ng-template>
 				<ngts-lightformer
 					[options]="{ intensity: 4, rotation: [Math.PI / 2, 0, 0], position: [0, 5, -9], scale: [10, 10, 1] }"