angular-three-soba/staging

This secondary entry point includes miscellaneous utilities and components for animations, shadows, frame buffer objects (FBOs), and more. It requires @pmndrs/vanilla, three-mesh-bvh, and @monogrid/gainmap-js as additional dependencies.

npm install @pmndrs/vanilla three-mesh-bvh @monogrid/gainmap-js
# yarn add @pmndrs/vanilla three-mesh-bvh @monogrid/gainmap-js
# pnpm add @pmndrs/vanilla three-mesh-bvh @monogrid/gainmap-js

TOC

• NgtsAccumulativeShadows
• NgtsRandomizedLights
• NgtsBBAnchor
• NgtsCameraShake
• NgtsCenter
• NgtsCloud
• NgtsContactShadows
• NgtsEnvironment
• NgtsLightformer
• NgtsFloat
• MatcapTexture
• NgtsMask
• NormalTexture
• NgtsRenderTexture
• NgtsBounds
• NgtsShadow
• NgtsSparkles
• NgtsSky
• NgtsStage
• NgtsCaustics
• NgtsSpotLight
• NgtsSpotLightShadow
• NgtsBackdrop

NgtsAccumulativeShadows

A planar, Y-up oriented shadow-catcher that can accumulate into soft shadows and has zero performance impact after all frames have accumulated. It can be temporal, it will accumulate over time, or instantaneous, which might be expensive depending on how many frames you render.

You must pair it with lightsources (and scene objects!) that cast shadows, which go into the children slot. Best use it with the NgtsRandomizedLights component, which jiggles a set of lights around, creating realistic raycast-like shadows and ambient occlusion.

Object Inputs (NgtsAccumulativeShadowsOptions)

Property	Description	Default Value
frames	How many frames it can render, more yields cleaner results but takes more time.	40
blend	If frames is set to Infinity, blend controls the refresh ratio.	20
limit	Can limit the amount of frames rendered if frames is set to Infinity, usually to get some performance back once a movable scene has settled.	Infinity
scale	Scale of the plane.	10
temporal	Temporal accumulates shadows over time which is more performant but has a visual regression over instant results.	false
opacity	Opacity of the plane.	1
alphaTest	Discards alpha pixels.	0.75
color	Shadow color.	'black'
colorBlend	Color blend, how much colors turn to black. 0 is black.	2
resolution	Buffer resolution.	1024
toneMapped	Texture tone mapping.	true

<ngt-color *args="['goldenrod']" attach="background" />
<accumulative-shadows-suzi />

<ngts-accumulative-shadows [options]="accumulativeShadowsOptions()">
	<ngts-randomized-lights [options]="{ amount: 8, radius: 4, ambient: 0.5, bias: 0.001, position: [5, 5, -10] }" />
</ngts-accumulative-shadows>

<ngts-orbit-controls [options]="{ autoRotate: true }" />
<ngts-environment [options]="{ preset: 'city' }" />

NgtsRandomizedLights

A randomized light that internally runs multiple lights and jiggles them. See below, you would normally pair it with AccumulativeShadows. This component is context aware, paired with NgtsAccumulativeShadows it will take the number of frames from its parent.

Object Inputs (NgtsRandomizedLightsOptions)

Property	Description	Default Value
frames	How many frames it will jiggle the lights.	1
amount	The number of lights to create.	8
radius	The radius within which the lights will be randomly positioned.	1
ambient	The ambient light intensity.	0.5
position	The base position of the lights.	[0, 0, 0]
intensity	The intensity of the lights.	Math.PI (Three.js 155+)
bias	The shadow bias for the lights.	0.001
mapSize	The size of the shadow map for the lights.	512
size	Size of the shadow camera frustum.	5
near	Shadow camera near plane distance.	0.5
far	Shadow camera far plane distance.	500
castShadow	Whether the lights cast shadows.	true

<ngts-randomized-lights [options]="{ amount: 8, radius: 4, ambient: 0.5, bias: 0.001, position: [5, 5, -10] }" />

