03/09/2022, 20:10 Learning Guide Unit 1

Learning Guide Unit 1

https://my.uopeople.edu/mod/book/tool/print/index.php?id=310243 1/12
03/09/2022, 20:10 Learning Guide Unit 1

Description
Learning Guide Unit 1

https://my.uopeople.edu/mod/book/tool/print/index.php?id=310243 2/12
03/09/2022, 20:10 Learning Guide Unit 1

Table of contents
Overview
Introduction
Reading Assignment
Discussion Assignment
Programming Assignment
Learning Journal
Self-Quiz
Checklist

https://my.uopeople.edu/mod/book/tool/print/index.php?id=310243 3/12
03/09/2022, 20:10 Learning Guide Unit 1

Overview
Unit 1: Introduction to Graphics
Topics:
Overview of Graphics
3D Geometry
Model, world, and eye coordinate system
Clipping and projections
Graphics Pipeline
Fundamental Model of Viewing
Projections
Learning Objectives:
By the end of this Unit, you will be able to:
1. Describe the role of APIs and IDEs in relation to computer graphics.
2. Develop an understanding of computer graphics.
3. Develop graphic models and implement them to present graphics scenes
Tasks:
Read the Learning Guide and Reading Assignments
Participate in the Discussion Assignment (post, comment, and rate in the Discussion Forum)
Review and run the code in the Programming Assignment
Make entries to the Learning Journal
Take the Self-Quiz

https://my.uopeople.edu/mod/book/tool/print/index.php?id=310243 4/12
03/09/2022, 20:10 Learning Guide Unit 1

Introduction
In Unit 1, we are introduced to the basic concepts of computer graphics.  First of all, we need to recognize the role of graphics
APIs and their interaction with Graphics hardware. Graphics processing is numerically intense. Graphics geometry is based upon
the manipulation of points and polygons … lots of points and polygons.  Rendering intricate graphics scenes are complex,
numerically intensive, and requires a great deal of processing.  To accommodate this processing, computer architectures have
been developed with specialized processing capabilities that allow this processing to be offloaded from the computer's CPU to be
processed by this specialized GPU (Graphics Processing Unit) or VPU (Visual Processing Unit). The graphics API's role is to
provide tools to the graphics programmer to access these specialized graphics processing capabilities.  When you make a call in
OpenGL or WebGL, the API routine accesses these specialized processors to execute the request.

The preceding figure details the ecosystem around OpenGL, including the OpenGL ES, the version of OpenGL designed for
embedded systems that the WebGL specification is based upon. In this course, our text will refer to OpenGL, and our course
assignments will take advantage of WebGL, which is a subset of OpenGL functionality.
We learn about the difference between 2D and 3D graphics. We discover that 3D graphics must be projected onto a 2D viewing
surface. We learn that this viewing surface, or window, is limited in size, so the image in the viewing world is limited to the portion
that is visible through this window.  The process of limiting the scene is known as clipping.
We also learn that in 3D graphics, objects known as Geometry are plotted on a 3-dimensional coordinate system.  The following
diagram represents the three dimensions of X, Y, and Z.

https://my.uopeople.edu/mod/book/tool/print/index.php?id=310243 5/12
03/09/2022, 20:10 Learning Guide Unit 1

The following is a model of the view Frustum.  The frustum provides us with an understanding of how computer graphics are
displayed as it represents the region of space in the modeled world that appears on the screen; it is the field of view of the
camera.   

One way of visualizing how this works is to think of a screen door placed in front of the scene.  As the light comes towards the
screen, each square of the screen will show a small portion of the overall picture. Each of these squares on the screen has a color
based on the intensity of light. When viewed together, we can see the image that is displayed through the frustum. Each small
square is called a pixel. Each pixel has color and light intensity. Together they form the image we see on the screen.  The computer
API's job is to transfer the information in the scene (the colors and light intensity) reflected from the objects in the scene. This is
translated into the grid of pixels that represents what you see on the computer screen.

When using an API such as OpenGL or WebGL, the Frustum is defined when defining the camera within the graphics environment.
The following is the command used in WebGL with Three.js to create a camera.  
var camera = new THREE.PerspectiveCamera(45, Width / Height, 1, 1000);
We define the camera vertical field of view (45 in this example), the aspect ratio, which is the ratio of width to height, the near
plane distance from the camera (1 in this example), and the far plane distance from the camera (1000 in this case).   
The vertical field of view is essentially the height of the camera.  A higher camera has a wider field of view.  Objects in the modeled
world will appear smaller the higher the camera is.  Of course, as the camera position is lowered, then the objects appear larger.

