Attribution/License

Please do not redistribute slides/source without prior written permission.

• Original Materials developed by Mike Shah, Ph.D. (www.mshah.io)
• This slideset and associated source code may not be distributed without prior written notice

1

CS 409/509

Real-Time 3D Computer Graphics Programming

Dr. Mike Shah

http://www.mshah.io

2

Pre-Class Warmup (1/3)

• Luxo Jr., the 1986 computer-animated short film produced by Pixar.
• You likely know the “Luxo” and “Luxo Jr.” lamp from Pixar’s openings.
• It was an exciting time as the field of computer graphics started to hit the mainstream
• Did you know this was an Academy Award winning short film in 1986?

​

3

Pre-Class Warmup (2/3)

• See the video for yourself later:
• https://www.youtube.com/watch?v=6G3O60o5U7w
• Pixar Animation of Luxo Jr.

4

Pre-Class Warmup (3/3)

• See the video for yourself later:
• https://www.youtube.com/watch?v=6G3O60o5U7w
• Pixar Animation of Luxo Jr.

​

5

You never know where your students will take you! :)

Pioneer of Computer Graphics

• Ed Catmull [wiki]
• Computer Scientists (President of Pixar and Walt Disney Animation)
• 5 academy awards
• 2019 Turing Award
• Many important contributions to computer graphics
• First 3D Movie: https://vimeo.com/16292363
• (See Futureworld)
• Developer of Renderman
• (3D rendering software)
• Writer of book “Creativity Inc.”
• More information:
• http://www.computerhistory.org/fellowawards/hall/edwin-catmull/

6

(Aside) More on Pixar

• Watch on your own time to see more of a preview of how pixar combines math, science, art, and code together!
• That’s what computer graphics is after all! Math + Science + art + programming!
• https://www.youtube.com/watch?v=Z1R1z9ipFnM

7

Note to self: Try to record lecture :)�(Someone remind me if I forget!)

8

{ Administrivia

Who am I, course structure, and logistics of the course

9

About your Instructor (1/7)

​

(My Story)

​

10

About your Instructor (2/7)

​

(My Story)

​

11

About your instructor (3/7)

​

• I started writing video games around middle school.
• Shortly after I wrote programming tutorials for a gaming magazine.
• Went to undergraduate at The Ohio State University for Computer Science. Did quite a bit of research in gaming and medical visualization.
• Then wound up at Tufts to do my Masters and Ph.D. degree.
• Primarily interested in HCI, computer graphics and performance. That’s also where my professional experience lies.

12

About your instructor (4/7)

13

About your instructor (3/3)

14

Places where I worked on something “graphicsy” or performance related

(all of them)

About your instructor (6/7)

15

About your instructor (7/7)

16

And a big welcome if this happens to be your first semester here!

Let’s take a look at the Course Goals

• Let us start from the syllabus
• (which is the website)
• The course website is at https://mshah.io
• (Or google me if you cannot find the page)
• Office hours, location, etc. will be updated by the TA’s on piazza, my information is on the course website.

17

Icebreaker (If we have a small enough group to do this in person :) )

• Your name
• Program/Major
• Favorite Game/Digital Film/Artist/Game Engine/Movie

​

Online course: See piazza post and join in the conversation!

18

Covid-19 (“The Elephant in the Room”)

• If you’re not feeling well (whether Covid related or just a common cold)
• Stay home
• A backup recording (either audio, video, or last years similar audio/video) and the slides will be made available.
• Note:
• Usually I have a mask with me in my backpack -- I’ll try to wear one if you also wear one
• University set an expectation that folks are in-person this semester:
• This means regular (weekly) testing for everyone (myself included)
• Masks are needed indoors
• Social distancing the best we can
• On my end...the class is being modified from how I’d normally teach in person
• Nothing requires you to be ‘in-class’ **This class is fully remote**
• (The in-class activities are due a week from when they are released and you can do them from home)
• Obviously, if you don’t feel comfortable with something---let me know
• We’ll do the best we can, the situation is fluid in my eyes.
• Time for questions? Or just to acknowledge the situation of the return to ‘normalcy’ may be very obscure. Thoughts, questions, comments?

19

(Transition) Some Happy Things

20

A Note on Teamwork

• Most assignments are done individually in this course -- I want everyone to get the experience
• You can collaborate and share ideas, just add attribution in the assignments.
• For final project in this course, you may choose 1 partner (a team of 2).
• Most (Around 66% historically) complete the final project individually -- either way is fine.

