Chapter Two

Introduction Fundamentals of Rendering and

Geometry in OpenGL
Introduction
• OpenGL operates as a powerful tool within the graphics reference
model, managing the rendering pipeline that converts 3D data into a
2D image on the screen.
• By serving as an interface between the application and the graphics
hardware, OpenGL allows developers to send geometry data,
textures, and shaders to the GPU efficiently.
• This process involves transforming and processing vertices and
fragments, ultimately producing the rendered image.
Coordinate Systems
• The OpenGL rendering process heavily relies on multiple coordinate
systems that help define object placement and transformations:
• Model Coordinates: Define an object’s local position and orientation.
• World Coordinates: Position objects within the global scene.
• View Coordinates: Represent the camera's perspective by moving and
rotating the scene according to the camera's view.
• Clip Coordinates: Allow the GPU to clip any parts of objects that fall
outside the viewing volume.
• Screen Coordinates: Map the final 2D image to the display.
Viewing Using a Synthetic Camera
• In OpenGL, a synthetic camera simulates a real-world camera, allowing
you to control what the viewer sees in the 3D scene. This includes:
• Positioning and Orientation: The camera’s location and the direction it
faces in the 3D world.
• Projection Types: Perspective projection, which simulates depth by
making distant objects appear smaller, and orthographic projection,
which maintains size consistency regardless of depth.
• View Frustum: Defines the visible region within the camera’s view, with
near and far clipping planes that limit the range of visible objects.
Output Primitives and
Attributes
• Output primitives are basic shapes used in OpenGL to construct
graphics, such as points, lines, and triangles. These primitives form
the building blocks for complex shapes and scenes. Each primitive has
several attributes, such as:
• Color: Determines the color of the primitive.
• Texture: Adds surface details, making objects appear more realistic.
• Lighting Attributes: Simulate interactions with light sources, adding
depth and enhancing visual appeal.
Cont’d…
• To start drawing solid geometry, we use seven geometric primitives
defined by OpenGL.
• Primitives are rendered in a single batch that contain all the vertices
and associated attributes for a given primitive.
• Essentially, all the vertices in a given batch are assembled into one of
these primitives.
Cont’d…
Points
• Points are the simplest primitive. Each vertex specified is simply a single
point on the screen.
• By default, points are one pixel in size.
• You can change the default point size by calling glPointSize.
• void glPointSize(GLfloat size);
• // Get supported point size range and step size
glGetFloatv(GL_POINT_SIZE_RANGE,sizes);
glGetFloatv(GL_POINT_SIZE_GRANULARITY,&step);
• The OpenGL specification requires only that one point size, 1.0, be
supported, but most implementations support a wide range of point sizes.
Cont’d…
Cont’d…
Cont’d…
• Drawing line segments in OpenGL, where a line segment connects two
vertices.
• Each pair of vertices forms a separate line segment, leading to gaps
between them.
• By default, lines have a width of one pixel, which can be adjusted using the
glLineWidth function.
• Line Strips allow for continuous drawing by connecting vertices
sequentially without needing to repeat points, which optimizes
performance by reducing data transfer to the GPU.
• It connects each vertex in the specified order but does not connect the last
vertex back to the first vertex.
Cont’d…
• GL_LINE_LOOP is used to create a closed loop of lines.
• It connects each vertex in the specified order and automatically
connects the last vertex back to the first vertex.
• This is useful when you want to create shapes that need to be closed,
such as polygons or circles.
• This is useful for rendering closed figures, such as the outline of a
state, as shown in the example.
Cont’d…
Cont’d…
Cont’d…
• Bresenham's circle drawing algorithm is an efficient method to draw
circles on a pixel grid.
• This algorithm is an extension of Bresenham's line algorithm, and it
uses integer calculations to determine which pixels to light up to
approximate a circle.
Cont’d…
Cont’d…
• Steps of Bresenham's Circle Algorithm
• Initialization:
• Start with the centre of the circle (h,k)(h, k)(h,k) and the radius r.
• Set the initial point (x,y)(x, y)(x,y) to (0,r)(0, r)(0,r).
• Calculate the decision parameter p as 1−r1 - r1−r.
Cont’d…
Bresenham's Circle Algorithm Example
Plotting general curves
• Plotting general curves in computer graphics can involve a variety of
methods depending on the specific type of curve you're working with,
such as Bézier curves, B-splines, or parametric curves.
Cont’d…
• Parametric Curves
• Parametric curves can be represented by a pair of equations, x(t) and
y(t), for a range of t values.
Example of Bézier curves
Cont’d…
Polygons in OpenGL
• A polygon is a two-dimensional geometric figure with at least three
straight sides and angles, typically classified as convex or concave.
• Convex Polygon: All interior angles are less than 180°; any line
segment joining two points within the polygon lies entirely inside it.
• Concave Polygon: At least one interior angle is greater than 180°;
there exists a line segment joining two points within the polygon that
lies outside of it.
Basic Polygon Representation
• Vertices: A polygon is defined by its vertices (corners), typically
represented in 2D or 3D space.
• Vertex Array: An array holds the coordinates of each vertex.
• OpenGL Basics for Drawing Polygons
• Coordinate System: Understand the Cartesian coordinate system used
in OpenGL.
• Primitive Types: In OpenGL, polygons are typically created using:
Cont’d…
• Primitive Types: In OpenGL, polygons are typically created using:
• GL_TRIANGLES: Each triplet of vertices forms a triangle.
• GL_QUADS: Each group of four vertices forms a quadrilateral.
• GL_POLYGON: Used to specify a polygon with any number of vertices,
but less commonly due to limitations and inefficiencies.
Cont’d…
• glBegin(GL_TRIANGLES);
• glVertex3f(0.0f, 1.0f, 0.0f); // Vertex 1
• glVertex3f(-1.0f, -1.0f, 0.0f); // Vertex 2
• glVertex3f(1.0f, -1.0f, 0.0f); // Vertex 3
• glEnd();
• Use glVertex3f(x, y, z) for 3D vertices or glVertex2f(x, y) for 2D
vertices.
Cont’d…
Polygon Example
Cont’d…
Line thickness, Line style, filling, and
text
• In computer graphics, especially when working with graphics libraries
like OpenGL, line thickness, line style, filling, and text and characters are
crucial concepts. Let's go over each of these:
• 1. Line Thickness
• Line thickness defines how thick or thin a line appears on the screen.
• By default, lines are usually rendered with a width of 1 pixel, but you
can adjust this to create thicker or thinner lines.
• In OpenGL, line thickness can be controlled using the glLineWidth()
function.
• glLineWidth(4.0f); // Set line width to 4 pixels
Cont’d…
• Line Style
• Line style refers to the appearance of a line, such as solid, dashed, dotted, or
dash-dot patterns.
• In computer graphics, you can create different line styles by controlling how
the line segments are rendered.
• In OpenGL, line styles can be achieved using stippling, which is a technique
that alternates between drawing and skipping pixels.
• To enable and configure line stippling in OpenGL, use
glEnable(GL_LINE_STIPPLE) and glLineStipple():
• glEnable(GL_LINE_STIPPLE);
• glLineStipple(1, 0x00FF); // Creates a dashed line pattern
Cont’d…
• Filling
• Filling determines how the inside area of a shape (such as a rectangle,
circle, or polygon) is rendered.
• You can fill shapes with solid colors, gradients, patterns, or textures.
• In OpenGL, polygons (shapes with three or more vertices) can be
filled using glPolygonMode() to switch between GL_FILL (for solid fill)
and GL_LINE (for outline).
• glPolygonMode(GL_FRONT_AND_BACK, GL_FILL); // Solid fill
Cont’d…
• Text and Characters
• Text and characters are essential for displaying information like labels,
titles, and annotations within graphics.
• In OpenGL, text rendering is done using bitmap or vector-based fonts,
typically through libraries like FreeGLUT or GLUT, which simplify text
rendering.
• void renderText(const char* text, float x, float y) {
• glRasterPos2f(x, y);
• for (const char* c = text; *c != '\0'; ++c)
{ glutBitmapCharacter(GLUT_BITMAP_HELVETICA_18, *c); } }
Line Thickness, Style, Filling and
Text Example
Cont’d…
Cont’d…
Front and Back Face Culling
• Front and Back Face Culling are techniques used in computer graphics to
improve rendering performance by not drawing polygons (faces) that are
not visible to the camera. Here’s a detailed explanation of each:
• Front Face Culling
• Definition: Front face culling involves removing (not rendering) polygons
that are facing away from the camera.
• Determination: The front face of a polygon is typically defined by the order
of its vertices. In OpenGL, the default winding order for front faces is
counter-clockwise (CCW). This means that if the vertices of a polygon are
specified in a counter-clockwise order as viewed from the front, that
polygon will be considered a front face.
Cont’d…
• Back Face Culling
• Definition: Back face culling removes polygons that are facing towards
the camera.
• Determination: Conversely, the back face of a polygon is the opposite
of the front face. In the default OpenGL settings, if the front face is
defined as counter-clockwise, then the back face will be defined as
clockwise (CW).
• Usage: When back face culling is enabled, the rendering engine will
not draw polygons that are facing the camera but are considered to
be back faces
Cont’d…
Cont’d…
• In OpenGL, polygons (such as triangles) are typically rendered as solid
shapes by default.
• However, you can change their rendering style using the
glPolygonMode function, allowing polygons to be displayed as outlines
or as individual points (where only the vertices are plotted).
• void glPolygonMode(GLenum face, GLenum mode);
Cont’d…
Blending in OpenGL
• In OpenGL, rendering typically places color values in the color buffer and
depth values in the depth buffer.
• When depth testing is off, new color fragments overwrite existing ones in
the color buffer.
• However, when depth testing is enabled, new color fragments replace
existing ones only if they are closer to the near clipping plane.
• When blending is enabled using glEnable(GL_BLEND);, the incoming color
is combined with the existing color in the color buffer rather than
overwriting it.
• This allows for various visual effects, as the colors are blended together
according to the blending function.
Antialiasing in OpenGL
• Antialiasing is used in OpenGL to reduce the appearance of "jaggies" or
rough edges, which are caused by the pixel grid of the screen.
• When rendering, fragments are usually mapped to individual pixels, which
are square-shaped, and the transition between colors can appear sharp and
noticeable.
• These jagged edges can detract from the realism of the image, especially in
games, simulations, and artistic renderings.
• Antialiasing helps smooth out these transitions, creating more natural-
looking images by blending colors at the edges.
• This improves the overall quality of the rendered image, reducing the
pixelated appearance of edges.
Cont’d…
• Multisampling Anti-Aliasing (MSAA) is the most widely used
technique in OpenGL.
• It works by taking multiple samples within each pixel and averaging
their values to create a smoother result.
• glEnable(GL_MULTISAMPLE); // Enable multisampling for anti-
aliasing
• This helps reduce the appearance of jagged edges (aliasing) by
blending the colors at the pixel edges.
Cont’d…
• OpenGL Blending
• In addition to multisampling, OpenGL blending can be used to
combine incoming colors with existing pixel colors.
• While blending itself is not directly a form of anti-aliasing, it can help
smooth transitions and create realistic effects in combination with
anti-aliasing.
• glEnable(GL_BLEND); // Enable blending
• glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
Cont’d…
Assignment(10%)
• Draw a Solar System(2D)
• Draw Circular Band Design