angular-three-soba 2.0.0-beta.26 → 2.0.0-beta.261

package/fesm2022/angular-three-soba-vanilla-exports.mjs

@@ -0,0 +1,6 @@
+export { BlurPass, CausticsMaterial, CausticsProjectionMaterial, MeshDiscardMaterial, MeshDistortMaterial, MeshReflectorMaterial, MeshTransmissionMaterial, MeshWobbleMaterial, ProgressiveLightMap, SoftShadowMaterial, SpotLightMaterial, createCausticsUpdate, shaderMaterial } from '@pmndrs/vanilla';
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+//# sourceMappingURL=angular-three-soba-vanilla-exports.mjs.map

package/fesm2022/angular-three-soba-vanilla-exports.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"angular-three-soba-vanilla-exports.mjs","sources":["../../../../libs/soba/vanilla-exports/src/angular-three-soba-vanilla-exports.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;AAAA;;AAEG"}

package/loaders/README.md

@@ -1,3 +1,131 @@
-# angular-three-soba/loaders
+# `angular-three-soba/loaders`
 
-Secondary entry point of `angular-three-soba`. It can be used by importing from `angular-three-soba/loaders`.
+This secondary entry point includes various loaders for files such as GLTF, textures, and fonts.
+
+## TOC
+
+- [`injectFont`](#injectfont)
+- [`injectGLTF`](#injectgltf)
+- [`injectTexture`](#injecttexture)
+- [`injectProgress`](#injectprogress)
+- [`NgtsLoader`](#ngtsloader)
+
+## `injectFont`
+
+Provides a way to inject and load fonts into your Angular component. It takes a function input that returns the font data (either as a `string` URL or a `FontData` object) and an optional injector. It returns a signal that holds the loaded `Font` object or null if not yet loaded.
+
+The function also has static methods for preloading and clearing fonts from the cache:
+
+- `injectFont.preload(input: () => NgtsFontInput): void`: Preloads a font into the cache.
+- `injectFont.clear(input?: () => NgtsFontInput): void`: Clears a specific font or all fonts from the cache.
+
+Please check `NgtsText3D` source for example usage.
+
+## `injectGLTF`
+
+Injects and loads GLTF models into your Angular component. It takes a function path that returns the URL(s) of the GLTF model(s) and options for Draco and Meshopt compression. It returns a signal that holds the loading results.
+
+- Draco: A library for compressing and decompressing 3D geometric meshes and point clouds. Using Draco can significantly reduce the size of 3D models, leading to faster loading times.
+- Meshopt: A collection of tools for optimizing 3D meshes for size and runtime performance. Meshopt compression can further optimize models compressed with Draco.
+
+The function also has static methods for preloading and setting the decoder path for Draco:
+
+- `injectGLTF.preload(path: () => TUrl, options): void`: Preloads a GLTF model into the cache.
+- `injectGLTF.setDecoderPath(path: string): void`: Sets the decoder path for Draco.
+
+```ts
+@Component({
+	selector: 'app-suzi',
+	standalone: true,
+	template: `
+		<ngt-primitive *args="[scene()]" [rotation]="[-0.63, 0, 0]" [scale]="2" [position]="[0, -1.175, 0]" />
+	`,
+	imports: [NgtArgs],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class Suzi {
+	gltf = injectGLTF(() => './suzanne-high-poly.gltf');
+
+	scene = computed(() => {
+		const gltf = this.gltf();
+		if (!gltf) return null;
+		const { scene, materials } = gltf;
+		scene.traverse((obj) => (obj as any).isMesh && (obj.receiveShadow = obj.castShadow = true));
+
+		const material = materials['default'] as MeshStandardMaterial;
+
+		material.color.set('orange');
+		material.roughness = 0;
+		material.normalMap = new CanvasTexture(new FlakesTexture(), UVMapping, RepeatWrapping, RepeatWrapping);
+		material.normalMap.flipY = false;
+		material.normalMap.repeat.set(40, 40);
+		material.normalScale.set(0.05, 0.05);
+
+		return scene;
+	});
+}
+```
+
+## `injectTexture`
+
+Injects and loads textures into your Angular component. It takes a function input that returns the URL(s) of the texture(s) and an optional onLoad callback. It returns a signal that holds the loading results.
+
+The function also has a static method for preloading textures:
+
+- `injectTexture.preload(input: () => TInput): void`: Preloads a texture into the cache.
+
+```ts
+@Component({
+	template: `
+		<ngt-mesh>
+			<ngt-mesh-physical-material [normalMap]="normalMap()" [roughnessMap]="roughnessMap()" />
+		</ngt-mesh>
+	`,
+})
+export class MyCmp {
+	private textures = injectTexture(() => ({
+		roughnessMap: 'roughness_floor.jpeg',
+		normalMap: 'NORM.jpg',
+	}));
+	roughnessMap = computed(() => this.textures()?.roughnessMap || null);
+	normalMap = computed(() => this.textures()?.normalMap || null);
+}
+```
+
+## `injectProgress`
+
+```ts
+function injectProgress(injector?: Injector): Signal<{
+	errors: string[];
+	active: boolean;
+	progress: number;
+	item: string;
+	loaded: number;
+	total: number;
+}>;
+```
+
+Injects a signal that tracks the progress of asset loading in your Angular component. It returns a signal that holds an object with information about the loading progress, errors, and the currently loading item.
+
+## `NgtsLoader`
+
+A component that renders a loading screen while THREE.js assets are being loaded.
+
+### Object Inputs (`NgtsLoaderOptions`)
+
+| Property            | Description                                                              | Default value                                   |
+| ------------------- | ------------------------------------------------------------------------ | ----------------------------------------------- |
+| `containerClass`    | Additional CSS classes for the loader's container.                       | `''`                                            |
+| `innerClass`        | Additional CSS classes for the inner loader element.                     | `''`                                            |
+| `barClass`          | Additional CSS classes for the loader bar element.                       | `''`                                            |
+| `dataClass`         | Additional CSS classes for the text element displaying loading progress. | `''`                                            |
+| `dataInterpolation` | A function that formats the displayed loading progress.                  | `(value: number) => 'Loading ${p.toFixed(2)}%'` |
+| `initialState`      | A function that determines the initial visibility of the loader.         | `(value: boolean) => value`                     |
+
+`NgtsLoader` is a normal Angular component that renders HTML so it must be put on the same level of `ngt-canvas`, not within.
+
+```html
+<ngt-canvas />
+<ngts-loader [options]="loaderOptions" />
+```

package/loaders/index.d.ts

@@ -1,4 +1,5 @@
-export * from './gltf-loader/gltf-loader';
-export * from './loader/loader';
-export * from './progress/progress';
-export * from './texture-loader/texture-loader';
+export * from './lib/font-loader';
+export * from './lib/gltf-loader';
+export * from './lib/loader';
+export * from './lib/progress';
+export * from './lib/texture-loader';

package/loaders/lib/font-loader.d.ts

@@ -0,0 +1,27 @@
+import { Injector } from '@angular/core';
+import { Font } from 'three-stdlib';
+export type Glyph = {
+    _cachedOutline: string[];
+    ha: number;
+    o: string;
+};
+export type FontData = {
+    boundingBox: {
+        yMax: number;
+        yMin: number;
+    };
+    familyName: string;
+    glyphs: {
+        [k: string]: Glyph;
+    };
+    resolution: number;
+    underlineThickness: number;
+};
+export type NgtsFontInput = string | FontData;
+export declare function injectFont(input: () => NgtsFontInput, { injector }?: {
+    injector?: Injector;
+}): import("@angular/core").Signal<Font | null>;
+export declare namespace injectFont {
+    var preload: (input: () => NgtsFontInput) => void;
+    var clear: (input?: () => NgtsFontInput) => void;
+}

package/loaders/lib/gltf-loader.d.ts

@@ -0,0 +1,21 @@
+import { Injector, Signal } from '@angular/core';
+import { NgtLoaderResults, NgtObjectMap } from 'angular-three';
+import { GLTF, GLTFLoader } from 'three-stdlib';
+export type NgtsGLTF<T extends Partial<NgtObjectMap>> = GLTF & NgtObjectMap & T;
+declare function _injectGLTF<TUrl extends string | string[] | Record<string, string>>(path: () => TUrl, { useDraco, useMeshOpt, injector, extensions, }?: {
+    useDraco?: boolean | string;
+    useMeshOpt?: boolean;
+    injector?: Injector;
+    extensions?: (loader: GLTFLoader) => void;
+}): Signal<NgtLoaderResults<TUrl, GLTF & NgtObjectMap> | null>;
+declare namespace _injectGLTF {
+    var preload: <TUrl extends string | string[] | Record<string, string>>(path: () => TUrl, { useDraco, useMeshOpt, extensions, }?: {
+        useDraco?: boolean | string;
+        useMeshOpt?: boolean;
+        extensions?: (loader: GLTFLoader) => void;
+    }) => void;
+    var setDecoderPath: (path: string) => void;
+}
+export type NgtsGLTFLoader = typeof _injectGLTF;
+export declare const injectGLTF: NgtsGLTFLoader;
+export {};

package/loaders/lib/loader.d.ts

@@ -0,0 +1,29 @@
+import { ElementRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export interface NgtsLoaderOptions {
+    containerClass?: string;
+    innerClass?: string;
+    barClass?: string;
+    dataClass?: string;
+    dataInterpolation: (value: number) => string;
+    initialState: (value: boolean) => boolean;
+}
+export declare class NgtsLoader {
+    private progressState;
+    active: import("@angular/core").Signal<boolean>;
+    progress: import("@angular/core").Signal<number>;
+    options: import("@angular/core").InputSignalWithTransform<NgtsLoaderOptions, "" | Partial<NgtsLoaderOptions>>;
+    containerClass: import("@angular/core").Signal<string | undefined>;
+    innerClass: import("@angular/core").Signal<string | undefined>;
+    barClass: import("@angular/core").Signal<string | undefined>;
+    dataClass: import("@angular/core").Signal<string | undefined>;
+    initialState: import("@angular/core").Signal<(value: boolean) => boolean>;
+    dataInterpolation: import("@angular/core").Signal<(value: number) => string>;
+    progressSpanRef: import("@angular/core").Signal<ElementRef<HTMLSpanElement> | undefined>;
+    shown: import("@angular/core").WritableSignal<boolean>;
+    constructor();
+    private setShown;
+    private updateProgress;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgtsLoader, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgtsLoader, "ngts-loader", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/loaders/lib/progress.d.ts

@@ -0,0 +1,9 @@
+import { Injector } from '@angular/core';
+export declare function injectProgress(injector?: Injector): import("@angular/core").Signal<{
+    errors: string[];
+    active: boolean;
+    progress: number;
+    item: string;
+    loaded: number;
+    total: number;
+}>;

package/loaders/lib/texture-loader.d.ts

@@ -0,0 +1,13 @@
+import { Injector, Signal } from '@angular/core';
+import { NgtLoaderResults } from 'angular-three';
+import { Texture } from 'three';
+declare function _injectTexture<TInput extends string[] | string | Record<string, string>>(input: () => TInput, { onLoad, injector }?: {
+    onLoad?: (texture: Texture[]) => void;
+    injector?: Injector;
+}): Signal<NgtLoaderResults<TInput, Texture> | null>;
+declare namespace _injectTexture {
+    var preload: <TInput extends string[] | string | Record<string, string>>(input: () => TInput) => void;
+}
+export type NgtsTextureLoader = typeof _injectTexture;
+export declare const injectTexture: NgtsTextureLoader;
+export {};

package/materials/README.md

@@ -1,3 +1,161 @@
-# angular-three-soba/materials
+# `angular-three-soba/materials`
 
-Secondary entry point of `angular-three-soba`. It can be used by importing from `angular-three-soba/materials`.
+This secondary entry point includes a variety of materials for customizing the appearance of your 3D objects.
+
+| Package                        | Description                                                                                                   |
+| ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
+| `three-custom-shader-material` | Required by `NgtsCustomShaderMaterial`. A custom shader material that can be used to create custom materials. |
+| `@pmndrs/vanilla`              | A list of vanilla THREE.js implementations of various things.                                                 |
+| `three-mesh-bvh`               | Required by `NgtsMeshRefractionMaterial`. A BVH implementation for three.js.                                  |
+
+```bash
+npm install three-custom-shader-material @pmndrs/vanilla
+# yarn add three-custom-shader-material @pmndrs/vanilla three-mesh-bvh
+# pnpm add three-custom-shader-material @pmndrs/vanilla three-mesh-bvh
+```
+
+## TOC
+
+- [NgtsCustomShaderMaterial](#ngtscustomshadermaterial)
+- [NgtsMeshReflectorMaterial](#ngtsmeshreflectormaterial)
+- [NgtsMeshTransmissionMaterial](#ngtsmeshtransmissionmaterial)
+- [NgtsMeshWobbleMaterial](#ngtsmeshwobblematerial)
+- [NgtsMeshRefractionMaterial](#ngtsmeshrefractionmaterial)
+
+## NgtsCustomShaderMaterial
+
+A component that allows you to create custom shader materials using the `three-custom-shader-material` library. It provides a flexible way to define your own shaders and control the rendering of your objects.
+
+### Object Input (`NgtsCustomShaderMaterialOptions`)
+
+| Property         | Description                                                        | Default Value |
+| ---------------- | ------------------------------------------------------------------ | ------------- |
+| `baseMaterial`   | Required. The base material to use for the custom shader material. | `undefined`   |
+| `vertexShader`   | The vertex shader code.                                            | `undefined`   |
+| `fragmentShader` | The fragment shader code.                                          | `undefined`   |
+| `uniforms`       | An object containing the uniforms for the shader.                  | `{}`          |
+| `defines`        | An object containing the defines for the shader.                   | `{}`          |
+| `transparent`    | Whether the material is transparent.                               | `false`       |
+| `wireframe`      | Whether to render the material in wireframe mode.                  | `false`       |
+| `depthTest`      | Whether to enable depth testing.                                   | `true`        |
+| `depthWrite`     | Whether to write to the depth buffer.                              | `true`        |
+| `clipping`       | Whether to enable clipping.                                        | `true`        |
+| `extensions`     | An object containing extensions for the shader.                    | `{}`          |
+
+```html
+<ngt-group>
+	<ngt-points>
+		<ngt-icosahedron-geometry *args="[1, 32]" />
+		<ngts-custom-shader-material [baseMaterial]="PointsMaterial" [options]="options()" />
+	</ngt-points>
+</ngt-group>
+```
+
+## NgtsMeshReflectorMaterial
+
+A component that creates a reflective material with optional blur for your meshes. It is based on the `MeshReflectorMaterial` class from the `@pmndrs/vanilla` library.
+
+### Object Input (`NgtsMeshReflectorMaterialOptions`)
+
+| Property             | Description                          | Default Value |
+| -------------------- | ------------------------------------ | ------------- |
+| `color`              | The color of the material.           | `0xffffff`    |
+| `reflectivity`       | The reflectivity of the material.    | `1`           |
+| `roughness`          | The roughness of the material.       | `0.5`         |
+| `metalness`          | The metalness of the material.       | `0.5`         |
+| `aoMapIntensity`     | The ambient occlusion map intensity. | `1`           |
+| `envMapIntensity`    | The environment map intensity.       | `1`           |
+| `normalMapIntensity` | The normal map intensity.            | `1`           |
+| `displacementScale`  | The displacement scale.              | `1`           |
+
+```html
+<ngt-group>
+	<ngt-box-geometry *args="[1, 1, 1]" />
+	<ngts-mesh-reflector-material [options]="options()" />
+</ngt-group>
+```
+
+## NgtsMeshTransmissionMaterial
+
+A component that creates a transmission material with effects like chromatic aberration and roughness blur. It is based on the `MeshTransmissionMaterial` class from the `@pmndrs/vanilla` library.
+
+### Object Input (`NgtsMeshTransmissionMaterialOptions`)
+
+| Property                  | Description                                                    | Default Value |
+| ------------------------- | -------------------------------------------------------------- | ------------- |
+| `transmission`            | The transmission factor of the material.                       | `1`           |
+| `thickness`               | The thickness of the material.                                 | `0`           |
+| `roughness`               | The roughness of the material.                                 | `0`           |
+| `chromaticAberration`     | The amount of chromatic aberration.                            | `0.06`        |
+| `anisotropicBlur`         | The amount of anisotropic blur.                                | `0.1`         |
+| `distortion`              | The amount of distortion.                                      | `0`           |
+| `distortionScale`         | The scale of the distortion.                                   | `0.3`         |
+| `temporalDistortion`      | The amount of temporal distortion.                             | `0.5`         |
+| `transmissionSampler`     | Whether to use the three.js transmission sampler texture.      | `false`       |
+| `backside`                | Whether to render the backside of the material.                | `false`       |
+| `backsideThickness`       | The thickness of the backside of the material.                 | `0`           |
+| `backsideEnvMapIntensity` | The environment map intensity of the backside of the material. | `1`           |
+| `resolution`              | The resolution of the local buffer.                            | `undefined`   |
+| `backsideResolution`      | The resolution of the local buffer for backfaces.              | `undefined`   |
+| `samples`                 | The number of refraction samples.                              | `10`          |
+| `background`              | The background of the buffer scene.                            | `null`        |
+
+```html
+<ngt-group>
+	<ngt-box-geometry *args="[1, 1, 1]" />
+	<ngts-mesh-transmission-material [options]="options()" />
+</ngt-group>
+```
+
+## NgtsMeshWobbleMaterial
+
+A component that creates a material that makes your geometry wobble and wave around.
+
+### Object Input (`NgtsMeshWobbleMaterialOptions`)
+
+| Property | Description                        | Default Value |
+| -------- | ---------------------------------- | ------------- |
+| `speed`  | The speed of the wobble effect.    | `1`           |
+| `factor` | The strength of the wobble effect. | `0.6`         |
+
+```html
+<ngt-group>
+	<ngt-box-geometry *args="[1, 1, 1]" />
+	<ngts-mesh-wobble-material [options]="options()" />
+</ngt-group>
+```
+
+## NgtsMeshRefractionMaterial
+
+A convincing Glass/Diamond refraction material.
+
+### Object Input (`NgtsMeshRefractionMaterialOptions`)
+
+| Property             | Description                                                                     | Default Value |
+| -------------------- | ------------------------------------------------------------------------------- | ------------- |
+| `envMap`             | (Required) The environment map.                                                 |               |
+| `bounces`            | The number of ray-cast bounces.                                                 | `2`           |
+| `ior`                | The refraction index.                                                           | `2.4`         |
+| `fresnel`            | The Fresnel (strip light).                                                      | `0`           |
+| `aberrationStrength` | The RGB shift intensity.                                                        | `0`           |
+| `color`              | The color of the material.                                                      | `0xffffff`    |
+| `fastChroma`         | Whether to use fewer ray casts for the RGB shift sacrificing physical accuracy. | `true`        |
+
+If you want it to reflect other objects in the scene you best pair it with a cube-camera.
+
+```html
+<ngts-cube-camera>
+	<ngt-mesh *cameraContent="let texture">
+		<ngts-mesh-refraction-material [envMap]="texture()" />
+	</ngt-mesh>
+</ngts-cube-camera>
+```
+
+Otherwise, just pass it an environment map.
+
+```html
+<!-- texture = injectLoader(() => RGBELoader, () => 'path/to/texture.hdr') -->
+<ngt-mesh>
+	<ngts-mesh-refraction-material [envMap]="texture()" />
+</ngt-mesh>
+```

package/materials/index.d.ts

@@ -1,6 +1,6 @@
-export * from './mesh-distort-material/mesh-distort-material';
-export * from './mesh-reflector-material/mesh-reflector-material';
-export * from './mesh-refraction-material/mesh-refraction-material';
-export * from './mesh-transmission-material/mesh-transmission-material';
-export * from './mesh-wobble-material/mesh-wobble-material';
-export * from './point-material/point-material';
+export * from './lib/custom-shader-material';
+export * from './lib/mesh-distort-material';
+export * from './lib/mesh-reflector-material';
+export * from './lib/mesh-refraction-material';
+export * from './lib/mesh-transmission-material';
+export * from './lib/mesh-wobble-material';

package/materials/lib/custom-shader-material.d.ts

@@ -0,0 +1,19 @@
+import { ElementRef } from '@angular/core';
+import { Material } from 'three';
+import CustomShaderMaterial from 'three-custom-shader-material/vanilla';
+import * as i0 from "@angular/core";
+export declare class NgtsCustomShaderMaterial {
+    baseMaterial: import("@angular/core").InputSignal<Material | typeof Material | ElementRef<Material>>;
+    attach: import("@angular/core").InputSignal<string | string[]>;
+    options: import("@angular/core").InputSignal<Omit<import("three-custom-shader-material/vanilla").iCSMParams<import("three-custom-shader-material/vanilla").MaterialConstructor>, "baseMaterial">>;
+    parameters: import("@angular/core").Signal<Omit<Omit<import("three-custom-shader-material/vanilla").iCSMParams<import("three-custom-shader-material/vanilla").MaterialConstructor>, "baseMaterial">, "vertexShader" | "fragmentShader" | "cacheKey" | "uniforms">>;
+    base: import("@angular/core").Signal<Material | typeof Material>;
+    private fragmentShader;
+    private vertexShader;
+    private uniforms;
+    private cacheKey;
+    material: import("@angular/core").Signal<CustomShaderMaterial<import("three-custom-shader-material/vanilla").MaterialConstructor>>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgtsCustomShaderMaterial, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgtsCustomShaderMaterial, "ngts-custom-shader-material", never, { "baseMaterial": { "alias": "baseMaterial"; "required": true; "isSignal": true; }; "attach": { "alias": "attach"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/materials/lib/mesh-distort-material.d.ts

@@ -0,0 +1,18 @@
+import { MeshDistortMaterial } from '@pmndrs/vanilla';
+import { NgtMeshPhysicalMaterial } from 'angular-three';
+import { MeshDistortMaterialParameters } from 'angular-three-soba/vanilla-exports';
+import * as i0 from "@angular/core";
+export interface NgtsMeshDistortMaterialOptions extends Partial<MeshDistortMaterialParameters>, Partial<NgtMeshPhysicalMaterial> {
+    speed: number;
+    factor?: number;
+}
+export declare class NgtsMeshDistortMaterial {
+    attach: import("@angular/core").InputSignal<string>;
+    options: import("@angular/core").InputSignalWithTransform<NgtsMeshDistortMaterialOptions, "" | Partial<NgtsMeshDistortMaterialOptions>>;
+    parameters: import("@angular/core").Signal<Omit<NgtsMeshDistortMaterialOptions, "speed">>;
+    material: MeshDistortMaterial;
+    private speed;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgtsMeshDistortMaterial, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgtsMeshDistortMaterial, "ngts-mesh-distort-material", never, { "attach": { "alias": "attach"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/materials/lib/mesh-reflector-material.d.ts

@@ -0,0 +1,50 @@
+import { NgtMeshStandardMaterial } from 'angular-three';
+import { MeshReflectorMaterial } from 'angular-three-soba/vanilla-exports';
+import { Texture } from 'three';
+import * as i0 from "@angular/core";
+export interface NgtsMeshReflectorMaterialOptions extends Partial<NgtMeshStandardMaterial> {
+    resolution: number;
+    mixBlur: number;
+    mixStrength: number;
+    blur: [number, number] | number;
+    mirror: number;
+    minDepthThreshold: number;
+    maxDepthThreshold: number;
+    depthScale: number;
+    depthToBlurRatioBias: number;
+    distortion: number;
+    mixContrast: number;
+    reflectorOffset: number;
+    distortionMap?: Texture;
+}
+export declare class NgtsMeshReflectorMaterial {
+    attach: import("@angular/core").InputSignal<string>;
+    options: import("@angular/core").InputSignalWithTransform<NgtsMeshReflectorMaterialOptions, "" | Partial<NgtsMeshReflectorMaterialOptions>>;
+    private parameters;
+    private store;
+    private gl;
+    private materialRef;
+    private reflectOptions;
+    private blur;
+    private normalizedBlur;
+    private hasBlur;
+    private reflectorPlane;
+    private normal;
+    private reflectorWorldPosition;
+    private cameraWorldPosition;
+    private rotationMatrix;
+    private lookAtPosition;
+    private clipPlane;
+    private view;
+    private target;
+    private q;
+    private textureMatrix;
+    private virtualCamera;
+    private reflectState;
+    private definesKey;
+    material: import("@angular/core").Signal<MeshReflectorMaterial>;
+    constructor();
+    private beforeRender;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgtsMeshReflectorMaterial, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgtsMeshReflectorMaterial, "ngts-mesh-reflector-material", never, { "attach": { "alias": "attach"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/materials/lib/mesh-refraction-material.d.ts

@@ -0,0 +1,42 @@
+import { ElementRef } from '@angular/core';
+import { NgtShaderMaterial } from 'angular-three';
+import { ColorRepresentation, CubeTexture, Texture } from 'three';
+import * as i0 from "@angular/core";
+export interface NgtsMeshRefractionMaterialOptions extends Partial<NgtShaderMaterial> {
+    /** Number of ray-cast bounces, it can be expensive to have too many, 2 */
+    bounces: number;
+    /** Refraction index, 2.4 */
+    ior: number;
+    /** Fresnel (strip light), 0 */
+    fresnel: number;
+    /** RGB shift intensity, can be expensive, 0 */
+    aberrationStrength: number;
+    /** Color, white */
+    color: ColorRepresentation;
+    /** If this is on it uses fewer ray casts for the RGB shift sacrificing physical accuracy, true */
+    fastChroma: boolean;
+}
+export declare class NgtsMeshRefractionMaterial {
+    envMap: import("@angular/core").InputSignal<Texture | CubeTexture>;
+    attach: import("@angular/core").InputSignal<string>;
+    options: import("@angular/core").InputSignalWithTransform<NgtsMeshRefractionMaterialOptions, "" | Partial<NgtsMeshRefractionMaterialOptions>>;
+    parameters: import("@angular/core").Signal<Omit<NgtsMeshRefractionMaterialOptions, "aberrationStrength" | "fastChroma">>;
+    private fastChroma;
+    aberrationStrength: import("@angular/core").Signal<number>;
+    materialRef: import("@angular/core").Signal<ElementRef<import("three").ShaderMaterial & {
+        [name: string]: number | boolean | any[] | import("three").Color | Texture | import("three").Vector3 | import("three").Matrix4 | import("three").Vector4 | import("three").Quaternion | import("three").Matrix3 | CubeTexture | Int32Array | Float32Array | import("three").Vector2 | null;
+    }> | undefined>;
+    private store;
+    private size;
+    resolution: import("@angular/core").Signal<number[]>;
+    defines: import("@angular/core").Signal<{
+        [key: string]: string;
+    }>;
+    private defineKeys;
+    material: import("@angular/core").Signal<import("three").ShaderMaterial & {
+        [name: string]: number | boolean | any[] | import("three").Color | Texture | import("three").Vector3 | import("three").Matrix4 | import("three").Vector4 | import("three").Quaternion | import("three").Matrix3 | CubeTexture | Int32Array | Float32Array | import("three").Vector2 | null;
+    }>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgtsMeshRefractionMaterial, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgtsMeshRefractionMaterial, "ngts-mesh-refraction-material", never, { "envMap": { "alias": "envMap"; "required": true; "isSignal": true; }; "attach": { "alias": "attach"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}