NgtsBBAnchor

A component using AABB (Axis-aligned bounding boxes) to offset children position by specified multipliers (anchor property) on each axis. You can use this component to change children positioning in regard of the parent's bounding box, eg. pinning Html component to one of the parent's corners. Multipliers determine the offset value based on the AABB's size:

childrenAnchor = boundingBoxPosition + (boundingBoxSize \* anchor / 2)

Object Inputs (NgtsBBAnchorOptions)

Property	Description	Default Value
anchor	The anchor point, a vector3 or an array of three numbers.	[0, 0, 0]

<ngts-bb-anchor [options]="{ anchor: [0, 1, 0] }">
	<ngt-mesh></ngt-mesh>
</ngts-bb-anchor>

NgtsCameraShake

A directive for applying a configurable camera shake effect. Currently only supports rotational camera shake.

If you use shake in combination with controls make sure to set the makeDefault option on your controls, in that case you do not have to pass them via the controls option.

Object Inputs (NgtsCameraShakeOptions)

Property	Description	Default Value
intensity	Initial intensity of the shake.	1
decayRate	If decay is true, this is the rate at which intensity will reduce at.	0.65
maxYaw	Max amount camera can yaw in either direction.	0.1
maxPitch	Max amount camera can pitch in either direction.	0.1
maxRoll	Max amount camera can roll in either direction.	0.1
yawFrequency	Frequency of the the yaw rotation.	0.1
pitchFrequency	Frequency of the pitch rotation.	0.1
rollFrequency	Frequency of the roll rotation.	0.1

<ngts-camera-shake [options]="{ intensity: 1, decayRate: 0.65, maxYaw: 0.1, maxPitch: 0.1 }" />
<ngts-orbit-controls [options]="{ makeDefault: true }" />

NgtsCenter

Calculates a boundary box and centers its children accordingly.

Object Inputs (NgtsCenterOptions)

Property	Description	Default Value
top	Aligns children to the top of the bounding box.	false
right	Aligns children to the right of the bounding box.	false
bottom	Aligns children to the bottom of the bounding box.	false
left	Aligns children to the left of the bounding box.	false
front	Aligns children to the front of the bounding box.	false
back	Aligns children to the back of the bounding box.	false
disable	Disables all axes centering.	false
disableX	Disables centering on the X axis.	false
disableY	Disables centering on the Y axis.	false
disableZ	Disables centering on the Z axis.	false
precise	Precision of the bounding box calculation. See THREE.Box3.setFromObject.	true
cacheKey	Optional cache key to prevent recalculation on every render.	0
object	Optional object to compute the bounding box from instead of children.

<ngts-center [options]="{ top: true, right: true }">
	<ngt-mesh></ngt-mesh>
</ngts-center>

NgtsCloud

Renders volumetric clouds using instanced billboarded sprites. The clouds consist of depth-sorted particles that face the camera.

NgtsClouds Container

The NgtsClouds component is a container that manages multiple cloud instances. It uses instanced mesh rendering for performance.

Object Inputs (NgtsCloudsOptions)

Property	Description	Default Value
texture	URL to the cloud texture image.	CLOUD_URL (hosted CDN)
limit	Maximum number of cloud segments. Keep this tight to save memory.	200
range	Number of segments to render. If undefined, renders all.
material	The material class to use for cloud rendering.	THREE.MeshLambertMaterial
frustumCulled	Whether to enable frustum culling for the cloud mesh.	true

NgtsCloudInstance

Individual cloud formations that must be placed inside a NgtsClouds container.

Object Inputs (NgtsCloudOptions)

