Depth Image

Relights a flat photo as if it had depth: a pointer driven light rakes across an estimated height field with surface detail and self cast shadows

depth-image-tw

Customize

Image URL

Depth From Light

0.50

Depth Smoothing

7.0

Depth Contrast

1.2

Invert Depth

Displacement

1.50

Normal Strength

1.50

Detail

0.80

Shadow Intensity

0.70

Shadow Softness

0.100

Light Color

Light Intensity

6.0

Falloff

2.50

Elevation

1.20

Ambient

0.02

Ambient Color

Background

Color Preserve

0.00

0.12

Auto Orbit

Orbit Radius

0.60

Orbit Duration

10.0s

Props

Name	Type	Default	Description
`image`	string	`—`	Photo to relight.
`depthMap`	string	`—`	Optional real depth map, white near and black far. When omitted one is estimated from the photo.
`fit`	"cover" \| "contain"	`"cover"`	How the photo fills the container.
`depthFromLight`	number	`0.5`	Estimated depth: 0 reads depth from vertical position only, 1 from brightness only.
`depthSmoothing`	number	`7`	Blur applied to the height field, in steps of five texels of a 512 wide map. Applies to supplied depth maps too.
`depthContrast`	number	`1.2`	Estimated depth: contrast applied to the estimate.
`invertDepth`	boolean	`false`	Flip near and far.
`displacement`	number	`1.5`	Height of the relief in scene units; the plane is 2 tall.
`normalStrength`	number	`1.5`	Strength of the large scale surface tilt from depth.
`detail`	number	`0.8`	Strength of fine surface detail read from the photo.
`shadowIntensity`	number	`0.7`	Darkness of self cast shadows, 0 disables them.
`shadowSoftness`	number	`0.1`	Penumbra width of the shadows.
`lightColor`	string	`"#ffffff"`	Light colour.
`lightIntensity`	number	`6`	Light brightness.
`falloff`	number	`2.5`	How quickly the light fades with distance, 0 is even, 4 is a tight pool.
`elevation`	number	`1.2`	Height of the light above the surface.
`ambient`	number	`0.02`	Flat fill light applied everywhere.
`ambientColor`	string	`"#ffffff"`	Colour of the fill light.
`colorPreserve`	number	`0`	How much of the photo's own tone survives in unlit areas, 0 to 1.
`follow`	number	`0.12`	How quickly the light follows the pointer, 0 to 1.
`autoOrbit`	boolean	`true`	Move the light on a slow circle when the pointer is away.
`orbitRadius`	number	`0.6`	Radius of the idle orbit, 0 to 1.
`orbitDuration`	number	`10`	Seconds per idle orbit.
`view`	"lit" \| "depth" \| "normal"	`"lit"`	Debug view of the estimated depth or the normals.
`backgroundColor`	string	`"#000000"`	Floor colour of the unlit surface, so shadows settle on the page colour rather than pure black.
`fallbackColor`	string	`"#171717"`	Colour shown while the photo loads or if it fails.
`paused`	boolean	`false`	Freeze the light.
`dpr`	number	`1.5`	Render scale cap.
`className`	string	`—`	Extra classes for the container.
`children`	ReactNode	`—`	Content layered above the canvas.

imagestring

Photo to relight.

Default—

depthMapstring

Optional real depth map, white near and black far. When omitted one is estimated from the photo.

Default—

fit"cover" | "contain"

How the photo fills the container.

Default"cover"

depthFromLightnumber

Estimated depth: 0 reads depth from vertical position only, 1 from brightness only.

Default0.5

depthSmoothingnumber

Blur applied to the height field, in steps of five texels of a 512 wide map. Applies to supplied depth maps too.

Default7

depthContrastnumber

Estimated depth: contrast applied to the estimate.

Default1.2

invertDepthboolean

Flip near and far.

Defaultfalse

displacementnumber

Height of the relief in scene units; the plane is 2 tall.

Default1.5

normalStrengthnumber

Strength of the large scale surface tilt from depth.

Default1.5

detailnumber

Strength of fine surface detail read from the photo.

Default0.8

shadowIntensitynumber

Darkness of self cast shadows, 0 disables them.

Default0.7

shadowSoftnessnumber

Penumbra width of the shadows.

Default0.1

lightColorstring

Light colour.

Default"#ffffff"

lightIntensitynumber

Light brightness.

Default6

falloffnumber

How quickly the light fades with distance, 0 is even, 4 is a tight pool.

Default2.5

elevationnumber

Height of the light above the surface.

Default1.2

ambientnumber

Flat fill light applied everywhere.

Default0.02

ambientColorstring

Colour of the fill light.

Default"#ffffff"

colorPreservenumber

How much of the photo's own tone survives in unlit areas, 0 to 1.

Default0

follownumber

How quickly the light follows the pointer, 0 to 1.

Default0.12

autoOrbitboolean

Move the light on a slow circle when the pointer is away.

Defaulttrue

orbitRadiusnumber

Radius of the idle orbit, 0 to 1.

Default0.6

orbitDurationnumber

Seconds per idle orbit.

Default10

view"lit" | "depth" | "normal"

Debug view of the estimated depth or the normals.

Default"lit"

backgroundColorstring

Floor colour of the unlit surface, so shadows settle on the page colour rather than pure black.

Default"#000000"

fallbackColorstring

Colour shown while the photo loads or if it fails.

Default"#171717"

pausedboolean

Freeze the light.

Defaultfalse

dprnumber

Render scale cap.

Default1.5

classNamestring

Extra classes for the container.

Default—

childrenReactNode

Content layered above the canvas.

Default—