https://my.uopeople.edu/mod/book/tool/print/index.php?id=310243 6/12
03/09/2022, 20:10 Learning Guide Unit 1

Reading Assignment
Reading Assignment
Eck, D. (2018). Introduction to Computer Graphics, v1.2. Hobart and William Smith Colleges. 
Chapter 1 - Introduction
Chapter 5 - Three.js; A 3-D Scene Graph API
Download the PDF version.
Guha. S. (2019). Computer graphics through OpenGL: From theory to experiments, 3rd edition.   
Read Chapter 2 (Sections 2.1, 2.2, 2.3, 2.4, 2.6, 2.11), 
Mbise, M. (2017). Computer graphics. African Virtual University (AVU). https://oer.avu.org/handle/123456789/673 or download
pdf
Read Unit 1: Basics and Elements of Computer Graphics 
Read Unit 3: Creating
Graphics with OpenGL
Durand, F. (n.d.). A Short Introduction to Computer Graphics. MIT Laboratory for Computer Science.
http://people.csail.mit.edu/fredo/Depiction/1_Introduction/reviewGraphics.pdf
Read A Short Introduction to Computer Graphics
Massachusetts Institute of Technology (2020). Coordinates and
Transformations. MITOpenCourseware.
https://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-837-computer-graphics-fall-2012/lecture-notes/.
(Original work
published 2001).
Read lecture #21,
Graphics Pipeline and Rasterization
Video Lectures
Udacity. (2015, February 23). Perspective matrix - Interactive 3D graphics [Video]. YouTube. https://www.youtube.com/watch?
v=yrwCdD1dpvE
This video provides an explanation of the perspective camera view.
Udacity. (2015, February 23). Three.js orthographic camera view - Interactive #D graphics [Video].
YouTube. https://www.youtube.com/watch?v=k3adBAnDpos
This video provides an explanation of the orthographic camera view.
Optional reading
Viewing and Transformations. Open GL. https://www.khronos.org/opengl/wiki/Viewing_and_Transformations
This site provides a list of frequently asked questions about OpenGL.

https://my.uopeople.edu/mod/book/tool/print/index.php?id=310243 7/12
03/09/2022, 20:10 Learning Guide Unit 1

Discussion Assignment
In the discussion forum, you are expected to participate often and engage in deep levels of discourse.  Please post your initial
response as early in the unit as possible and continue to participate throughout the unit. You are required to post an initial
response to the question/issue presented in the Forum and then respond to at least 3 of your classmates’ initial posts.  You should
also respond to anyone who has responded to you. 
In Unit 1 Reading Assignment, the concept of the Geometry pipeline was introduced.

Discussion Prompt:
For this discussion, please describe the role of the graphics API (such as OpenGL or WebGL), graphics hardware (graphics
cards, GPU, VPU), and the geometry pipeline. Use examples when possible. Remember to cite sources from this Unit's reading
using APA 7th edition format.

Your Discussion should be a minimum of 250 words in length and not more than 450 words. Please include a word count.
Following the APA standard, use references and in-text citations for the textbook and any other sources. 

https://my.uopeople.edu/mod/book/tool/print/index.php?id=310243 8/12
03/09/2022, 20:10 Learning Guide Unit 1