Property	Description	Default Value
seed	Random seed for consistent cloud generation.	Math.random()
segments	Number of segments/particles in the cloud.	20
bounds	Bounding box dimensions for cloud distribution.	[5, 1, 1]
concentrate	How segments are distributed: 'inside', 'outside', 'random'.	'inside'
volume	Volume/thickness of the segments.	6
smallestVolume	Minimum volume when distributing clouds.	0.25
distribute	Custom distribution function for precise control.
growth	Growth factor for animated clouds (when speed > 0).	4
speed	Animation speed factor. Set to 0 to disable.	0
fade	Camera distance at which segments start fading.	10
opacity	Opacity of the cloud.	1
color	Color of the cloud.	'#ffffff'

NgtsCloud (Convenience Component)

A convenience component that renders a single cloud. Automatically wraps itself in a NgtsClouds container if not already inside one.

<!-- Multiple clouds with container -->
<ngts-clouds [options]="{ limit: 400 }">
	<ngts-cloud-instance [options]="{ segments: 40, color: '#f0f0f0', speed: 0.4 }" />
	<ngts-cloud-instance [options]="{ segments: 20, position: [5, 0, 0] }" />
</ngts-clouds>

<!-- Single cloud (auto-wrapped) -->
<ngts-cloud [options]="{ segments: 20, bounds: [5, 1, 1], color: 'white' }" />

NgtsContactShadows

A contact shadow implementation, facing upwards (positive Y) by default. scale can be a positive number or a 2D array [x: number, y: number].

Object Inputs (NgtsContactShadowsOptions)

Property	Description	Default Value
opacity	Opacity of the shadows.	1
width	Width of the shadow plane.	1
height	Height of the shadow plane.	1
blur	Blur radius of the shadows.	1
near	Near clipping plane for the shadow camera.	0
far	Far distance of the shadow camera.	10
resolution	Resolution of the shadow map.	512
smooth	Whether to apply smoothing to the shadows.	true
color	Color of the shadows.	'#000000'
depthWrite	Whether the shadows should write to the depth buffer.	false
frames	How many frames it can render, more yields cleaner results but takes more time.	Infinity
scale	Scale of the shadow plane. Can be a number or [x, y] tuple.	10

<ngts-contact-shadows
	[options]="{ opacity: 1, scale: 10, blur: 1, far: 10, resolution: 512, smooth: true, color: '#000000' }"
/>

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:

<ngts-contact-shadows [options]="{ frames: 1 }" />

NgtsEnvironment

Sets up a global cubemap, which affects the default scene.environment, and optionally scene.background, unless a custom scene has been passed. A selection of presets from HDRI Haven are available for convenience.

Object Inputs (NgtsEnvironmentOptions)

Property	Description	Default Value
background	Whether to use the environment map as the background.	false
files	Array of cubemap files OR single equirectangular file.
path	Path to the cubemap files OR single equirectangular file.
preset	One of the available presets: sunset, dawn, night, warehouse, forest, etc.
scene	Custom scene to apply the environment map to.
map	Pre-loaded texture to use as environment map.
blur	Background blur amount (deprecated, use backgroundBlurriness).	0
backgroundBlurriness	Background blur amount (0 to 1).	0
backgroundIntensity	Intensity of the background.	1
backgroundRotation	Rotation of the background as Euler angles.	[0, 0, 0]
environmentIntensity	Intensity of the environment lighting.	1
environmentRotation	Rotation of the environment lighting as Euler angles.	[0, 0, 0]
ground	Configuration for ground-projected environment.
frames	Number of frames to render the environment cube camera.	1
near	Near clipping plane for the cube camera.	1
far	Far clipping plane for the cube camera.	1000
resolution	Resolution of the cube render target.	256

The simplest way to use it is to provide a preset (linking towards common HDRI Haven assets hosted on github). 👉 Note: preset property is not meant to be used in production environments and may fail as it relies on CDNs.

Current presets are

• apartment: 'lebombo_1k.hdr'
• city: 'potsdamer_platz_1k.hdr'
• dawn: 'kiara_1_dawn_1k.hdr'
• forest: 'forest_slope_1k.hdr'
• lobby: 'st_fagans_interior_1k.hdr'
• night: 'dikhololo_night_1k.hdr'
• park: 'rooitou_park_1k.hdr'
• studio: 'studio_small_03_1k.hdr'
• sunset: 'venice_sunset_1k.hdr'
• warehouse: 'empty_warehouse_01_1k.hdr'

