2.5D Parallax 3D Camera Zoom

A 2.5D Parallax effect is a visual technique that creates the convincing illusion of three-dimensional camera movement from a completely flat, two-dimensional photograph — without any actual 3D model or polygon geometry. The term '2.5D' describes the midpoint between a flat 2D image and a fully volumetric 3D scene.

In true 3D rendering (e.g., Blender, Cinema 4D, Unreal Engine), a scene is constructed from textured polygon meshes with physically defined X, Y, Z coordinates. The renderer casts virtual light rays through the geometry to produce photorealistic output. This process requires either a powerful GPU (real-time) or a render farm (film-quality).

The 2.5D technique instead uses the photograph's AI-generated depth map (a grayscale image where brightness encodes estimated distance) to warp pixel positions via a WebGL fragment shader. As the virtual camera position shifts over time, pixels assigned a high depth value (foreground) are displaced significantly, while background pixels barely move — mimicking the binocular parallax that occurs when a real camera pans through physical space. The result is indistinguishable from true 3D for short-duration animations.

The Depth-Anything model is a monocular depth estimation Vision Transformer (ViT) trained by researchers at the Hong Kong University of Science and Technology (HKUST) on over 62 million diverse images. Unlike stereo depth sensors (which triangulate distance using two physical cameras), monocular depth estimation must infer 3D geometry from a single 2D image using learned statistical priors.

The model exploits several visual depth cues simultaneously:

• Occlusion: Objects that overlap in the image — the one in front is closer.
• Atmospheric Perspective: Distant objects appear with lower contrast and cooler, desaturated colours due to Rayleigh scattering of light through atmosphere.
• Relative Size: Objects the model has seen millions of times (humans, cars, trees) have known physical sizes; if a person appears tiny, they are statistically far away.
• Texture Gradient: The density of texture elements decreases with distance (a cobblestone street's stones appear smaller and more closely packed as they recede).
• Defocus Blur: Camera lens physics blur objects outside the focal plane — detected soft edges suggest distance from the focal depth.
• Linear Perspective: Parallel lines (roads, buildings, fences) converge at vanishing points, geometrically defining depth recession.

The output is a relative depth map (not metric/absolute distances) in 8-bit grayscale. This is ideal for parallax animation since only the relative depth ordering between foreground and background matters for the displacement shader.

These four WebAssembly binary files are the compiled ONNX Runtime (ORT) engine that executes the Depth-Anything neural network in your browser. Each variant is optimized for a different CPU capability level, and the runtime automatically selects the fastest one your browser supports:

• ort-wasm.wasm — The baseline fallback. Compiled for the basic WebAssembly MVP specification (no SIMD, no threads). Runs on any WASM-capable browser including older Edge and Safari 14. Slowest: ~4–6 seconds inference.
• ort-wasm-simd.wasm — Adds SIMD (Single Instruction, Multiple Data) support. SIMD allows one CPU instruction to process 4 float32 values simultaneously (128-bit vector registers), delivering roughly 3× faster matrix multiplications — the core bottleneck in Transformer inference. Supported in Chrome 91+, Firefox 89+, Edge 91+. Inference: ~1.5–3 seconds.
• ort-wasm-threaded.wasm — Adds SharedArrayBuffer multi-threading without SIMD. Distributes inference across multiple CPU cores via WASM Worker threads. Requires a secure context (HTTPS) and correct COOP/COEP HTTP headers. Inference: ~2–4 seconds (parallelized).
• ort-wasm-simd-threaded.wasm — The maximum performance variant: both SIMD vectorization and multi-core threading. On a modern 8-core CPU with SIMD, this runs inference in 0.8–1.5 seconds. Available in Chrome 91+, Firefox 90+, Edge 91+ with HTTPS.

The selection priority is: simd-threaded → simd → threaded → baseline. You benefit from the fastest variant your browser supports automatically.

This artifact is called Occlusion Tearing (also called 'disocclusion' in computer vision literature), and it is a fundamental limitation of single-image 2.5D parallax — not a bug in the software.

Consider a portrait photo: the subject (foreground) completely obscures the background behind their shoulder. When the virtual camera shifts laterally, the shader needs to reveal what exists behind the subject's shoulder — but that area was never captured in the original photograph. There are no real pixels there. The shader compensates by stretching the edge pixels of the subject outward, creating a 'smear' or 'tear' artifact at the silhouette boundary.

Our engine mitigates this in several ways:

• Depth discontinuity detection: The shader samples the depth of the displaced UV and compares it to the original UV depth. If the displaced sample is significantly farther (behind a foreground object), it falls back to a blended neighbor sample rather than the pure displacement.
• Edge crop factor: The entire frame is slightly zoomed in proportional to the maximum displacement distance, ensuring the camera's edge-of-frame movement doesn't expose the border of the image.
• Intensity ceiling: Keeping Parallax Intensity below 0.9 significantly reduces the maximum displacement and prevents the camera from moving far enough to expose occluded areas.

For images where occlusion tearing is noticeable, use the Breathing camera mode (minimal lateral movement) or reduce Parallax Intensity to 0.3–0.5.

Absolute zero-upload privacy. Every computational process in this tool runs entirely within your browser's local execution context. Here is a precise technical breakdown of what happens:

• Your image is loaded into browser RAM as a JavaScript ImageBitmap object via the FileReader API.
• The downscaled image data is passed to the WASM-compiled Depth-Anything model executing inside a Web Worker thread — all within your browser's sandboxed memory space.
• The depth map output is written to a local HTMLCanvasElement.
• Both textures (original image + depth map) are uploaded to your device's local GPU VRAM via WebGL texImage2D.
• The GLSL fragment shader executes on your GPU, sampling both textures to produce the parallax output.
• The MediaRecorder API captures the WebGL canvas framebuffer and encodes it to a video Blob in RAM.
• The URL.createObjectURL() serves the Blob as a direct download from RAM to your local disk.

At no point does any pixel data, depth map, video frame, or user interaction travel across a network connection. Your internet connection is only used once: to download the 25 MB Depth-Anything model from the HuggingFace CDN — and only on your very first use. Afterwards, the model is cached by your browser and the tool operates fully offline.

The Dolly Zoom — famously coined the 'Vertigo Effect' after Alfred Hitchcock's 1958 film — is achieved by simultaneously moving the physical camera toward (or away from) the subject while adjusting the lens focal length in the opposite direction. This keeps the subject's apparent size constant in frame while causing the background perspective to dramatically stretch or compress.

Our shader simulates this with two simultaneous operations:

• Z-axis push (depth-dependent zoom): The uCamZ uniform increases (driven by a sinusoidal oscillation z = sin(t)·0.5 + 0.5), which reduces the currentZoom factor in the shader — zooming the entire frame outward as if the focal length is widening.
• Depth-weighted displacement hold: Because the parallax displacement is depth-weighted, foreground pixels (high depth = white in the depth map) are displaced proportionally MORE than background pixels. This means foreground subjects appear relatively stable while the background elements shift behind them — replicating the physical dolly-zoom phenomenon.

The most cinematic result is achieved with portraits with clear background separation, where the subject face stays sharp and centered while the environment behind them dramatically warps. For subtle, seamless loops, set Camera Speed to 0.4–0.7 and Intensity to 0.6–0.9.

Depth-of-Field (DoF) is a photographic optical effect where only a specific distance range from the camera appears in sharp focus — objects in front of or behind the focal plane are rendered as soft, diffuse blur discs (called Bokeh, from the Japanese 暈け, meaning 'blur' or 'haze').

The physical basis is the Circle of Confusion (CoC): a point of light on a surface not at the focal distance is projected by the lens onto the sensor not as a perfect point but as a disc whose radius is proportional to the departure from the focal plane and inversely proportional to the f-number (aperture).

Our WebGL shader approximates this with a depth-aware 5-tap Gaussian blur:

1. Each pixel's depth value is read from the depth map.
2. The blur radius is computed as: CoC = |depth − FocalPlane| × BokehStrength × maxRadius
3. 5 samples are taken around the pixel (center + 4 cardinal directions at CoC distance) and averaged.
4. Pixels at the focal plane have CoC = 0 → no blur. Pixels far from the focal plane have large CoC → heavily blurred.

This technique is GPU-bound because it requires sampling the texture 5 times per pixel per frame. At a 1920×1080 viewport running at 60 FPS, this means 622 million texture samples per second. Modern integrated GPUs (Intel Iris Xe, Apple M-series) handle this effortlessly; older mobile GPUs may drop to 30 FPS with Bokeh enabled at high values.

Click the Export 60 FPS Video button in the Export tab or the quick-export button in the telemetry bar. The export process uses three browser-native APIs:

1. HTMLCanvasElement.captureStream(60) — attaches a live 60 FPS pixel stream from the WebGL render context.
2. MediaRecorder — encodes the stream using VP9 (preferred) or VP8 (fallback) at your selected bitrate.
3. At the end of the selected duration, the recording stops and the encoded chunks are bundled into a .webm file downloaded to your device.

Platform compatibility and recommendations:

• TikTok: Upload WebM directly — TikTok accepts VP9. 5-second loop, 8 Mbps.
• Instagram Reels: Convert WebM to MP4 H.264 using HandBrake (free). Bitrate: 8–16 Mbps.
• Twitter/X: 5–15 seconds, native WebM upload or convert to MP4. Max 512 MB file.
• YouTube Shorts: 15-second export at 16–25 Mbps, convert to H.264/H.265 MP4 for best re-encoding results.
• LinkedIn / Pinterest: Convert to MP4. Keep under 200 MB for LinkedIn video posts.
• Websites (HTML video tag): Use WebM directly with an MP4 fallback for Safari. WebM at 4 Mbps is excellent for autoplay web content.

The quality of the parallax effect is almost entirely determined by two factors: depth diversity (how many distinct depth layers exist in the scene) and depth contrast (how clearly separated those layers are). Here is a ranked guide:

• ⭐⭐⭐⭐⭐ Portrait with Natural Background Blur: A person photographed with a 50mm f/1.8 or 85mm f/1.4 lens creates massive foreground-background separation. The AI depth map is highly accurate and the parallax displacement is dramatic and cinematic.
• ⭐⭐⭐⭐⭐ Mountain/Canyon Landscape: Multiple distinct depth planes (rock formation, middle ground trees, distant mountain peaks, sky) provide a rich multi-layer depth map with excellent parallax stratification.
• ⭐⭐⭐⭐ Urban Cityscapes: Street-level perspective creates natural depth recession. Buildings, vehicles, pedestrians at different distances provide varied depth layers.
• ⭐⭐⭐ Macro Photography (Flowers, Insects): Very shallow native DoF. Works well but limited parallax depth range.
• ⭐⭐ Dense Forest / Chain-Link Fences: Overlapping transparent/semi-opaque elements confuse the depth network. Use 'Invert Depth Map' toggle to experiment with alternative depth interpretations.
• ⭐ Flat Document / Whiteboard: Zero depth variation. The depth map is near-uniform gray — essentially no parallax displacement possible. Avoid for parallax purposes.

Pro Tip: Portraits captured against out-of-focus backgrounds (bokeh backgrounds) consistently produce the most dramatic and professional-looking parallax results, even with minimal intensity settings.

Yes — with one important distinction. Our tool is completely free for any commercial use, including social media marketing, product advertisements, client work, and monetized content creation. The tool software itself carries no licensing restrictions on your output.

However, the copyright of the output video is determined by the copyright of the input photograph:

• If you upload your own original photography — you own the output video entirely and may use it freely for any commercial purpose.
• If you upload a photo with a Creative Commons license — check whether the CC license permits commercial use (CC-BY, CC-BY-SA) or restricts it (CC-NC variants).
• If you upload a stock photo licensed from Shutterstock, Adobe Stock, Getty, etc. — the stock license governs the output. Most standard stock licenses permit using the image in 'digital media' including social video, but verify your specific license tier.
• If you upload a copyrighted photo you do not own — the output video carries the same copyright restrictions as the original image.

The AI depth estimation and parallax rendering applied by our tool do not constitute a derivative work that would override the original photograph's copyright status under standard intellectual property law in most jurisdictions.

The Cinematic Orbital mode uses a Lissajous curve to drive the virtual camera's X/Y position through time. Named after French mathematician Jules Antoine Lissajous (1822–1880), a Lissajous curve is the parametric path traced by a point whose X and Y coordinates oscillate sinusoidally at different frequencies:

x(t) = A · sin(a·t + δ)
y(t) = B · cos(b·t)

In our engine: x = sin(ω·0.85) · cos(ω·0.42), y = cos(ω·1.07) · sin(ω·0.31) — where ω = elapsed_time × speed × 0.55.

The non-integer frequency ratios (0.85/0.42 and 1.07/0.31) mean the curve never exactly repeats over a short period, producing a smooth, complex, organic-looking camera path that avoids the mechanical linearity of simple back-and-forth oscillation. Despite this, the pattern recurs approximately every 10 seconds (at 1× speed), making 5-second loops effectively seamless since they capture less than one full cycle.

This mode is the industry standard for viral social media parallax content because the smooth orbital motion gives the impression of a virtual camera floating around the subject — a cinematic quality that immediately reads as 'high production value' to viewers.

The Depth-Anything-Small model is a quantized INT8 ONNX binary approximately 25 MB in size. On your very first use, the browser must download this file from the HuggingFace CDN (cdn.jsdelivr.net). Depending on your connection speed:

• 100 Mbps connection: ~2 seconds
• 25 Mbps connection: ~8 seconds
• 10 Mbps connection: ~20 seconds
• Mobile 4G (~15 Mbps average): ~13 seconds

After the first download, the model is stored in your browser's Cache API (a persistent, offline-accessible cache layer — different from HTTP browser cache which can be evicted). Transformers.js uses the browser's caches API to store ONNX model files indefinitely, or until you explicitly clear browser data with 'Cached images and files' selected.

On all subsequent visits, even if you are offline, the model loads from the local cache in under 300 milliseconds. The full model binary is never downloaded again unless you clear your browser storage. This architecture allows the tool to work offline after first use — critical for content creators without reliable internet connectivity on location shoots.

Chromatic Aberration (CA) is an optical defect where a camera lens fails to focus all wavelengths of light to the same convergence point, causing colour fringing at high-contrast edges. It occurs because the refractive index of glass varies with wavelength — a phenomenon called optical dispersion (described by the Abbe number).

There are two types:

• Lateral CA: Red and blue channels are magnified at slightly different scales, causing colour fringing that increases toward the image corners.
• Longitudinal CA: Different wavelengths focus at different distances from the lens, creating coloured halos around out-of-focus specular highlights.

Our shader simulates lateral CA by sampling the red and blue colour channels at UV coordinates offset by the CA strength parameter, while keeping the green channel (least affected wavelength in most lenses) at the baseline UV:

red = texture(tDiffuse, uv + vec2(ca, 0.0)).r
green = texture(tDiffuse, uv).g
blue = texture(tDiffuse, uv − vec2(ca, 0.0)).b

The offset magnitude is further scaled by the distance from the frame center (length(uv − 0.5)), because lateral CA naturally increases toward the corner extremities — replicating the physics of real lens aberration. This subtle effect, when combined with film grain and a warm colour grade, produces an unmistakably filmic, analog-photography aesthetic.

The Teal & Orange colour grade is the most ubiquitous cinematic look in modern Hollywood blockbusters — appearing in virtually every film from Marvel's Avengers to Christopher Nolan's Interstellar. It exploits a fundamental principle of complementary colour theory: teal (#008B8B) and orange (#FF7F00) sit directly opposite each other on the colour wheel, creating maximum simultaneous contrast that is psychologically energizing to human visual perception.

The practical reason for its dominance: human skin tones naturally fall in the orange/amber range (warm flesh tones across all ethnicities). By shifting shadow and midtone areas toward teal/cyan and preserving skin tones in orange/amber, the technique simultaneously:

• Makes human subjects visually 'pop' against desaturated, cyan-tinted environments.
• Creates a premium, high-production-value aesthetic associated with expensive cinema cameras.
• Reduces colour saturation in non-subject areas (backgrounds, shadows), drawing the eye naturally to faces and warm-toned subjects.

Our GLSL implementation mixes teal and orange target colours based on the pixel's red channel luminance value (mix(teal, orange, c.r)), then blends 55% of this grade with the luminance-only version of the colour to prevent oversaturation, and applies a 6% brightness boost to compensate for the luminance loss introduced by colour mixing.

For the specific use case of 2.5D parallax animation from still photos, our browser-based tool competes strongly with professional alternatives — and surpasses them in several practical dimensions:

Where professional tools still exceed our browser implementation: complex multi-layer manual masking for scenes with 5+ depth layers, high-resolution (4K+) output, and integration with larger post-production pipelines. For quick social media content creation from any photo, our tool is genuinely the fastest and most private option available.