{"id":71,"date":"2017-04-07T12:19:41","date_gmt":"2017-04-07T12:19:41","guid":{"rendered":"http:\/\/www.ruzzgames.com\/?page_id=71"},"modified":"2020-05-09T13:03:10","modified_gmt":"2020-05-09T03:03:10","slug":"3d-graphics","status":"publish","type":"page","link":"https:\/\/www.ruzzgames.com\/index.php\/3d-graphics\/","title":{"rendered":"3D Graphics"},"content":{"rendered":"<p>In order to display characters, rooms, outdoor environments, etc, you need to understand how 3D graphics works.<\/p>\n<p>3D graphics involves a lot of mathematics. This includes concepts such as vectors, trigonometry and matrices. Luckily DirectX contains mathematical functions that you can use to process and manipulate 3D graphics.<\/p>\n<div id=\"block-bartik-content\" class=\"block block-system block-system-main-block\">\n<div class=\"content\">\n<article class=\"node node--type-page node--view-mode-full clearfix\" data-history-node-id=\"8\">\n<header><\/header>\n<div class=\"node__content clearfix\">\n<div class=\"clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item\">\n<p><strong>3D\u00a0Coordinates<\/strong><\/p>\n<p>The graphics in 3D is displayed as a pixel which I will also refer to\u00a0also as a point or vertex. In 2D graphics, the coordinates are referred to as\u00a0<strong>(x,y)<\/strong>\u00a0while in 3D graphics, the coordinates are referred to as\u00a0<strong>(x,y,z)<\/strong><\/p>\n<p>The diagram below compares 2D screen coordinates and 3D coordinates as represented by DirectX:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-88 size-full\" src=\"https:\/\/www.ruzzgames.com\/wp-content\/uploads\/2017\/04\/3dcoord.jpg\" alt=\"\" width=\"606\" height=\"371\" srcset=\"https:\/\/www.ruzzgames.com\/wp-content\/uploads\/2017\/04\/3dcoord.jpg 606w, https:\/\/www.ruzzgames.com\/wp-content\/uploads\/2017\/04\/3dcoord-300x184.jpg 300w\" sizes=\"auto, (max-width: 606px) 100vw, 606px\" \/><\/p>\n<p>The 3D coordinate system has an x-axis, y-axis as in the 2D system. The 3D system also includes a\u00a0<strong>z-axis<\/strong>, which goes\u00a0<strong>into<\/strong>\u00a0the screen (this is called a left-handed coordinate system). It is always hard to visualise 3D coordinates &#8211; if you stick 3 rulers together, it might be easier to visualise a point in 3D space. In the above diagram, the point (5,10,5) is obtained by travelling 5 units along the x-axis, 10 units along the y-axis and then 5 units along the z-axis (into the screen).<\/p>\n<h3><strong>Overview for 3D Graphics in a\u00a0game<\/strong><\/h3>\n<p>These topics will be explained in more detail, but I just wanted to give a brief overall picture of what is going on in 3D games, particularly in displaying 3D graphics.<\/p>\n<ol>\n<li>The game universe (ie. what the player sees in a particular level) is a 3D model called a 3D scene.<\/li>\n<li>Inside this 3D scene, objects (3D models) are placed inside.<\/li>\n<li>The player is represented as a 3D model (eg: showing player&#8217;s hands, player&#8217;s body)<\/li>\n<li>The game needs to take into account of the player colliding with the 3D scene or other objects, players or bots (computer driven players).<\/li>\n<li>The computer needs to show on screen only those objects that the player can see. This needs to be done, otherwise the game will slow to a crawl. 3D computer graphics is very computer intensive, you need to take shortcuts to display the graphics with any speed. The displaying of 3D objects to the screen is called rendering.The 3D scenes and\u00a0other 3D objects\u00a0are created using 3D modeling software (eg: 3D Studio Max, Maya, Blender). The 3D objects or models are created as a mesh which has a skin or texture applied to it.<\/li>\n<\/ol>\n<h3><strong>3D Primitives<\/strong><\/h3>\n<p>3D graphics includes some 3D primitives &#8211; these are objects that are just basic and used to build other 3D objects.<\/p>\n<p>DirectX has the following graphics primitives that are part of Direct3D graphics engine:<\/p>\n<ul>\n<li><span style=\"color: #9900ff;\">point lists<\/span>\u00a0&#8211; a set of points (x,y,z). Could be used for starfields for a space game.<\/li>\n<li><span style=\"color: #9900ff;\">line lists<\/span>\u00a0\u00a0 &#8211; a set of lines, each connected by two points. Could be used as rain in a scene.<\/li>\n<li><span style=\"color: #9900ff;\">line strips<\/span>\u00a0&#8211; a set of lines connected to each other (eg: a zigzag).<\/li>\n<li><span style=\"color: #9900ff;\">triangle lists<\/span>\u00a0&#8211; a set of 3 points (x,y,z) makes up a triangle. Many of these triangles make up a triangle list. Useful to build 3D objects.<\/li>\n<li><span style=\"color: #9900ff;\">triangle strips<\/span>\u00a0&#8211; a number of triangles that have at least one side connected to another triangle. Useful to build some 3D objects.<\/li>\n<li><span style=\"color: #9900ff;\">triangle fans<\/span>\u00a0&#8211; triangles are joined together in a fan shape. Useful to build some 3D objects.<\/li>\n<\/ul>\n<p>These primitives are shown below. I have emphasised the points so that you can see that\u00a0some of the\u00a0objects were created from joined up points.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-89\" src=\"https:\/\/www.ruzzgames.com\/wp-content\/uploads\/2017\/04\/3dprimitives.jpg\" alt=\"\" width=\"674\" height=\"389\" srcset=\"https:\/\/www.ruzzgames.com\/wp-content\/uploads\/2017\/04\/3dprimitives.jpg 674w, https:\/\/www.ruzzgames.com\/wp-content\/uploads\/2017\/04\/3dprimitives-300x173.jpg 300w\" sizes=\"auto, (max-width: 674px) 100vw, 674px\" \/><\/p>\n<h3><strong>3D objects<\/strong><\/h3>\n<p>3D objects are built from vertices of triangles. Each point (or corner) of\u00a0a triangle is a vertex and 3 vertices make up one triangle. <a href=\"https:\/\/www.mathsisfun.com\/geometry\/vertices-faces-edges.html\">More information about vertices is here.<\/a>\u00a0These vertices are what the graphics engine uses to display graphics on the screen. The process of displaying an object on the screen is called\u00a0<strong>rendering<\/strong>. The triangle is a closed figure and hence is a\u00a0<strong>polygon<\/strong>.<\/p>\n<p>A 3D object that has been built with many triangles joined together\u00a0is called a\u00a0<strong>mesh<\/strong>.\u00a0 Once you have the basic mesh for the object, you then create a skin or\u00a0<strong>texture<\/strong>\u00a0and wrap it around the mesh. When you are talking about the number of polygons in a 3D object, you are really talking about how many triangles it contains.<\/p>\n<p>An example of a 3D object is shown below. It is a tiger taken from one of the\u00a0DirectX SDK sample files using a program called Meshview. It&#8217;s from the <a href=\"https:\/\/www.microsoft.com\/en-au\/download\/details.aspx?id=6812\">DirectX 9 SDK<\/a> (which is now old software).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-90\" src=\"https:\/\/www.ruzzgames.com\/wp-content\/uploads\/2017\/04\/tiger.jpg\" alt=\"\" width=\"528\" height=\"431\" srcset=\"https:\/\/www.ruzzgames.com\/wp-content\/uploads\/2017\/04\/tiger.jpg 528w, https:\/\/www.ruzzgames.com\/wp-content\/uploads\/2017\/04\/tiger-300x245.jpg 300w\" sizes=\"auto, (max-width: 528px) 100vw, 528px\" \/><\/p>\n<p>Now have a look at the tiger below when you take the &#8220;skin&#8221; off it. You should be able to see the triangles! This is called\u00a0<strong>wireframe<\/strong>\u00a0view.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-91\" src=\"https:\/\/www.ruzzgames.com\/wp-content\/uploads\/2017\/04\/tigerwireframe.jpg\" alt=\"\" width=\"528\" height=\"431\" srcset=\"https:\/\/www.ruzzgames.com\/wp-content\/uploads\/2017\/04\/tigerwireframe.jpg 528w, https:\/\/www.ruzzgames.com\/wp-content\/uploads\/2017\/04\/tigerwireframe-300x245.jpg 300w\" sizes=\"auto, (max-width: 528px) 100vw, 528px\" \/><\/p>\n<p>The tiger above, which is a 3D object, was created using\u00a0 3D modelling\u00a0software such as 3D Studio Max or Blender. Within this software package, you can apply textures (or skins) as well.<\/p>\n<p>Some 3D modelling software packages are below:<\/p>\n<h3><strong>3D Modelling Software<\/strong><\/h3>\n<ul>\n<li><a href=\"http:\/\/blender.org\/\">Blender<\/a>\u00a0(<strong>Free<\/strong>\u00a03D modeller &#8211; runs on Linux too)<\/li>\n<li><a href=\"http:\/\/www.autodesk.com\/3dsmax\">3D Studio Max<\/a>\u00a0(3D modeller by Autodesk)<\/li>\n<li><a href=\"http:\/\/www.autodesk.com\/maya\">Maya<\/a>\u00a0(3D modeller by Autodesk)<\/li>\n<li><a href=\"http:\/\/www.turbosquid.com\/gmax\">Gmax<\/a>\u00a0(Free 3D modeller &#8211; not supported by Autodesk anymore &#8211; &#8220;cut down&#8221; version of 3D studio max)<\/li>\n<li><a href=\"http:\/\/www.swissquake.ch\/chumbalum-soft\/\">Milkshape<\/a>\u00a0(3D modeller)<\/li>\n<li><a href=\"http:\/\/www.newtek.com\/lightwave\/\">Lightwave<\/a>\u00a0(3D modeller)<\/li>\n<li><a href=\"http:\/\/www.pixologic.com\/\">ZBrush<\/a>\u00a0&#8211; fantastic for modelling characters<\/li>\n<li><a href=\"http:\/\/sketchup.google.com\/\">Google Sketchpad<\/a>\u00a0&#8211; an easy to learn 3D modeller<\/li>\n<li><a href=\"http:\/\/www.anim8or.com\/\">Anim8tor<\/a>\u00a0free software<\/li>\n<\/ul>\n<p>A 3D object is also called a\u00a0<strong>3D model<\/strong>. You can either buy or download royalty free 3D models. For example, you can get them at <a href=\"https:\/\/www.cgtrader.com\/\">CG Trader.\u00a0<\/a>Other places are on the <a href=\"https:\/\/www.ruzzgames.com\/index.php\/resources\/\">resource page <\/a>as well or you can search online.<\/p>\n<\/div>\n<\/div>\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>In order to display characters, rooms, outdoor environments, etc, you need to understand how 3D graphics works. 3D graphics involves a lot of mathematics. This includes concepts such as vectors, trigonometry and matrices. Luckily DirectX contains mathematical functions that you can use to process and manipulate 3D graphics. 3D\u00a0Coordinates The graphics in 3D is displayed &hellip; <a href=\"https:\/\/www.ruzzgames.com\/index.php\/3d-graphics\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">3D Graphics<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-71","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ruzzgames.com\/index.php\/wp-json\/wp\/v2\/pages\/71","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ruzzgames.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ruzzgames.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ruzzgames.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ruzzgames.com\/index.php\/wp-json\/wp\/v2\/comments?post=71"}],"version-history":[{"count":11,"href":"https:\/\/www.ruzzgames.com\/index.php\/wp-json\/wp\/v2\/pages\/71\/revisions"}],"predecessor-version":[{"id":762,"href":"https:\/\/www.ruzzgames.com\/index.php\/wp-json\/wp\/v2\/pages\/71\/revisions\/762"}],"wp:attachment":[{"href":"https:\/\/www.ruzzgames.com\/index.php\/wp-json\/wp\/v2\/media?parent=71"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}