Page 1 of 1

How do they do this?

Posted: November 21st, 2020, 6:01 pm
by Clitheroekid
I enjoyed this short clip about a rather excellent painting, but I'd like to know how the 3D effect in the video was created out of a 2D object - https://www.sothebys.com/en/articles/an ... Y28udWs%3D

Re: How do they do this?

Posted: November 21st, 2020, 6:29 pm
by Itsallaguess
Clitheroekid wrote:
I enjoyed this short clip about a rather excellent painting, but I'd like to know how the 3D effect in the video was created out of a 2D object - https://www.sothebys.com/en/articles/an ... Y28udWs%3D


I think what we're seeing in the video is actually a 3D model of the original 2D painted scene, where they've used individual image masks of each of the major painted elements to help create the modelled elements in the 3D scene, and then they've navigated a camera around the digitised 3D scene to create the video...

It's a brilliant process, and it really brings the paining to life.

What a great way to use technology..

Cheers,

Itsallaguess

Re: How do they do this?

Posted: November 21st, 2020, 6:46 pm
by swill453
Itsallaguess wrote:I think what we're seeing in the video is actually a 3D model of the original 2D scene, where they've used individual image masks of each of the major painted elements to help create the modelled elements in the 3D scene, and then they've navigated a camera around the 3D scene to create the video.

It's a brilliant process, and it really brings the paining to life.

What a great way to use technology..

I agree it's impressive. But it does mean that someone has created (faked?), by computer, some parts of the scene that didn't exist because they were obscured by foreground elements.

Scott.

Re: How do they do this?

Posted: November 21st, 2020, 6:49 pm
by Itsallaguess
swill453 wrote:
Itsallaguess wrote:
I think what we're seeing in the video is actually a 3D model of the original 2D scene, where they've used individual image masks of each of the major painted elements to help create the modelled elements in the 3D scene, and then they've navigated a camera around the 3D scene to create the video.

It's a brilliant process, and it really brings the paining to life.

What a great way to use technology..


I agree it's impressive.

But it does mean that someone has created (faked?), by computer, some parts of the scene that didn't exist because they were obscured by foreground elements.


Yes, they have. It wouldn't have been possible to deliver these video results without some level of artistic-licence regarding that...

To be honest, they've done a brilliant job of that specific aspect alone, never mind all the other technological marvels required to produce the video...

Cheers,

Itsallaguess

Re: How do they do this?

Posted: November 21st, 2020, 9:31 pm
by onthemove
Clitheroekid wrote:I enjoyed this short clip about a rather excellent painting, but I'd like to know how the 3D effect in the video was created out of a 2D object - https://www.sothebys.com/en/articles/an ... Y28udWs%3D


Not sure what they'll have used in their particular case, but here's how you can achieve it with blender 2.8, photoshop plus another utility.

https://www.youtube.com/watch?v=dHXRrpG_oSk

Re: How do they do this?

Posted: November 21st, 2020, 9:48 pm
by stewamax
Very effective. But it doesn't look like true 3D but a series of 2D layers displayed using website HTML5 CSS3 transforms*. Among other things the latter allow page elements to be moved in perspective. So if the picture is turned into a series of slices ("foreground men" and so on), the slices can be moved relative to one another in an apparent 3D way.
CSS3 transforms are one way to provide the parallax scrolling effect used by many websites where the foreground (usually separate blocks of text) moves over a background (usually of photos), with the text moving faster than the photos. This gives an illusion of depth as it simulates parallax.

The 3-D acid test is simply whether the picture can be rotated such that a true side-view is displayed.

* notably the 2.5D scale3d transform that resizes elements in pseudo-3D and the perspective transform which gives 3-D depth.

Re: How do they do this?

Posted: November 21st, 2020, 10:02 pm
by Itsallaguess
stewamax wrote:
Very effective. But it doesn't look like true 3D but a series of 2D layers displayed using website HTML5 CSS3 transforms*. Among other things the latter allow page elements to be moved in perspective. So if the picture is turned into a series of slices ("foreground men" and so on), the slices can be moved relative to one another in an apparent 3D way.
CSS3 transforms are one way to provide the parallax scrolling effect used by many websites where the foreground (usually separate blocks of text) moves over a background (usually of photos), with the text moving faster than the photos. This gives an illusion of depth as it simulates parallax.

