CAD Viewer Open the viewer

Runs in your browser · FBX and GLB · Nothing to install

Open any building model in the browser, then put it on its street.

CAD Viewer opens Revit, Maya and SketchUp exports right on the page. Cut sections, hide layers and clean up the model, then drop it into its real neighborhood, fly a drone through it and render stills and movies. Your model never leaves your computer.

Open the viewer See how it works

Built for desktop browsers with WebGL2, tested in Chrome and Safari.

CAD Viewer Demo building Open Save project Layers Site
Loading the demo building…
demo-building.glb
7 floors · 48 × 16 m
Drag to orbit · scroll to zoom
This is the viewer, running on a small demo building. Drag to orbit, switch Flat, Shaded and Photo, hide layers and slide the section cut.

View styles

Three ways to look at the same model

Switch at the top of the viewer. Each style keeps its own edge lines and settings, and your project remembers which one you left it in.

FlatThe Revit look: white surfaces, blue glass and black edge lines under even light. Best for reading the design.
ShadedThe model's own materials under a sun with soft shadows, on a dark background. Recesses, balconies and curved surfaces read in depth.
PhotoA sky and a sun you can move, glowing windows and the real street around the site, with a path tracer for the final image.

These images are rendered in your browser from the demo building above. The demo's Photo look is a simplified version: the viewer adds sky lighting, ambient occlusion, bloom, the street context and the path tracer.

How it works

From a Revit export to a presentation in four steps

No plugins, no account and no upload. The whole viewer is one HTML file, and your model opens from your own disk.

  1. Export

    Export a 3D view from Revit as FBX. Exports from Maya, 3ds Max and SketchUp work too, as FBX or GLB.

  2. Open

    Drop the file on the page. Revit exports are colored by category; other files keep their own materials and textures. A 57 MB export opens in about six seconds.

  3. Clean up

    Box the streets and site work the exporter brought along and press Delete. Hide whole categories from Layers. ⌘Z brings anything back.

  4. Present

    Place it on its street, switch to Shaded or Photo, fly the drone, then save a .cadviewer project or render stills and movies.

Site context

Put the building on its street, at the real heights.

Type the property's address. The viewer brings in the streets, sidewalks, neighboring buildings, trees and street lights around it, drapes them over the real terrain, and helps you line the model up.

  1. 1
    Fetch by addressEverything within 150 m to 1 km, from OpenStreetMap, over AWS elevation tiles. Free, and no account needed.
  2. 2
    Line it upDrag the building over the map, nudge it north, south, east or west, or click matching corners on the model and the map. Each pair shows how far off it still is, in meters.
  3. 3
    Clear the lotMap buildings under your model disappear on their own. Click any others to hide them; hidden ones stay as red ghosts you can click back.
  4. 4
    Measured heights with AIFor better data than the map has, Get AI prompt fills in your address and asks an assistant for measured heights from local GIS and for buildings too new to be mapped.
site-context-prompt.md
You are preparing the surroundings of a property for CAD Viewer, a browser-based 3D architecture viewer. …

The property
- Address: 1234 Example Street, Los Angeles, CA
- Radius: 300 m around the anchor
- Output file: 1234-example-street.context.json

Where the data should come from (best first)
1. Streets, sidewalks, building footprints, trees, street lights, parks, water, surface parking: OpenStreetMap, via the Overpass API.
2. Building heights: prefer measured heights from local government GIS, such as LA County "Countywide Building Outlines" (LARIAC, HEIGHT in feet) or NYC "Building Footprints" (HEIGHTROOF), then Overture Maps, then OpenStreetMap. …
   Mark every height you could not source as "estimated": true.
3. Recent or planned buildings: add ones completed after the mapped data, or approved or under construction within the radius. …

Open the .context.json it returns and the neighborhood appears around your model, in the viewer and in every render.

