slike bài giảng đồ hoạ và hiện thực ảo - lê tấn hùng chương 1 ký thuật đồ họa và thực hiện ảo

Khoa CNTT - ĐHBK Hà nội
Email:
Tel: 0913030731
1
1
Lesson 1:
Kỹ thuật đồ họavàHiệnthực ảo
Computer Graphics And Virtual Reality
z Kỹ Thuật đồ họacơ sở
z Kỹ Thuật đồ họatiêntiến
z Hiệnthực ảo-VRML
Le Tan Hung

2
A Brief History of Computer
Graphics
1885 - CRT (Cathode Ray Tube)
1887 - Edison patents motion
picture camera
1888 - Edison
and Dickson
record motion picture photos
on a wax cylinder
3
A Brief History of Computer
Graphics
1926 – J.L. Baird
invents the
television.
30 line vertical,
black and red scan

.
4
Computer Graphics:
1960-1970
z 1960 William Fetter (Thuật ngữ kỹ thuật
đồ hoạ máy tính (Computer Graphics)
z 1960 - SAGE (Semi-Automatic
Ground Environment System) Bút
sáng
z 1960-1963 Dự án Sketchpad tại MIT
z 1963 Ivan shutherland (hộinghị Fall
Joint Computer - lần đầutiênkhả năng
tạomới, hiểnthị và thay đổi đượcthực
hiệntrongthờigianthựctrênmàn
CRT
)
z
Wireframe graphics
z Display Processors
z Storage tube
z
Ivan Sutherland’s PhD
thesis at MIT
– Vấn đề tương tác người
máy
– Loop
z Display something
z User moves light pen
z Computer generates new
display

– Sutherland tạo ra rất nhiều
thuật toán cho CG
5
A Brief History of Computer
Graphics
1963
z IBM creates the 360 models
– One of the First General Purpose
Mainframes
z SRI develops the mouse.
6
A Brief History of Computer
Graphics
z 1966 Ralph Baer creates
the 1
st
comsumer CG
product:
– Odyssey Pinball
z 1967
– GE introduces first full colour
real time flight simulator for
NASA
Khoa CNTT - ĐHBK Hà nội
Email:
Tel: 0913030731
2
7
Lịch sử phát triển
1970-1980

z CG:1970-1980
z Raster Graphics
z Beginning of graphics
standards
– IFIPS
z GKS: European effort
– Becomes ISO 2D standard
z Core: North American effort
– 3D but fails to become ISO
standard
8
A Brief History of Computer
Graphics
1973
z Michael Crichton’s “Westworld”
uses 2D graphics
z First time computer is used for image
manipulation.
z Featured scenes that showed
audiences the world viewed by the
eye circuitry of a synthetic human
(played by a very real Yul Brenner) in
a future Western theme park. This
effect was achieved with 2D computer
graphics tools mostly derived from
image processing techniques.
9
A Brief History of Computer
Graphics
1974

z Intel develop the 8080 processor.
1975
z Mandelbrot plots fractals
z Bill Gates starts Microsoft
1976
z Steve Jobs and Steve Wozniak start Apple.
1977
z Academy of Motion Pictures Art and Sciences
introduces Visual Effects category for Oscars.
10
A Brief History of Computer
Graphics
z 1977 Star Wars wins oscar for special
effects.
z 1978 Superman wins oscar for special
effects
z 1979 Alien wins oscar for visual effects.
z 1980 The Empire Strikes Back wins oscar
for visual effects.
11
80-90
z CG: 1980-1990
– Special purpose hardware
z Silicon Graphics geometry engine
– VLSI implementation of graphics pipeline
–
Industry-based standards
z PHIGS
z RenderMan
– Networked graphics: X Window System

– Human-Computer Interface (HCI)
12
A Brief History of Computer
Graphics
1981 IBM introduces the first IBM PC (16 bit 8088
chip)
•Raiders of the
Lost Ark wins
an oscar for
visual effects.
Khoa CNTT - ĐHBK Hà nội
Email:
Tel: 0913030731
3
13
A Brief History of Computer
Graphics
1982
z The Genesis Effect (ILM)
for Startrek II
is the first all
computer animated visual
effects shot for film.
14
A Brief History of Computer
Graphics
1983
z First Coke Polar Bears
Commercial
z 1984 PIXAR Opens

15
A Brief History of Computer
Graphics
1985
z The Last Starfighter is the first live
action feature film with realistic
computer animation of highly detailed
models.
1989
z The Abyss is the first movie to include
convincing 3D character animation.
16
Lịch sử phát triển
90-00
z CGraphics: 1990-2000
z OpenGL API
z Tạo ra bộ phim hoạt hình hoàn
chỉnh đầu tiên (Toy Story)
z Khả năng mới của phần
c
ứng
– Texture mapping
– Blending
– Accumulation, stencil buffer
z CGraphics: 2000-03
z Photorealism
z Graphics cards for PCs
dominate market
– Nvidia, ATI, 3DLabs
z Game boxes and game players

push the market
z CGraphics trở thành công cụ
cho công nghiệp sản xuất
phim: Maya, Lightwave
17
A Brief History of Computer
Graphics
1995
z Quake Released by
Id Software
z Toy Story becomes
the first fully 3D
computer animation
feature film.
18
A Brief History of Computer
Graphics
1996
z Independence Day wins
oscar for visual effects.
1997
z Titanic wins oscar for visual
effects.
z PIXAR wins oscar for best
short film: Geri’s Game.
Khoa CNTT - ĐHBK Hà nội
Email:
Tel: 0913030731
4
19

A Brief History of Computer
Graphics
1998
z Armageddon
z Mouse Hunt
z Bugs Life
1999
z The Matrix
z Star Wars: The Phantom
Menace
z Disney’s Tarzan
20
A Brief History of Computer
Graphics
2000
z Sony Playstation II
z Walking with Dinosaurs
z Disney’s Shrek
2002 Microsoft’s XBOX
21
Kỹ thuật đồ họavitính.
z Definition (ISO)
– Method and Technologies for converting data to and from a
graphics devices via a computer
z Computer Graphics (Kỹ thuật đồ hoạ máy tính) là mộtlĩnh
vựccủa Công nghệ thông tin mà ở đó nghiên cứu, xây
dựng và tậphợp các công cụ (mô hình lý thuyếtvàphần
mềm) khác nhau để:
z kiếntạo, lưutrữ, xử lýCácmôhình(model) vàhìnhảnh
(image) của đốitượng

z Computer graphics deals with all aspects of creating
images with a computer
Interactive Computer Graphics: - user controls contents, structure, and
appearance of objects and their displayed images via rapid visual feedback.
22
Kỹ thuật đồ hoạđiểm
(Sample based-Graphics)
z Các mô hình, hình ảnh của các đốitượng đượchiểnthị
thông qua từng pixel (từng mẫurờirạc)
z Đặc điểm:
– Có thể thay đổi thuộctính
– Xoá đitừng pixel của mô hình và hình ảnh các đốitượng.
– Cácmôhìnhhìnhảnh đượchiểnthị như mộtlưới điểm (grid) các
pixel rờirạc,
– Từng pixel đềucóvị trí xác định, đượchiểnthị vớimộtgiátrị rờirạc
(số nguyên) các thông số hiểnthị (màu sắchoặc độ sáng)
– Tậphợptấtcả các pixel của grid cho chúng ta mô hình, hình ảnh đối
tượng mà chúng ta muốnhiểnthị
23
Bitmap
Bitmap
lines,areas,
SRGP
library
Pascal / C
program
X Window
System
Graphics hardware
Image

image formats, compression, transfer
graphics algorithms
colour
positions
24
Graphical
Model
Rendering
Output
Device
Rendering
Parameters
Kỹ thuật đồ hoạ vector
z Mô hình hình học (geometrical
model) cho mô hình hoặc hình ảnh
của đốitượng
z Xác định các thuộc tính củamô
hình hình học này,
z Quá trình tô trát (rendering) để hiển
thị từng điểmcủamôhình, hình
ảnh thựccủa đốitượng
z Vector = geometrical model +
rendering
Khoa CNTT - HBK H ni
Email:
Tel: 0913030731
5
25
Vớ d v hỡnh nh ho Vector
26

Muscle ModelWireframe Model Skeletal Model
Skin
Hair
Render and Touch up
â Walt Disney and TSL
27
Raster and Vector Graphics
z Raster
Hỡnh nh v mụ hỡnh ca cỏc vt th c biu din bi tp hp cỏc
im ca grid
Thay i thuc tớnh ca cỏc pixel => thay i tng phn v tng vựng
ca hỡnh nh.
Copy c cỏc pixel t mt hỡnh nh ny sang hỡnh nh khỏc.
z Vector
Khụng thay ithuctớnhcatng imtrctip
X lý vitng thnh phn hỡnh hcc s canúvthchin quỏ
trỡnh tụ trỏt v hinth li.
Quan sỏt hỡnh nh v mụ hỡnh cahỡnhnh v s vt nhiugúc
khỏc nhau bng cỏch thay i im nhỡn v gúc nhỡn.
28
Phõn loicỏclnh vcca
Computer Graphics
Kỹ thuật phân tích và
tạo ảnh
Đồ hoạ hoạt hình và
nghệ thuật
Kỹ thuật nhận dạng
Xử lý ảnh
Đồ hoạ minh hoạ
CAD/CAM System

Kỹ thuật đồ
hoạ
Kiến tạo đồ
hoạ
Xử lý đồ
hoạ
29
Phõn loitheoh to
K thut ho hai chiu: l k thut ho mỏy tớnh s dng h
tohai chiu(h tophng), s dng rt nhiutrongk
thutx lý bn , th.
K thut ho ba chiu: l k thut ho mỏy tớnh s dng h
toba chiu, ũi hirt nhiutớnhtoỏnvphctphnnhiu
so vik thut ho hai chiu.
Kỹ thuật đồ hoạ
Kỹ thuật đồ hoạ 2 chiều
Kỹ thuật đồ hoạ ba chiều
30
Phõn loitheochcnng
z K thutx lý nh (COMPUTER IMAGING)
z K thutnhndng (Computer Vision techniques
attempt to provide meaning to computer) images.
z K thuttng hp nh (Computer Graphics)
z Geometry modelling
Khoa CNTT - ĐHBK Hà nội
Email:
Tel: 0913030731
6
31
Các ứng dụng tiêu biểucủakỹ thuật đồ

họa
z Xây dựng giao diệnngười dùng (User Interface)
z Tạo các biểu đồ trong thương mại, khoa học, kỹ thuật,
minh họa
z Tựđộng hoá văn phòng và chế bản điệntử
z Thiếtkế vớisự trợ giúp của máy tính (CAD_CAM)
z Lĩnh vựcgiải trí, nghệ thuậtvàmôphỏng
z Điềukhiển các quá trình sảnxuất (Process Control)
z Lĩnh vựcbản đồ (Cartography) GIS
32
33 34
Pixar: Monster’s Inc.
Square: Final Fantasy
35
Computer Aided Design (CAD)
36
CAD-CAM application
Khoa CNTT - ĐHBK Hà nội
Email:
Tel: 0913030731
7
37 38
Mô hình Hệđồhọa
 Mô hình hệ thống
 Mô hình chức năng
 Các chuẩncủahệđồhoạ
39
Application program
Graphics system
Graphics

hardware
Input and
output devices
Core,
GKS, GKS-3D
CGI (device interface)
CGM (metafile)
PHIGS (3D and realtime)
X-window
PHIGS+ (PEX)
IGES
OpenGL
DirectX
Metafiles
Operating system
Mô hình hệ thống đồ họa
40
Hệ thống đồ hoạ
(Graphics System)
z Interface between application software and graphics hardware system
z Consists of input subroutines and output subroutines accepting input data or
commands from a user and converting internal representations into external
pictures on screen, respectively
z Phầnmềm đồ hoạ hệ thống:
– Là tậphợpcáclệnh đồ hoạ củahệ thống (graphics output commands),
– Thựchiệncôngviệchiểnthị cái gì (what object) và chúng sẽđượchiểnthị như thế
nào (how).
– Phầnmềm đồ hoạ hệ thống là phầnmềmxâydựng trên cơ sở mộtthể loạiphần
cứng nhất định và phụ thuộc vào phầncứng.
z Phầncứng đồ hoạ:

– Là tậphợpcácthiếtbịđiệntử (CPU, bộ nhớ màn hình) giúp cho việcthựchiệncác
phầnmềm đồ hoạ.
41
concerned with:
- hardware
- how to display
(rasterization)
concerned with:
- modeling
- modeling transf.
- color models
- material property
- lighting property
G U I
MODELING RENDERING
DISPLAYING
what is
a table, a car,
•
••
( to describe)
to the computer
Geometric Engine
(to capture)
the description
create 2D image
from 2D / 3D
models
Rendering Engine
generate

image on
screen
(to show)
the image
Raster & Display Engine
concerned with :
- viewing & projection
- drawing & clipping
primitives
- local illumination &
shading
- texture mapping
Thành phần trong chức năng của
kỹ thuật đồ hoạ
42
3D Graphics Over World Wide Web
3D Graphics Over World Wide Web
SRGP
library
Pascal / C
program
X Window
System
Graphics hardware
Image
image formats, compression, transfer
graphics algorithms
colour
Drawing
packages

transformation
of objects
3D Graphics
projections
lighting,shading
lines,areas,
positions
Video
WWW
Animation
WWW
VRML
Khoa CNTT - ĐHBK Hà nội
Email:
Tel: 0913030731
8
43
Các chuẩn giao diện củahệđồhoạ
z GKS (Graphics Kernel System): chuẩnxácđịnh các hàm đồ hoạ chuẩn, được
thiếtkế như mộttậphợp các công cụđồhoạ hai chiềuvàbachiều.
– GKS Functional Description, ANSI X3.124 - 1985.
– GKS - 3D Functional Description, ISO Doc #8805:1988.
z CGI (Computer Graphics Interface System): hệ chuẩnchocácphương pháp
giao tiếpvớicácthiếtbị ngoạivi.
z CGM (Computer Graphics Metafile): xác định các chuẩnchoviệclưutrữ và
chuyển đổi hình ảnh.
z VRML (Virtual Reality Modeling Language): ngôn ngữ thựctại ảo, mộthướng
phát triển trong công nghệ hiểnthịđược đề xuấtbởi hãng Silicon Graphics,
sau đó đã đượcchuẩn hóa như mộtchuẩncôngnghiệp.
z PHIGS (Programmers Hierarchical Interactive Graphics Standard): xác định

các phương pháp chuẩn cho các mô hình thời gian thực và lập trình hướng
đối tượng.
– PHIGS Functional Description, ANSI X3.144 - 1985.
– PHIGS+ Functional Description, 1988, 1992.
44
Non-official industry standards
Các chuẩncủahệđồhoạ
z OPENGL thư viện đồ họa của hãng Silicon
Graphics, được xây dựng theo đúng chuẩn của một
hệ đồ họa.
– SGI’s OpenGL 1993
z DIRECTX thư viện đồ hoạ của hãng Microsoft
– Direct X/Direct3D 1997
45
OpenGL
z Software interface to graphics
hardware
z Client-server model
z 250 distinct commands
z Object specification + image
generation
z Simple primitives: points, lines,
polygons
(pixels, images, bitmaps)
z 3D rendering
z Commands interpreted using
client-server model
– Client (Application) issues
commands
– Server (OpenGL) interprets

and processes commands
– Frame buffer configuration
done by the window system
46
z Window tasks
z User input
z Complicated shapes
– OpenGL Utility Library (GLU)
– Window system support libraries
z GLX / WGL / PGL
– OpenGL Utility Toolkit (GLUT)
– OpenInventor
For portability, there are
no commands for these.
OpenGL-related Libraries
47
z Direct control of graphics hardware
z Direct control of input/output devices, and sound
Application program
Application program
Windows system
Windows system
Direct sound
Direct draw
Direct 3D
Direct input
Windows API
Windows API
Direct X
……

DirectX
48
OpenGL Design Goals
z SGI’s design goals for OpenGL:
– High-performance (hardware-accelerated) graphics API
– Some hardware independence
– Natural, terse API with some built-in extensibility
z OpenGL has become a standard (competing with DirectX) because:
– It doesn’t try to do too much
z Only renders the image, doesn’t manage windows, etc.
z No high-level animation, modeling, sound (!), etc.
– It does enough
z Useful rendering effects + high performance
– Open source and promoted by SGI (& Microsoft, half-heartedly)
Khoa CNTT - ĐHBK Hà nội
Email:
Tel: 0913030731
9
49
MànhìnhCRT
Raster Displays (early 70s)
like television, scan all pixels in regular pattern
use frame buffer (video RAM) to eliminate sync
problems RAM
¼ MB (256 KB) cost $2 million in 1971
50
MànhìnhCRT
SONY Trinitron CRT
NEC Hybrid Mask
Hitachi EDP

Standard Dot-trio
51
Display Technology:
Raster CRTs
z Raster CRT pros:
– Allows solids, not just wireframes
– Leverages low-cost CRT technology (i.e., TVs)
– Bright! Display emits light
z Cons:
– Requires screen-size memory array
– Discreet sampling (pixels)
– Practical limit on size (call it 40 inches)
– Bulky
– Finicky (convergence, warp, etc)
52
Các thiếtbị hiểnthị dạng điểm
53
CRT Displays
Advantages
z Fast repsonse (high resolution
possible)
z Full color (large modulation
depth of E-beam)
z Saturated and natural colors
z Inexpensive, matured
technology
z Wide angle, high contrast and
brightness
Disadvantages
z Large and heavy (typ. 70x70 cm,

15 kg)
z High power consumption (typ.
140W)
z Harmful DC and AC electric and
magnetic fields
z Flickering at 50-80 Hz (no memory
effect)
z Geometrical errors at edges
54
LCD-Liquid Crystal Display
z A transmissive technology
z Works by letting varying amounts
of a fixed-intensity white backlight
through an active filter
z Organnic crystals that lign
themselves together
z When external force is applied
they realign themselves
z This is used to change
polarisation and filter light
Khoa CNTT - ĐHBK Hà nội
Email:
Tel: 0913030731
10
55
Display Technology: LCDs
z Transmissive & reflective
LCDs:
– LCDs act as light valves, not
light emitters, and thus rely on

an external light source.
– Laptop screen: backlit,
transmissive display
– Palm Pilot/Game Boy:
reflective display
56
LCD Displays
Advantages
z Small footprint (approx 1/6 of CRT)
z Light weight (typ. 1/5 of CRT)
z Low power consumption (typ. 1/4 of
CRT)
z Completely flat screen - no
geometrical errors
z Crisp pictures - digital and uniform
colors
z No electromagnetic emission
z Fully digital signal processing possible
z Large screens (>20 inch) on desktops
Disadvantages
z High price (presently 3x CRT)
z Poor viewing angle (typ. +/- 50
degrees)
z Low contrast and luminance (typ.
1:100)
z Low luminance (typ. 200 cd/m2)
57
Màn hình Plasma
z Plasma display panels
– Similar in principle to

fluorescent light tubes
– Small gas-filled capsules
are excited by electric field,
emits UV light
– UV excites phosphor
– Phosphor relaxes, emits
some other color
58
Display Technology
z Plasma Display Panel
Pros
– Large viewing angle
– Good for large-format
displays
– Fairly bright
z Cons
– Expensive
– Large pixels (~1 mm versus
~0.2 mm)
– Phosphors gradually
deplete
– Less bright than CRTs,
using more power
59
Display Technology: DMDs
z Digital Micromirror Devices (projectors)
– Microelectromechanical (MEM) devices, fabricated
with VLSI techniques
60
Display Technology: DMDs

z DMDs are truly digital pixels
z Vary grey levels by modulating pulse length
z Color: multiple chips, or color-wheel
z Great resolution
z Very bright
z Flicker problems
Khoa CNTT - ĐHBK Hà nội
Email:
Tel: 0913030731
11
61
Màn hình hữu cơ
Organic LED Arrays
z Organic Light-Emitting Diode
(OLED) Arrays
– The display of the future?
– OLEDs hoạt động tương tự cơ chế
của LEDs bán dẫn
z Cấu trúc là màng chất dẻo mỏng:
– Màng film cấu tạo bởi các phần tử
hữu cơ, các phân tử phát sáng bởi
sự thăng hoa khí trong môi trường
chân không
– Mầu sắc được tạo thành từ các lớp
mầu gồm các phân tử huỳnh quang
được kích thích.
– Mịn, không to như các hạt tinh thể
và không phát nhiệt
– Có thể tạo màn hình rộng loại
OLEDs

62
Display Technologies:
Organic LED Arrays
z OLED pros:
– Transparent
– Flexible
– Light-emitting, and quite
bright (daylight visible)
– Large viewing angle
– Fast (< 1 microsecond off-
on-off)
– Can be made large or small
63
Display Technologies:
Organic LED Arrays
z OLED cons:
– Not quite there yet (96x64 displays) except niche markets
z Cell phones (especially back display)
z Car stereos
– Not very robust, display lifetime a key issue
– Currently only passive matrix displays
z Passive matrix: Pixels are illuminated in scanline order (like a raster
display), but the lack of phosphorescence causes flicker
z Active matrix: A polysilicate layer provides thin film transistors at each
pixel, allowing direct pixel access and constant illumination
See for more info
– Hard to compete with LCDs, a moving target
64
DAC
Direct Color Framebuffer

z Store the actual intensities of R, G, and B individually in the
framebuffer
z 24 bits per pixel = 8 bits red, 8 bits green, 8 bits blue
– 16 bits per pixel = ? bits red, ? bits green, ? bits blue
65
Color Lookup Framebuffer
z Store indices (usually 8 bits) in framebuffer
z Display controller looks up the R,G,B values before triggering
the electron guns
Frame Buffer
DAC
Pixel color = 14
Color Lookup
Table
0
1024
14
R G B
66
Framebuffers: True-Color
z A true-color ( 24-bit or 32-bit) framebuffer stores one byte
each for red, green, and blue
z Each pixel can thus be one of 2
24
colors
z Pay attention to
Endian-ness
z How can 24-bit
and 32-bit mean
the same thing

here?
Khoa CNTT - ĐHBK Hà nội
Email:
Tel: 0913030731
12
67
Framebuffers: Indexed-Color
z An indexed-color (8-bit or PseudoColor) framebuffer stores one byte per
pixel (also: GIF image format)
z This byte indexes into a color map:
z How many colors
can a pixel be?
z Still common on
low-end displays
(cell phones, PDAs,
GameBoys)
z Cute trick:
color-map animation
68
Framebuffers: Hi-Color
z Hi-Color was a popular PC SVGA standard
z Packs pixels into 16 bits:
– 5 Red, 6 Green, 5 Blue
– Sometimes just 5,5,5
z Each pixel can be one of 2
16
colors
z Hi-color images can exhibit worse quantization artifacts
than a well-mapped 8-bit image
69

– X : 0 ÷ Xmax 2 màu/ 1 bit
– Y : 0 ÷ Ymax 16 màu/ 4 bit
– 256 màu/ 8bit
– 2
16
màu/ 16 bit
– 2
24
màu/ 24 bit
– 640 × 480 × 16 → Video RAM = 2MB
– 1024 × 1024 × 24 → Video RAM = 24MB