3-D Fireplace Animation

Tips & Tricks
1

Here’s yet another old school project – the rotation of a simulated 3-D object. All source materials are included.

Notes:
• As Hype does not support a true 3-D space, items do not intersect, but overlap. For the inner angles of the fireplace to work I edited the inner top to a trapezoid so it would provide the illusion of intersection.
• Also due to limitations (the inability to offset the anchor point on the z axis), objects such as the back wall could not rotate around a floating anchor point without adding some complexity. The easy solution is to shift the item horizontally as it rotates.
• To reduce the impression of a rigid animation, the main timeline is set to a 8-second loop, but the flames and embers are on a separate timeline with a 6.5 second loop.
• There is a parallax effect going on between the fireplace front, the wood, and the back wall. The trick is in moving the wood element horizontally, but only slightly. The greater the move, the greater the perceived distance. (This is opposite of the normal parallax effect because the “universe” is rotating around a center point rather than around a distant vanishing point.)
• The seamless intersection of the outer faces of the fireplace was done by slicing the original flat image. Added depth was created by using Hype’s CSS tools to darken the left face and brighten the right face. To achieve a seamless look, the right and left faces were nudged one pixel towards the center.
• No effort has been made to optimize the dimensions or file sizes, so you can use the elements to create a larger version if you wish.

BTW, I would have saved a preview as a GIF but Hype was unable to complete the output.

Download: https://www.hightail.com/download/dDZIV0o5NmM4Q1ROTzhUQw

2 Likes
2

Nice Work Trey - and Thank You for all the other “old school” projects!

1 Like
3

Note that this came from a real-world project (a 60-second TV spot) in which I needed to simulate an orbiting dolly move using flat images – an interior shot of sliding shutter panels mounted over sliding glass patio doors. I was able to clone the background (small lake with houses), clone the patio/yard and build the outdoor fireplace (no need for a fire in this version). Additional realism was created by overlaying translucent png shadows on the sides of the fireplace and projecting from the fireplace across the patio surface. I also inserted simulated window reflections that moved in sync to create the impression of glass doors.

In this situation, the simulation had advantages over actual video, in that exterior light is far stronger than interior light and I could control this separately from the interior image layer.

This 3-D thing was an impromptu project. The plan was to simply show the motion of the sliding shutter panels but it was rather boring, despite having multiple angles and zoom levels. We needed some live camera movement for the start and finish to give it some life. We did not have a dolly system with us and, as this was intended to be a quick project, it was shot on a DSLR rather than using our big camera. In the end, the simulated 3-D orbit worked very well and, thanks to the distraction of flying logos and other overlaid content, no one could notice that it was a sim unless they had a good eye for spotting such things.

The original project was done using After Effects. I later created a Hype version as a test of concept.