Interactive 3D Graphics

Wole Oyekoya, PhD

Associate Professor
Email: [email protected]
Website: http://www.wolex.com/
Overview
• Points, Lines and Polygons
• Graphics pipeline
• OpenGL Graphics Pipeline
• Vulkan Graphics Pipeline
• GLUT
• Cameras
• Lights
• Colors and Materials
• Textures
Points, Lines, Polygons
• Points: x, y, z
• Line: two points
• Polygon: list of vertices, color/texture
Polygons

Wireframe of a
hand made from
polygons

Source: http://computer.howstuffworks.com/3dgraphics.htm
3D Graphics APIs
• Unity’s 3D Graphics API
• Direct3D (Windows)
• OpenGL Core graphics
APIs (Windows, Mac)
• Vulkan (Windows, Mac)
• Metal (Mac)
Graphics Pipeline

Sources: https://commons.wikimedia.org/w/index.php?curid=58106609
https://commons.wikimedia.org/w/index.php?curid=58106784
OpenGL Rendering Pipeline

http://www.songho.ca/opengl/gl_pipeline.html
Vulkan Graphics Pipeline
Vulkan
API
Unity Render Pipelines
• The Built-in Render Pipeline - Unity’s default render
pipeline.
• The Universal Render Pipeline (URP) - Scriptable
Render Pipeline
• The High Definition Render Pipeline (HDRP) -
Scriptable Render Pipeline, high-fidelity graphics on
high-end platforms.
OpenGL as a Renderer
• Geometric primitives
• points, lines and polygons
• Image Primitives
• images and bitmaps
• separate pipeline for images and geometry
• linked through texture mapping
• Rendering depends on state
• colors, materials, light sources, etc.
OpenGL Hierarchy
• Several levels of abstraction are provided
• GL
• Lowest level: vertex, matrix manipulation
• glVertex3f(point.x, point.y, point.z)
• GLU
• Helper functions for shapes, transformations
• gluPerspective( fovy, aspect, near, far )
• GLUT
• Highest level: Window and interface management
• glutSwapBuffers()
 OpenGL Geometric Primitives
• All geometric primitives are specified by vertices

GL_LINES
GL_POLYGON
GL_LINE_STRIP GL_LINE_LOOP
GL_POINTS

GL_TRIANGLES

GL_QUADS
GL_QUAD_STRIP
GL_TRIANGLE_STRIP GL_TRIANGLE_FAN

13
Vulkan Topologies
Vulkan Conventions
• VkXxx is a typedef, probably a struct
• vkYyy( ) is a function call
• VK_ZZZ is a constant
• Vulkan Pipeline is essentially a very large
data structure that holds (what OpenGL would call)
the state
• Vulkan is better at keeping the GPU busy
• OpenGL drivers need to do a lot of CPU work
before handing work off to the GPU
OpenGL Implementations
• OpenGL IS an API (think of as collection of .h files):
• #include <GL/gl.h>
• #include <GL/glu.h>
• #include <GL/glut.h>
• Windows, Linux, UNIX, etc. all provide a platform
specific implementation.
• Windows: opengl32.lib glu32.lib glut32.lib
• Linux: -l GL -l GLU –l GLUT
GLUT Main Program
• Application Structure
• Configure and open void main( int argc, char**
argv )
window {
int mode =
• Initialize OpenGL state GLUT_RGB|GLUT_DOUBLE;
• Register input callback glutInitDisplayMode( mode );
glutCreateWindow( argv[0] );
functions init();
• render glutDisplayFunc( display );
• resize glutReshapeFunc( resize );
glutKeyboardFunc( key );
• input: keyboard, mouse, glutIdleFunc( idle );
etc. glutMainLoop();
}
• Enter event processing
loop
Vulkan
Main
Program
Controlling Rendering Appearance
• From Wireframe to Texture Mapped

19
Unity - Shader Graphs
OpenGL’s State Machine
• All rendering attributes are encapsulated in the
OpenGL State
• rendering styles
• shading
• lighting
• texture mapping