Programming Assignment
Unit 1 is not a graded assignment.  However, it is important to complete as it will help you become acquainted with the graphics
development environment that you will be using for all of the remaining assignments within the course.  To begin, review
the notes and unit materials for the Programming Assignment Unit 1. Within this page, you will see the graphics integrated
development tool, Repl.it Integrated Development Environment (IDE), embedded within the page.  
It is recommended that you create a Repl.it account because you will need it to save your work.  You can use the environment
without an account, but you will need to make sure that you download your work before leaving the web page. 
You should see the javascript / Three.js editor on the left side of the screen and the image generated on the right.  If you do NOT
see this, you are most likely NOT using one of the supported browsers. A list of the supported browsers has been provided in the
Software Requirements section of the course syllabus.  Firefox, Chrome, and Opera browsers are generally supported. Internet
Explorer is typically NOT supported, and there is only partial support Safari.  The easiest way to ensure that you have a supported
environment is to use one of the supported browsers to access Moodle.
For this exercise, you will acquaint yourself with the development environment and JavaScript, which will be our programming
language, and the features of the Three.js library. The Three.js library is what we will be using to implement WebGL functionality
within JavaScript. 
Essentially this library provides a shortcut that makes implementing WebGL functionality easier as it implements many of the more
primitive WebGL API calls as higher-level objects in JavaScript.
Become familiar with the features and operation of the Repl.it development environment. What is really convenient about this
environment is that as you write code on the screen's left side, the results are instantly displayed on the right.  One way of
debugging is to write code, one step at a time, as you can immediately see the impact or result of your changes.  
Before you begin programming
The language you will be using is JavaScript. Follow the instructions in the document, How to Setup and Use Repl.it, to select
JavaScript as your programming language in Repl.it. All of our code assignments will be developed using the javascript language
embedded within an HTML document. JavaScript is used as the language to get access to Three.js objects. Most of our
assignments will be related to the Three.js library and the WebGL API functionality. Although you have been exposed to JavaScript
language initially in the curriculum, you can get the basic information on javascript by reading The Beginner's Guide to Three.js.
Three.js
Become familiar with the structure and operation of the Three.js library. You will want to keep the following URL up as a handy
reference as it provides details on each of the core Three.js objects and its associated methods and
attributes: http://threejs.org/docs.
There are several tutorials available that outline the basic structure of a Three.js. The following tutorials will provide a good
introduction:  
Getting Started with WebGL and Three.js 
Example Program
The example program is well documented.  Although it is a simple program, it has been designed to demonstrate many of the
features of WebGL and Three.js. Please follow the instructions in the program, which are in the comments. 
You can access the code for the example program here (text file) or at this link:
https://replit.com/@MajidGomainy/CS4406Unit1?v=1
Some of these instructions describe changing parameters in various API calls so that you can see the impact of the parameters.
There are sections of code that are commented out. These sections have different types of geometries in them. You can comment
out one section and un-comment another to visualize how different geometries are rendered within WebGL.

https://my.uopeople.edu/mod/book/tool/print/index.php?id=310243 9/12
03/09/2022, 20:10 Learning Guide Unit 1

Learning Journal
The Learning Journal is a tool for self-reflection on the learning process. In addition to completing directed tasks, you should use
the Learning Journal to document your activities, record problems you may have encountered, and to draft answers for Discussion
Forums and Assignments. The Learning Journal should be updated regularly (weekly), as your instructor will assess the learning
journals as part of your Final Grade.

Learning Journal:
1. Discuss the week's activities and your observations.
Did anything surprise you?
Did you face any challenges in this Unit? If so, how did you overcome them?

2. Reflect on Programming Assignment Unit 1 and using the Repl.it IDE as you answer the following questions:
Did you find Repl.it easy to use? 
Did you face any problems running your programming assignment? 
Was it easy to share the required links for your assignment?
Did you experience difficulty creating an account?
The Learning Journal entry should be a minimum of 500 words and not more than 750 words. Use APA citations and references if
you use ideas from the readings or other sources. 

https://my.uopeople.edu/mod/book/tool/print/index.php?id=310243 10/12
03/09/2022, 20:10 Learning Guide Unit 1

Self-Quiz
The Self-Quiz gives you an opportunity to self-assess your knowledge of what you have learned so far.
The results of the Self-Quiz do not count towards your final grade, but the quiz is an important part of the University’s learning
process and it is expected that you will take it to ensure understanding of the materials presented. Reviewing and analyzing your
results will help you perform better on future Graded Quizzes and the Final Exam.
Please access the Self-Quiz on the main course homepage; it will be listed inside the Unit.

https://my.uopeople.edu/mod/book/tool/print/index.php?id=310243 11/12
03/09/2022, 20:10 Learning Guide Unit 1

Checklist
Read the Learning Guide and Reading Assignments
Participate in the Discussion Assignment (post, comment, and rate in the Discussion Forum)
Review and run the code in the Programming Assignment
Make entries to the Learning Journal
Take the Self-Quiz

https://my.uopeople.edu/mod/book/tool/print/index.php?id=310243 12/12