<ngts-environment [options]="{ preset: 'city' }" />

If you provide children you can even render a custom environment. It will render the contents into an off-buffer and film a single frame with a cube camera (whose options you can configure: near=1, far=1000, resolution=256).

<ngts-environment [options]="{ background: true }">
	<ng-template>
		<ngt-mesh>
			<ngt-sphere-geometry />
			<ngt-mesh-basic-material [side]="BackSide" />
		</ngt-mesh>
	</ng-template>
</ngts-environment>

Environment can also be ground projected, that is, put your model on the "ground" within the environment map.

<ngts-environment [options]="{ ground: true }" />

You can provide optional options to configure this projection.

<ngts-environment [options]="{ ground: { height: 15, radius: 60, scale: 1000 } }" />

NgtsLightformer

This component draws flat rectangles, circles or rings, mimicking the look of a light-former. You can set the output intensity, which will effect emissiveness once you put it into an HDRI NgtsEnvironment, where it mostly belongs. It will act like a real light without the expense, you can have as many as you want.

Object Inputs (NgtsLightformerOptions)

Property	Description	Default Value
toneMapped	Whether the material is tone mapped.	false
color	The color of the lightformer.	'white'
form	The shape of the lightformer. Can be 'circle', 'ring', or 'rect'.	'rect'
scale	The scale of the lightformer. Can be a number or an array [x, y, z].	1
intensity	The intensity of the light emitted by the lightformer.	1
target	The target position for the lightformer to look at.
map	Texture map to apply to the lightformer.

<ngts-environment>
	<ng-template>
		<ngts-lightformer [options]="{ toneMapped: false, color: 'white', form: 'rect', scale: 1, intensity: 1 }" />
	</ng-template>
</ngts-environment>

NgtsFloat

A component that simulates floating objects by applying a configurable up and down motion.

Object Inputs (NgtsFloatOptions)

Property	Description	Default Value
enabled	Whether the floating animation is enabled.	true
speed	The speed of the floating animation.	1
rotationIntensity	The intensity of the rotation during the floating animation.	1
floatIntensity	The intensity of the vertical movement during the floating animation.	1
floatingRange	Range of the floating animation [min, max] in world units.	[-0.1, 0.1]
autoInvalidate	Automatically invalidates the scene when the frameloop is set to demand.	false

<ngts-float [options]="{ speed: 1, rotationIntensity: 1, floatIntensity: 1 }">
	<ngt-mesh>
		<ngt-sphere-geometry />
		<ngt-mesh-standard-material [color]="'#ff0000'" />
	</ngt-mesh>
</ngts-float>

MatcapTexture

matcapTextureResource

Creates a reactive resource for loading matcap textures. Matcaps provide realistic lighting without actual lights in the scene.

Matcap repository: https://github.com/emmelleppi/matcaps

Note: matcapTextureResource is not meant to be used in production environments as it relies on third-party CDN.

function matcapTextureResource(
	id: () => number | string = () => 0,
	{
		format,
		onLoad,
		injector,
	}: {
		format?: () => number; // 64, 128, 256, 512, or 1024 (default: 1024)
		onLoad?: (texture: THREE.Texture) => void;
		injector?: Injector;
	} = {},
): { url: Signal<string>; resource: ResourceRef<THREE.Texture>; numTot: Signal<number> };

NgtsMatcapTexture

A structural directive that provides a matcap texture to be used with other materials.

<ng-template [matcapTexture]="{ id: 42, format: 512 }" let-resource>
	@if (resource.hasValue()) {
	<ngt-mesh-matcap-material [matcap]="resource.value()" />
	}
</ng-template>

NgtsMask

Creates a stencil mask for selective rendering. Objects can be shown/hidden using the mask() function.