The viewer in Photo mode with its Site panel open: the demo building stands on a corner lot on 4th Street in downtown Santa Monica at golden hour, among real neighboring buildings at their mapped heights, with towers behind, street trees, street lights and a crosswalk. The panel reads 167 buildings, 89 road segments and 299 trees within 300 meters.
The demo building on a corner lot in downtown Santa Monica. The Site panel fetched 167 neighboring buildings (162 at their mapped heights), 89 road segments and 299 street trees from OpenStreetMap in about 25 seconds, and draped them over the terrain. The building isn't proposed there; any address works the same way. Map data © OpenStreetMap contributors.

Fly and capture

Fly the drone through it. Frame the shot. Render the movie.

Fly mode drives the camera like a camera drone, even inside the building, and the Capture panel turns what you see into stills and MP4 movies without leaving the page.

  1. 1
    FlyW A S D fly level with the ground whatever the tilt; E and Q climb and descend. The drone slows near walls, so you can fly through a doorway into a room.
  2. 2
    FrameLens presets from 14 to 135 mm, exposure, depth of field with tap-to-focus, a rule-of-thirds grid, and frames from 16:9 to 9:16.
  3. 3
    KeyframePress K at each stop. The path eases in and out along a smooth curve, with no roll, and you can retime every stop.
  4. 4
    RenderEach frame is drawn offline, up to 4K at 60 fps, and encoded to MP4 in the browser, so the movie is smooth whatever your graphics card manages live.
Movie · 5 keyframes · 15.5 s
      time  stop                  lens
K1   0.0 s  Across the street     24 mm
K2   4.0 s  Corner, rising        24 mm
K3   8.5 s  Over the roof         18 mm
K4  12.0 s  Along the balconies   35 mm
K5  15.5 s  Entrance, eye level   24 mm

Render MP4 · 1920 × 1080 · 30 fps · Realtime

Rendered by the viewer from the demo building at the top of this page: Photo mode at golden hour, drawn frame by frame at 1920 × 1080 and 30 fps, then compressed for this page. Record live captures the viewport while you fly by hand.

The demo building at golden hour, path traced: warm light on its limestone-colored facade and balconies, a few windows lit from inside, and street trees casting soft shadows across the sidewalk and lawn.
Take photo, path traced. The same building and light as a still: 1920 × 1080 with 160 samples, about two minutes on a laptop. Stills go up to 5K, realtime or path traced with true lens bokeh.

Use AI to enhance

Send the render to ChatGPT. Get back a finished image that still lines up.

The viewer gets the geometry exactly right. An image model is good at everything around it: materials, light, people and planting. Give ChatGPT a render and a style reference, and the finished image drops straight back over the original. It can even choose the materials.

The app export: the demo building rendered by the viewer at golden hour, with plain materials, low-poly trees and an empty street.
The AI enhancement: the same view as a finished architectural rendering, with real materials, people, cars and full planting, and every window and balcony in the same place.
App export AI enhancement
Drag across the image. Left of the line is the viewer's export; right of it is ChatGPT's version, straight from ChatGPT with no alignment. Every floor line, window column and balcony lands where the viewer drew it.
ChatGPT's material reference board for the demo building: the building in warm stone at sunset, with swatches and close-ups of natural stone, stucco plaster, dark bronze window frames, blackened balcony railings, bronze accent lights and olive-tree landscaping.
ChatGPT's material guide for the demo building, made from the app export alone. Open it full size.

Materials from AI

No reference yet? Ask for one.

Send the export on its own with a line about the mood you want. ChatGPT comes back with a material board: travertine at the base, smooth stucco above, dark bronze frames, blackened railings and olive trees. That board becomes the style reference for the finished image.

Prompt for ChatGPT · material guide
app-export.jpg · 1536 × 1024
Make a material style reference for this rendering as if it were a real building in the real world. It should be nice and fancy and simple, perhaps Mediterranean meets Indiana Jones. Give a material reference guide.

Four steps, a few minutes