21

Course Hardware (1/2)

• A laptop is recommended
• I do not care what operating system you use
• Mac, Linux (Ubuntu, Debian, etc.), Windows
• Your laptop however does need to be able to run graphics programs.
• If you do not have a laptop, (tentatively) the University Virtual machines with VMWare and/or ssh’ing to our labs should support our course
• Please talk to me privately if this is an issue

22

Course Hardware (2/2)

• The easiest/best thing to do is work on Ubuntu Linux like me :)
• (I do some testing on my Mac and Windows however)
• I will also plan to provide a Virtual Machine for Ubuntu Linux
• Note:
• Emulation of Linux on a Virtual machine is usually perfectly fine
• Important Note:
• Windows Subsystem for Linux (WSL) is not the same as a virtual machine
• WSL often works, but expect to do more debugging, and you should expect some weird behavior (thus prefer a Virtual Machine, dual boot Linux, etc.)

23

Course Text

• There is no required textbook
• (I would have emailed you weeks ago if so)
• Use learnopengl.com (free)
• There is a hardcover version available if you prefer it
• Computer Graphics Programming in OpenGL with C++ is a very pragmatic and approachable book -- it’s written by other professors for teaching a class like this
• Fundamentals of Computer Graphics is a more graphics agnostic look, breaking down the fundamental ideas of computer graphics
• The Real-Time Rendering book is probably the book you want to buy after the course.
• The website is excellent and has many links available: https://www.realtimerendering.com/

24

OpenGL Online Resources

• learnopengl.com
• Probably the most useful OpenGL website for getting started
• (Beware: some of the more advanced topics are not 100% accurate--but I’ll help)
• In large part our course follows along.
• http://www.opengl-tutorial.org/
• Also useful and provides many nice diagrams
• (And of course)
• Try stackoverflow if you run into weird compilation or linking issues.

25

YouTube

• At some point I leaned into YouTube heavily, I really like the platform, so here are some more resources!
• My OpenGL Playlist
• https://www.youtube.com/playlist?list=PLvv0ScY6vfd9zlZkIIqGDeG5TUWswkMox
• My SDL Playlist
• https://www.youtube.com/playlist?list=PLvv0ScY6vfd-p1gSnbQhY7vMe2rng0IL0

26

Other Vetted Texts (1/2)

• There is no required textbook -- but owning these will save you lots of time
• OpenGL Programming Guide is a reference guide telling you exactly how the API works
• OpenGL 4 Shading Language may be useful in the course for otherwise applying code, and in some cases has many nice samples showing graphics techniques beyond the programming guide.
• Anton’s OpenGL 4 Book could be swapped for OpenGL 4 Shading Language -- but it is also complementary

27

Other Vetted Texts (2/2)

​

• There is no required textbook -- but owning these will save you lots of time
• OpenGL Programming Guide is a reference guide telling you exactly how the API works
• OpenGL 4 Shading Language may be useful in the course for otherwise applying code, and in some cases has many nice samples showing graphics techniques beyond the programming guide.
• Fundamentals of Computer Graphics is a more graphics agnostic look, breaking down the fundamental ideas of computer graphics
• Anton’s OpenGL 4 Book could be swapped for OpenGL 4 Shading Language -- but it is also complementary

28

It may be a good idea to pick up at least one of the several books recommended (Anton’s below can be purchased cheaply on Kindle)

​

It’s a small investment to read an entire book that could help land you a career!

Course Readings

• Occasionally I will pull readings from the following texts
• When needed, I’ll provide links or samples as appropriate.
• OpenGL Insights which is a great series of articles on specific technical ideas
• www.openglinsights.com
• Great book for senior thesis project ideas
• GPU Gems which are freely available https://developer.nvidia.com/gpugems/gpugems/contributors
• SIGGRAPH or Game Developer Conference papers and talks may also be presented.

29

Expectation on reading / learning