Object Inputs (NgtsMaskOptions)

Property	Description	Default Value
colorWrite	Whether to write color to the framebuffer.	false
depthWrite	Whether to write depth to the depth buffer.	false

Inputs

Property	Description	Default Value
id	The stencil reference ID.	1

mask() Function

Creates stencil material properties for use with NgtsMask. Apply the returned properties to a material to make it respect mask boundaries.

function mask(
	id: () => number,
	inverse: () => boolean = () => false,
): Signal<{
	stencilWrite: boolean;
	stencilRef: number;
	stencilFunc: THREE.StencilFunc;
	stencilFail: THREE.StencilOp;
	stencilZFail: THREE.StencilOp;
	stencilZPass: THREE.StencilOp;
}>;

<ngts-mask [id]="1">
	<ngt-circle-geometry *args="[0.5, 64]" />
</ngts-mask>

<ngt-mesh [material]="maskedMaterial">
	<ngt-box-geometry />
</ngt-mesh>

// Show content only inside the mask
maskedMaterial = new THREE.MeshStandardMaterial({
	...mask(() => 1)(),
});

// Show content only outside the mask (inverted)
outsideMaterial = new THREE.MeshStandardMaterial({
	...mask(
		() => 1,
		() => true,
	)(),
});

NormalTexture

normalTextureResource

Creates a reactive resource for loading normal textures. Normal textures add surface detail without additional geometry.

Normal repository: https://github.com/emmelleppi/normal-maps

Note: normalTextureResource is not meant to be used in production environments as it relies on third-party CDN.

function normalTextureResource(
	id: () => string | number = () => 0,
	{
		settings,
		onLoad,
		injector,
	}: {
		settings?: () => { repeat?: number[]; anisotropy?: number; offset?: number[] };
		onLoad?: (texture: THREE.Texture) => void;
		injector?: Injector;
	},
): { url: Signal<string>; resource: ResourceRef<THREE.Texture>; numTot: Signal<number> };

NgtsNormalTexture

A structural directive that provides a normal texture to be used with other materials.

<ng-template [normalTexture]="{ id: 42, repeat: [2, 2] }" let-resource>
	@if (resource.hasValue()) {
	<ngt-mesh-standard-material [normalMap]="resource.value()" />
	}
</ng-template>

NgtsRenderTexture

This component allows you to render a live scene into a texture which you can then apply to a material. The contents of it run inside a portal and are separate from the rest of the canvas, therefore you can have events in there, environment maps, etc.

Object Inputs (NgtsRenderTextureOptions)

Property	Description	Default Value
width	Width of the texture.	viewport width
height	Height of the texture.	viewport height
samples	The number of samples for the texture.	8
stencilBuffer	Whether to use a stencil buffer.	false
depthBuffer	Whether to use a depth buffer.	true
generateMipmaps	Whether to generate mipmaps.	false
renderPriority	The render priority of the texture.	0
eventPriority	The event priority of the texture.	0
frames	The number of frames to render.	Infinity
compute	A function to compute the event.

Required NgtsRenderTextureContent

<ngt-mesh>
	<ngt-mesh-basic-material>
		<ngts-render-texture>
			<app-render-texture *renderTextureContent />
			<!-- this can be any portal content: a off-buffer scene with its own lights, cameras etc... -->
		</ngts-render-texture>
	</ngt-mesh-basic-material>
</ngt-mesh>

NgtsBounds

Calculates a boundary box and centers the camera accordingly. If you are using camera controls, make sure to pass them the makeDefault option. fit fits the current view on first render. clip sets the cameras near/far planes. observe will trigger on window resize. To control the damping animation, use maxDuration to set the animation length in seconds, and interpolateFunc to define how the animation changes over time (should be an increasing function in [0, 1] interval, interpolateFunc(0) === 0, interpolateFunc(1) === 1).

Object Inputs (NgtsBoundsOptions)

