Computer Graphics Handbook | A Beginner’s Guide
How web designers, architects, and engineers use computer graphics and the meaning of a good topology structure.
People were filled with disbelief when the fax machine was invented. How could images be sent via telephone networks, they wondered.
Many did not understand what were the digital images. Digital images are compressed bytes of encoded instructions that computer screens use to display a duplicate image. Fax machines use this same principle to transmit bytes of information along telecommunication lines.
Computers use encoded instructions to color the pixels they use to demonstrate 2D on-screen colors.
Digital cameras display a raster graphic we describe as an image. Computers offer a few more possibilities by providing different forms of graphics.
Despite the complex mathematical algorithms 2D and 3D graphics software employ to process, create, and display images, they all rely on basic concepts and structures.
I will uphold the SelfCAD mantra of “Simple enough for beginners and powerful enough for professionals” in this article. Everything you need to know concerning image processing and rendering will be explained in an easy to understand manner. Are you interested? Let’s go!
What is a Pixel
Pixels are the smallest points (dots) digital screens can color and display. Most computer screens have a choice of more than 16,000,000 colors. Each pixel can have a different color. This combination allows for great, and colorful photographic displays.
2D and 3D editors use image processing to produce an image that appears better than the original picture. The quality of these 2D and 3D digital images are often more realistic than the photos taken using the best photographic equipment.
What is a Raster Image and how your computer uses them
Png and jpg are the two most common raster image file formats used in computer graphics. These formats can compact and compress thousands to millions of pixels. Each pixel has a unique XY position and RGB color information. Digital cameras and raster image editors compile the pixel data into small image files. This speeds up the time an image takes to load into a computer and decreases the storage space it occupies in memory and on a hard-drive.
It is important to use standard file types such as png and jpg when working with images. Each file type has standard compression algorithms and extensions, that are recognized by all modern computers and used to open and process files.
The computer unpacks and reads the instructions for each pixel when you load an image into your computer. It will then make a copy of the information on the computer screen. You never see the actual image but what is rendered (painted) on the screen by the unpacked instructions.
How do digital screens work?
Every digital screen has a set number of pixels depending on the screen size and aspect ratio (pixel size). This is also referred to as the resolution of your screen. Each pixel has an XY position and accepts RGB color. My laptop screen with a width of 1536 pixels and a height of 854 pixels has a total of 1,327,104 (1536x854) pixels.
Sometimes there can be a mismatch between the number of pixels in an image and the number of pixels needed to color the screen. It is easier to download a large image on a small screen than downloading a small image on a large screen. Large images appear fine on small screens (downscaling). Special algorithms are required to fill the missing pixels when downloading a small image on a large screen. This does not work across all devices and can result in a pixelation as the image is enlarged. Web developers need to load non-pixelated images as quickly as possible. They overcome the problems associated with placing small images on large screens by creating a few different image sizes. This allows the correct image to be uploaded depending on the size of the screen.
It is time-consuming to use pixels to create digital images. This has lead to the development of Scalable Vector Graphics (SVG). SVG allows us to create images using building blocks that are much larger than pixels (similar to building objects in the real world).
Vector graphics provides another way for providing instructions on how the rendered image should look like on-screen. It uses primitives (building blocks) instead of pixel-based instructions. With vector graphics, the size of the file does not depend on the size of the image, but rather the number of primitives that were used.
Scalable Vector Graphics (SVG) uses a markup language to describe large shapes instead of pixel to color descriptions for providing on-screen pixel painting instructions. Computers use math functions to change the markup language to pixel-by-pixel instructions. SVG is a standard format used in many web browsers and graphic applications.
Scaling - Vector Vs Raster
Scaling an SVG is just changing it’s width and height parameters and does not change the file size at all, whereas scaling a raster image means adding or removing pixels and so the file size will get larger or smaller depending on the image size.
Primitives are the standard in programming and computer graphics and you can create your building blocks when needed. SVG graphics has six types of primitives:
1. A Vertex – It is like a pixel in raster images in that it is the smallest point used to describe a drawing in vector graphics. A vertex is sometimes called a vector because it includes direction in addition to its XY position and RGB color.
2. Lines – Lines are known as 2nd level primitives as they are used to create a new type of building block. This is achieved by drawing a line between two vertices (plural of vertex).
3. Rectangle – Is a 3rd level primitive and is made up of four lines.
4. Arcs and Circles – These are 2nd level primitives as they are also made up of vectors. They differ from lines in that they use trigonometry math functions to create circular shapes.
5. Splines – These are 3rd level primitives that are created from arcs. Splines are different from other 3rd levels in that math functions are used to remove the arcs by smoothing.
The main benefits of using SVG for websites
SVG is great for drawing basic shapes on websites as large portions can be created with just a few lines. A line that describes two vertex points can change in size depending on how the position of the points of the vertices changes. In comparison, each pixel on a line must be described in a Raster image. The number of pixels increases as the length of the line increases. Hence, the size of the file increases.
The main benefit of using SVG for designers
Editing shapes and outlines with SVG using lines, arcs and splines allow you to produce accurate tracings of any image quickly. Vector graphics are better suited to drawing shapes while Raster is excellent for producing photo-realistic images.
Why developers love SVG
The rendering engine found in web browsers, as discussed in the post covering Online 3D Modeling, can render both raster and vector graphics. Besides including standardized primitives, the engines deal with circles, arcs, and splines by doing the entire math in the background. This reduces developer programming time significantly. Unfortunately, this does not include 3D graphics.
3D modeling software
3D objects comprise two parts:
- 3D object – similar to vector graphics
- Visualization/rendering – similar to raster graphics
Similarly, the rendering process also occurs in two stages. In the initial process, instructions are retrieved from the primitive (similar to vector graphics), which is followed by pixel-by-pixel rendering (as with raster images).
A fast primitive based rendering engine is best for visualizing 3D objects using basic colors. For photo-realistic renderings, however, a much slower pixel-by-pixel engine is required.
Some 3D modelers specialize in digital 3D object creation, such as designing for 3D printing, and do not need a sophisticated rendering engine. Other designers mainly render objects for other people and are do not do 3D modeling on their own.
Currently, most 3D modeling programs include a rendering engine. Since photorealistic rendering is a topic on its own, our focus for this article will only cover the 3D modeling and basic primitive based rendering aspects.
The 1st level primitive is a vertex (as in SVG), the 2nd level primitive is a line, while 3rd level primitives (also called a face) include triangles and also rectangles in some cases. Finally, other basic shapes are custom, similar to a path in SVG.
Technically it is possible to describe very complex scenes with only vertices. Look at the following illustration. 3D laser and LiDAR scanners use a set of vertices (like pixels in a raster image) to create a point-cloud. You see someone using a point-cloud, as standard 3D modeling programs and 3D modeling exports use other primitives to create and modify 3D objects. However, most 3D scanners come with software with the ability to convert the point cloud into a solid (3d polygon object). You can work on this solid using standard 3D modeling computer programs and tools.
Just as in vector graphics, two vertices are enough to describe a line.
3D modeling applications can be used to create 2D shapes such as rectangles, triangles, etc. But the purpose of 3D modeling is to create 3D shapes. The creation of a nest of triangles (polygon solid) is the standard way of describing 3D shapes. These triangles are called the faces of the 3D object.
Rendering engines can only color triangles, and some support rectangles as well. All other shapes, even 2D such as circles, need to be converted into sets of triangles first (triangulation). For this reason, triangles are also custom shapes.
Face3 vs Face4
Triangles (called Face3) are excellent for editing shapes such as circles, whereas rectangles (Face4) are preferred by some designers for editing other types of 3D polygons.
There are other types of 3D polygon solid files such as STL (a standard 3D file exchange format) that only support triangles.
In addition to standard 3D file exchange formats, SelfCAD supports both Face3 and Face4 options to accommodate designers. The software even has tools to allow a user to convert between the two formats. When SelfCAD exports to a file format that does have Face4 support, it will automatically convert all Face4 faces to triangles.
2D and 3D shapes
SelfCAD, including other professional CAD applications, offers many additional 2D and 3D primitives. These are part of the services CAD programs include in their custom 3D modeling applications. It is good to remember that this feature is not built into your computer browser functions.
This is quite important as you will experience that each CAD application has its unique features and tools. There could even be a problem transferring information from one modeling program to another. You need to be observant of these factors when polygon and other types of modeling software are discussed a bit later.
What is a Polygon?
Polygon comes from the Greek where “poly-” means many and “-gon” means angle. All shapes which are flat and consist of straight lines are called 2D polygons. Also, a polygon must exist on a single plane (planar) and the straight lines must form a closed shape.
It is impossible to create a polygon with only two lines. For this reason, triangles are also called minimum polygons, because they are closed shapes formed by three lines. Polygons do not have a minimum amount of lines, as long as the lines form a closed shape. Therefore, faces of 3D objects are also polygons, hence the name “Polygon Solid”.
Edges vs Lines
Edges VS Arcs
Arcs form an important component of 3D modeling as it can be used to form two additional primitives, circles, and splines. An arc can be formed from using just three vertices. A fourth vertex gives you a point that can be used to modify or deform the arc. Technically, splines and circles formed by smoothing an arc all have the same basic structure, and you will have to covert the arc to a set of edges and lines.
Previously I have described how SVG uses arcs, splines, and circles as primitives to create consistency across platforms to speed up development. 3D modeling applications create these forms manually and in this way, the programs become more flexible. This is achieved in that you can set the number of segments of an arc in most 3D modeling programs.
The term “segments” refers to when you divide a shape into separate parts or sections. For arcs, the amount of segments is equal to the same number of lines or edges. The smoothness of an arc depends on the number of segments. Fewer segments will result in a less rounded arc, while the more segments the arc has, the smoother it will appear. A single segment results in a straight line. Additional segments are positioned in a circular function and will increase the roundness.
The addition of segments adds more flexibility to your design. To create the same drawing in SVG takes a lot of time as additional segments need to be added manually. 3D software will do all of this for you automatically.
Arcs and Splines in 3D
Polygons can be created using arcs, splines, and circles. They will not be called a polygon until each of these primitives is converted into lines. SelfCAD generates the faces required to render the polygon solid by converting these shapes into lines with the simplification tools. The triangles required for the faces are formed using the Fill Polygon function.
Area of a polygon
A polygon is a closed shape with lines drawn around the edges. The space inside the edges is known as the area. This is the space that will be filled if you use different filling parameters during rendering.
Profiles and Sketches
The profile or sketch of any object is a drawing of the edges of that object. In the same way, an artist will draw the outer boundaries around someone’s face, while the inner area of the object is left unfilled. Such a drawing is known as the profile or a sketch of the object.
Any object in 3D modeling which is not filled is also known as a sketch or a profile. SelfCAD includes a “3D Sketch” tool which allows you to make sketches, while the generated output is called the profile of the object. This is in line with what we find in other 3D modeling computer programs as well.
Wireframe vs Solid mode
In the previous section, I have described the processes in which the rendering engine can fill a polygon or sketch a profile. An object without faces (no edges) cannot be filled. It does not matter if we are speaking about a simple circle or a large primitive with a complex path; if edges or faces are not present it is regarded as a profile (not triangulated yet). Once the object has been triangulated, you can decide in which mode you want to view it.
If you want to see the infill of the object without any edges then Solid mode is the best. This mode allows you to see the smooth version of the object which is best for visualization purposes.
If you want to do surface modeling and need to see the inside of the object, then Wireframe mode is the best. In this mode, you will only see the edges of the object.
Wireframe Plus Edge mode
Wireframe plus edge mode allows you to see the complete object. It is, therefore, the best mode to use to visualize the topology structure.
Concave vs Convex Polygon
A convex polygon does not have any sharp angles pointing inwards, whereas a concave polygon has an angle pointing towards the inside of shape (“concave” has a “cave”).
Self Intersecting polygons
Self-intersecting polygons are objects where two or more of the edges cross each other. They are not true polygons and the only way to fix these objects is to remove some of the edges. A polygon is valid or true when you can start at one vertex, trace around the edges, and return to where you started without missing a vertex or going over a vertex more than once.
In the above example, I drew a rectangle and then drew a circle from the center of the top edge. Designers often use this method to create complex polygons. To make the polygon valid, you have to trim away some of the edges.
Most 3D modeling software has a “Trim” command, which allows the user to trim away edges when activated. It is even easier in SelfCAD. You activate the face mode, select the parts you need to remove, and then delete them. Designers find this quite flexible and convenient as this technique allows them to use the same selection methods throughout the design process.
What is a path
Try and visualize walking along a path. Technically a path is any loop of lines, but it is not only limited to them. It can include other primitives such as arcs and splines as well. While every face and polygon is a path, not every path is a polygon or a face.
Plane and Scene
In 2D graphics, you are limited to a single drawing surface called a plane. In comparison, the 3D modeling editor emulates the real world in 3D. As a result, you can draw and create many 2D drawing planes in 3D modeling, just as we find the physical universe. Such a collection of 2D and 3D objects including the planes are called a scene, where the scene represents the virtual universe.
Geometry is only planar if the entire object, such as a circle is positioned directly on a single plane. Where some of the vertices do not touch the plane, such as with a 3D spline, then the geometry is no longer planar.
Path vs Plane and Surface
In the above section, I described how each face and polygon is also a path. However, they differ from planes and surfaces in that a path only describes a loop of edges. Planes and surfaces, on the other hand, can contain any type of drawing and do not have to be closed.
Plane vs surface
A plane is always 2D whereas a surface can also be 3D. Also, a plane is not limited to the type of drawings on it. A single plane can simply have scribbles or open and closed paths, while a surface must be connected. Try and visualize the surface of a sofa. The cushion of the sofa is not planar, yet the non-connecting parts are called different surfaces.
The Freehand tool found in SelfCAD limits you to drawings on 2D planes as what is the case in other CAD applications. In SelfCAD you can create many planes for drawing, but these cannot be connected in a single drawing. However, by keeping to planar geometry, SelfCAD can perform fast real-time drawing using boolean operations. This adds to making this tool an excellent choice for tracing images and designing complex patterns quickly.
In SelfCAD, 3D Sketch allows you to draw in as many planes as required, and also allows you to draw connections between planes and even between other drawings. This allows the user to draw directly on other 2D and 3D geometries.
3D modeling professionals and designers can create intricate objects quickly and accurately. This can be done in SelfCAD by using 3D Sketch in conjunction with the Loft, Revolve, and Follow Path tools. The Follow Path tool is unique to SelfCAD.
A silhouette is used to describe objects in a way that does not reveal any details, which is the polar opposite to contour lines. It is similar to the shadow which shows the whole object without showing much detail.
Polygon Modeling applications
When you create and edit 3D objects such as complex polygon solids, flexibility to select and edit primitives and topology will speed up the process. This is quite difficult in most CAD platforms as you are required to work on different modes and create different interfaces for engaging with lines, edges, and profiles, etc.
Introduction to 3D Modeling
For a moment we will move away from the digital world and focus on tangible objects in our fiscal universe. Hereafter we can move into 3D modeling.
We live in a three-dimensional universe where the position of everything, even as tiny as a grain of sand, can be described in three dimensions. So the question is: “How can one or two-dimensional objects exist in a three-dimensional universe?”
GPS vs 3D CAD positioning systems
Like most CAD applications, SelfCAD uses an XYZ Cartesian coordinate system while GPS uses a spherical coordinate system employing parameters such as latitude, longitude, and elevation. There are a few other positioning systems, but they are not as popular.
Every object in the fiscal universe and a virtual 3D CAD scene has a three-dimensional position, so what makes an object one, two, or three dimensional? Knowledge of measurement is necessary to be able to understand what is meant by one, two, or three dimensional. For this topic, we will focus on object volume and size. Measurements such as the weight, density, etc. of an object do not apply in this discussion.
How to measure an object's volume?
The displacement of water is still a very accurate way of determining the volume of irregular objects, even though this method dates back to ancient times. This is done by submerging an object in the water and measuring the change in the height of the water level.
If a stone is submerged in 20 ml of water and the level of the water increases to 40 ml, then the stone has a volume of 20 ml.
An object with a cavity will change the final measurement, depending on whether the object is closed or has an opening which will allow the water to enter inside.
If the stone is replaced by a balloon, we will still get a true reading of the volume the balloon occupies in space. The displacement does not depend on the inner density of the object.
On the other hand, if a hollow tube is placed into the water, it will allow water to enter inside. The change in volume in this case will only relate to the volume of the walls of the tube.
Based on the above we notice that the volume of a hollow object which is not closed is measured by the thickness of its wall. The volume of a solid or closed object is measured by the total volume it occupies. It is this understanding which is important for understanding the topology structure of a 3D object and how this relates to 3D printing.
How to measure the size of an object?
An object’s size is determined by measuring the absolute distance between two points. The point from where you start and the direction is not important. It is simply a case of counting the number of units between the two points.
What is a one-dimensional object?
An object is one dimensional if it has a single point of reference (one unit) making it impossible to determine its distance. So objects such a pixel, one vertex, a single grain of salt, are all 1D objects.
Which measuring Units do we use?
What makes a two-dimensional object?
If it is possible to draw a line between two points, then the object is two dimensional. This is because you can measure the distance between them.
Whether you add second or even more lines and these are parallel or perpendicular to each other, then you still have a two-dimensional object. This is because the only measurement that is possible is the distance. All of this is true as long as the lines do not form a closed loop.
Creating an Area?
A minimum of three lines will allow you to create a triangle, which is a closed-loop. The addition of another line will make a rectangle and so on. As long as the loop is closed you will be able to make another measurement called Area.
A 100 pixel by 100-pixel rectangle will have a measurement of 400 pixels if you were to measure its outer perimeter. If you measure the area you get 10,000 pixels because the whole area can be filled with up to 10,000 pixels.
You can choose any unit of measurement. If your choice was 100 cm by 100 cm, then the area you get will be 10,000 cm.
Area vs Volume
An area is similar to volume (described above). An area cannot hold anything within its boundaries as it is two dimensional, whereas a 3D enclosed shape can hold water in its boundaries and therefore has volume.
What makes an object three dimensional?
When we compare closed and open 3D shapes we can see that a closed shape can displace water, while water enters an open shape. We will see what makes an open 3D object three dimensional.
Technically a 3D object is any object where we can measure its length, width, and height. Any 1D object has no measurement. If we can measure the length (X) of an object it is 2D. Also if we can measure the width (Y) of an object then it is still two dimensional. As soon as we can add a third direction (Z) to an object, it is said to be three dimensional.
This all depends on the number of planes you use in the Cartesian system (XYZ). Drawings with height and width (XY) are drawn on a single plane and are therefore 2D. Once a third direction (Z) is added to a drawing, technically you are using the third plane. This makes the object 3D.
Can we get to higher dimensions?
In theory, the answer is yes, but modern CAD applications are limited to 3D. Even if you add planes and angles in any direction it will still be limited to length, width, and height (XYZ), making the object 3D.
Understanding XYZ planes
It is quite important to understand the XYZ system irrespective of the letters that are used for each plane. This becomes extremely important when working between applications and platforms. Unfortunately, there is no consistency between applications regarding the description of planes and terminology.
Height and width (XY) in 2D
Most 2D systems use the horizontal plane (X) which runs horizontally across the screen to indicate length, and the vertical plane (Y) which runs vertically on the screen (up and down) to indicate height. Technically it is possible to use any two planes in the system to describe a two-dimensional object.
Height, width, and depth (XYZ) in 3D
There are different systems for representing 3D coordinate systems, including GPS. Fortunately, most professional CAD software and 3D modeling applications have adopted the Cartesian coordinate system in terms of length, width, and height (XYZ). It is still important to remember that the direction of the planes may differ.
There is an agreement that X/length is in the horizontal direction. In systems where width is given by Z, the height will be given by Y.
Some of these discrepancies between XYZ orientations of 3D objects on a Cartesian system are clearly illustrated below.
By default, SelfCAD uses Y as height but includes an option that allows you to change it at any time you feel the need to. The software’s slicer uses Z as height as this configuration is standard for 3D printing. SelfCAD automatically changes these axes when the user goes from editor to the splicer.
Circular vs Rectangular functions
Circular objects such as a circle, an arc, or 3D cylinder, etc, have one thing in common. The smoothness of its rotation depends on the number of edges.
Rectangle functions such as a rectangle or 3D cube, etc. are not affected by the number of inner faces and will look the same in solid mode.
The addition or removal of details from any non-circular shape is usually for organic modeling and sculpture techniques. This type of adjustment allows you to determine the behavior in many other 3D tools.
What is a watertight solid?
A watertight solid means that an object should not leak any water, irrespective of the direction in which you rotate the object.
The following illustration makes for interesting observation as we proceed from left to right. The first cube on the left has a watertight solid. The 2nd cube has no volume and all the water will leak out if it were flipped over. The cube on the right only accounts for the wall thickness as its volume.
Exploded vs joint vertices and edges
A basic cube can be created from a minimum of six rectangular polygons, with each polygon having 4 lines. This will give us a total of 6*4 = 24 edges and 24*2 = 48 vertices (each edge has 2 vertices). The construction of our cube below is in agreement with the 6 polygons and the 24 edges. Let’s see why we only have 24 and not 48 vertices.
This can be explained when we look at the closed cube.
In the closed cube, we still have the 5 faces, but now we only have 12 edges and only 8 vertices. Why?
The explanation is really simple. Vertices can be shared and reused for more than one line, and any line can be shared and reused for more than one face.
In the first cube, all of the faces are not connected. None of the edges can be shared, so the number of edges remains 24. Each line shares a vertex with its neighbour so that the number of vertices is reduced from 48 to 24.
In the closed cube, the edges are shared with neighboring faces so that these decrease from 24 to 12. The construction of the cube also means that more vertex sharing occurs at the corners of every plane, reducing the number to only 8 vertices.
In most 3D modeling programs, edge and vertex sharing occur by default. These can be split to duplicate all edges and vertices by what is known as exploded geometry. Exploded geometry is non-watertight meaning that water can leak out between the individual non-connected vertices and edges.
What is a non-manifold solid?
Watertight and manifold are often used as meaning the same thing. Non-manifold geometry, on the other hand, can also include other problematic geometric structures such as self-intersecting faces, inner faces, and flipped normals. All of these will be discussed in greater detail in my upcoming “3D Modeling Tools and Techniques” blog post.
SelfCAD has a magic fix tool that automatically fixes and repairs most of the non-watertight and non-manifold issues.
Do you want to learn 3D modeling? Check out our interactive tutorials.
Haven't tried SelfCAD yet? Register now, and try it out for free!