{"id":3867,"date":"2014-01-27T17:45:55","date_gmt":"2014-01-27T22:45:55","guid":{"rendered":"http:\/\/www.jerslife.com\/word\/?p=3867"},"modified":"2014-01-27T17:45:55","modified_gmt":"2014-01-27T22:45:55","slug":"vector-math-for-3d-graphics-and-animation","status":"publish","type":"post","link":"http:\/\/www.jerslife.com\/word\/vector-math-for-3d-graphics-and-animation","title":{"rendered":"Vector Math for 3D Graphics and Animation"},"content":{"rendered":"<p><a href=\"http:\/\/www.jerslife.com\/word\/wp-content\/uploads\/2014\/01\/2014-01-27-09.32.05.jpg\"><img loading=\"lazy\" class=\" wp-image-3877 alignleft\" style=\"margin: 5px;\" alt=\"2014-01-27 09.32.05\" src=\"http:\/\/www.jerslife.com\/word\/wp-content\/uploads\/2014\/01\/2014-01-27-09.32.05-768x1024.jpg\" width=\"369\" height=\"491\" srcset=\"http:\/\/www.jerslife.com\/word\/wp-content\/uploads\/2014\/01\/2014-01-27-09.32.05-768x1024.jpg 768w, http:\/\/www.jerslife.com\/word\/wp-content\/uploads\/2014\/01\/2014-01-27-09.32.05-225x300.jpg 225w, http:\/\/www.jerslife.com\/word\/wp-content\/uploads\/2014\/01\/2014-01-27-09.32.05.jpg 1536w\" sizes=\"(max-width: 369px) 100vw, 369px\" \/><\/a>First, I&#8217;m not a &#8220;graphics programmer&#8221;. I do quite a bit of scripting (Maya&#8217;s MEL scripting language) and enter dozens of expressions (Houdini), but have never compiled a single line of C++.<\/p>\n<p>I was never a big fan of math, especially algebra (grammar = yuck), though I did breeze through my Geometry class. I survived a decade working in the 3D animation industry working as a rigger, technical artist and production technology lead and only implemented a little triangle math only a handful of times. <em>*note: This does NOT mean you should skip out on getting a proper understanding of Euler rotation orders and gimbal lock, if you want to be a good character TD.<\/em><\/p>\n<p>Though no one needs to understand 3D math in order to become a 3D artist, even <a href=\"http:\/\/cube.phlatt.net\/home\/spiraloid\/\"title=\"Bay Raitt\" >some digital sculptors<\/a> realize the importance of a little trigonometry. Having an elementary 3D math base gives an artist a better understanding of the &#8216;why&#8221;s.<\/p>\n<p>So, since I don&#8217;t remember too much of my high school math and never took a single trigonometry class (I&#8217;ll blame the education system), I eventually realized that if I was going to produce anything jaw-dropping, I was going to need to study up a bit&#8230;<\/p>\n<p>&#8230;and luckily the internet has the answers!<\/p>\n<p>Where to start?<br \/>\nThere is a boatload of free online courses available to those willing to learn from text and videos, but mathematics is a massive world and it&#8217;s difficult to figure out where to start. For those that have completed highschool (maybe even just 10th grade) and are interested playing with some bit of 3D code, here&#8217;s some items I found quite useful. Keep in mind that most 3D animation software packages will include tools (commands, expressions, functions, etc.) that will do the math for you. Remember to <a href=\"http:\/\/docs.unity3d.com\/Documentation\/ScriptReference\/Vector3.Cross.html\"title=\"documenation example for Unity game engine\" >search the documentation<\/a>!!<\/p>\n<p><strong>vectors<\/strong><br \/>\nIf you have a line, what direction is it pointing? If you have an object in space, what direction is it moving? This is your <em>vector<\/em>. The length (aka &#8220;magnitude&#8221;) of a vector can tell you it&#8217;s speed. A <a href=\"http:\/\/www.fundza.com\/vectors\/normalize\/\"title=\"how to normalize a vector\" >normalized vector<\/a> is always 1, and is useful to apply to other operations. You can subtract two vectors and you&#8217;ll get another vector which tells you the direction from one vector to another. <a href=\"http:\/\/www.mathsisfun.com\/algebra\/vectors.html\"title=\"vectors\" >More examples with images on MathIsFun.com<\/a>.<\/p>\n<p><strong>cross product<\/strong> (aka vector product)<br \/>\n<code>a \u00d7 b = |a| |b| sin(\u03b8) n<\/code><br \/>\nI have two vectors and I want to find another vector that is perpendicular (90 degress) to these two vectors. The cross product of the two vectors will help. It&#8217;s useful if I have a plane and I need to know the surface normal to the plane. For those using particles, this tells us the direction that particles would travel if we are emitting from the middle of a surface. BUT, be careful, the direction of this newly calculated vector depends on what order you specified a &amp; b. This is where the dot product comes in very handy! <a href=\"http:\/\/www.mathsisfun.com\/algebra\/vectors-cross-product.html\"title=\"learn right-hand rule of cross products\" >More cross product details on MathIsFun.com<\/a>.<\/p>\n<p><strong>dot product<\/strong><br \/>\n<code>a \u00b7 b = |a| \u00d7 |b| \u00d7 cos(\u03b8)<\/code><br \/>\nIf you have two vectors, the dot product will tell you if the vectors are moving in the same general direction (greater than 0) or moving in two completely different directions and will never intersect the same plane (less than 0). If you have just used the cross product to find a perpendicular vector (like a surface normal), you can use the dot product to see if the if it&#8217;s facing the right direction (up?). <a href=\"http:\/\/www.mathsisfun.com\/algebra\/vectors-dot-product.html\"title=\"dot products\" >More info on MathIsFun.com<\/a>.<\/p>\n<p>For video explanations, <a href=\"https:\/\/www.khanacademy.org\/math\/linear-algebra\/vectors_and_spaces\/dot_cross_products\/v\/linear-algebra--cross-product-introduction\"title=\"Khan Academy video explanations\" >Khan Academy has a great section on vector dot and cross products<\/a> or <a href=\"https:\/\/www.khanacademy.org\/math\/trigonometry\"title=\"trig and precalc on Khan Academy\" >trigonometry and precalculus<\/a> if you already have a basic understanding of <a href=\"https:\/\/www.khanacademy.org\/math\/cc-eighth-grade-math\/cc-8th-geometry\"title=\"geometry course\" >geometry<\/a>.<\/p>\n<p>Here&#8217;s a list links to more information on vector math:<\/p>\n<ul>\n<li>Ray Wenderlich&#8217;s <a href=\"http:\/\/www.raywenderlich.com\/35866\/trigonometry-for-game-programming-part-1\"title=\"2D math tutorial\" >Trigonometry for Game Programming: Part 1\/2<\/a><br \/>\n<a href=\"http:\/\/www.raywenderlich.com\/35866\/trigonometry-for-game-programming-part-1\"title=\"2D math tutorial\" >Trigonometry for Game Programming: Part 2\/2<\/a><\/li>\n<li><a href=\"http:\/\/www.clarku.edu\/~djoyce\/trig\/\"title=\"via Clark University\" >Dave&#8217;s Short Trig Course<\/a><\/li>\n<li><a href=\"http:\/\/www.codeproject.com\/Articles\/518139\/3D-Game-Math-Primer-4-Operations-on-Vectors\"title=\"article by Mark Sinnathamby\" >3D Game Math Primer 4: Operations on Vector on codeproject.com<\/a> (don&#8217;t forget parts <strong><a href=\"http:\/\/www.codeproject.com\/Articles\/495022\/3D-Game-Math-Primer-1-The-3-Dimensional-Coordinate\"title=\"The 3-Dimensional Coordinate Space\" >1<\/a><\/strong>, <strong><a href=\"http:\/\/www.codeproject.com\/Articles\/495021\/3D-Game-Math-Primer-2-Multiple-and-Nested-Coordina\"title=\"Multiple and Nested Coordinate Spaces\" >2<\/a><\/strong> and <strong><a href=\"http:\/\/www.codeproject.com\/Articles\/506025\/3D-Game-Math-Primer-3-What-Are-Vectors-Anyway\"title=\"What Are Vectors Anyway?\" >3<\/a><\/strong>)<\/li>\n<li><a href=\"http:\/\/www.intmath.com\/vectors\/7-vectors-in-3d-space.php\"title=\"includes quizzes\" >Interactive Mathematics &#8211; Vectors in 3D Space<\/a><\/li>\n<li><a href=\"http:\/\/chortle.ccsu.edu\/vectorlessons\/vectorIndex.html#00\"title=\"info and quizzes\" >Vector Math for 3D Computer Graphics<\/a> via Chortle at CCSU<\/li>\n<\/ul>\n<p>So what&#8217;s next?\u00a0 Perhaps some <a href=\"http:\/\/stackoverflow.com\/questions\/487352\/learning-game-programming-part-2-math\"title=\"Stack Overflow - view top answer\" >matrix calculations?<\/a> Maybe linear algebra via <a href=\"http:\/\/ocw.mit.edu\/courses\/mathematics\/18-06-linear-algebra-spring-2010\/index.htm\"title=\"MIT's open courseware\" >MIT&#8217;s online course<\/a> or <a href=\"http:\/\/www.cosmolearning.com\/video-lectures\/introduction-to-linear-algebra-12827\/\"title=\"intro to linear algebra\" >N.J. Wildberger<\/a> (known for &#8220;rational trigonometry&#8221;).<\/p>\n<p>Finally, checkout this list of <a href=\"http:\/\/www.jerslife.com\/word\/technical-online-courses-for-free\"title=\"technical free online courses\" >free technical online courses<\/a>, including programming.<\/p>\n<p style=\"text-align: right;\"><em>Thanks to Les for <a href=\"http:\/\/blog.lmorchard.com\/2014\/01\/18\/ppd-avoidance\"title=\"pasec patrol\" >the inspiration<\/a> to catalog my findings.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>First, I&#8217;m not a &#8220;graphics programmer&#8221;. I do quite a bit of scripting (Maya&#8217;s MEL scripting language) and enter dozens of expressions (Houdini), but have never compiled a single line of C++. I was never a big fan of math, especially algebra (grammar = yuck), though I did breeze through my Geometry class. I survived [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false},"categories":[1],"tags":[15,18,624,283,218,656],"_links":{"self":[{"href":"http:\/\/www.jerslife.com\/word\/wp-json\/wp\/v2\/posts\/3867"}],"collection":[{"href":"http:\/\/www.jerslife.com\/word\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.jerslife.com\/word\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.jerslife.com\/word\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.jerslife.com\/word\/wp-json\/wp\/v2\/comments?post=3867"}],"version-history":[{"count":6,"href":"http:\/\/www.jerslife.com\/word\/wp-json\/wp\/v2\/posts\/3867\/revisions"}],"predecessor-version":[{"id":3880,"href":"http:\/\/www.jerslife.com\/word\/wp-json\/wp\/v2\/posts\/3867\/revisions\/3880"}],"wp:attachment":[{"href":"http:\/\/www.jerslife.com\/word\/wp-json\/wp\/v2\/media?parent=3867"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.jerslife.com\/word\/wp-json\/wp\/v2\/categories?post=3867"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.jerslife.com\/word\/wp-json\/wp\/v2\/tags?post=3867"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}