1. You are going to read: https://learnopengl.com/ or one of the recommended graphics books.
2. You are going to watch or reference useful OpenGL Video Series �(Note: These series are not really ‘bingeable’ (Maybe Jamie King’s is) -- you should do a little bit every day)
1. My series
1. https://www.youtube.com/playlist?list=PLvv0ScY6vfd9zlZkIIqGDeG5TUWswkMox
2. Cherno
• https://www.youtube.com/playlist?list=PLlrATfBNZ98foTJPJ_Ev03o2oq3-GGOS2
3. Jaime King
• https://www.youtube.com/playlist?list=PLRwVmtr-pp06qT6ckboaOhnm9FxmzHpbY
4. Victor Gordon
• https://www.youtube.com/playlist?list=PLPaoO-vpZnumdcb4tZc4x5Q-v7CkrQ6M-
5. OGL Dev
• https://www.youtube.com/playlist?list=PLA0dXqQjCx0S04ntJKUftl6OaOgsiwHjA

30

My Teaching Style

• Everyone learns differently (we can argue if ‘learning styles’ actually exist though)--optimize as needed along the way
• There will be lectures (for auditory learners)
• Many visuals on slides (for visual learners)
• In-class labs (for kinesthetic learners)
• This is a very hands on class, we will build things
• There will be plenty of opportunity to make mistakes, so do not be afraid to be wrong
• The worst case scenario is we review
• Do ask questions!
• Occasionally I may even pause to write down the question
• I try to avoid randomly calling on students--but do participate!
• Come to office hours!

31

Fair Warning

• I break a lot of “powerpoint rules” for good presentations
• i.e. There will be more than “7 words on a line” of text.
• (I hope this avoids ‘death by powerpoint’)
• The reason is I want my slides to be helpful when you read through them later on.
• (I personally get confused when I read others slides online that are sparse or have no notes)
• Slides are available to follow before/during/after class

32

Email (some stats)

• On average I get over 100 e-mails a day now
• (On weekends it’s only about 30 or 40)
• Unfortunately, e-mails now have to be strategically managed which is the least exciting part of work
• I’d say around 30% of e-mails are requests where I have to type thoughtful responses or are asking me to deliver something unexpectedly on a short deadline.
• E-mail is also unfortunately ‘instant messenger’ to some folks which generates more emails
• Anyway...what this means it that using e-mail for this course is not sufficient--it makes it incredibly difficult for me to answer student questions at scale
• (And when I work from home, My rule is that I have to walk on a treadmill now when I answer emails. So keep in mind, I can only exercise for so long! :) )
• For students this means e-mail is not an efficient way to get in touch with me regarding this courses’ content (Personal matters though are fine!)

33

****Piazza >>> Email****

• Post on piazza general questions on non-personal matters to minimize e-mail
• You should be registered here: https://piazza.com
• (see course webpage for link)
• An active piazza is a good sign in my mind!
• With piazza other students or course staff can answer your questions faster
• (BUT--tagging only me and not the other staff on piazza is the same as emailing me, include the TAs!)
• Grab me after class to minimize e-mail
• Visit during office hours to minimize email
• Saturday’s typically I am offline
• (recharging in theory, likely prepping course materials)

34

This is an average day.

Piazza 0000

• Special board for almost every student I have ever taught in a class across multiple universities.
• You should already be subscribed
• If you do not have access or have added the course late, send me an e-mail.
• (Subscribe your non-university email if you prefer to this 0000 piazza board)

35

How to get help in the course (1/3)

• Piazza!
• Public post
• Get help on conceptual questions from other students, cours staff, or instructors
• Issues like:
• “linker error” and such are great things to take care of of piazza as a class.
• “I think there’s a bug in the support code”
• “What did professor mean by X” or “why did they structure it like this”
• Private post
• You can post a link to your github repository and push your code
• This is preferred, as that way we are not answering an ‘old’ question if we are debugging code.
• Note: I personally don’t really respond on Microsoft Teams unless it’s an emergency or we are otherwise meeting for office hours
• Note: E-mailing me, pinging me on teams, and posting on piazza simultaneously does not help me answer faster -- I get e-mail digest every few hours from the same source.
• Note: Please be respectful to pinging Teaching Assistants on Microsoft Teams

36

How to get help in the course (2/3)

• Office Hours
• Attend early and often!
• Wellness issues
• “I am struggling because of internal or external life circumstance X ....”
• ^ These are the types of questions appropriate for private email/office hour conversations.

​

37

How to get help in the course (3/3)

• Generally speaking ‘AI’ is useful as a ‘search engine’
• AI for generating code is not a good way to get help in this class.
• It’s a shortcut to try to get AI to generate code
• In this class, you have to understand computer science concepts from first principles, taking short cuts could cause issues later on.

38

