3D Programming Fundamentals [3D Rotation] Tutorial 3

and everybody I'm chilly welcome back to 3d fundamentals tutorial 3 today we're talking about 3d rotations now 3d rotations are pretty easy to figure out once you have a firm grasp on the 2d rotation transformation but if you need a refresher course on twitty rotation I'll put a link on the wiki page to that so the way that site works is basically our retina is a 2d image sensor array and a 3d world is being projected onto it so the question there is well how do we see 3d then you know how can mirrors be real if our eyes aren't real well there are various cues or clues that our brain picks up on to help it build a map of the 3d structure of the world and the objects in the world one way a brain can be helped perceive the 3d structure of an object is by presenting it with multiple views or 2d projections of the object from different angles this helps not only in gaining more structure information but it also lets you see you know parts of the object that would have been obscured at some viewing angles like take a look at this 3d model of a protein here just looking at it like this maybe you can get an idea of the shape but you can't really be sure can you only when you start to rotate it do you understand that you know it's it's longer it's not it's not a sphere it's longer than it is around or whatever you want to call it and it's got protrusions and but it's only by rotating it that you get an idea of you know the full structure then your brain can get an idea oh here's a it's got like a hole in the middle here and like that so our goal for today is to apply rotation in 3d to our cube so that the wireframe you know doesn't look like so let's go back to first principles the good old 2d rotation here it is you got your matrix representation and if you multiply that out you get this formula here now I'm not going to go over why this sine Coast gives us rotation in this video because you know that's a prerequisite of coming to this course but like I said I will put a link up to a previous video I did explaining all this it's pretty damn good if you ask me I start off by explaining radians then I do trig functions and there's like in three different derivations of this formula are no derivations I have the best derivations I'll also put up a link to an explanation of encoding transformations with matrix multiplication alright so what does that look like in 2d space well let's go back to our little diagram here with our circles and we'll assume that the origin is at the center here and X is going in this direction and Y is down because that's how we usually do it in 2d graphics and if you apply that rotation matrix with a positive theta what you're going to get you can get a rotation like this in this direction here and you know that's here your good old 2d rotation there's nothing really much to say about it it's just rotation right but we can say one thing about this rotation is that the direction of the rotation we're rotating it from the x axis into the y axis so rotating x axis into y all right now like I said before we can embed 2d space into 3d space and it works basically the same as it worked before so what does this rotation look like in 3d space we'll take a look at this first of all let's figure out where our axes are so this is saying Z is up so let's let's agree with that that means that if we're using our left and rule middle finger points up so our thumb which is the x axis is going to point this way and our index finger which is the y axis is going to point this way so and if you notice I can't know if you can tell but 3d studio max labels this as the X x axis and this as Y axis here and that's because 3d studio max uses a right-handed system or using left-handed so we're going to ignore what 3d studio max says and say this is ed this is positive x and this is positive Y all right so we're rotating from the x axis into the y axis and that's going to look something like this and as you can see it's basically the same idea there's nothing different than in the 2d system which is looking at it at a different perspective now because 3d studio max is rendering this with nice perspective so we generally call this when we're rotating in 3d we call this rotation rotation or around the z-axis and it makes sense you think about if you think of the z-axis acting like a kind of axle and everything is rotating around it right we say this because as you can imagine you can rotate in different ways not just around the z-axis you can also rotate like this and you can rotate like this and any other arbitrary axis you want to pick you can rotate around that so we have to differentiate between all those different kinds of rotations so we call this rotation rotation around the z axis and as you can see here rotation around the z axis is analogous to rotation in 2d and does the same thing to the x and y coordinates of all the points that are being rotated now because the same thing is happening in 2d rotation and 3d rotation around Z we can infer that the rotation matrices are also the same so we can write it like this now obviously there's one big difference and that's that we're now working in 3d so we now have three element vectors and we have to multiply these by our matrices so when we're multiplying them the dimensions have to line up so the matrix has to be three by three and right now we've only got two by two elements filled so what goes into these spots here that's the question let's try a little experiment here we're going to take some of these points or these circles and we're going to modify their Z values and we're going to see how that will affect their rotation around the z axis so we'll just take a few of these guys we'll just pull them up or down and then we're going to select the whole damn thing again and we're going to rotate around Z now it's kind of hard to tell with the perspective in anything but it seems like changing their Z has not affected the way the X and y are generated during rotation we can we can verify this will give a big rotation here and then we're going to look at it back in the 2d view and as you can see here they're still organized in neat rows and columns so we can we know that changing the Z value has nothing to do with rotation around the z axis so for example X prime is equal to x times cos theta minus y times sine theta plus something times Z but we know that Zed cannot affect the outcome of X so this must be zero and the same for y zero now you have it so we filled in two of those blanks let's do roots run another experiment here so we're going to go back to our 3d viewport here and the second thing we can ask is well how does this rotation around z affect the z coordinates of the values how does it affect them well let's rotate them around here and as we rotate around Z we notice that they all the points keep the same Z coordinate they keep the same height all the ones in the plane remain in the plane and all the ones that we have offset remain at their offsets so from this we can make another inference since the Z values are just staying the same we know that x and y input has no effect and the output is just the same as the input so it's just Z times one Z Prime so Z for rotation around Z Z prime is just equal to Z and that's the matrix and this is the matrix that you need for rotating around the z axis so let's take a look at our code now if you sync with the remote repo you'll see this branch t3 - wrote 3d and you can check that out there are three changes here three commits and I'm just gonna I've set some local branches for the first two commits but the the final code is t3 wrote 3d so you can check that out so I'm going to start here on video 0 where I added the 3d matrices in the test so let's take a look at the code so inmate 3 first thing I added a multiply assign operator for matrix by matrix multiplication so it just uses the multiply operator to you know multiply an assign just because I had one for the scalar multiplication thought I'd make it symmetrical and add one for the matrix matrix multiplication next and rotation Zed here it is so you calculate your sine theta you calculate your Coast data and then you return a matrix with those values filled in and you see here this is exactly what I showed you in the derivation is the same thing so like I said it's pretty goddamn easy to derive 3d rotation around z if you already know 2d rotation now the question is how do we derive the rotations around the other axes well check it rotation around the y axis basically looks like this alright and it's basically the same idea now it may look a little different but let me reorient the circles so that they're the same as we had before there I mean they need to get them I think that's about right and now if you see I rotate around the y axis it's the same idea right we're just rotating these guys around the center point now we could read arrived the formula and matrix from scratch for this new axis of rotation you're going to get down for it or we could be smart recognize that this is the exact same process as rotation around z just with the rolls of the axes and the dimensions interchanged and just transform the above matrix with some logic and substitution so here's our matrix for rotation around z that's rotation from the x axis into the y axis let's derive our matrix for rotation around the y axis which is rotating the z axis into the x axis so first things first let's give the rows and columns of our matrix labels so we'll call this X Y Z columns and the X Y Z rows now like I said these are basically the same operation it's just the names of the axes have been changed so in this operation we're rotating around Z and a rotating X into y here we're rotating around Y and we're rotating xen into X so here if we look between these rotations the axis of rotation has changed from Z to Y so let's change what was said in this one to Y in here now we're rotating from Z into X and here rotating from x and y so here X has become Z and the thing we're rotating into Y has become X and we can do the same substitution for the rows and here we have our renamed matrix and this will allow us to rotate around the y axis the only problem is is that this order doesn't work in our system our system is ordered XYZ so all we have to do now is just reorder the rows and columns so let's set up a blank 3 by 3 matrix labeled in the correct order for our system and now I just got to map these values onto this matrix so if we start with X X so what is xx we look in our Y rotation matrix and we see that that's cos theta right so we write cos theta and then what is X Y well that is 0 so we write 0 and x z is negative sine theta so we go negative sine theta and the same thing what's Y X that's 0 what's Y is it that's 0 what's Y Y that's 1 and then in here we're going to have Z X is sine theta and said why is zero and Z Zed is cos theta and there you go you've got your three dimensional rotation matrix for rotation around the y axis and if we look at the code we see that indeed that is the rotation matrix for rotation around Y and if we use the same method we can get the rotation around X and it looks like this so you can see you've got in the diagonal this way and you've got cosine coasts and that doesn't change and in the opposite diagonal you've got sine and sine but one of them is negative and so for the Z the negatives on the bottom for the Y nato's on the top for X's negatives on the bottom and it's basically the same formation just you know moved around a bit which is what you'd expect because generally it's the same operations done on different axes so great now we can rotate around you know the Z Y the x axis that's sweet and you might say well that's great Chile but what if I want to rotate around a different axis I mean I can only rotate around three axes it seems very limiting but you see the thing is you can put a 3d object into any kind of orientation simply by combining the rotations of these three axes you can generate or you can move it into any orientation possible by just combining three rotations together so now it's time to test out our rotation matrix matrices and you go if you go to a game that H you'll see I've added three variables here member variables theta XY and Z so that is the angle of rotation around these three axes and D theta is the speed of rotation basically and if you go into update model now I'm checking the qwe a SD keys and these are going to control the angle of rotation right Q W is going to increase angles of rotation ast is going to decrease them and here's where the work is done in compose frame so as usual we get our index vectors for the lines and here's where we build our rotation matrix so we generate rotation for x y and z we concatenate those matrices to generate our rotation transformation then for each vertex for our lines first we transform them by rotating them around the origin then we move them in the Zed and then we transform the screen space and then as usual we draw them like this so if we run the program we get our you know our square as usual and but if we press the qw EGS now we can rotate it so here is rotation around the z axis and here is rotation around the y axis and here's around the X and you can see now as we rotate it you can see that it is a 3d cube now one thing I'd like the dryer attention to is there is a bit of aliasing or ambiguity going on with this rendering so we can actually see two different rotations here let me just try to get a good one hi this is pretty good so I can see two different rotations here I can either see it rotating this is the front face and it's rotating around like this but I can also make my brain think that this is the front face or the top and it's rotating around like this can you see both let me see if I can get the other one again let's either rotating now I can only get the one where the top is facing us oh I think I see it now this way right yeah I got it so our brain is actually my brain is flipping between two interpretations of this it's quite interesting and it basically has to do with the way we are projecting this but that is going to be covered in the next lesson so don't worry about it right now now there's one more thing I want to show you guys and so if you look at here the history for the commits this commit here is video one on my system so I'm just gonna Switchfoot right now you guys don't have this branch but you can create it if you want it's by right-clicking and going you know new branch so here I've changed the code a little bit for generating the rotation matrix I have got now a ternary operator here being controlled by the control key so if control is not being pressed we generate rotation x y&z and concatenate them but if control is being pressed I change the order of the matrices I change the order of the concatenation so now it's Y Z X and this will actually change the orientation of the cube so let's run this for a second and let's let's add some Zed rotation and some Y rotation and some X rotation so here we have our box rotated around the three axes and if I press ctrl you see we get a completely different orientation so rotation the rotation transformation is not commute commutative I commute 'iv I forget the word but anyways what it means is that if you switch the order you will get a different orientation so you've got to be careful of that now as long as you be consistent and you always use the same order then everything should be fine but just be aware that the order of rotation matters you can't just switch it up in any way you want so for example in the DirectX math library you've got a function here called X mm X M matrix rotation roll pitch yaw and you you specify these three values the roll the pitch in the yaw which is which is X ya is Y and roll is Zed apparently and it returns a rotation matrix so it basically returns the concatenation of the three matrices I showed you and yeah so and it says here that the order is roll first then pitch then yaw so as you can see here they specify this in the remarks because it's important the order in which they're applied it's important to know this stuff now you might ask Wow tell what direction a rotation is going to be around an axis and the answer is you use there's a left hand rule for rotation so we're back we're back in the realm of hand jobs so I check out this image here very suggestive and this is how you tell what the direction of rotation is going to be so you see this is a left hand and you make you make like you're going to you know jerk someone off but you stick your thumb out so the thumb is going to point in the direction of the axis so if you're doing a rotation around the x-axis if thumb is going to point in this direction the positive x-direction and the curl of your fingers moving from your wrist to the tips that shows the direction of rotation and that works for any axis so if you look back on our diagram here the z-axis is pointing out you point your finger out along that z axis and you see that your curl is going to be going around this way so from x into y and same thing if you point your thumb up on the y axis you see that the curl is going from the z to the X so it's very easy the left hand rule just just jerk that axis off now the last thing I want to talk about here before we finish up today is angles so we're working in radians right so here's zero radians here's PI this could be PI over 2 and this could be 3 PI over 2 so going along from there now I say this could be 3 PI over 2 this could be 0 holy-shit though the world could be ending right now judging from the sounds outside my window but anyways this could be 0 this could also be 2 pi this could also be 4 pi write 2 pi meaning go twice around the circle because angles you know radians or degrees or whatever you want the periodic so 0 is the same as 2 pi the same as negative 2 pi and so on and so forth so that's why rotation is a periodic phenomenon and as you see here we can just continually add angles to these theta values and they will just continue to rotate no problem except there is a problem because these are floating-point numbers right and as floating-point numbers get very large they lose precision in a sense because think about it floating-point number is a number like for example let's say you know 3.14159 right times 10 to the 0 now as this number gets larger as we increase it by a lot let's say it becomes you know 3000 ish now our before our precision was down to the tenth one hundred one thousand ten thousand hundred thousands place but as it gets larger we lose precision in a sense and that's not a good thing and we don't need to store large angles because as we can see here zero is for example the same as for pi is the same as 4 million pi so what we want to do is we want to keep our angles within a 2 pi range so that we don't lose precision like this and it doesn't really matter what two pi range you choose but I'm just going to choose between negative PI to positive pi and the way we do that it's quite simple and so I'm going change to this branch this is the final branch here in the code and if I go to Chile math I've added a function here it's you know templated function so it works for float and double I've also added a constant pi for double pi and all you do here is you take the mock the mod modulus or the modulo so we mod by 2pi so basically what this is saying is let's say we input the value three pi this is just going to output pyrite and over to five pi it's going to output pi if we do six pi it's going to output zero I believe so modding it by two pi will bring it into the region of 0 to 2 pi but we want is a region of negative pi to positive pi so after that if we're greater than pi then we subtract 2 pi from that and that'll bring us into the region of negative pi to positive pi and then in the code here where is it game dot cpp we just add the d theta times DT which is the time step and I'm just I've just clamped the time step down to one sixtieth so it'll run faster for people with you know higher refresh rates than me but doesn't matter it's not important so we add the change in theta to the theta and then we wrap the angle to the PI to negative pi range and we do that for all these things here and the rest is the same I removed that ternary operator back to our standard code and that's it there you have it and there is 3d rotation for you in action it's pretty sweet if you if I do say so myself and that's it for today's episode next time we are going to do something that will say hmm add a little perspective to the situation but for now I'm chilly this was 3d fundamentals if you liked the video please click the like button it helps a lot and I will see you soon with some more 3d awesomeness Oh Oh [Music]

Channel: ChiliTomatoNoodle

Views: 17,853

Keywords: DirectX, Direct3D, D3D, opengl, 3d programming, 3d graphics, 3d game, lesson, how to, C++, guide, code, tutorial, coding, windows, visual studio, game development, chili, chilitomatonoodle, 3D rotation, matrix, rotation

Id: cN97hkDrzcc

Length: 26min 36sec (1596 seconds)

Published: Thu Nov 24 2016