21
Manipulating OpenGL State
• Appearance is controlled by current state
for each ( primitive to render ) {
update OpenGL state
render primitive
}
• Manipulating vertex attributes is most
common way to manipulate state
glColor*() / glIndex*()
glNormal*()
glTexCoord*()

22
Controlling current state
• Setting State
glPointSize( size );
glLineStipple( repeat, pattern );
glShadeModel( GL_SMOOTH );
• Enabling Features
glEnable( GL_LIGHTING );
glDisable( GL_TEXTURE_2D );

23
Camera Analogy
• 3D is just like taking a photograph (lots of
photographs!)

viewing
volume

camera

tripod model
Camera Analogy and Transformations
• Projection transformations
• adjust the lens of the camera
• Viewing transformations
• tripod–define position and orientation of the viewing
volume in the world
• Modeling transformations
• moving the model
• Viewport transformations
• enlarge or reduce the physical photograph
Coordinate Systems and
Transformations
• Steps in Forming an Image
• specify geometry (world coordinates)
• specify camera (camera coordinates)
• project (window coordinates)
• map to viewport (screen coordinates)
• Each step uses transformations
• Every transformation is equivalent to a change in
coordinate systems (frames)

26
OpenGL: Camera
• Two things to specify:
• Physical location of camera in the scene (MODELVIEW
matrix in OpenGL).
• Where is the camera?
• Which direction is it pointing?
• What is the orientation of the camera?
• Projection properties of the camera (PROJECTION matrix
in OpenGL):
• Depth of field?
• Field of view in the x and y directions?
OpenGL: MODELVIEW
World coord-sys: Camera coord-sys:
Projection Transformation
• Shape of viewing frustum
• Perspective projection
gluPerspective( fovy,
aspect, zNear, zFar )
glFrustum( left, right, bottom,
top, zNear, zFar )
• Orthographic parallel projection
glOrtho( left, right, bottom,
top, zNear, zFar )
gluOrtho2D( left, right,
bottom, top )
• calls glOrtho with z values near zero

34
Lighting and Perspective
• Lighting plays a key role in two effects: shading and
shadows.
• Perspective is the convergence of objects at a
vanishing point (Z-Buffer)

http://computer.howstuffworks.com/3dgraphics4.htm
Lighting Principles
• Lighting simulates how objects
reflect light
• material composition of object
• light’s color and position
• global lighting parameters
• ambient light
• two sided lighting
• available in both color index
and RGBA mode

36
Surface Normals
• Normals define how a surface reflects light
glNormal3f( x, y, z )
• Current normal is used to compute vertex’s color
• Use unit normals for proper lighting
• scaling affects a normal’s length
glEnable( GL_NORMALIZE )
or
glEnable( GL_RESCALE_NORMAL )

37
Types of Lights
• OpenGL supports two types of Lights
• Local (Point) light sources
• Infinite (Directional) light sources
• Flip each light’s switch
glEnable( GL_LIGHTn );
• Turn on the power
glEnable( GL_LIGHTING );

38
Material Properties
• Define the surface properties of a primitive
glMaterialfv( face, property, value );

GL_DIFFUSE Base color

GL_SPECULAR Highlight Color

GL_AMBIENT Low-light Color

GL_EMISSION Glow Color

GL_SHININESS Surface Smoothness

39
Advanced Graphics Topics
• Double Buffering
• Hidden Surface Removal (Occlusion Culling)
• Display Lists and Vertex Arrays
• Alpha Blending and Antialiasing
• Using the Accumulation Buffer
• Fog
• Feedback & Selection
• Fragment Tests and Operations
• Using the Stencil Buffer

40
Additional Resources
• http://www.opengl.org
• start here; up to date specification and lots of sample code
• https://web.engr.oregonstate.edu/~mjb/vulkan/
• SIGGRAPH 2020 tutorial by Mike Bailey