**Words of Caution** (1/2)

• Every semester I get a few emails near the end of the semester telling me you’re struggling.
• It’s too late if you wait until you’re behind to ask for help.
• Be proactive -- you’re spending a LOT of money to be here.
• If you fall even 1 day behind, you need to reach out for help (e.g. piazza) and/or attend office hours.
• The course moves too fast, and the material in this course builds off the previous lesson.
• Learning how to ask for help early and often is a skill you need to exercise.
• This course is very technical, and requires you to be on top of your work.
• If you fall behind by more than 1 assignment, I just don’t have the bandwidth to keep track of ‘special deals’ for you to catch up
• e.g. Hey professor, my other courses are really hard this term, can I turn in all of your assignments late after doing my other courses assignments?
• Answers: no -- this course moves fast
• Incompletes (unless there is an extreme circumstance that would remove you from class) because you fall behind are an extremely rare option in this course.

39

**Words of Caution** (1/2)

• Every semester I get a few emails near the end of the semester telling me you’re struggling.
• It’s too late if you wait until you’re behind to ask for help.
• Be proactive -- you’re spending a LOT of money to be here.
• If you fall even 1 day behind, you need to reach out for help (e.g. piazza) and/or attend office hours.
• The course moves too fast, and the material in this course builds off the previous lesson.
• Learning how to ask for help early and often is a skill you need to exercise.
• This course is very technical, and requires you to be on top of your work.
• If you fall behind by more than 1 assignment, I just don’t have the bandwidth to keep track of ‘special deals’ for you to catch up
• e.g. Hey professor, my other courses are really hard this term, can I turn in all of your assignments late after doing my other courses assignments?
• Answers: no -- this course moves fast
• Incompletes (unless there is an extreme circumstance that would remove you from class) because you fall behind are an extremely rare option in this course.

40

You will be pushed this semester. This course is too important for those who really want to work in graphics for me not to push you -- some of you only get 1 graphics course before you apply for jobs.

I’ll provide as many resources as I can, but you have to put in the work.

Notes on Expectations (1/2)

• You have to keep up
• You do have to do the readings -- sometimes you will need to read the or watch a resource several times.
• This is not a good class where you can guess your way through by trial and error -- you have to think.
• This course continually ramps up -- especially towards the middle in terms of difficulty
• I try my best to mitigate this with the exercises, slides, etc.
• My assumption here is everyone wants to be a graphics programmer -- I am going to work you hard!

41

https://www.youtube.com/playlist?list=PLvv0ScY6vfd9zlZkIIqGDeG5TUWswkMox

https://learnopengl.com/

Notes on Expectations (2/2)

• In the past I have received messages such as:
• “I’m super busy with other classes, can I get an extension for yours?”
• No.
• Non-exhaustive List of Reason(s):
• It’s not fair to other students
• I don’t know if your other professors are also granting you extensions
• It’s not a good sales pitch to tell me my course is not important.
• “I need to take an incomplete for reason XYZ to extend my chance to do assignment/project XYZ”
• No.
• Non-exhaustive List of Reason(s):
• Too often this happens when I student has not communicated with me throughout the semester -- ‘incompletes’ are not ‘free extensions’ they are a mechanism for extreme circumstances that took you out of the course (e.g. You were abandoned on an island for three straight weeks with no internet)
• I cannot ‘retroactively’ apply both my thinking, and extensions -- especially when told well-after the fact.
• “I’ve been super pressed with finals/exams/assignments/life circumstance XYZ”
• I want to leave the door open for conversations to help -- but please consider it takes a lot of emotional and mental energy to reason through these. I have to have policies in place for equity to others and sometimes my own health.
• I’ll try my best to setup systems to be fair -- but I am not always able to provide unlimited flexibility -- there exist various mechanisms in the college otherwise to help you take care of life or revisit the course in another semester.

42

Expectations (1/2)

• For undergraduates
• From the prerequisites, you have made it through the prerequisites (e.g. CPSC 478 or Building Game Engines CPSC 411/511)
• For Graduates
• The same prerequisites as undergraduates, and otherwise you have enough programming experience that picking up a new programming language is normal
• For Everyone
• You should have some basic knowledge in using text editors/IDEs and github.
• You should also be able to compile, run, and debug programs.
• (Typically, I do not force a specific IDE or text editor, I best support the ones I know)

43

Expectations (2/2)

