logoKlox
料金
記事一覧

From Blender to AI Video: Building a Browser-Based Import Bridge

約 7 分で読めます
BlenderAI VideoWorkflowEngineering

How Klox moves Blender previews into an AI workflow canvas without storing website credentials in the add-on.

A rough 3D scene can express things that take a surprisingly long prompt to describe: where the camera sits, how objects overlap, how much space a subject occupies, and how a shot moves.

That makes Blender an interesting starting point for AI-assisted image and video workflows. Build the composition in 3D, export a reference, then use it as input for the next creative step.

But moving between the desktop scene and a browser-based workflow introduces a small, repetitive chore: export, find the file, switch applications, upload, and locate the right project.

I’m building Klox, a visual workflow platform for AI content creation. To connect those two parts of the process, I built a Blender add-on that imports a snapshot or animation preview into a Klox canvas.

The button is called Import to Klox. Behind it is a Python loopback server, a browser handoff, and a persistent import operation whose success condition is a saved canvas node.

Start with a scene you can control

The workflow begins with an ordinary Blender scene. It can be modeled manually or assembled with AI-assisted Python. Either way, the useful artifact is a scene whose geometry, camera, and timing you can inspect and adjust.

For example, imagine a product shot with a bottle on a pedestal. In Blender, you can choose the camera angle, place background objects, and animate a slow orbit. A snapshot communicates the framing; a preview animation adds the camera movement.

Those references can then feed an image or video generation node. They provide visual guidance, though the generated result still needs review for composition and motion fidelity.

The importer handles that handoff. It transfers rendered media, while the editable .blend scene stays on your machine. Once imported, the media becomes an ordinary file node that you can connect to a compatible generation model. Generation remains a separate action.

The Klox sidebar in Blender's 3D Viewport

_The workflow starts in Blender, with the importer accessible from the 3D Viewport sidebar._

Three ways to bring media across

The add-on exposes three modes:

ModeOutputIntended use
SnapshotPNG from the selected camera at the current frameComposition and image-to-video references
AnimationH.264 MP4, 24 fps, 1–720 frames, without audioCamera movement and motion references
Local fileAn existing PNG, JPEG, or MP4Previously rendered or edited media

Built-in renders use Blender’s Workbench engine with single-color studio shading. This produces a greybox reference that emphasizes shape and layout. For a finished render with your own materials and lighting, use Local file.

Snapshot and animation exports offer a short edge of 480, 720, or 1080 pixels. They preserve the scene’s aspect ratio, subject to rounding dimensions for encoding, and never upscale the source resolution.

Local files pass through without transcoding or trimming. Images are limited to 20 MiB and MP4 files to 200 MiB. The 720-frame limit applies to the built-in animation render; individual generation models enforce their own requirements later.

Klox Blender add-on controls for choosing an export mode and importing media

_Choose Snapshot, Animation, or Local file, then start the browser handoff with Import to Klox._

To try it, download the ZIP from the Blender guide, install it through Blender’s Preferences → Add-ons → Install from Disk, and enable Klox Canvas Importer. Leave the download zipped.

Blender Preferences showing the Add-ons installation menu

_Install the downloaded ZIP through Blender's Add-ons preferences._

Open the 3D Viewport sidebar with N, select Klox, choose a source, and click Import to Klox. The browser handles sign-in and destination selection. After a successful import, Blender remembers the canvas for the next export.

Let the browser own authentication

The central design decision was to keep website authentication in the browser.

The add-on stores the website address and the last successfully used destination. It has no website session or API key to manage. Remembered destinations are scoped to the exact site origin, so a development server and the production site have separate targets.

The transfer looks like this:

Blender
  Render or select media
  Make an immutable temporary copy
  Start a temporary loopback server
       |
       | Open browser with handoff information
       v
Klox import page
  Sign in and choose a canvas
  Fetch media from the local bridge
  Upload through an authorized storage URL
       |
       v
Klox server and canvas
  Validate uploaded media
  Commit the file node
  Return completion to Blender

The browser connects to the local bridge and uploads to storage. The cloud server never needs to reach into the user’s computer.

The Python implementation is split into three modules: render.py manages rendering and restoration, bridge.py implements the HTTP protocol, and runtime.py coordinates Blender’s UI and background work.

A temporary bridge with a small protocol

