angular-three-soba 2.0.0-beta.8 → 2.0.0

package/misc/README.md

@@ -1,3 +1,218 @@
-# angular-three-soba/misc
+# `angular-three-soba/misc`
 
-Secondary entry point of `angular-three-soba`. It can be used by importing from `angular-three-soba/misc`.
+This secondary entry point includes miscellaneous utilities and components for animations, shadows, and frame buffer objects (FBOs).
+
+## TOC
+
+- [injectAnimations](#injectanimations)
+- [injectFBO](#injectfbo)
+- [NgtsFBO](#ngtsfbo)
+- [NgtsBakeShadows](#ngtsbakeshadows)
+- [injectDepthBuffer](#injectdepthbuffer)
+- [NgtsSampler](#ngtssampler)
+- [NgtsComputedAttribute](#ngtscomputedattribute)
+- [NgtsDecal](#ngtsdecal)
+
+## `injectAnimations`
+
+```ts
+function injectAnimations<TAnimation extends AnimationClip>(
+	animations: () => NgtsAnimation<TAnimation> | undefined | null,
+	object: ElementRef<Object3D> | Object3D | (() => ElementRef<Object3D> | Object3D | undefined | null),
+	{ injector }: { injector?: Injector } = {},
+): Signal<NgtsAnimationApi<TAnimation> | null>;
+```
+
+Provides a way to inject and manage animations in your Angular component. It takes a function animations that returns an array of animation clips or an object containing an array of animation clips, a reference to the object to be animated, and an optional injector. It returns a signal that holds an object containing the animation clips, mixer, names, actions, and a signal indicating if the animations are ready.
+
+This function is commonly used together with `injectGLTF` since GLTF files often contain animation data for 3D models. It provides an abstraction around `AnimationMixer`, which simplifies the process of playing and controlling animations.
+
+The `NgtsAnimationApi` object contains the following properties:
+
+- `clips`: An array of `AnimationClip` objects representing the available animations.
+- `mixer`: An instance of `AnimationMixer` used to control the playback of animations.
+- `names`: An array of strings representing the names of the available animations.
+- `actions`: An object where keys are animation names and values are `AnimationAction` objects, which control the playback of individual animations.
+- `ready`: A signal indicating if the animations are ready.
+
+## `injectFBO`
+
+```ts
+function injectFBO(params: () => NgtsFBOParams, { injector }: { injector?: Injector } = {}): Signal<WebGLRenderTarget>;
+```
+
+Injects a `WebGLRenderTarget` (FBO) into your Angular component. It takes a function params that returns the parameters for the FBO and an optional injector. It returns a signal that holds the `WebGLRenderTarget` object.
+
+The `params` object includes the following properties:
+
+- `width`: The width of the FBO in pixels. Or it can also be the `settings` object.
+- `height`: The height of the FBO in pixels.
+- `settings`: An object containing the settings for the FBO.
+  - `samples`: The number of samples for multisample anti-aliasing (MSAA). Set to 0 to disable MSAA.
+  - `depth`: If set, the scene depth will be rendered into buffer.depthTexture. (Default: false)
+  - `wrapS`: The wrapping mode for the s-coordinate of the FBO texture.
+  - `wrapT`: The wrapping mode for the t-coordinate of the FBO texture.
+  - `magFilter`: The magnification filter for the FBO texture.
+  - `minFilter`: The minification filter for the FBO texture.
+  - `format`: The internal format of the color buffer.
+  - `type`: The data type of the color buffer.
+  - `anisotropy`: The level of anisotropic filtering for the FBO texture.
+  - `depthBuffer`: Whether to include a depth buffer. (Default: true)
+  - `stencilBuffer`: Whether to include a stencil buffer. (Default: false)
+  - `generateMipmaps`: Whether to generate mipmaps for the FBO texture. (Default: true)
+  - `depthTexture`: A DepthTexture instance to use for the depth buffer.
+  - `encoding`: The encoding of the FBO texture.
+  - `colorSpace`: The color space of the FBO texture.
+
+### NgtsFBO
+
+A directive that allows you to render a part of your scene into an FBO using an `ng-template`. It takes an input fbo that defines the parameters for the FBO, using the same `NgtsFBOParams` type as `injectFBO`.
+
+```html
+<ng-template [fbo]="options()" let-target>
+	<ngts-perspective-camera [options]="{ position: [0, 0, 3] }" />
+
+	<ngt-portal [container]="scene()">
+		<ngt-mesh *portalContent></ngt-mesh>
+	</ngt-portal>
+
+	<ngt-mesh>
+		<ngt-box-geometry *args="[3, 3, 3]" />
+		<ngt-mesh-standard-material [map]="target().texture" />
+	</ngt-mesh>
+</ng-template>
+```
+
+## NgtsBakeShadows
+
+A directive that bakes shadows in your scene. It sets `gl.shadowMap.autoUpdate` to false and requests a single `gl.shadowMap.needsUpdate = true`. This can improve performance by making shadows static.
+
+```html
+<ngts-bake-shadows />
+```
+
+## injectDepthBuffer
+
+Renders the scene into a depth-buffer. Often effects depend on it and this allows you to render a single buffer and share it, which minimizes the performance impact. It returns the buffer's `depthTexture`.
+
+Since this is a rather expensive effect you can limit the amount of frames it renders when your objects are static. For instance making it render only once by setting `frames: 1`.
+
+```ts
+export class MyCmp {
+	depthBuffer = injectDepthBuffer(() => ({
+		size: 256, // The size of the depth buffer
+		frames: Infinity, // The amount of frames to render
+	}));
+}
+```
+
+## NgtsSampler
+
+A component that samples points from a mesh and transforms an `InstancedMesh`'s matrix to distribute instances on the points. It takes a `Mesh` and an `InstancedMesh` as children.
+
+### Object Inputs (NgtsSamplerOptions)
+
+| Property    | Description                                                                                                                                                   | Default value |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
+| `weight`    | The name of the attribute to use as the sampling weight.                                                                                                      | `undefined`   |
+| `transform` | A function that transforms each instance given a sample. It receives a dummy `Object3D` with all the sampled data and should mutate `transformPayload.dummy`. | `undefined`   |
+| `count`     | The number of samples to take.                                                                                                                                | `16`          |
+
+#### Passing `InstancedMesh` and `Mesh` as content children
+
+```html
+<ngts-sampler [options]="{ weight: 'normal', transform: transformPoint, count: 16 }">
+	<ngt-mesh>
+		<ngt-sphere-geometry *args="[2]" />
+	</ngt-mesh>
+
+	<ngt-instanced-mesh *args="[undefined, undefined, 1_000]">
+		<ngt-sphere-geometry *args="[0.1]" />
+	</ngt-instanced-mesh>
+</ngts-sampler>
+```
+
+or use references when you can't compose declaratively:
+
+```ts
+@Component({
+	template: `
+		<ngts-sampler [instances]="instancedRef()" [mesh]="mesh()" />
+
+		<ngt-instanced-mesh #instanced *args="[undefined, undefined, 1_000]">
+			<!-- content -->
+		</ngt-instanced-mesh>
+	`,
+})
+class MyCmp {
+	instancedRef = viewChild<ElementRef<InstancedMesh>>('instanced');
+
+	gltf = injectGLTF(() => 'my/mesh/url');
+	mesh = computed(() => this.gltf()?.scene || null);
+}
+```
+
+## NgtsComputedAttribute
+
+A component that allows you to compute and attach an attribute to a geometry declaratively.
+
+It accepts the following inputs:
+
+- `compute`: A function that computes the attribute. It receives the geometry as an argument and should return a `BufferAttribute`.
+- `name`: The name of the attribute to attach to the geometry.
+- `options`: pass-through options for `BufferAttribute`
+
+```html
+<ngt-sphere-geometry>
+	<ngts-computed-attribute
+		name="my-attribute-name"
+		[compute]="computeAttributeFn"
+		[options]="{ usage: StaticReadUsage }"
+	/>
+</ngt-sphere-geometry>
+```
+
+## NgtsDecal
+
+Abstraction around Three's `DecalGeometry`. It will use the its parent `mesh` as the decal surface by default.
+
+The decal box has to intersect the surface, otherwise it will not be visible. if you do not specify a rotation it will look at the parents center point. You can also pass a single number as the rotation which allows you to spin it.
+
+### Object Inputs (NgtsDecalOptions)
+
+| Property              | Description                                           | Default value |
+| --------------------- | ----------------------------------------------------- | ------------- |
+| `map`                 | The texture to use for the decal.                     | `undefined`   |
+| `debug`               | Makes the "bounding box" of the decal visible.        | `false`       |
+| `depthTest`           | Whether to enable depth testing.                      | `false`       |
+| `polygonOffsetFactor` | The factor by which the polygon offset is multiplied. | `-10`         |
+
+It also accepts a `mesh` input that allows you to specify the surface the decal must attach to.
+
+```html
+<mesh>
+	<sphereGeometry />
+	<meshBasicMaterial />
+	<ngts-decal [options]="{ position: [0, 0, 0], rotation: [0, 0, 0], scale: 1, debug: true }">
+		<ngt-mesh-basic-material [map]="texture()" [polygonOffset]="true" [polygonOffsetFactor]="-1" />
+	</ngts-decal>
+</mesh>
+```
+
+If you do not specify a material it will create a transparent `ngt-mesh-basic-material` with a `polygonOffsetFactor` of -10.
+
+```html
+<ngt-mesh>
+	<ngt-mesh-sphere-geometry />
+	<ngt-mesh-basic-material />
+	<ngts-decal [options]="{ map: texture() }" />
+</ngt-mesh>
+```
+
+If declarative composition is not possible, use the `mesh` input to define the surface the decal must attach to.
+
+```html
+<ngts-decal [mesh]="meshRef()">
+	<ngt-mesh-basic-material [map]="texture()" [polygonOffset]="true" [polygonOffsetFactor]="-1" />
+</ngts-decal>
+```

package/misc/index.d.ts

@@ -1,13 +1,13 @@
-export * from './animations/animations';
-export * from './bake-shadows/bake-shadows';
-export * from './caustics/caustics';
-export * from './decal/decal';
-export * from './depth-buffer/depth-buffer';
-export * from './example/example';
-export * from './fbo/fbo';
-export * from './html/html';
-export * from './sampler/sampler';
-export * from './shadow/shadow';
-export * from './stats-gl/stats-gl';
-export * from './trail-texture/inject-trail-texture';
-export * from './trail/trail';
+export * from './lib/animations';
+export * from './lib/bake-shadows';
+export * from './lib/computed-attribute';
+export * from './lib/constants';
+export * from './lib/decal';
+export * from './lib/deprecated';
+export * from './lib/depth-buffer';
+export * from './lib/fbo';
+export * from './lib/html/html';
+export * from './lib/html/html-content';
+export * from './lib/intersect';
+export * from './lib/sampler';
+export * from './lib/scale-factor';

package/misc/lib/animations.d.ts

@@ -0,0 +1,17 @@
+import { ElementRef, Injector } from '@angular/core';
+import { AnimationAction, AnimationClip, AnimationMixer, Object3D } from 'three';
+export type NgtsAnimation<TAnimation extends AnimationClip = AnimationClip> = TAnimation[] | {
+    animations: TAnimation[];
+};
+/**
+ * Use afterNextRender
+ */
+export declare function injectAnimations<TAnimation extends AnimationClip>(animations: () => NgtsAnimation<TAnimation> | undefined | null, object: ElementRef<Object3D> | Object3D | (() => ElementRef<Object3D> | Object3D | undefined | null), { injector }?: {
+    injector?: Injector;
+}): {
+    clips: AnimationClip[];
+    mixer: AnimationMixer;
+    actions: { [key in TAnimation["name"]]: AnimationAction | null; };
+    names: TAnimation["name"][];
+    ready: import("@angular/core").WritableSignal<boolean>;
+};

package/misc/lib/computed-attribute.d.ts

@@ -0,0 +1,64 @@
+import { ElementRef } from '@angular/core';
+import { BufferAttribute, BufferGeometry } from 'three';
+import * as i0 from "@angular/core";
+export declare class NgtsComputedAttribute {
+    compute: import("@angular/core").InputSignal<(geometry: BufferGeometry) => BufferAttribute>;
+    name: import("@angular/core").InputSignal<string>;
+    options: import("@angular/core").InputSignal<Partial<{
+        name?: string | undefined;
+        clone?: (() => BufferAttribute) | undefined;
+        toJSON?: (() => import("three").BufferAttributeJSON) | undefined;
+        array?: import("three").TypedArray | undefined;
+        itemSize?: number | undefined;
+        usage?: import("three").Usage | undefined;
+        gpuType?: import("three").AttributeGPUType | undefined;
+        updateRange?: {
+            offset: number;
+            count: number;
+        } | undefined;
+        updateRanges?: {
+            start: number;
+            count: number;
+        }[] | undefined;
+        version?: number | undefined;
+        normalized?: boolean | undefined;
+        readonly count?: number | undefined;
+        needsUpdate?: boolean | undefined;
+        readonly isBufferAttribute?: true | undefined;
+        onUploadCallback?: (() => void) | undefined;
+        onUpload?: ((callback: () => void) => BufferAttribute) | undefined;
+        setUsage?: ((usage: import("three").Usage) => BufferAttribute) | undefined;
+        addUpdateRange?: ((start: number, count: number) => void) | undefined;
+        clearUpdateRanges?: (() => void) | undefined;
+        copy?: ((source: BufferAttribute) => BufferAttribute) | undefined;
+        copyAt?: ((index1: number, attribute: BufferAttribute, index2: number) => BufferAttribute) | undefined;
+        copyArray?: ((array: ArrayLike<number>) => BufferAttribute) | undefined;
+        applyMatrix3?: ((m: import("three").Matrix3) => BufferAttribute) | undefined;
+        applyMatrix4?: ((m: import("three").Matrix4) => BufferAttribute) | undefined;
+        applyNormalMatrix?: ((m: import("three").Matrix3) => BufferAttribute) | undefined;
+        transformDirection?: ((m: import("three").Matrix4) => BufferAttribute) | undefined;
+        set?: ((value: ArrayLike<number> | ArrayBufferView, offset?: number) => BufferAttribute) | undefined;
+        getComponent?: ((index: number, component: number) => number) | undefined;
+        setComponent?: ((index: number, component: number, value: number) => void) | undefined;
+        getX?: ((index: number) => number) | undefined;
+        setX?: ((index: number, x: number) => BufferAttribute) | undefined;
+        getY?: ((index: number) => number) | undefined;
+        setY?: ((index: number, y: number) => BufferAttribute) | undefined;
+        getZ?: ((index: number) => number) | undefined;
+        setZ?: ((index: number, z: number) => BufferAttribute) | undefined;
+        getW?: ((index: number) => number) | undefined;
+        setW?: ((index: number, z: number) => BufferAttribute) | undefined;
+        setXY?: ((index: number, x: number, y: number) => BufferAttribute) | undefined;
+        setXYZ?: ((index: number, x: number, y: number, z: number) => BufferAttribute) | undefined;
+        setXYZW?: ((index: number, x: number, y: number, z: number, w: number) => BufferAttribute) | undefined;
+        attach: string | string[] | import("angular-three").NgtAttachFunction;
+        addEventListener: <TEventKey extends keyof import("angular-three").NgtNodeEventMap<BufferAttribute>>(type: TEventKey, listener: (this: import("angular-three").NgtNodeElement<BufferAttribute, typeof BufferAttribute>, ev: import("angular-three").NgtNodeEventMap<BufferAttribute>[TEventKey]) => any) => void;
+        removeEventListener: <TEventKey extends keyof import("angular-three").NgtNodeEventMap<BufferAttribute>>(type: TEventKey, listener: (this: import("angular-three").NgtNodeElement<BufferAttribute, typeof BufferAttribute>, ev: import("angular-three").NgtNodeEventMap<BufferAttribute>[TEventKey]) => any) => void;
+        __ngt_args__: [array: import("three").TypedArray, itemSize: number, normalized?: boolean | undefined];
+    }>>;
+    bufferAttribute: BufferAttribute;
+    attributeRef: import("@angular/core").Signal<ElementRef<BufferAttribute> | undefined>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgtsComputedAttribute, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgtsComputedAttribute, "ngts-computed-attribute", never, { "compute": { "alias": "compute"; "required": true; "isSignal": true; }; "name": { "alias": "name"; "required": true; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/misc/lib/constants.d.ts

@@ -0,0 +1 @@
+export declare function getVersion(): number;

package/misc/lib/decal.d.ts

@@ -0,0 +1,27 @@
+import { ElementRef } from '@angular/core';
+import { NgtMesh } from 'angular-three';
+import { Mesh, Texture } from 'three';
+import * as i0 from "@angular/core";
+export interface NgtsDecalOptions extends Partial<NgtMesh> {
+    polygonOffsetFactor: number;
+    depthTest: boolean;
+    debug: boolean;
+    map?: Texture | null;
+}
+export declare class NgtsDecal {
+    mesh: import("@angular/core").InputSignal<Mesh<import("three").BufferGeometry<import("three").NormalBufferAttributes>, import("three").Material | import("three").Material[], import("three").Object3DEventMap> | ElementRef<Mesh<import("three").BufferGeometry<import("three").NormalBufferAttributes>, import("three").Material | import("three").Material[], import("three").Object3DEventMap>> | null | undefined>;
+    options: import("@angular/core").InputSignalWithTransform<NgtsDecalOptions, "" | Partial<NgtsDecalOptions>>;
+    parameters: import("@angular/core").Signal<Omit<NgtsDecalOptions, "position" | "scale" | "rotation" | "polygonOffsetFactor" | "depthTest" | "debug" | "map">>;
+    meshRef: import("@angular/core").Signal<ElementRef<Mesh<import("three").BufferGeometry<import("three").NormalBufferAttributes>, import("three").Material | import("three").Material[], import("three").Object3DEventMap>>>;
+    helperRef: import("@angular/core").Signal<ElementRef<Mesh<import("three").BufferGeometry<import("three").NormalBufferAttributes>, import("three").Material | import("three").Material[], import("three").Object3DEventMap>> | undefined>;
+    map: import("@angular/core").Signal<Texture | null | undefined>;
+    depthTest: import("@angular/core").Signal<boolean>;
+    polygonOffsetFactor: import("@angular/core").Signal<number>;
+    debug: import("@angular/core").Signal<boolean>;
+    private position;
+    private rotation;
+    private scale;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgtsDecal, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgtsDecal, "ngts-decal", never, { "mesh": { "alias": "mesh"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/misc/lib/deprecated.d.ts

@@ -0,0 +1,14 @@
+import { BufferAttribute } from 'three';
+/**
+ * NOTE: Sets `BufferAttribute.updateRange` since r159.
+ */
+export declare const setUpdateRange: (attribute: BufferAttribute, updateRange: {
+    offset: number;
+    count: number;
+}) => void;
+export declare const LinearEncoding = 3000;
+export declare const sRGBEncoding = 3001;
+/**
+ * NOTE: TextureEncoding was deprecated in r152, and removed in r162.
+ */
+export type TextureEncoding = typeof LinearEncoding | typeof sRGBEncoding;

package/misc/lib/depth-buffer.d.ts

@@ -0,0 +1,8 @@
+import { Injector } from '@angular/core';
+import { DepthTexture } from 'three';
+export declare function injectDepthBuffer(params?: () => {
+    size?: number;
+    frames?: number;
+}, { injector }?: {
+    injector?: Injector;
+}): import("@angular/core").Signal<DepthTexture | null>;

package/misc/lib/fbo.d.ts

@@ -0,0 +1,46 @@
+import { Injector } from '@angular/core';
+import { ColorSpace, DepthTexture, MagnificationTextureFilter, MinificationTextureFilter, TextureDataType, WebGLRenderTarget, Wrapping } from 'three';
+import { TextureEncoding } from './deprecated';
+import * as i0 from "@angular/core";
+interface FBOSettings {
+    /** Defines the count of MSAA samples. Can only be used with WebGL 2. Default: 0 */
+    samples?: number;
+    /** If set, the scene depth will be rendered into buffer.depthTexture. Default: false */
+    depth?: boolean;
+    wrapS?: Wrapping | undefined;
+    wrapT?: Wrapping | undefined;
+    magFilter?: MagnificationTextureFilter | undefined;
+    minFilter?: MinificationTextureFilter | undefined;
+    format?: number | undefined;
+    type?: TextureDataType | undefined;
+    anisotropy?: number | undefined;
+    depthBuffer?: boolean | undefined;
+    stencilBuffer?: boolean | undefined;
+    generateMipmaps?: boolean | undefined;
+    depthTexture?: DepthTexture | undefined;
+    encoding?: TextureEncoding | undefined;
+    colorSpace?: ColorSpace | undefined;
+}
+export interface NgtsFBOParams {
+    width?: number | FBOSettings;
+    height?: number;
+    settings?: FBOSettings;
+}
+export declare function injectFBO(params: () => NgtsFBOParams, { injector }?: {
+    injector?: Injector;
+}): import("@angular/core").Signal<WebGLRenderTarget<import("three").Texture>>;
+export declare class NgtsFBO {
+    fbo: import("@angular/core").InputSignal<{
+        width: NgtsFBOParams["width"];
+        height: NgtsFBOParams["height"];
+    } & FBOSettings>;
+    private template;
+    private viewContainerRef;
+    constructor();
+    static ngTemplateContextGuard(_: NgtsFBO, ctx: unknown): ctx is {
+        $implicit: ReturnType<typeof injectFBO>;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgtsFBO, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgtsFBO, "ng-template[fbo]", never, { "fbo": { "alias": "fbo"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export {};

package/misc/lib/html/html-content.d.ts

@@ -0,0 +1,47 @@
+import { ElementRef } from '@angular/core';
+import { NgtHTML } from 'angular-three';
+import { NgtsHTML } from './html';
+import { CalculatePosition } from './utils';
+import * as i0 from "@angular/core";
+type PointerEventsProperties = 'auto' | 'none' | 'visiblePainted' | 'visibleFill' | 'visibleStroke' | 'visible' | 'painted' | 'fill' | 'stroke' | 'all' | 'inherit';
+export interface NgtsHTMLContentOptions {
+    eps: number;
+    zIndexRange: [number, number];
+    center: boolean;
+    prepend: boolean;
+    fullscreen: boolean;
+    containerClass: string;
+    containerStyle: Partial<CSSStyleDeclaration>;
+    pointerEvents: PointerEventsProperties;
+    calculatePosition: CalculatePosition;
+    sprite: boolean;
+    distanceFactor?: number;
+    parent?: HTMLElement | ElementRef<HTMLElement>;
+}
+export declare class NgtsHTMLContent extends NgtHTML {
+    options: import("@angular/core").InputSignalWithTransform<NgtsHTMLContentOptions, "" | Partial<NgtsHTMLContentOptions>>;
+    occluded: import("@angular/core").OutputEmitterRef<boolean>;
+    html: NgtsHTML;
+    transformOuterRef: import("@angular/core").Signal<ElementRef<HTMLDivElement> | undefined>;
+    transformInnerRef: import("@angular/core").Signal<ElementRef<HTMLDivElement> | undefined>;
+    containerRef: import("@angular/core").Signal<ElementRef<HTMLDivElement> | undefined>;
+    private gl;
+    private events;
+    private camera;
+    private scene;
+    size: import("@angular/core").Signal<import("angular-three").NgtSize>;
+    private parent;
+    private zIndexRange;
+    private calculatePosition;
+    private prepend;
+    center: import("@angular/core").Signal<boolean>;
+    fullscreen: import("@angular/core").Signal<boolean>;
+    pointerEvents: import("@angular/core").Signal<PointerEventsProperties>;
+    containerClass: import("@angular/core").Signal<string>;
+    containerStyle: import("@angular/core").Signal<Partial<CSSStyleDeclaration>>;
+    private target;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgtsHTMLContent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgtsHTMLContent, "[ngtsHTMLContent]", never, { "options": { "alias": "ngtsHTMLContent"; "required": false; "isSignal": true; }; }, { "occluded": "occluded"; }, never, ["*"], true, never>;
+}
+export {};

package/misc/lib/html/html.d.ts

@@ -0,0 +1,30 @@
+import { ElementRef } from '@angular/core';
+import { NgtGroup } from 'angular-three';
+import { Group, Mesh, Object3D, PlaneGeometry } from 'three';
+import * as i0 from "@angular/core";
+export interface NgtsHTMLOptions extends Partial<NgtGroup> {
+    occlude: ElementRef<Object3D>[] | Object3D[] | boolean | 'raycast' | 'blending';
+    transform: boolean;
+    castShadow: boolean;
+    receiveShadow: boolean;
+}
+export declare class NgtsHTML {
+    options: import("@angular/core").InputSignalWithTransform<NgtsHTMLOptions, "" | Partial<NgtsHTMLOptions>>;
+    parameters: import("@angular/core").Signal<Omit<NgtsHTMLOptions, "castShadow" | "receiveShadow" | "transform" | "occlude">>;
+    groupRef: import("@angular/core").Signal<ElementRef<Group<import("three").Object3DEventMap>>>;
+    occlusionMeshRef: import("@angular/core").Signal<ElementRef<Mesh<import("three").BufferGeometry<import("three").NormalBufferAttributes>, import("three").Material | import("three").Material[], import("three").Object3DEventMap>> | undefined>;
+    occlusionGeometryRef: import("@angular/core").Signal<ElementRef<PlaneGeometry> | undefined>;
+    occlude: import("@angular/core").Signal<boolean | "raycast" | Object3D<import("three").Object3DEventMap>[] | ElementRef<Object3D<import("three").Object3DEventMap>>[] | "blending">;
+    transform: import("@angular/core").Signal<boolean>;
+    castShadow: import("@angular/core").Signal<boolean>;
+    receiveShadow: import("@angular/core").Signal<boolean>;
+    scale: import("@angular/core").Signal<import("angular-three").NgtVector3 | undefined>;
+    isRaycastOcclusion: import("@angular/core").Signal<boolean | 0>;
+    private shaders;
+    vertexShader: import("@angular/core").Signal<string | undefined>;
+    fragmentShader: import("@angular/core").Signal<string>;
+    constructor();
+    protected readonly DoubleSide: 2;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgtsHTML, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgtsHTML, "ngts-html", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; }, {}, never, ["[data-occlusion-geometry]", "[data-occlusion-material]", "*"], true, never>;
+}

package/misc/lib/html/utils.d.ts

@@ -0,0 +1,14 @@
+import { Camera, Matrix4, Object3D, Raycaster } from 'three';
+export declare function defaultCalculatePosition(el: Object3D, camera: Camera, size: {
+    width: number;
+    height: number;
+}): number[];
+export type CalculatePosition = typeof defaultCalculatePosition;
+export declare function isObjectBehindCamera(el: Object3D, camera: Camera): boolean;
+export declare function isObjectVisible(el: Object3D, camera: Camera, raycaster: Raycaster, occlude: Object3D[]): boolean;
+export declare function objectScale(el: Object3D, camera: Camera): number;
+export declare function objectZIndex(el: Object3D, camera: Camera, zIndexRange: Array<number>): number | undefined;
+export declare function epsilon(value: number): number;
+export declare function getCSSMatrix(matrix: Matrix4, multipliers: number[], prepend?: string): string;
+export declare const getCameraCSSMatrix: (matrix: Matrix4) => string;
+export declare const getObjectCSSMatrix: (matrix: Matrix4, factor: number) => string;

package/misc/lib/intersect.d.ts

@@ -0,0 +1,13 @@
+import { ElementRef, Injector, WritableSignal } from '@angular/core';
+import { Object3D } from 'three';
+import * as i0 from "@angular/core";
+export declare function injectIntersect<TObject extends Object3D>(object: () => ElementRef<TObject> | TObject | undefined | null, { injector, source }?: {
+    injector?: Injector;
+    source?: WritableSignal<boolean>;
+}): import("@angular/core").Signal<boolean>;
+export declare class NgtsIntersect {
+    intersect: import("@angular/core").ModelSignal<boolean>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgtsIntersect, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgtsIntersect, "[intersect]", never, { "intersect": { "alias": "intersect"; "required": false; "isSignal": true; }; }, { "intersect": "intersectChange"; }, never, never, true, never>;
+}

package/misc/lib/sampler.d.ts

@@ -0,0 +1,73 @@
+import { ElementRef, Injector } from '@angular/core';
+import { NgtGroup } from 'angular-three';
+import { BufferGeometry, Color, Group, InstancedBufferAttribute, InstancedMesh, Mesh, Object3D, Vector3 } from 'three';
+import * as i0 from "@angular/core";
+interface SamplePayload {
+    /**
+     * The position of the sample.
+     */
+    position: Vector3;
+    /**
+     * The normal of the mesh at the sampled position.
+     */
+    normal: Vector3;
+    /**
+     * The vertex color of the mesh at the sampled position.
+     */
+    color: Color;
+}
+export type TransformFn = (payload: TransformPayload, i: number) => void;
+interface TransformPayload extends SamplePayload {
+    /**
+     * The dummy object used to transform each instance.
+     * This object's matrix will be updated after transforming & it will be used
+     * to set the instance's matrix.
+     */
+    dummy: Object3D;
+    /**
+     * The mesh that's initially passed to the sampler.
+     * Use this if you need to apply transforms from your mesh to your instances
+     * or if you need to grab attributes from the geometry.
+     */
+    sampledMesh: Mesh;
+}
+export declare function injectSurfaceSampler(mesh: () => ElementRef<Mesh> | Mesh | null | undefined, options?: () => {
+    count?: number;
+    transform?: TransformFn;
+    weight?: string;
+    instanceMesh?: ElementRef<InstancedMesh> | InstancedMesh | null;
+}, { injector }?: {
+    injector?: Injector;
+}): import("@angular/core").Signal<InstancedBufferAttribute>;
+export interface NgtsSamplerOptions extends Partial<NgtGroup> {
+    /**
+     * The NAME of the weight attribute to use when sampling.
+     *
+     * @see https://threejs.org/docs/#examples/en/math/MeshSurfaceSampler.setWeightAttribute
+     */
+    weight?: string;
+    /**
+     * Transformation to be applied to each instance.
+     * Receives a dummy object3D with all the sampled data ( @see TransformPayload ).
+     * It should mutate `transformPayload.dummy`.
+     *
+     * @see ( @todo add link to example )
+     *
+     * There is no need to update the dummy's matrix
+     */
+    transform?: TransformFn;
+    count: number;
+}
+export declare class NgtsSampler {
+    mesh: import("@angular/core").InputSignal<Mesh<BufferGeometry<import("three").NormalBufferAttributes>, import("three").Material | import("three").Material[], import("three").Object3DEventMap> | ElementRef<Mesh<BufferGeometry<import("three").NormalBufferAttributes>, import("three").Material | import("three").Material[], import("three").Object3DEventMap>> | null>;
+    instances: import("@angular/core").InputSignal<InstancedMesh<BufferGeometry<import("three").NormalBufferAttributes>, import("three").Material | import("three").Material[], import("three").InstancedMeshEventMap> | ElementRef<InstancedMesh<BufferGeometry<import("three").NormalBufferAttributes>, import("three").Material | import("three").Material[], import("three").InstancedMeshEventMap>> | null>;
+    options: import("@angular/core").InputSignalWithTransform<NgtsSamplerOptions, "" | Partial<NgtsSamplerOptions>>;
+    parameters: import("@angular/core").Signal<Omit<NgtsSamplerOptions, "count" | "transform" | "weight">>;
+    groupRef: import("@angular/core").Signal<ElementRef<Group<import("three").Object3DEventMap>>>;
+    private meshToSample;
+    private instancedToSample;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgtsSampler, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgtsSampler, "ngts-sampler", never, { "mesh": { "alias": "mesh"; "required": false; "isSignal": true; }; "instances": { "alias": "instances"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+export {};

package/misc/lib/scale-factor.d.ts

@@ -0,0 +1,3 @@
+import { NgtSize } from 'angular-three';
+import { Camera, Vector3 } from 'three';
+export declare function calculateScaleFactor(point3: Vector3, radiusPx: number, camera: Camera, size: NgtSize): number;