• You know one programming language well
• (e.g. C, C++, D, Rust, Java, Python, etc. )
• I’ll expect you have at least C programming experience
• In this course we are going to use a systems programming language: D specifically
• C or C++ knowledge is helpful with D
• C is the industry standard for graphics APIs, so any C-like language is great for learning graphics

44

Note: For this course we will primarily use the D language

​

• D translates relatively easily between any C++ examples you might find
• Graphics APIs are primarily written in C as it is
• Note: The D compiler can compile .c files alongside .d files if you choose

45

D Code

​

Standard features

Modern C++ 20 Code

• C++11 CTAD: line 15
• C++11 unordered_map : line 23
• C++11 for_each loop : line 25
• C++11 Structured Binding : line 25
• C++20 std::format : line 26

A few other notes

​

• I don’t support any IDE
• I use VIM
• Some IDE’s will give you false-positives for errors
• e.g. VSCode does not know all the import paths, etc.
• I’ll help where I can, but generally speaking you have to figure out your own text editor/IDE.

46

Who is this course is for?

• Primary Audience:
• Folks who want to work in Games/Entertainment
• Secondary Audience:
• Folks who want to learn about the Graphics Processing Unit (GPU)
• What makes a GPU different from a CPU?
• That is, how can we write code for it
• Why can some code run faster on a GPU
• Folks who want to learn a little more about memory on computers and GPUs
• Folks who want to improve their systems programming skills in an applied domain
• Folks who want to work in High Performance Computing
• Folks who may want to take other related courses in Computer Vision or Virtual Reality
• You get the idea, this course has some obviously specific domains, but the skills translate to becoming a better programmer.

47

One of my goals

• Is to prepare you to be a graphics engineer after leaving this course.
• I want you to be excited to search for “graphics engineers”
• Go work at Intel or AMD
• Go work on the next Pixar film
• Build a mobile, desktop, or console game,
• Go work on the next generation 3D printer.
• Build a Mixed Reality application
• I’ll be more than satisfied to hear you say “Mike, I got a job working in graphics!”

Let me know how I can help reach your goals.

48

Intel “Graphics Engineer”

49

Rockstar Games “Graphics Engineer”

50

51

52

Alright, let’s get into it already!

First Exercise

53

Quick Individual Activity

Get Inspired

• What is your Computer Graphics story going to be?

Directions

• Get a piece of paper out, a laptop, and write down a few sentences about where you’ll be in 4 months. What are your goals/hopes/dreams?
• If you do not know what to write, make it up.

54

Introduction to Computer Graphics

APIs and OpenGL

55

“Computer Graphics is about making pretty pictures” (1/2)

• This was a quote from a professor of mine during my undergraduate.

​

56

https://www.gia.edu/research-news-real-or-rendered#

“Computer Graphics is about making pretty pictures” (2/2)

• This was a quote from a professor of mine during my undergraduate.
• Can we drill into this idea a bit more though?
• (And after teaching this course a few times, I disagree it that computer graphics is only about pretty pictures)

57

https://www.gia.edu/research-news-real-or-rendered#

A more elegant sentence about this course

​

“What you need to show other people your dreams” � - Paraphrase of Ken Perlin from � Marschner’s Textbook

​

58

Ken Perlin

Computer Graphics

• Can be used to produce (synthesize) 2D or 3D images.
• These images might be completely synthetic, or produced by manipulating photos.
• This course is about the fundamental algorithms and mathematics to do both--though we will focus more on 3D.

59

2D image filters

3D Graphics in Unreal engine

Graphics Areas

Graphics spans multiple domains such as:

• 3D Modeling
• Rendering
• Animation
• User interaction
• Virtual Reality
• Visualization
• Image Processing
• 3D Scanning

60

3D Modeling

• Graphical applications assist artists in creating objects for games, movies, and simulations.
• Different 3D tools offer different techniques for sculpting and modeling geometry.

61

(top) wings3d programmed in Erlang was the first 3D tool I felt proficient in

(top) blender3D - box modeling technique using a reference image

Rendering (Offline)

• Disney Animation rendering real world lighting (top-right)
• Blender3D (Cycles rendering engine) (bottom-right)

62

Rendering (Real-Time)

• Real-Time Rendering Techniques we will explore
• Advanced lighting effects like normal mapping with a shading language (GLSL)

63

Left plane uses normal mapping technique (1 normal per pixel), right side does not (1 normal per polygon)

