Introduction to 2D and 3D Computer Graphics
Transcript of Introduction to 2D and 3D Computer Graphics
![Page 1: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/1.jpg)
CS447/547 2- 1
Understanding Raster Architectures
• Introduction to raster graphics:• Pixels & bitmaps• Block moves & raster operations • Drawing modes and transparency • Pipeline
Discuss Programming Project, Selection of Groups, and Research Work• Questions?
Introduction to 2D and 3DComputer Graphics
![Page 2: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/2.jpg)
CS447/547 2- 2
The objective for today’s lecture is to examine what is going on at a fairly low-level when we request a drawing operation to be performed.
Please note, you are definitely NOT restricted to just manipulating pixels at this low-level in your projects
We will move rather quickly through the materialand also cover material from packet #1 today.
If time, a scientific visualization video will give us insights as to when “voxels” (low-level) versus object models (higher level should be used
Introduction to 2D and 3DComputer Graphics
![Page 3: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/3.jpg)
CS447/547 2- 3
Like programming methodologies
– raster graphics must be examined in relation to
its underlying semantics
– how do we justify what is “good” or “realistic”
– the perceived quality of rendering can depend
on our perception, the evaluation criteria, the
viewing monitor (is it properly adjusted), the
viewing-room illumination, depth of the
pixmap
Using Raster GraphicsSome Thoughts
![Page 4: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/4.jpg)
CS447/547 2- 4
n In addition,
just because a graphics system performs an
operation that is desired, it may not perform
that operation in the fashion desired
– therefore, we must look beyond the surface and
examine the underlying semantics behind each
and every operation
– for example, are line segment endpoint’s
included in the line segment drawn? (Sproull
says :”yes”)
Using Raster GraphicsSome Thoughts
![Page 5: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/5.jpg)
CS447/547 2- 5
Pixels...
...are the smallest addressable unit on a raster graphics
device
...can be thought of as an individually-addressable dot
...stands for: picture element
...are grouped into rectangular arrays creating raster
output
Monochrome is "1-bit per pixel"
For devices supporting shades of gray or color...
...pixels are considered to have depth
Using Raster GraphicsPixels
![Page 6: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/6.jpg)
CS447/547 2- 6
Pixels...
...are the smallest modifiable element of a raster
device
...are device-dependent
...have a 1-to-1 correspondence with the device
coordinates of a raster device
...contain one or more bits of information
...can independently be assigned a value
representing an intensity or a color
Using Raster GraphicsPixels
![Page 7: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/7.jpg)
CS447/547 2- 7
When pixels are circular...
...no distortion occurs
Using Raster GraphicsPixels -- Shape
![Page 8: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/8.jpg)
CS447/547 2- 8
When pixels are elliptical...
...distortion can occur (implicit display xform)
...functions that use device coordinates are
affected
Using Raster GraphicsPixels -- Shape
![Page 9: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/9.jpg)
CS447/547 2- 9
Pixels -- Location relative to coordinates
Pixels on device coordinates Pixels between device coordinates
Using Raster Graphics
![Page 10: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/10.jpg)
CS447/547 2- 10
Pixels on device coordinates Pixels between device coordinates
• For lines:
Pixels -- Location relative to coordinatesUsing Raster Graphics
![Page 11: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/11.jpg)
CS447/547 2- 11
Pixels on device coordinates Pixels between device coordinates
• Guidelines for areas results in......the same number of pixels:
Pixels -- Location relative to coordinatesUsing Raster Graphics
![Page 12: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/12.jpg)
CS447/547 2- 12
Pixels on device coordinates Pixels between device coordinates
• Not using these guidelines for areas results in......different number of pixels:
Pixels -- Location relative to coordinatesUsing Raster Graphics
![Page 13: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/13.jpg)
CS447/547 2- 13
Resolution...
...on a raster graphics device is a measure of the
number of pixels per unit of distance along the
X and Y dimensions
...is not necessarily the same in the X and Y
dimensions
...can be, for example, 1024x768 (1K by 768),
2Kx2K, etc.
Using Raster GraphicsResolution
![Page 14: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/14.jpg)
CS447/547 2- 14
A bitmap is a region of computer memory
containing pixels
Bitmaps can be...
...displayable bitmaps
...nondisplayable bitmaps
...application-created bitmaps
...drawing bitmaps
Using Raster GraphicsBitmaps
![Page 15: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/15.jpg)
CS447/547 2- 15
Bitmaps...
...are uniquely identified by an identifier
...are therefore distinguishable
...are controllable by the application
Bitmaps can be...
...created
...deleted
...selected to be displayed out of
...selected to be drawn into
Using Raster GraphicsBitmaps
![Page 16: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/16.jpg)
CS447/547 2- 16
Displayable bitmaps...
...can be displayed on the display surface of a
raster device
...are predefined by the implementation
...can also be created by the application
...always exist
...support color the same as the physical device:
- direct
- indexed
Using Raster GraphicsBitmaps - Displayable
![Page 17: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/17.jpg)
CS447/547 2- 17
Nondisplayable bitmaps...
...cannot be displayed on the display surface of a
device
...may need to be copied to a displayable bitmap
to be seen
...are not predefined by the implementation
...can be created by the application
Two types of nondisplayable bitmaps
exist...full depth, indexed
Using Raster GraphicsBitmaps - Nondisplayable
![Page 18: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/18.jpg)
CS447/547 2- 18
Full depth bitmaps have the...
...same number of bits per pixel as displayable
bitmaps
...same color capabilities as displayable bitmaps
(either direct color or indexed color)
Full depth bitmaps are useful when the
implementation cannot create additional
displayable bitmaps
Using Raster GraphicsBitmaps - Full depth nondisplayable
![Page 19: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/19.jpg)
CS447/547 2- 19
Mapped bitmaps have...
...only one bit per pixel
...a foreground value
...a background value
Mapped bitmaps are useful for storing
graphics with only foreground and
background information
Using Raster GraphicsBitmaps - Mapped nondisplayable
![Page 20: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/20.jpg)
CS447/547 2- 20
For example, a mapped bitmap is an
efficient way to store information such as
bitmap character fonts, hatch styles, and
black and white patterns
Using Raster GraphicsBitmaps - Mapped nondisplayable
![Page 21: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/21.jpg)
CS447/547 2- 21
The background color...
...specifies the color that will be saved as the
background value when writing into a mapped
bitmap
...saves all other colors as the foreground value
when writing into a mapped bitmap
...specifies the color that the background value
will assume when reading from a mapped
bitmap
Using Raster GraphicsBitmaps - Mapped nondisplayable
![Page 22: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/22.jpg)
CS447/547 2- 22
The foreground color...
– ...specifies the color that the foreground value
will assume when reading from a mapped
bitmap
Colors can be lost when stored in a mapped
bitmap
Using Raster GraphicsBitmaps - Mapped nondisplayable
![Page 23: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/23.jpg)
CS447/547 2- 23
The drawing bitmap...
...is the bitmap into which pixels are written
...can be either displayable or nondisplayable
...cannot be seen unless it is also selected to be
the display bitmap as well
The drawing bitmap may be different than
the bitmap being displayed
Using Raster GraphicsBitmaps - Drawing
![Page 24: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/24.jpg)
CS447/547 2- 24
Raster operation functions... (rasterops)
...manipulate rectangular regions of pixels
Raster operation functions are...
...Bitblt functions
...Pixel array functions
Bitblt functions move and combine
rectangular regions of pixels between
bitmaps
Using Raster GraphicsRaster Operations
![Page 25: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/25.jpg)
CS447/547 2- 25
Pixel array functions move or combine
rectangular regions of pixels between a
bitmap and an array
RASTER OPERATION FUNCTIONS
OPERATE ON PIXEL DATA. THEY DO
NOT MANIPULATE GRAPHIC
OBJECTS. THERE IS NO INHERENT
STRUCTURE ASSOCIATED WITH THE
DATA ON WHICH THEY OPERATE
Using Raster GraphicsRaster Operations
![Page 26: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/26.jpg)
CS447/547 2- 26
Bitblt functions... (we called them pixblt)
...combine rectangular regions of pixels from...
...one or two source bitmaps to...
...a destination bitmap
The source bitmap can be any bitmap...
...displayable
...full depth nondisplayable
...mapped nondisplayable
Using Raster GraphicsRaster Operations -- Bitblts
![Page 27: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/27.jpg)
CS447/547 2- 27
Two-operand bitblt has...
...one source bitmap
...one destination bitmap
The pixels from the source bitmap are
moved to and combined with pixels in the
destination bitmap starting at the destination
origin point
Using Raster GraphicsRaster Operations - Source Destination Bitblts
![Page 28: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/28.jpg)
CS447/547 2- 28
Three-operand bitblt has...
...one source bitmap
...one pattern bitmap
...one destination bitmap
Using Raster GraphicsRaster Operations - Source Destination Bitblts
![Page 29: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/29.jpg)
CS447/547 2- 29
Using Raster GraphicsRaster Operations - Source Destination Bitblts
Drawing Mode = OR; Transparency = OPAQUE
![Page 30: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/30.jpg)
CS447/547 2- 30
Using Raster GraphicsRaster Operations - Three Operand Bitblts
Drawing Mode = OR; Transparency = OPAQUE
![Page 31: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/31.jpg)
CS447/547 2- 31
Drawing modes specify how pixels
representing a graphic object are combined
with pixels in the drawing bitmap during
rendering
Drawing modes...
...work with a source pixel (value of the pixel
representing the graphic object)
...destination pixel (value of the pixel in the
drawing bitmap before combination with the
graphic object)
Using Raster GraphicsDrawing Modes
![Page 32: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/32.jpg)
CS447/547 2- 32
Drawing mode combines the source and
destination pixels and places the result in
the drawing bitmap
Three common drawing mode classes are...
...BOOLEANOP
...ADDITIVEOP
...COMPARATIVEOP
Using Raster GraphicsDrawing Modes
![Page 33: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/33.jpg)
CS447/547 2- 33
• 0) d' = 0
• 1) d' = s AND d
• 2) d' = s AND (NOT d)
• 3) d' = s
• 4) d' = (NOT s) AND d
• 5) d' = d
• 6) d' = s XOR d
• 7) d' = s OR d
s = source pixeld = destination pixel before operationd' = destination pixel after operation
Using Raster GraphicsDrawing Modes - BOOLEANOP
![Page 34: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/34.jpg)
CS447/547 2- 34
• 8) d' = NOT (s OR d)
• 9) d' = NOT (s XOR d)
• 10) d' = NOT d
• 11) d' = s OR (NOT d)
• 12) d' = NOT s
• 13) d' = (NOT s) OR d
• 14) d' = NOT (s AND d)
• 15) d' =1
Using Raster GraphicsDrawing Modes - BOOLEANOP
![Page 35: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/35.jpg)
CS447/547 2- 35
Using Raster GraphicsDrawing Modes - BOOLEANOP
![Page 36: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/36.jpg)
CS447/547 2- 36
Using Raster GraphicsTransparency Examples
![Page 37: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/37.jpg)
CS447/547 2- 37
Using Raster GraphicsTransparency Examples
Using OpaqueTransparency
![Page 38: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/38.jpg)
CS447/547 2- 38
Using Raster GraphicsTransparency Examples
Using TransparentTransparency
![Page 39: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/39.jpg)
CS447/547 2- 39
Display Surface
Graphic Objects
Render Physically
Apply
Colour Table
Apply Implicit Display Transformation
Echo
Apply
Drawing Surface Clipping
Raster Pipeline
Components common with 2D and 3D
graphic object pipelines
![Page 40: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/40.jpg)
CS447/547 2- 40
Non Displayable
Bitmap
Displayable Bitmap
Drawing Bitmap
Display Bitmap
Display Surface
- Display bitmap connection
- Raster operation source bitmap connection
- Drawing bitmap connection
Graphic Objects
Render Physically
Apply
Colour Table
Apply Implicit Display Transformation
Echo
Apply
Drawing Surface Clipping
Displayable Bitmap
Non Displayable
Bitmap
Raster Pipeline
![Page 41: Introduction to 2D and 3D Computer Graphics](https://reader030.fdocuments.net/reader030/viewer/2022012623/61a26b1da8183279394dcdc5/html5/thumbnails/41.jpg)
CS447/547 2- 41
Source Bitmap(s)
Non Displayable
Bitmap
Displayable Bitmap
Drawing Bitmap
Display Bitmap
Display Surface
- Display bitmap connection
- Raster operation source bitmap connection
- Drawing bitmap connection
PIXEL ARRAY Function
GET PIXEL
ARRAY Function
BITBLT Functions
Graphic Objects
Render Phys ically
Apply
Colour Table
Apply Implicit Display Transformation
Echo
Apply
Drawing Surface Clipping
Displayable Bitmap
Non Displayable
Bitmap
Raster PipelineExample: bitmap connections