The 3-D acid test is simply whether the picture can be rotated such that a true side-view is displayed.

* notably the 2.5D scale3d transform that resizes elements in pseudo-3D and the perspective transform which gives 3-D depth.


I wondered if they were using 2D slices in that way at first, but then I saw the 3D turning barrel that comes in from the right hand side from around 26 seconds into the video, and you can clearly see a proper 3D turning effect on that barrel, rather than just 'slicing' of 2D depth-fields...

Image

Can HTML5 CSS3 transforms display that sort of stuff too?

Cheers,

Itsallaguess

Re: How do they do this?

Posted: November 22nd, 2020, 10:34 am
by stewamax
Hmm.... I can't see anything in the second photo that isn't a 2.5D skewed or distorted version of the first photo, bearing in mind that a skewing can reveal something that was squashed to invisibility before the transform was applied (and vice versa).
Have a look at the rotating cube on https://css-tricks.com/how-css-perspective-works/ for example

But I am open to persuasion!

Re: How do they do this?

Posted: November 22nd, 2020, 1:00 pm
by Itsallaguess
stewamax wrote:
Hmm.... I can't see anything in the second photo that isn't a 2.5D skewed or distorted version of the first photo, bearing in mind that a skewing can reveal something that was squashed to invisibility before the transform was applied (and vice versa).

Have a look at the rotating cube on https://css-tricks.com/how-css-perspective-works/ for example

But I am open to persuasion!


No, I think it's you who's persuaded me!

It's been a long time since I've done much on the CSS side of things, and the page you linked to was really interesting, so thanks for that, but the icing on the cake for me, and the moment when I was completely persuaded that you're right, and they've done the video linked in CK's first post in the way you've suggested, was when I opened one of the sub-links contained on the CSS page above, which led to this CSS-Perspective demo page, which includes the all-important image-masks too -

https://codepen.io/amit_sheen/pen/WNweryv

It's just amazing that those pages are being fully turned in CSS..

Cheers,

Itsallaguess

Re: How do they do this?

Posted: November 22nd, 2020, 1:43 pm
by onthemove
Itsallaguess wrote:
stewamax wrote:
Hmm.... I can't see anything in the second photo that isn't a 2.5D skewed or distorted version of the first photo, bearing in mind that a skewing can reveal something that was squashed to invisibility before the transform was applied (and vice versa).

Have a look at the rotating cube on https://css-tricks.com/how-css-perspective-works/ for example

But I am open to persuasion!


No, I think it's you who's persuaded me!

It's been a long time since I've done much on the CSS side of things, and the page you linked to was really interesting, so thanks for that, but the icing on the cake for me, and the moment when I was completely persuaded that you're right, and they've done the video linked in CK's first post in the way you've suggested, was when I opened one of the sub-links contained on the CSS page above, which led to this CSS-Perspective demo page, which includes the all-important image-masks too -

https://codepen.io/amit_sheen/pen/WNweryv

It's just amazing that those pages are being fully turned in CSS..

Cheers,

Itsallaguess


How did they get the undulations in the landscape at 0:56 to 1:00 if it's done with css?

As the camera pans back, you can see it isn't a simple geometric transform - watch the grass/ground on either side of the river... there are 1 or 2 2d planes for some of the trees, but the ground is not flat.. it has undulations in it that are continuous in the depth plane, but not uniform/geometric.

While I doubt they used the Blender (it's free software), I suspect they used one of the other commercial 3d modelling packages that provides similar functionality.

The really interesting bit for me is the 'context aware fill' in photoshop, and according to the comments below the video I linked to, similar is also available in gimp. If you watch the video I linked, they use it to fill in the gaps in the background behind where the foreground elements have been cut out.

Re: How do they do this?

Posted: November 23rd, 2020, 10:09 am
by stewamax
Yes - something like Photoshop's Context-aware Fill* is needed to fill in parts of a background layer that are obscured by a front layer. But it is not clairvoyant and cannot automatically fill in features that are not already anywhere in the picture to copy!

* for Photoshop non-users this is a clever combination of the familiar 'magic wand' tool (to delineate the area to be filled) and the 'rubber stamp' tool to copy the fill from an adjacent area