Here you’ll see the ‘blue-ish X’ and the normal map behind the scenes. We’ll learn about this later!

Animation

• Animation using a rig in Maya3D
• (Top and bottom-right)
• Some research tools below from Jali Research
• (bottom-left)

64

Animation (Particles)

• Particle Systems that are animated using procedural algorithms
• Bottom image is from Embergen
• (Written in the Odin Programming language)

65

User Interaction

• Stylus input to manipulate geometry
• (top-right)
• Track ball (bottom-left) and virtual joystick (bottom-right)

​

66

Virtual Reality

• Example of Playstation VR 1 from NASA
• (top-right)
• PlayStation VR 2
• (bottom-right)

67

Visualization | Data Visualization

68

Visualization of Queen band members involvement in various songs

Various New York Times data visualizations

Image Processing - Medical

• Volume Rendering to “see” inside your 3D models
• Uses ‘voxels’ to render.
• Can ‘slice through’ the 3D data so you can see ‘features’ of interest.
• Search: segmentation and registration of 3D data for more

69

Data Image Processing - Voxels

• Same “volume” (voxel) technique used here, this time with a gaming application

​

70

Image Processing 2D

• Image filters to manipulate color data (e.g. as would be done in Photoshop on top-right)
• Programmable shaders allow us to also do image processing tasks like selecting data from an image for animation
• Bottom-left (source)
• Filter effects like ‘bloom’ (bottom-right) can also be applied in real-time graphics

71

3D Scanning

• Demonstration of Sense 3D scanner
• Ability to bring in data from the real world as meshes.
• (And then 3D printing)

72

Computer Graphics Applications

Some of the previous domains you saw computer graphics in:

• Video Games
• Cartoons
• Visual Effects
• Animated Films
• CAD - Computer Aided Design
• Simulation
• Medical Imaging
• Information Visualization

73

Real-time vs Non-Real time

Computer Graphics

74

Two Broad Categories of Computer Graphics

In this course (Computer Graphics), we are focusing in this course on real-time graphics as opposed to offline graphics (Non-Interactive Computer Graphics)

1. Interactive computer graphics (real-time)
1. A video game, arcade game, VR Simulation, a 3D modeling tool
2. Offline graphics (pre-rendered)
• A pixar render which takes hours to generate 1 single quality image in a film
• A tool like instagram, which may process one static image at a time on a server
• A ray tracer (in general) would be a primary examples.

​

75

Interactive (Real-time) Computer Graphics

• Interactive computer graphics are simulations that can run in real-time and respond to user events.
• (e.g. a computer game, or as simple as rotating a 3D model on the screen)

76

Offline Computer Graphics

• Offline graphics have been already processed before being viewed.
• Typically this means there is no time limit to generate a frame.
• Observe bottom-right image how it takes several seconds to render each zoom in on the scene from Toy Story 4
• (e.g. A pixar movie that has been already rendered as a series of images)
• (e.g. Applying a filter to a 2D image, like with instagram)
• http://sciencebehindpixar.org/pipeline/rendering (Reference)

77

https://renderman.pixar.com/stories/pixars-usd-pipeline

3D Graphics API History

For computer graphics -- for a long time, there were no standard graphics APIs

78

A little bit of history of graphics APIs

• The first thing to know--they did not always exist!
• There were no common “Application Programming Interfaces”
• That is, no common library of code to draw pixels to a screen.
• There was the BIOS, that was it
• (The BIOS being the thing that shows up when you start your computer sometimes, and hope to usually never see again)
• Most every graphics programs needs at least two APIs to do something
• One API for getting input from the user
• One API for drawing pixels
• So what did graphics programmers use?

79

1980s to early 90s in gaming

​

• 1980 Battlezone is the first big 3D success
• Notice no color or texture on the 3D shapes
• Other things in the 1980s
• 1986 Steve Jobs helps fund Pixar
• Lots of 3D experimentation going on
• Would not be until 1992 where we see very appealing (by today’s standard) of games.
• Wolfenstein is released.

​

80

No GPUs

​

• For a long time, there were no Graphics Processing Units (GPUs) in machines.
• All 3D had to be processed on your CPU
• We’ll talk more about why this is expensive later on
• Today your machine (even laptops) likely have an integrated graphics card.
• Possibly even two graphics cards (one integrated, and one standalone Radeon or nVidia card)

​

81