No plugins and no special software: the render comes from the viewer, and the rest happens in ChatGPT.

  1. 1
    ExportIn Capture, pick the 3:2 frame (the shape ChatGPT returns) and take a photo, or use Photo mode's Export passes.
  2. 2
    Choose the materialsAsk ChatGPT for a material guide, as above, or attach a rendering or photo whose materials and mood you want.
  3. 3
    EnhanceSend the export and the guide with this prompt. It says what to change and, just as important, what must stay exactly where it is.
  4. 4
    Check the overlaySlide between the two. If the model moved a window or bent a railing, Render Compositor lines the images up and lets you paint the original back in.
Prompt for ChatGPT · enhancement
app-export.jpg · 1536 × 1024ai-materials.jpg · material guide
Turn the first image into a photoreal architectural rendering, using the second image as the style reference for materials, light, color and atmosphere.

The first image is a 1536 × 1024 render exported from a 3D model. Its geometry is correct, so keep these exactly where they are:
- the camera, perspective, framing and horizon; don't zoom, crop, shift or extend
- the building's outline, floor lines, every window, balcony and railing, the roofline and rooftop units
- the street, sidewalks, crosswalk and the position of every tree

Improve everything else:
- materials: a warm limestone facade, slim dark bronze window frames, glass that reflects the sky and shows lit interiors
- light: late-afternoon sun from the left, with soft, believable shadows
- life: a few people on the sidewalks, cars parked and moving, street lights and benches
- planting: full tree canopies, low shrubs along the building, a green lawn

Return one image, 1536 × 1024, with the same framing.

Only the highlighted lines are yours to change. The rest is what keeps the building where the viewer put it.

Features

Everything between the export and the presentation

The tools an architect, owner or broker needs to open a model someone sent them, make sense of it and show it off.

Revit colors by category

Revit's FBX export has no usable materials. The viewer reads each element's category from the file and colors walls, glass, mullions, doors and terrain the way the Autodesk viewer does.

Select and hide, like Revit

Drag left to right to pick what's fully inside the box, right to left to pick what it touches. Delete hides it and ⌘Z undoes, for parts, layers and whole categories.

Sections that stay put

Cut the model horizontally like a floor plan, or vertically through its length, and keep the cut while you orbit, fly, render and save.

Measure in feet and inches

Click two points for the distance in feet and inches and in meters. Units come from the export, so a Revit model measures the way it was drawn.

Photoreal, with a path tracer

Dusk, golden hour, midday and night, glowing windows and soft shadows, then a progressive path tracer. Export beauty, depth and edge passes for AI image tools like Render Compositor.

Your model stays with you

The viewer is a single HTML file that works offline. Models open from your disk and are never uploaded. Fetching a street context sends only the address and its map area.

Keyboard

Fly, pick and capture from the keyboard

Hover any button in the viewer to see what it does.

Fly

W A S D
Fly level, slide
E Q
Climb, descend
←→↑↓
Turn and tilt
hold ⇧ / ⌥
Faster, finer
+ −
Cruise speed
double-click
Fly to that spot

Select and hide

⇧ click
Add or remove a part
⌥ drag
Take parts out of the box
Delete H
Hide the selection
⌘Z ⇧⌘Z
Undo, redo
Esc
Clear, then close the tool

Capture and site

P
Take a photo
K
Add a movie keyframe
←→↑↓
Nudge the model on the map
[ ]
Turn it
PgUp PgDn
Raise, lower
Use Ctrl in place of ⌘ on Windows.

Share it

One file holds the whole scene.

Save project writes a .cadviewer file. Open it in the viewer anywhere and everything comes back the way you left it:

my-building.cadviewer
├── project.json   camera, view style, lighting, section cut,
│                  hidden parts, placement on the map
├── model/         the FBX and its textures, as opened
└── context.json   streets, buildings, trees and terrain
  • Projects open in any desktop browser with WebGL2. There's nothing to install on the other end.
  • It's an ordinary zip under its own name: rename a copy to .zip to look inside.
  • Movie keyframes, fly mode and the lens are saved too, so a colleague can pick up the same shot.
  • For a model you send often, the viewer can be built with the model baked in: one self-contained HTML file that opens offline, even from an email attachment.

Open your next model in the browser

Drop in an FBX or GLB, box out the street, and press Shaded.

Open the viewer