Tutorials

1.7 2D Backgrounds

Play Video

Description

Place 2D images and video on movable image planes, right inside Jetset! Interactively align image perspective and depth with simple pinch/zoom gestures.

Links

Transcript

2D Backgrounds

Eliot: [00:00:00] In addition to loading 3D USDZ scenes exported from Blender and Unreal, Jetset can also directly import and adjust 2D images right into the 3D scene. This lets you do a rapid 2. 5D matte painting style workflow right in the app, which is fantastic for quick concept iteration.

Loading 2D Images

Eliot: First, we’ll need to load some 2D images onto the phone.

We’ll use the iCloud web file transfer described earlier and navigate to our project’s models subdirectory. Remember that the Jetset projects are all under the iCloud Jetset folder. So we can go up, kind of see where we were at. iCloud drive, Jetset Cine_tests in this case, and then models.

Once we’re here, we can drag and drop a few 2D images into the directory. Since we’re just loading one background image, it can be a high Resolution 4K image. Alright. So those have been uploaded, and now we’ll move to Jetset.

In Jetset, we’ll go to the 2D tab. Here we can add or remove [00:01:00] images. We’ll set our ghost slider up all the way to the top to see a CG image. We’ll hide this image, and I’m going to click import, and I’m going to navigate to where we had saved our images.

We’ll go up a bit just into the models directory.

Moving and Scaling Images

Eliot: And there’s a subway image. Once the subway’s image is loaded in, then we can manipulate it inside Jetset. Currently you’ll see a button on the top that says Pinch to Scale and that means that you can either move it around with one figure, or if you use a Pinch Zoom motion, it’ll actually scale the image plane up and down.

Translating Image Planes in Depth

Eliot: The image is actually being placed into the 3D scene as a plane in that 3D scene. So we can actually click on the Pinch to Scale button, and it’ll toggle to a Pinch to Move Forward button. Then you can still move it around with one finger, or if you use the Pinch to Zoom, you’ll actually move it forward and backward in 3D space, and it’ll show you exactly how far away in depth it’s being moved from the tracking origin. In this case, we’re moving it to about 5 meters backwards, about 15 feet. We’re gonna move it over. Over a [00:02:00] bit, and then there’s our subway.

Finishing Edit

Eliot: Then click OK when you’re done to go back to the composite view, and this makes for a really fast, efficient way to match in a 2D image into your existing 3D scene.

2D Backgrounds Eliot: [00:00:00] In addition to loading 3D USDZ scenes exported from Blender and Unreal, Jetset can also directly import and adjust 2D images right into the 3D scene. This lets you do a rapid 2. 5D matte painting style workflow right in the app, which is fantastic for quick concept iteration. Loading 2D Images Eliot: First, we’ll need to load some 2D images onto the phone. We’ll use the iCloud web file transfer described earlier and navigate to our project’s models subdirectory. Remember that the Jetset projects are all under the iCloud Jetset folder. So we can go up, kind of see where we were at. iCloud drive, Jetset Cine_tests in this case, and then models. Once we’re here, we can drag and drop a few 2D images into the directory. Since we’re just loading one background image, it can be a high Resolution 4K image. Alright. So those have been uploaded, and now we’ll move to Jetset. In Jetset, we’ll go to the 2D tab. Here we can add or remove [00:01:00] images. We’ll set our ghost slider up all the way to the top to see a CG image. We’ll hide this image, and I’m going to click import, and I’m going to navigate to where we had saved our images. We’ll go up a bit just into the models directory. Moving and Scaling Images Eliot: And there’s a subway image. Once the subway’s image is loaded in, then we can manipulate it inside Jetset. Currently you’ll see a button on the top that says Pinch to Scale and that means that you can either move it around with one figure, or if you use a Pinch Zoom motion, it’ll actually scale the image plane up and down. Translating Image Planes in Depth Eliot: The image is actually being placed into the 3D scene as a plane in that 3D scene. So we can actually click on the Pinch to Scale button, and it’ll toggle to a Pinch to Move Forward button. Then you can still move it around with one finger, or if you use the Pinch to Zoom, you’ll actually move it forward and backward in 3D space, and it’ll show you exactly how far away in depth it’s being moved from the tracking origin. In this case, we’re moving it to about 5 meters backwards, about 15 feet. We’re gonna move it over. Over a [00:02:00] bit, and then there’s our subway. Finishing Edit Eliot: Then click OK when you’re done to go back to the composite view, and this makes for a really fast, efficient way to match in a 2D image into your existing 3D scene.