The Perception Guide to FUI: Setting Up a Wrist Mounted Interface, Part 3

Photo of Perception

Instructor Perception

Share this video
  • Duration: 10:24
  • Views: 1063
  • Made with Release: 18
  • Works with Release: 18 and greater

Creating a Hexagonal FUI with C4D's Cloner attached via Object Tracking

Justin Molush (Senior Designer at Perception) discusses using a complex object track to attach a futuristic wrist mounted UI. You'll see how to create the basis for a hexagonal FUI using Cinema 4D's Cloner object, and animate it via keyframes and effectors to match the motion indicated by the actor.

Less...

Transcript

And at this point, we are done the more technical camera tracking component of this and we can go ahead and start to create our... whatever shape we want to use for the wrist mounted UI. In this case, we're just going to use a hexagon. So we're going to use this n-gon, we're going to mount it to the hand, and let's just kind of get this scale a little more correct, we're going to go scale this down little bit. Something a little more in line with the kind of size you'd see in a vision video or any specific video that might show any kind of these technologies in an AR environment or a VR environment. So we're going to just extrude this guy to give him some depth, going to also bevel the cap a little bit, kind of get some edge definition in there. And we're just going to do this very quick and dirty. I'm just going to take a cloner and immediately set it to radial. So get that on the correct plane, let's get it going around, because I wanted to have it wrap around the wrist. Let's up the count a little bit to really fill this out a bit and make sure we change the orientation of the n-gon that we have underneath here to kind of either fill in the gaps. Obviously, you can do it side-by-side like this or add an additional cloner with a little more offset, so that you can get it facing the other way. This orientation is purely your taste. You can use squares, you can use hexagons, you can use pentagons if you so feel like. But this is the shape we're going to use. So after my initial cloner, I'm just going to grab another one and go ahead and stack that in the Y. Let's offset that a little bit to get it spaced correctly, drop it down, and, yeah, that's looking a good bit better. At this point, we're going to start using effectors to really control the appearance and properties of this wrist-mounted UI. Let's put a plane effector in here, and this is just going to be my initial constraint, so I'm going to set the scale to a full minus one, with a fall off pretty harsh toward the outer ends. And you'll see why. So when we pull it back, you notice the majority of this UI starts falling off. All right, let's just pull this guy back in. And now we can kind of scale it up again, and see a little more precisely where we want it. Let's bring this in a bit. I'm just kind of looking at this from the viewpoint of how many menu items would I want to have present on the wrist. And this can vary across each shape that you run through this, so feel free to experiment and kind of play around with the organization, columns, rows, and count in general. So this is my outer constraint, and you'll see that when you rotate it that it actually breaks. In the viewport, when you scrub it, you'll see that, like little bit of artifacting, but don't worry. When you play it back, it's going to look just fine. So let's push it back toward the hand and we have a null there, so I can just drag that under the null. Let's go with this one. And zero that out. Zeroed out. And now, the cloner center is actually at the center of the null that is now being projected on that hand. So this gives us a better representation of what it would be if the center was on the surface. So a radius is a little high. We don't necessarily need it on the surface, but we're going to kind of operate with a few assumptions here on how it lives on the wrist, and how it looks. It's going to go in and shrink it up a little bit. That radius is a little high and we're going to have to regap and double check our counts here. So if we turn off the effector, we can go back into the top level one and fix all of our spacing, seems to be a little orientation problem. There it is. Sorry. Make it an even number, and now we actually have perfect orientation. Missed that the last time around. Just going to spend a little bit of time here fiddling with some of the spacing, kind of getting it to where I want it. And, as I mentioned earlier, this is a big point of this process where you can really explore, really dial in, and really create a lot of cool iterations. I'm happy where this is at the moment, so I think it's time to orient it into final position. Once I kind of get a little more concrete location here. That seems a little too straight. Let's curve it up because of the location on the wrist a bit. And, I think it's time to turn the effector back on, and now we're back to where we were originally. So when we scrub the timeline, you notice it is moving, but it's not following the hand yet, and that's because we haven't actually put it in the object tracker yet. So when we drag it under the object tracker and we scrub the timeline, now, you'll see it inherits the motion from the tracker. So let's hide that piece of geometry so we can actually see it on the hand. At this point in the process, you're going to start getting a lot more information on how this is living in space, the quality of the track, and any sort of adjustments you have to make on positioning, to make it really feel grounded, and that it's attached to the wrist, and that it's responding to it. So even very minor orientation tweaks can actually yield really good results, so it's worth it to spend a good amount of time here and really get that initial positioning correctly, and this is before we dive into any sort of further animation or any additional embellishments we're going to throw on top of this with additional effectors or any sort of other key frame animations. Spend a little bit of time here. Explore sort of the position that you want it in, if you want it in further off the wrist, if you want it closer and tighter, the orientation, if you want it to angle away or toward, and really just give yourself a little bit of opportunity to correctly position it before we start building out a whole bunch of effector stacks, and giving it a good more amount of life. I don't know about you, but I think it's time to start dropping some animation on this guy. I'm just going to choose a frame here and drop a key on my effector that I created the first time, and we're going to pull that guy all the way out. So all of the hexagons disappear, and we're just going to drop another key and just kind of see how it reacts. So it drops in and it animates on the first set, and we're going to scrub through and also drop a key from on the rotation because I see that is the first frame where the thumb flicks. We're going to go to where it stops as well and drop another key on rotation. Go in and just drop that key, and let's play that back. And you'll see we got our first little scroll. And the thumb flicks again, so going to go forward another frame or two, going to go forward a frame or two, drop another key, and just check to see when the thumb returns to rest, so about there. Let's spin it a bit more, drop another key, and let's play this guy back. So we got two quick scrolls in there. And let's go to the end there. We see the middle finger kind of pulsing down for a selection, so we're going to create actually, a new effector for this guy as well, to kind of control the selection process and just make a new plane effector. We're just going to keep it simple. You can go nuts with this obviously, but we're going to keep it pretty straightforward. And we're going to make this the animate out effector. I'm going to go ahead and zero out the Y, and just give it some Z offset. Because when I click it, I wanted to kind of see scatter out into space a little bit. Set the scale to minus 1, so it fully disappears off, and I'm going to call this Anim off, and obviously we're going to have to keyframe it and give it a little bit of a falloff. So going to go to a sphere falloff again, and let's position that out, zero that out onto the exact same space as the other effector. Kind of drop the fall off a little bit. And just get it into a size and position where we can effectively keyframe it in and still have some nice falloff, and some nice final animation here. Drop a key on Z again, scrub a bit to where I want to animate it off, animate it off all the way until it's gone. That's good. Drop the last key. Let's go to the front and just see what we got. Animates in, flick, flick, selection, and animate off. That's pretty cool for just a few minutes of work. A lot of the techniques I showed you here, are going to have pretty drastic differences across a variety of shots in regard to how you would track a shot, how you need to look at it to get that initial camera solve, any initial masking you might need to do on an object to get the initial camera solve, as well as any kind of geometry you're going to need to put in the shot to really get that initial object track correct. And then on the second part, the wrist-mounted UI, obviously, this is a big open world, big open playground for you to go in there, try a variety of shapes. This is, was just a very quick cloner rig that I thought of using for the wrist UI and giving it some kind of radial properties, because it feels relatively correct. The curvature of the wrist and the orientation and how I see that UI existing, if it were to be a true augment reality experience. So you can go nuts here. It can be flat, round, any shape. This is really up to you and the kind of exploration and the kind of interface that you like to see out there. So go nuts. Try a few things. There's a million ways out there to really kind of put your vision out for what you see with this, once you have the basic camera track stuff down. So hope you enjoyed.
Resume Auto-Scroll?