Example of a ‘triangle’ being rasterized in software. Our hardware now does this for us much faster!

(FYI History of GPUs here)

​

• http://www.pcgamer.com/from-voodoo-to-geforce-the-awesome-history-of-3d-graphics/
• S3 Virge (Now costs $0.45)

​

​

82

S3 in 1995 thrust itself into this new territory with its ViRGE graphics series. Playing on the hype surrounding virtual reality a decade and a half ago, ViRGE stood for Virtual Reality Graphics Engine and was one of the first 3D GPUs to take aim at the mainstream consumer.

1990s - OpenGL Graphics API

• In 1991 SGI starts developing OpenGL
• This API supports multiple platforms (not just Microsoft)
• Version 1.1 supports texturing and has a Fixed Function Pipeline
• Version 1.5 starts pushing OpenGL Extensions (“Shaders”)
• Version 2.1 really starts enforcing a programmable pipeline with GLSL language.
• We will discuss these items called “vertex” and “fragment” shaders shortly
• Version 3.3/4.0 starts removing old functionality
• Only a programmable pipeline.
• Version 4.6 is what we use today.

83

Modern OpenGL examples (1/2)

84

http://i1-news.softpedia-static.com/images/news2/Unigine-Heaven-Benchmark-Supports-OpenGL-4-0-2.jpg

https://godotengine.org/article/godot-3-renderer-design-explained

Modern OpenGL examples (2/2)

• I always think of ‘water’ as a good ‘litmus test’ for how good graphics are in an application.

​

85

1990s

• Around 1995 Microsoft released its DirectX APIs
• https://en.wikipedia.org/wiki/DirectX
• The 3D API was known as Direct3D
• It was largely criticized at first, but now very widely accepted
• It is specific to Microsoft platforms.
• By around DirectX 7, Microsoft was making great improvements.
• Version 8 introduced a programmable pipeline with something called “Shaders”
• Version 9 supported 64 bit architectures
• Version 9 through 12 is what we see today.

86

Examples of the evolution of the D3D graphics API

​

87

Mount&Blade II I believe uses DirectX11

Examples of the evolution of the D3D graphics API

​

​

88

Examples of the evolution of the D3D graphics API

​

​

89

DX11 versus DX12 performance (source)

​

90

Example showing new ray tracing tech (See mirror)

​

91

Vulkan example of real-time Ray Tracing

​

• Example using the Diligent Engine / Abstraction layer for graphics
• https://www.codeproject.com/Articles/5291308/Ray-Tracing-has-become-Diligent

92

Which Graphics API will we learn in this course?

93

This Classes Graphics API

1. For this class, we will focus on one API: OpenGL
1. OpenGL
1. It’s what the pros use today and for most of the past
2. It’s widely available on platforms ranging from mobile, desktop, embedded systems, to consoles
3. It will help you transition to other APIs like Vulkan later on
2. (Optional) Building our own Software Rendering Library
• (It’s a great way to learn the fundamentals)
3. (Optional)
• Learning about Ray Tracing
1. It’s what the pros may default to in the future!

94

c

a

b

Real-time rendering with Modern OpenGL

• We will be learning specifically OpenGL 4.1 or greater
• It is likely everyone’s hardware will support 4.1 (It was released in 2010)--though we really will be fine with 3.3 features until the last few weeks.
• Any “OpenGL ...” “Introduction to OpenGL” textbook should also be fine.
• Just make sure it is modern (Anything after 2010 when OpenGL 4.1 was released may be safe)
• https://www.khronos.org/opengl/wiki/History_of_OpenGL
• “Old OpenGL” or “Fixed-Function Pipeline” OpenGL is not something we will cover in this class -- it is deprecated
• https://www.khronos.org/opengl/wiki/Fixed_Function_Pipeline

95

OpenGL https://www.opengl.org/ (1/4)

​

• OpenGL stands for “Open Graphics Library”
• “OpenGL is a specification implemented in the programming language C, though it can be used in other languages. It is built on the concept of a state machine. As an API, OpenGL depends on no one programming language feature, and can be made callable from almost any language with the proper bindings. Such bindings exist for most current programming languages”
• OpenGL is a specification that individual vendors (Nvidia, Intel, AMD, Qualcomm, Apple, etc.) implement on their hardware in a ‘video card driver’.
• The team working on the standard is known as the Architecture Review Board (ARB)
• These are the folks who decide which features get added to the specification, and often these folks are the individual vendors who would implement features in their hardware

