Correlating SketchUp exports with finished photography

I just watched a most amazing video about image manipulation by Fredo6

This prompts me to ask about another possibility.

I am developing a website that features kitchens my cabinet shop has produced. I do all the design work in SketchUp and photograph the projects extensively after they are installed. I would like to create videos that juxtapose the design drawings with the photography. In my mind the videos would transition back and forth between design concepts and final outcome. Somewhere in the middle would be colored cabinets to momentarily focus the audience’s attention.

All the 2D exports I have ever produced have been in JPEG format. I never really considered the benefits of using transparent PNG files until I watched the Fredo6 videos on youtube.

My question is this: Can you export sketchup drawings in PNG format in such a way as to produce transparent line drawings that can overlay photographs? Would it be possible to scale the drawings in such a way as to be able to anchor them to the photograph so that the drawings exactly accorded with the photograph?

There would be a good amount of work in HTML5 to get that all going, but certainly SketchUp could export the bits you would need. You might look at higher level tools for developing the content, and they could handle the scaling of the images.

One tool that I know well is Adobe Animate. It can publish to HTML5 Canvas, but it can also publish to WebGL formats, and can read in 3D models at runtime. It would be possible to transition from a 2D image to the same view of the 3D model, and then animate the 3D model into another position, and have that view transition back to it’s original drawing.

Hopefully I’ll find time to work on that some day.

Thanks for the tip, Colin.
I have an Adobe CC subscription. I imagine Adobe Animate is in there somewhere. I will take a look at that to see what it can do.

It is possible to export png images as line drawings, or any number of rendered variations, shadows only, etc - which being the same scene are all aligned. That part is easy, the hard part mostly is related to focal length of a photographed image compared with the SU images. There is also lens distortion (which can be corrected) to complicate the issue. Both of these things can be done in Photoshop with warping and distorting. You can export an image set in png from SU, but wierdly there is no option for transparent background. But you could make your own set using single images, with transitions in Premier Pro. A bit of a vague explanation I know, but it’s been a while since I used this technique, and I have the memory of a senile goldfish.

Transparent background png is available via the options button in the save dialogue. Right?

You might be able to achieve a dirty version of this by taking the real world photos first, then importing them into your sketch up model as an image (rather than texture). I have done something similar by placing the image behind my model then in X-ray mode moving the camera so the model in the foreground lines up with the photo behind. You can tweek the field of view and also tweek the actual location of the background image, even skew the plane of the photo if needed. Then once they are close, turn off the geometry layer and export the view of the image from the same camera position, then another export with the geometry on and the background photo off.

Export / 2D / Options / tick the box.

I use a similar technique for working with AR images + Photoshop. AR might be another way of approaching the issue.

It’s probably easiest to use Sketchup’s “photomatch”. Take a photo of your final designs and bring that photo into SU and use photomatch to line it up with the original model. Once the perspective is correct it should be easy to then mix together in any video editing software, it may just need some final repositioning/scaling. As you have Adobe CC, premiere can do it and you can also produce videos from photoshop using “timeline” too. If you’re having issues with png export, exporting the linework with a white background can work, just use a blending mode (multiply, overlay) to eliminate the white.

What is “AR” ?

Yep. Multiply - you nailed it. Never totally happy with Photomatch though.

Perhaps Augmented Reality - typically a blend of real-world imagery with synthetic overlays.

I’m liking that AR concept. Pretty soon we can all live in small boxes with windows that emulate scenery. It will be a great morale boost. We can all live on the Riviera one day and in the mountains during the afternoon.

Maybe with the Platinum version we can have some input into the memories they implant in our DNA.