Property	Description	Default Value
fit	Fits the current view on first render.	false
clip	Sets the cameras near/far planes.	false
observe	Triggers on window resize.	false
maxDuration	The animation length in seconds.	1.0
margin	Margin factor applied to the calculated camera distance.	1.2
interpolateFunc	Custom interpolation function for camera animation.	Damping-based function

<ngts-bounds [options]="{ fit: true, clip: true, observe: true }">
	<ngt-mesh>
		<ngt-box-geometry />
	</ngt-mesh>
</ngts-bounds>

NgtsShadow

Renders a simple circular drop shadow using a canvas-generated radial gradient texture. Creates a flat plane with a transparent gradient that simulates a soft shadow.

Object Inputs (NgtsShadowOptions)

Property	Description	Default Value
colorStop	Position of the color stop in the radial gradient (0-1).	0.0
fog	Whether the shadow is affected by fog.	false
color	Color of the shadow.	'black'
opacity	Opacity of the shadow (0-1).	0.5
depthWrite	Whether to write to the depth buffer.	false

<ngts-shadow [options]="{ color: 'black', opacity: 0.5, scale: [2, 2, 1] }" />

NgtsSparkles

Renders animated sparkle particles floating in 3D space. Creates a magical, sparkling effect using GPU-accelerated points.

Object Inputs (NgtsSparklesOptions)

Property	Description	Default Value
count	Number of sparkle particles.	100
speed	Animation speed factor.	1
opacity	Opacity of the sparkles.	1
scale	Scale of the sparkles distribution.	1
noise	Noise factor for particle movement.	1
size	Size of individual sparkle particles.
color	Color of the sparkles.

<ngts-sparkles [options]="{ count: 50, scale: 2, size: 6, speed: 0.4, color: 'gold' }" />

NgtsSky

Renders a procedural sky dome using atmospheric scattering simulation. Based on the Three.js Sky shader which simulates realistic sky colors based on sun position.

Object Inputs (NgtsSkyOptions)

Property	Description	Default Value
distance	Distance of the sky sphere from the camera.	1000
inclination	Vertical angle of the sun (0-1, where 0.5 is horizon).	0.6
azimuth	Horizontal angle of the sun (0-1, representing full rotation).	0.1
mieCoefficient	Mie scattering coefficient. Controls haze and sun disc intensity.	0.005
mieDirectionalG	Mie scattering directional parameter. Controls sun disc size.	0.8
rayleigh	Rayleigh scattering coefficient. Higher values create bluer skies.	0.5
turbidity	Atmospheric turbidity. Higher values create hazier atmospheres.	10
sunPosition	Direct sun position vector. Overrides inclination/azimuth if set.

<ngts-sky [options]="{ turbidity: 10, rayleigh: 2, inclination: 0.5 }" />

NgtsStage

A complete stage setup for presenting 3D models with lighting, shadows, and environment. Automatically centers content, sets up professional lighting presets, and configures shadows.

Object Inputs (NgtsStageOptions)

Property	Description	Default Value
preset	Lighting preset: 'rembrandt', 'portrait', 'upfront', 'soft', or custom config.	'rembrandt'
shadows	Shadow type: false, 'contact', 'accumulative', or NgtsStageShadowsOptions.	'contact'
adjustCamera	Whether to automatically adjust the camera to fit the content.	true
environment	Environment map configuration: preset name, options object, or null.	'city'
intensity	Overall lighting intensity multiplier.	0.5
center	Options for centering the content within the stage.

<ngts-stage [options]="{ preset: 'rembrandt', shadows: 'contact', environment: 'city' }">
	<ngt-mesh>
		<ngt-box-geometry />
		<ngt-mesh-standard-material />
	</ngt-mesh>
</ngts-stage>

NgtsCaustics

A component that renders realistic caustic light patterns on surfaces. Caustics are the light patterns created when light is refracted or reflected by curved transparent surfaces (like water or glass).

Object Inputs (NgtsCausticsOptions)

