stars

nartc · nartc · commit 8203bbbe0de3 · 2023-08-07T00:36:01.000-05:00
diff --git a/libs/core/src/lib/renderer/store.ts b/libs/core/src/lib/renderer/store.ts
@@ -45,9 +45,9 @@ export type NgtRendererNode = {
 	__ngt_renderer__: NgtRendererState;
 };
 export class NgtRendererStore {
-	private readonly comments = [] as Array<NgtRendererNode>;
+	private comments = [] as Array<NgtRendererNode>;
 
-	constructor(private readonly root: NgtRendererRootState) {}
+	constructor(private root: NgtRendererRootState) {}
 
 	createNode(type: NgtRendererState[NgtRendererClassId.type], node: NgtAnyRecord) {
 		const state = [
diff --git a/libs/soba/abstractions/src/billboard/billboard.ts b/libs/soba/abstractions/src/billboard/billboard.ts
@@ -40,16 +40,16 @@ export class NgtsBillboard {
 
 	@Input() billboardRef = injectNgtRef<Group>();
 
-	@Input() set follow(follow: boolean) {
+	@Input({ alias: 'follow' }) set _follow(follow: boolean) {
 		this.inputs.set({ follow });
 	}
-	@Input() set lockX(lockX: boolean) {
+	@Input({ alias: 'lockX' }) set _lockX(lockX: boolean) {
 		this.inputs.set({ lockX });
 	}
-	@Input() set lockY(lockY: boolean) {
+	@Input({ alias: 'lockY' }) set _lockY(lockY: boolean) {
 		this.inputs.set({ lockY });
 	}
-	@Input() set lockZ(lockZ: boolean) {
+	@Input({ alias: 'lockZ' }) set _lockZ(lockZ: boolean) {
 		this.inputs.set({ lockZ });
 	}
 
diff --git a/libs/soba/abstractions/src/text-3d/text-3d.ts b/libs/soba/abstractions/src/text-3d/text-3d.ts
@@ -136,7 +136,7 @@ export class NgtsText3D {
 	private letterSpacing = this.inputs.select('letterSpacing');
 	private lineHeight = this.inputs.select('lineHeight');
 
-	readonly geometryArgs = computed(() => {
+	geometryArgs = computed(() => {
 		const fontData = this.fontData();
 		if (!fontData) return null;
 
diff --git a/libs/soba/cameras/src/camera/camera.ts b/libs/soba/cameras/src/camera/camera.ts
@@ -19,23 +19,23 @@ export abstract class NgtsCamera<TCamera extends NgtCamera> {
 		manual: false,
 	});
 
-	@Input() set makeDefault(makeDefault: boolean) {
+	@Input({ alias: 'makeDefault' }) set _makeDefault(makeDefault: boolean) {
 		this.inputs.set({ makeDefault });
 	}
 
-	@Input() set manual(manual: boolean) {
+	@Input({ alias: 'manual' }) set _manual(manual: boolean) {
 		this.inputs.set({ manual });
 	}
 
-	@Input() set frames(frames: number) {
+	@Input({ alias: 'frames' }) set _frames(frames: number) {
 		this.inputs.set({ frames });
 	}
 
-	@Input() set resolution(resolution: number) {
+	@Input({ alias: 'resolution' }) set _resolution(resolution: number) {
 		this.inputs.set({ resolution });
 	}
 
-	@Input() set envMap(envMap: THREE.Texture) {
+	@Input({ alias: 'envMap' }) set _envMap(envMap: THREE.Texture) {
 		this.inputs.set({ envMap });
 	}
 
diff --git a/libs/soba/controls/src/orbit-controls/orbit-controls.ts b/libs/soba/controls/src/orbit-controls/orbit-controls.ts
@@ -32,7 +32,7 @@ declare global {
 @Component({
 	selector: 'ngts-orbit-controls',
 	standalone: true,
-	template: ` <ngt-primitive *args="args()" ngtCompound [enableDamping]="damping()" /> `,
+	template: ` <ngt-primitive *args="args()" ngtCompound [enableDamping]="enableDamping()" /> `,
 	imports: [NgtArgs],
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
@@ -46,31 +46,31 @@ export class NgtsOrbitControls {
 
 	@Input() controlsRef = injectNgtRef<OrbitControls>();
 
-	@Input() set camera(camera: THREE.Camera) {
+	@Input({ alias: 'camera' }) set _camera(camera: THREE.Camera) {
 		this.inputs.set({ camera });
 	}
 
-	@Input() set domElement(domElement: HTMLElement) {
+	@Input({ alias: 'domElement' }) set _domElement(domElement: HTMLElement) {
 		this.inputs.set({ domElement });
 	}
 
-	@Input() set makeDefault(makeDefault: boolean) {
+	@Input({ alias: 'makeDefault' }) set _makeDefault(makeDefault: boolean) {
 		this.inputs.set({ makeDefault });
 	}
 
-	@Input() set regress(regress: boolean) {
+	@Input({ alias: 'regress' }) set _regress(regress: boolean) {
 		this.inputs.set({ regress });
 	}
 
-	@Input() set target(target: THREE.Vector3 | Parameters<THREE.Vector3['set']>) {
+	@Input({ alias: 'target' }) set _target(target: THREE.Vector3 | Parameters<THREE.Vector3['set']>) {
 		this.inputs.set({ target });
 	}
 
-	@Input() set enableDamping(enableDamping: boolean) {
+	@Input({ alias: 'enableDamping' }) set _enableDamping(enableDamping: boolean) {
 		this.inputs.set({ enableDamping });
 	}
 
-	@Input() set keyEvents(keyEvents: boolean) {
+	@Input({ alias: 'keyEvents' }) set _keyEvents(keyEvents: boolean) {
 		this.inputs.set({ keyEvents });
 	}
 
@@ -80,8 +80,8 @@ export class NgtsOrbitControls {
 
 	private store = injectNgtStore();
 
-	readonly args = computed(() => [this.controlsRef.nativeElement]);
-	readonly damping = this.inputs.select('enableDamping');
+	args = computed(() => [this.controlsRef.nativeElement]);
+	enableDamping = this.inputs.select('enableDamping');
 
 	constructor() {
 		injectBeforeRender(
diff --git a/libs/soba/loaders/src/loader/loader.ts b/libs/soba/loaders/src/loader/loader.ts
@@ -66,27 +66,27 @@ export class NgtsLoader {
 	bar = this.inputs.select('barClass');
 	data = this.inputs.select('dataClass');
 
-	@Input() set containerClass(containerClass: string) {
+	@Input({ alias: 'containerClass' }) set _containerClass(containerClass: string) {
 		this.inputs.set({ containerClass });
 	}
 
-	@Input() set innerClass(innerClass: string) {
+	@Input({ alias: 'innerClass' }) set _innerClass(innerClass: string) {
 		this.inputs.set({ innerClass });
 	}
 
-	@Input() set barClass(barClass: string) {
+	@Input({ alias: 'barClass' }) set _barClass(barClass: string) {
 		this.inputs.set({ barClass });
 	}
 
-	@Input() set dataClass(dataClass: string) {
+	@Input({ alias: 'dataClass' }) set _dataClass(dataClass: string) {
 		this.inputs.set({ dataClass });
 	}
 
-	@Input() set dataInterpolation(dataInterpolation: (value: number) => string) {
+	@Input({ alias: 'dataInterpolation' }) set _dataInterpolation(dataInterpolation: (value: number) => string) {
 		this.inputs.set({ dataInterpolation });
 	}
 
-	@Input() set initialState(initialState: (value: boolean) => boolean) {
+	@Input({ alias: 'initialState' }) set _initialState(initialState: (value: boolean) => boolean) {
 		this.inputs.set({ initialState });
 	}
 
diff --git a/libs/soba/shaders/src/index.ts b/libs/soba/shaders/src/index.ts
@@ -2,3 +2,4 @@ export * from './grid-material/grid-material';
 export * from './shader-material/shader-material';
 export * from './sparkles-material/sparkles-material';
 export * from './spot-light-material/spot-light-material';
+export * from './star-field-material/star-field-material';
diff --git a/libs/soba/shaders/src/star-field-material/star-field-material.ts b/libs/soba/shaders/src/star-field-material/star-field-material.ts
@@ -0,0 +1,45 @@
+import type { NgtShaderMaterial } from 'angular-three';
+import * as THREE from 'three';
+import { shaderMaterial } from '../shader-material/shader-material';
+
+export const StarFieldMaterial = shaderMaterial(
+	{ time: 0.0, fade: 0.0 },
+	// language=GLSL
+	`
+uniform float time;
+attribute float size;
+varying vec3 vColor;
+void main() {
+  vColor = color;
+  vec4 mvPosition = modelViewMatrix * vec4(position, 0.5);
+  gl_PointSize = size * (30.0 / -mvPosition.z) * (3.0 + sin(time + 100.0));
+  gl_Position = projectionMatrix * mvPosition;
+}
+  `,
+	// language=GLSL
+	`
+uniform sampler2D pointTexture;
+uniform float fade;
+varying vec3 vColor;
+void main() {
+  float opacity = 1.0;
+  if (fade == 1.0) {
+    float d = distance(gl_PointCoord, vec2(0.5, 0.5));
+    opacity = 1.0 / (1.0 + exp(16.0 * (d - 0.25)));
+  }
+  gl_FragColor = vec4(vColor, opacity);
+
+  #include <tonemapping_fragment>
+	#include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+}
+  `,
+);
+
+declare global {
+	interface HTMLElementTagNameMap {
+		/**
+		 * @extends ngt-shader-material
+		 */
+		'ngt-star-field-material': NgtShaderMaterial;
+	}
+}
diff --git a/libs/soba/src/abstractions/text.stories.ts b/libs/soba/src/abstractions/text.stories.ts
@@ -28,8 +28,8 @@ import { color, makeDecorators, makeStoryObject, turn } from '../setup-canvas';
 class CustomMaterialTextStory {
 	@Input() text = '';
 	@Input() color = 'turquoise';
-	readonly turn = turn;
-	readonly DoubleSide = DoubleSide;
+	turn = turn;
+	DoubleSide = DoubleSide;
 }
 
 @Component({
@@ -55,7 +55,7 @@ class CustomMaterialTextStory {
 })
 class LTRTextStory {
 	@Input() text = '';
-	readonly turn = turn;
+	turn = turn;
 }
 
 @Component({
@@ -85,7 +85,7 @@ class LTRTextStory {
 })
 class ShadowTextStory {
 	@Input() text = '';
-	readonly turn = turn;
+	turn = turn;
 }
 
 @Component({
@@ -112,7 +112,7 @@ class ShadowTextStory {
 })
 class StrokeTextStory {
 	@Input() text = '';
-	readonly turn = turn;
+	turn = turn;
 }
 
 @Component({
@@ -139,7 +139,7 @@ class StrokeTextStory {
 })
 class OutlineTextStory {
 	@Input() text = '';
-	readonly turn = turn;
+	turn = turn;
 }
 
 @Component({
@@ -165,7 +165,7 @@ class OutlineTextStory {
 class DefaultTextStory {
 	@Input() text = '';
 	@Input() color = '#ec2d2d';
-	readonly turn = turn;
+	turn = turn;
 }
 
 export default {
diff --git a/libs/soba/src/staging/camera-shake.stories.ts b/libs/soba/src/staging/camera-shake.stories.ts
@@ -34,8 +34,8 @@ const argsOptions = {
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 class Scene {
-	readonly Math = Math;
-	readonly DoubleSide = THREE.DoubleSide;
+	Math = Math;
+	DoubleSide = THREE.DoubleSide;
 
 	onBeforeRender({ object: mesh }: NgtBeforeRenderEvent<THREE.Mesh>) {
 		mesh.rotation.x = mesh.rotation.y += 0.01;
diff --git a/libs/soba/src/staging/contact-shadows.stories.ts b/libs/soba/src/staging/contact-shadows.stories.ts
@@ -1,6 +1,6 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
 import { Meta } from '@storybook/angular';
-import { injectNgtStore, NgtArgs, type NgtBeforeRenderEvent } from 'angular-three';
+import { NgtArgs, type NgtBeforeRenderEvent } from 'angular-three';
 import { NgtsContactShadows } from 'angular-three-soba/staging';
 import * as THREE from 'three';
 import { makeDecorators, makeStoryFunction, makeStoryObject } from '../setup-canvas';
@@ -30,13 +30,8 @@ import { makeDecorators, makeStoryFunction, makeStoryObject } from '../setup-can
 })
 class DefaultContactShadowsStory {
 	@Input() colorized = false;
-	readonly Math = Math;
 
-	store = injectNgtStore();
-
-	ngOnInit() {
-		console.log(this.store, THREE);
-	}
+	Math = Math;
 
 	onBeforeRender({ state: { clock }, object: mesh }: NgtBeforeRenderEvent<THREE.Mesh>) {
 		mesh.position.y = Math.sin(clock.getElapsedTime()) + 2;
diff --git a/libs/soba/src/staging/sky.stories.ts b/libs/soba/src/staging/sky.stories.ts
@@ -26,14 +26,15 @@ import { makeDecorators, makeStoryObject, number } from '../setup-canvas';
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 class RotationSkyStory {
-	readonly Math = Math;
+	Math = Math;
+
 	@Input() turbidity = 8;
 	@Input() rayleigh = 6;
 	@Input() mieCoefficient = 0.005;
 	@Input() mieDirectionalG = 0.8;
 	@Input() azimuth = 0.25;
 
-	readonly inclination = signal(0);
+	inclination = signal(0);
 
 	constructor() {
 		injectBeforeRender(() => {
@@ -64,7 +65,8 @@ class RotationSkyStory {
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 class CustomAnglesSkyStory {
-	readonly Math = Math;
+	Math = Math;
+
 	@Input() turbidity = 8;
 	@Input() rayleigh = 6;
 	@Input() mieCoefficient = 0.005;
@@ -93,7 +95,8 @@ class CustomAnglesSkyStory {
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 class DefaultSkyStory {
-	readonly Math = Math;
+	Math = Math;
+
 	@Input() turbidity = 8;
 	@Input() rayleigh = 6;
 	@Input() mieCoefficient = 0.005;
diff --git a/libs/soba/src/staging/spot-light.stories.ts b/libs/soba/src/staging/spot-light.stories.ts
@@ -72,10 +72,10 @@ class ShadowsSpotLightStory {
 	@Input() debug = false;
 	@Input() wind = false;
 
-	readonly Math = Math;
-	readonly MathUtils = THREE.MathUtils;
+	Math = Math;
+	MathUtils = THREE.MathUtils;
 
-	readonly shader = /* glsl */ `
+	shader = /* glsl */ `
             varying vec2 vUv;
             uniform sampler2D uShadowMap;
             uniform float uTime;
@@ -91,14 +91,14 @@ class ShadowsSpotLightStory {
             }
           `;
 
-	readonly textures = injectNgtsTextureLoader(() => ({
+	textures = injectNgtsTextureLoader(() => ({
 		diffuse: '/soba/textures/grassy_cobble/grassy_cobblestone_diff_2k.jpg',
 		normal: '/soba/textures/grassy_cobble/grassy_cobblestone_nor_gl_2k.jpg',
 		roughness: '/soba/textures/grassy_cobble/grassy_cobblestone_rough_2k.jpg',
 		ao: '/soba/textures/grassy_cobble/grassy_cobblestone_ao_2k.jpg',
 	}));
 
-	readonly leaf = injectNgtsTextureLoader(() => '/soba/textures/other/leaves.jpg');
+	leaf = injectNgtsTextureLoader(() => '/soba/textures/other/leaves.jpg');
 
 	constructor() {
 		effect(() => {
diff --git a/libs/soba/src/staging/stars.stories.ts b/libs/soba/src/staging/stars.stories.ts
diff --git a/libs/soba/staging/src/cloud/cloud.ts b/libs/soba/staging/src/cloud/cloud.ts
diff --git a/libs/soba/staging/src/index.ts b/libs/soba/staging/src/index.ts
diff --git a/libs/soba/staging/src/stars/stars.ts b/libs/soba/staging/src/stars/stars.ts
diff --git a/tools/scripts/generate-soba-json.mjs b/tools/scripts/generate-soba-json.mjs

Original file line number	Diff line number	Diff line change
`@@ -40,16 +40,16 @@ export class NgtsBillboard {`
`40`	`40`
`41`	`41`	`@Input() billboardRef = injectNgtRef<Group>();`
`42`	`42`
`43`		`- @Input() set follow(follow: boolean) {`
	`43`	`+ @Input({ alias: 'follow' }) set _follow(follow: boolean) {`
`44`	`44`	`this.inputs.set({ follow });`
`45`	`45`	`}`
`46`		`- @Input() set lockX(lockX: boolean) {`
	`46`	`+ @Input({ alias: 'lockX' }) set _lockX(lockX: boolean) {`
`47`	`47`	`this.inputs.set({ lockX });`
`48`	`48`	`}`
`49`		`- @Input() set lockY(lockY: boolean) {`
	`49`	`+ @Input({ alias: 'lockY' }) set _lockY(lockY: boolean) {`
`50`	`50`	`this.inputs.set({ lockY });`
`51`	`51`	`}`
`52`		`- @Input() set lockZ(lockZ: boolean) {`
	`52`	`+ @Input({ alias: 'lockZ' }) set _lockZ(lockZ: boolean) {`
`53`	`53`	`this.inputs.set({ lockZ });`
`54`	`54`	`}`
`55`	`55`
Original file line number	Diff line number	Diff line change
`@@ -19,23 +19,23 @@ export abstract class NgtsCamera<TCamera extends NgtCamera> {`
`19`	`19`	`manual: false,`
`20`	`20`	`});`
`21`	`21`
`22`		`- @Input() set makeDefault(makeDefault: boolean) {`
	`22`	`+ @Input({ alias: 'makeDefault' }) set _makeDefault(makeDefault: boolean) {`
`23`	`23`	`this.inputs.set({ makeDefault });`
`24`	`24`	`}`
`25`	`25`
`26`		`- @Input() set manual(manual: boolean) {`
	`26`	`+ @Input({ alias: 'manual' }) set _manual(manual: boolean) {`
`27`	`27`	`this.inputs.set({ manual });`
`28`	`28`	`}`
`29`	`29`
`30`		`- @Input() set frames(frames: number) {`
	`30`	`+ @Input({ alias: 'frames' }) set _frames(frames: number) {`
`31`	`31`	`this.inputs.set({ frames });`
`32`	`32`	`}`
`33`	`33`
`34`		`- @Input() set resolution(resolution: number) {`
	`34`	`+ @Input({ alias: 'resolution' }) set _resolution(resolution: number) {`
`35`	`35`	`this.inputs.set({ resolution });`
`36`	`36`	`}`
`37`	`37`
`38`		`- @Input() set envMap(envMap: THREE.Texture) {`
	`38`	`+ @Input({ alias: 'envMap' }) set _envMap(envMap: THREE.Texture) {`
`39`	`39`	`this.inputs.set({ envMap });`
`40`	`40`	`}`
`41`	`41`
Original file line number	Diff line number	Diff line change
`@@ -66,27 +66,27 @@ export class NgtsLoader {`
`66`	`66`	`bar = this.inputs.select('barClass');`
`67`	`67`	`data = this.inputs.select('dataClass');`
`68`	`68`
`69`		`- @Input() set containerClass(containerClass: string) {`
	`69`	`+ @Input({ alias: 'containerClass' }) set _containerClass(containerClass: string) {`
`70`	`70`	`this.inputs.set({ containerClass });`
`71`	`71`	`}`
`72`	`72`
`73`		`- @Input() set innerClass(innerClass: string) {`
	`73`	`+ @Input({ alias: 'innerClass' }) set _innerClass(innerClass: string) {`
`74`	`74`	`this.inputs.set({ innerClass });`
`75`	`75`	`}`
`76`	`76`
`77`		`- @Input() set barClass(barClass: string) {`
	`77`	`+ @Input({ alias: 'barClass' }) set _barClass(barClass: string) {`
`78`	`78`	`this.inputs.set({ barClass });`
`79`	`79`	`}`
`80`	`80`
`81`		`- @Input() set dataClass(dataClass: string) {`
	`81`	`+ @Input({ alias: 'dataClass' }) set _dataClass(dataClass: string) {`
`82`	`82`	`this.inputs.set({ dataClass });`
`83`	`83`	`}`
`84`	`84`
`85`		`- @Input() set dataInterpolation(dataInterpolation: (value: number) => string) {`
	`85`	`+ @Input({ alias: 'dataInterpolation' }) set _dataInterpolation(dataInterpolation: (value: number) => string) {`
`86`	`86`	`this.inputs.set({ dataInterpolation });`
`87`	`87`	`}`
`88`	`88`
`89`		`- @Input() set initialState(initialState: (value: boolean) => boolean) {`
	`89`	`+ @Input({ alias: 'initialState' }) set _initialState(initialState: (value: boolean) => boolean) {`
`90`	`90`	`this.inputs.set({ initialState });`
`91`	`91`	`}`
`92`	`92`