introduction to sdl and 2d computer graphics cs 1666 www
TRANSCRIPT
CS 1666www.cs.pitt.edu/~nlf4/cs1666/
Introduction to SDL and2D computer graphics
● First real-time computer display
● 1950's, MIT/US Government development
● Used as an air defense system into the 1980's
Graphics history: Whirlwind/SAGE
2
CRTs - Cathode Ray Tubes
3
● Pass list of objects to display to the hardware
● Once each object in the list is drawn, start over with a
new/revised list
● Each object could simply be a list of points to trace a
polygon
Vector/calligraphic displays
4
Laser light shows
6
Raster displays
7
● Frame aspect ratio:
○ Horizontal pixel count / vertical pixel count
■ E.g.,
● 16:9
● 4:3
● Pixel aspect ratio:
○ Pixel width / pixel height
■ At this point in time, almost always 1
Aspect ratios
8
Color CRT displays
9
LCD and OLED
11
Why RGB?
12
● How much memory needed to store the object list for a vector
display?
● How much memory is needed to store a raster image?
○ … How much space is needed per pixel?
Memory utilization
13
● Number of bits used to express the color of a pixel○ Or a single color component of a pixel (i.e., R, G, or B)
● 8-bit○ 256 total colors available○ Normally 3 bits R, 3 bits G, 2 bits B
● 16-bit "High color"○ Up to 65536 colors available○ Commonly 5R, 6G, 5B
● 24-bit "True color"○ 16,777,216 colors available○ 8R, 8G, 8B
■ 256 options for each channel● "Deep color"
○ 1.07 billion+ colors○ 30/36/48 bits per pixel
■ 10/12/16 bits per color
Color depth
14
Color Channels
15
● Assuming only 8-bit color, a 256x240 raster image would need
61,440 bytes of memory to store
○ 60KiB!
○ The NES only had 2KiB of RAM...
Back to memory needs...
16
● With the availability of cheaper RAM, became feasible to store an
entire "frame" of output in memory
● Allows us to decouple presentation of the image from compilation
of a raster image frame
● Also leads very easily to double buffering to avoid flickering
○ One buffer used to render the frame
○ Other is presented to the display
● FYI, "framebuffer" is somewhat of an overloaded term…
Framebuffers
17
Vector vs. raster graphics
18
● May want to blend pixel colors with images being drawn "behind"
the current image
● The alpha channel can be used to accomplish this
● 16-bit:
○ 5R, 5G, 5B, 1 bit for transparent or not
● 32-bit:
○ 8R, 8G, 8B, 8a
○ Another 256 steps for level of transparency
● Deep color:
○ 30/36/48 bit RGB -> 40/48/64 bit RGBa
Transparency
19
● Cross-platform library○ Linux○ Windows○ macOS○ iOS○ Android
● Abstracts multimedia hardware○ E.g.:
■ Video■ Audio■ Input devices
● We'll be using SDL 2.0 in this class○ Not backwards-compatible with SDL 1.2!
SDL - Simple DirectMedia Layer
20
Hello world
21
● A sprite is a 2D bitmap that is a part of some larger scene
● We could add sprites to the larger scene by having the CPU blit
them on to a surface
○ SDL blits essentially copy and instance of the sprite onto a
surface
Some definitions
22
● A texture is a driver-specific representation of pixel data
○ Can be efficiently rendered into a scene
● By rendering textures in SDL as opposed to blitting sprites,
we'll be using the GPU for drawing instead of the CPU
○ All of the examples for this class will be set up to use this
approach
Or we could let the GPU do it...
23