Depth

Drop in a photo. Place a 3D object. The lighting just matches.

Most designers don't need to learn Blender. They need a phone mockup on a desk, a product shot with the right shadow, a mug with their logo on it. Depth lets you do that in seconds. Upload a photo, pick an object, drag it into place. The lighting and shadows match your scene automatically.

depth/
├── sdk/            C++ SDK (embeddable compositing engine)
├── web/            Web app (React + Three.js)
├── electron/       Desktop shell (loads web + native sidecar)
└── figma-plugin/   Experimental Figma bridge

Zero-dependency C++20 library for compositing 3D objects onto background images with automatic lighting estimation.

• Lighting estimation — analyzes a photo to estimate light direction, color temp, brightness
• Surface detection — define collision planes from drawn quads for realistic object placement
• 3D rendering — software rasterizer with z-buffer, per-pixel shading, and triangle mesh support
• OBJ mesh loading — import Wavefront OBJ files with automatic normal computation
• Compositing — alpha-over blending with Normal, Multiply, Screen, and Overlay modes
• C + C++ APIs — clean C++ interface with a flat C API for FFI/embedding in any language

// Composite a 3D object onto a photo
Scene scene;
scene.set_background(Image::load("photo.jpg"));
scene.apply_lighting_estimate(estimate_lighting(scene.background()));
scene.add_object({.geometry = GeometryType::Box, .transform = {.position = {0, 0.5f, 0}}});
render_composite(*Renderer::create(), scene).save("output.png");

Interactive browser app built with React 19, Three.js (React Three Fiber), Zustand, and Tailwind CSS v4.

• Upload a background photo → auto-analyze lighting
• Primitive shapes + mockup objects (mug, phone, bottle, bag, card, laptop, tablet, and more)
• Material presets (matte, glossy, metal, glass, plastic, wood, marble, fabric, leather…)
• Per-face texture placement on box/card faces
• Draw surface planes on the image for object collision/snapping
• Fine-tune lighting direction, height, shadow softness/color, and point lights
• Scene templates and named save slots
• Export composite as PNG at 1x/2x/4x, or export layered passes

cd web && npm install && npm run dev

Open / for the landing page, /app for the editor.

Upload	Editor	Materials

Lighting	Surfaces

The web app is the fastest way to try the idea. The C++ SDK is for apps that need native embedding and performance.

• Node.js 20+ and npm (web app, Electron, Figma plugin)
• CMake 3.20+ and a C++20 compiler — GCC, Clang, or MSVC (only needed for the SDK, the native sidecar, and the desktop build)

This repo is an npm workspace, so one install at the root covers the web app, the Electron shell, and the Figma plugin:

git clone https://github.com/HesNotTheGuy/Depth.git
cd Depth
npm install            # installs web + electron + figma-plugin

Common root scripts (see package.json):

npm run dev            # web dev server + Electron together
npm run build          # web build + native sidecar + Electron (needs CMake)

The per-area commands below still work for focused work.

cd sdk
cmake -B build -DCMAKE_BUILD_TYPE=Release
cmake --build build
./build/tests/depth_tests      # run tests
./build/examples/depth_demo    # run demo

cd web
npm install
npm run dev     # development server
npm run build   # production build

cd web
npm run test:run      # unit tests
npm run e2e           # end-to-end tests

Depth is dual-licensed.

• AGPL-3.0 for open-source, personal, academic, and AGPL-compatible use.
• Commercial license for proprietary embedding, closed-source distribution, or hosted services that cannot meet AGPL requirements.

Forks and contributions are welcome under the AGPL. For commercial inquiries, see COMMERCIAL.md.