96

OpenGL https://www.opengl.org/ (2/4)

​

​

• Because OpenGL is a specification it is up to AMD, NVidia, Intel, Qualcomm, etc. to implement it.
• Aside: The exact specification is here: https://www.khronos.org/registry/OpenGL/specs/gl/glspec33.core.pdf
• So when you hear “Did you update your graphics drivers”
• That is the equivalent to downloading a patch/update for your graphics hardware.

97

OpenGL https://www.opengl.org/ (3/4)

​

​

• OpenGL is primarily concerned with drawing graphics
• (and also has compute capabilities with the GPU)
• OpenGL is portable:
• operating system independent)
• Window system independent
• We as programmers are provided a C-API to work with OpenGL
• We will build an abstraction on top of the C-library to build a tiny graphics engine for interactive rendering

​

98

https://www.khronos.org/opengl/wiki/OpenGL_Reference

OpenGL https://www.opengl.org/ (4/4)

​

​

• As hardware improves over time, the OpenGL specification is updated, and then hardware vendors support new features.
• In OpenGL, new features are supported through ‘extensions’
• https://www.khronos.org/opengl/wiki/OpenGL_Extension

99

https://www.khronos.org/opengl/wiki/OpenGL_Reference

OpenGL vs Direct3D

• You might ask why we are learning OpenGL vs Direct3D
• https://en.wikipedia.org/wiki/Comparison_of_OpenGL_and_Direct3D
• OpenGL runs on all platforms (not just Microsoft or Apple platforms)
• Both are equally capable and achieve the same thing
• Once you know one, learning the other can be done by picking up a book on the subject.
• (Anticipated) Question: Well how about we learn Metal, DirectX 12 or Vulkan, or these other APIs
• Answer: The more you learn, the better! They all have there nuances, and OpenGL is a great place for us to start!
• If there’s another follow on graphics course, I’ll probably teach it in Vulkan as it’s a more low-level API

100

Programming Graphics

101

Pragmatically, how do we get started with graphics?

• First we are going to be using a systems programming language (e.g. D Language)
• So I need to teach you at least a little bit.
• Second is that we are going to be using the Simple Directmedia Layer (SDL)
• This is a C-based application programming interface (API) that allows us to create a window, handle keyboard input, and manage a few graphical things for us.

​

• So with that said, we’ll get started programming graphics soon enough!

102

A note about this course that is a little strange...

• We are going to start programming things from scratch
• This means getting a ‘simple triangle’ up on the screen can take some time.
• You’ll notice though about half way through the course that we really start to accelerate in the types of things we can render.
• So we’ll crawl a little bit, then walk, then start running when it comes to the complexity of our graphical applications...

​

103

Summary

• We have discussed the course logistics
• We have discussed that we are studying real-time graphics
• Coming up in the next module(s):
• We will re-introduce the D language for building a graphics application

104

For Your Homework

Our First Graphics Application

105

Obtaining the Course Monorepo

• I will now show you how to obtain the course materials again if you did not previously have the repository.

Steps:

• Create a personal github account (if you don’t already have one)
• Click this link: Spring 25
• https://classroom.github.com/a/aHHNO2X9
• Edit the readme.md with your real name -- that’s it!

106

How to use Git

• Check out the following resources for more
• These two videos should teach you most of what you need for your individual and project needs.

107

https://www.youtube.com/watch?v=PgNTp71sl0I

https://www.youtube.com/watch?v=HlYJpuwaXiE

(Useful handout for more help with git)

• Please otherwise see the readings (on this module) for more git resources
• See in your ‘monorepo’ -> docs -> Cheatsheets

​

108

**Quick note on expectations**

• Again -- code from the slides will be available here:
• https://github.com/MikeShah/ComputerGraphicsCode
• I have an expectation that you are going to download and actively try the examples in the repository.
• You might not understand what a ‘function pointer is’ and that’s okay
• I again have some expectation you’ll use resources provided (see to bottom-right) to pick up some new things.

109

https://www.youtube.com/playlist?list=PLvv0ScY6vfd9zlZkIIqGDeG5TUWswkMox

In-Class Activity

1. Complete the in-class activity from the schedule
1. (Do this during class, not before :) )
2. Please take 2-5 minutes to do so
3. These make up a total of 5% of your grade
• We will review the answers shortly

110