Property	Description	Default Value
frames	How many frames to render. Set to Infinity for continuous.	1
debug	Enables visual debugging cues including camera helper.	false
causticsOnly	When enabled, displays only caustics and hides the models.	false
backside	When enabled, includes back face rendering.	false
ior	The Index of Refraction (IOR) value for front faces.	1.1
backsideIOR	The Index of Refraction (IOR) value for back faces.	1.1
worldRadius	The world-space texel size for caustic calculations.	0.3125
intensity	Intensity of the projected caustics effect.	0.05
color	Color of the caustics effect.	'white'
resolution	Buffer resolution for caustic texture rendering.	2024
lightSource	Light source position or object.	[5, 5, 5]

<ngts-caustics [options]="{ frames: Infinity, intensity: 0.05, color: 'white' }">
	<ngt-mesh>
		<ngt-sphere-geometry />
		<ngt-mesh-physical-material [transmission]="1" [roughness]="0" />
	</ngt-mesh>
</ngts-caustics>

NgtsSpotLight

Enhanced spot light with optional volumetric lighting effect. Creates a visible light cone that simulates light scattering through atmosphere or dust.

Object Inputs (NgtsSpotLightOptions)

Property	Description	Default Value
depthBuffer	Depth texture for soft volumetric lighting.	null
attenuation	Light attenuation factor. Controls how quickly light fades.	5
anglePower	Power of the light cone angle falloff.	5
radiusTop	Radius of the light cone at the top.	0.1
radiusBottom	Radius of the light cone at the bottom.	angle * 7
opacity	Opacity of the volumetric light cone.	1
color	Color of the light.	'white'
volumetric	Whether to render the volumetric light cone mesh.	true
debug	Whether to show the SpotLightHelper for debugging.	false
distance	Distance of the light.	5
angle	Angle of the light cone.	0.15

<ngts-spot-light
	[options]="{
    position: [0, 5, 0],
    angle: 0.5,
    intensity: 1,
    color: 'white',
    volumetric: true
  }"
/>

NgtsSpotLightShadow

A shadow caster that can help cast shadows of different patterns (textures) onto the scene.

Object Inputs (NgtsSpotLightShadowOptions)

Property	Description	Default Value
distance	Distance between the shadow caster and light.	0.4
alphaTest	Sets the alpha value to be used when running an alpha test.	0.5
scale	Scale of the shadow caster plane.	1
width	Width of the shadow map. The higher the more expensive.	512
height	Height of the shadow map. The higher the more expensive.	512
map	Texture - Pattern of the shadow.

<ngts-spot-light>
	<ngts-spot-light-shadow
		[options]="{
      distance: 0.4,
      alphaTest: 0.5,
      scale: 1,
      width: 512,
      height: 512,
    }"
	/>
</ngts-spot-light>

An optional shader input lets you run a custom shader to modify/add effects to your shadow texture. The shader provides the following uniforms and varyings.

Type	Name	Notes
varying vec2	vUv	UVs of the shadow casting plane
uniform sampler2D	uShadowMap	The texture provided to the map prop
uniform float	uTime	Current time

Treat the output of the shader like an alpha map where 1 is opaque and 0 is transparent.

gl_FragColor = vec4(vec3(1.), 1.); // Opaque
gl_FragColor = vec4(vec3(0.), 1.); // Transparent

<ngts-spot-light>
	<ngts-spot-light-shadow [shader]="customShader" [options]="shadowOptions" />
</ngts-spot-light>

NgtsBackdrop

A curved plane, like a studio backdrop. This is for presentational purposes, to break up light and shadows more interestingly.

Object Inputs (NgtsBackdropOptions)

Property	Description	Default Value
floor	Stretches the floor segment.	0.25
segments	Mesh-resolution.	20
receiveShadow	Whether the backdrop should receive shadows.

<ngts-backdrop [options]="{ floor: 0.25, segments: 20 }">
	<ngt-mesh-standard-material color="#353540" />
</ngts-backdrop>