Each export starts a Python ThreadingHTTPServer bound to 127.0.0.1 on an automatically assigned port. It exposes three routes:

RoutePurpose
GET /manifestDescribe the export
GET /fileTransfer its bytes
POST /resultReport completion or cancellation

The manifest includes a protocol version, import ID, filename, media type, byte count, SHA-256 digest, expiry, and an optional remembered destination.

The bridge validates the exact Host and website Origin, as well as a random per-export token. It has a 30-minute deadline and serves only the prepared file.

The browser opens a URL shaped like this:

https://klox.ai/blender/import#port=…&token=…&manifest=…

Putting the handoff in the fragment keeps it out of the initial HTTP request to the website. The import page validates the values, saves them in tab-scoped session storage, and removes the fragment from the address bar. This preserves the handoff while the user signs in.

The client constructs fixed 127.0.0.1 URLs from the validated port. The manifest cannot tell it to fetch an arbitrary host.

Before starting the bridge, the add-on copies the export into a temporary directory. That copy matters: repeated downloads must refer to the same bytes, even if the original file changes while the import page is open.

Make local-network failure recoverable

Browser access to a local server may require permission. A rejected or unavailable connection should still leave the user with a way forward.

That is why the link carries the manifest as well as the bridge address. The import page can ask the user to select the exported file manually and continue using the same import identity.

Validation has an explicit tradeoff:

  • Every file must match the expected size.
  • Files up to 32 MiB must also match the manifest’s SHA-256 digest.
  • Larger files skip browser hashing to avoid an additional full-file hashing allocation.

Python computes the export digest incrementally, but the current browser hash path uses Blob.arrayBuffer() and Web Crypto. Skipping that step for large videos reduces allocations; the transfer still buffers a Blob.

The server separately checks stored size and media signatures. It does not verify SHA-256. Consequently, manual fallback cannot distinguish two large videos of identical size by digest. The user needs to select the intended export.

A downloaded file is only halfway there

The bridge can finish sending bytes before the website has uploaded the media or saved a node. Reporting success at that point would create a misleading result in Blender.

Klox therefore persists an import record keyed by (userId, importId). That record binds the operation to one destination, file key, and node ID. Retrying the same operation reuses those identities.

For an existing canvas, the server adds the node through the normal revision-guarded save path. For a new canvas, preparation reserves its identity and title; the canvas is created together with its first node at completion. Abandoning a transfer therefore does not leave an empty project behind.

The graph change, import completion, and removal of the temporary file reference commit together. The resulting workflow node then keeps the file alive through the normal file-reference system.

Only after that save does the browser send a completion receipt to Blender. A lost receipt can be retried without creating another node.

There is also an editor coordination problem: the target canvas may already be open with unsaved changes. The import page uses BroadcastChannel to discover a matching editor and address one receiver. That editor saves pending work, performs the import, and synchronizes the resulting revision. Server-side idempotency remains the protection against duplicate requests and lost replies.

Restore the scene, including on cancellation

An export temporarily changes several Blender settings: render engine, camera, dimensions, output format, frame range, and shading.

The rendering module records each previous value before replacing it. Its restoration path applies those values in reverse order and restores the original frame. Completion, cancellation, and render-start exceptions all use that path.

Background threads handle copying, hashing, and HTTP work. They communicate through queues; a Blender timer processes events and updates the UI on the main thread. The bridge module contains no Blender API calls.

Cancellation also has two distinct scopes. Closing the local handoff prevents further downloads. Once the browser has received the bytes, cancelling the persisted web import must happen on the web page.

What this integration makes possible

The repository includes tests for the loopback protocol, file validation, retry behavior, and persistent import lifecycle. A Blender smoke test exercises a portrait snapshot, a short animation, and scene restoration. The documented local smoke run used Blender 5.2.1 on macOS; other versions and operating systems still need their own release checks.

The useful outcome is a shorter creative loop: adjust the scene, export a reference, and continue from a saved node on the canvas. You can keep refining the 3D composition while exploring image styles or video treatments downstream.

For me, the most reusable engineering lesson is where to place the success boundary. A desktop-to-web transfer is complete when the destination has durably saved the user’s work. Designing around that point makes retries, receipts, and recovery much easier to reason about.

The Blender guide and demo show the workflow and include the add-on download.