Khoa CNTT - ĐHBK Hà nội
Email: 
[email protected]
Tel: 0913030731
1
(c) SE/FIT/HUT 2002
Lesson 1:
Kỹ thuật đồ họa và Hiện thực ảo
Computer Graphics And Virtual Reality
 Kỹ Thuật đồ họa cơ sở
 Kỹ Thuật đồ họa tiên tiến
 Hiện thực ảo - VRML
Le Tan Hung
[email protected]
(c) SE/FIT/HUT 2003 2
Tổng quan về kỹ thuật đồ hoạ
 Các khái niệm tổng quan của kỹ thuật đồ hoạ máy 
tính
 Các kỹ thuật đồ hoạ
 Phân loại các lĩnh vực của kỹ thuật đồ hoạ
 Hệ đồ họa tương tác (interactive)
 Phần cứng đồ hoạ (Graphics Hardware)
(c) SE/FIT/HUT 2003 3
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
(c) SE/FIT/HUT 2003 4
A Brief History of Computer 
Graphics
1926 – J.L. Baird
invents the 
television.
30 line vertical, 
black and red scan.
(c) SE/FIT/HUT 2003 5
A Brief History of Computer 
Graphics
1963
 IBM creates the 360 models
 One of the First General 
Purpose Mainframes
 SRI develops the mouse.
(c) SE/FIT/HUT 2003 6
A Brief History of Computer 
Graphics
1966
 Ralph Baer creates the 1st comsumer CG product:
Odyssey Pinball
CuuDuongThanCong.com https://fb.com/tailieudientucntt
Khoa CNTT - ĐHBK Hà nội
Email: 
[email protected]
Tel: 0913030731
2
(c) SE/FIT/HUT 2003 7
A Brief History of Computer 
Graphics
1967
 GE introduces first full colour real time flight 
simulator for NASA
(c) SE/FIT/HUT 2003 8
A Brief History of Computer 
Graphics
1968
 John Whitney: Permutations
In "Permutations," (1968) he 
delineates a marvellous and exciting 
new world. One senses a 
choreographer. The movements are 
reminiscent of traditional ballet. The 
shapes follow the dictates of formal 
geometry more than those of abstract 
painting. Movement is three-
dimensional and the ambition for a 
more polished three-dimensional 
shaded space is apparent. 
(c) SE/FIT/HUT 2003 9
A Brief History of Computer 
Graphics
1973
 Michael Crichton’s
“Westworld” uses 2D graphics 
 First time computer is used for image 
manipulation.
 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. 
(c) SE/FIT/HUT 2003 10
A Brief History of Computer 
Graphics
1974
 Intel develop the 8080 processor.
1975
 Mandelbrot plots fractals
 Bill Gates starts Microsoft
(c) SE/FIT/HUT 2003 11
A Brief History of Computer 
Graphics
1976
 Steve Jobs and Steve Wozniak start 
Apple.
1977
 Academy of Motion Pictures Art 
and Sciences introduces Visual 
Effects category for Oscars.
(c) SE/FIT/HUT 2003 12
A Brief History of Computer 
Graphics
1977
 Star Wars wins oscar for 
special effects.
1978
•Superman wins oscar for 
special effects.
CuuDuongThanCong.com https://fb.com/tailieudientucntt
Khoa CNTT - ĐHBK Hà nội
Email: 
[email protected]
Tel: 0913030731
3
(c) SE/FIT/HUT 2003 13
A Brief History of Computer 
Graphics
1979
 Alien wins oscar for visual 
effects.
1980
•The Empire Strikes Back 
wins oscar for visual effects.
(c) SE/FIT/HUT 2003 14
A Brief History of Computer 
Graphics
1980
 Disney’s TRON is the first 
live action film with over 
20 mins of computer 
animations.
 Seagate Technology 
releases the HDD for PCs
(c) SE/FIT/HUT 2003 15
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.
(c) SE/FIT/HUT 2003 16
A Brief History of Computer 
Graphics
1982
 The Genesis Effect (ILM) 
for Startrek II is the first 
all computer animated 
visual effects shot for 
film.
(c) SE/FIT/HUT 2003 17
A Brief History of Computer 
Graphics
1983
 First Coke Polar Bears 
Commercial
 1984 PIXAR Opens
(c) SE/FIT/HUT 2003 18
A Brief History of Computer 
Graphics
1985
 The Last Starfighter is the 
first live action feature film 
with realistic computer 
animation of highly detailed 
models.
CuuDuongThanCong.com https://fb.com/tailieudientucntt
Khoa CNTT - ĐHBK Hà nội
Email: 
[email protected]
Tel: 0913030731
4
(c) SE/FIT/HUT 2003 19
A Brief History of Computer 
Graphics
1989
 The Abyss is the first 
movie to include 
convincing 3D character 
animation.
(c) SE/FIT/HUT 2003 20
A Brief History of Computer 
Graphics
1990
 Windows 3.0 ships
1993
 Myst
1994
 Playstation and N64 released
(c) SE/FIT/HUT 2003 21
A Brief History of Computer 
Graphics
1995
 Quake Released by 
Id Software
 Toy Story becomes 
the first fully 3D 
computer animation 
feature film.
(c) SE/FIT/HUT 2003 22
A Brief History of Computer 
Graphics
1996
 Independence Day 
wins oscar for visual 
effects.
(c) SE/FIT/HUT 2003 23
A Brief History of Computer 
Graphics
1997
 Titanic wins oscar 
for visual effects.
 PIXAR wins oscar 
for best short film: 
Geri’s Game.
(c) SE/FIT/HUT 2003 24
A Brief History of Computer 
Graphics
1998
 Armageddon
 Mouse Hunt
 Bugs Life
1999
 The Matrix
 Star Wars: The Phantom Menace
 Disney’s Tarzan
CuuDuongThanCong.com https://fb.com/tailieudientucntt
Khoa CNTT - ĐHBK Hà nội
Email: 
[email protected]
Tel: 0913030731
5
(c) SE/FIT/HUT 2003 25
A Brief History of Computer 
Graphics
2000
 Sony Playstation II
 Walking with Dinosaurs
 Disney’s Shrek
2002 Microsoft’s XBOX
(c) SE/FIT/HUT 2003 26
Kỹ thuật đồ họa vi tính.
 Definition (ISO)
 Computer Graphics (Kỹ thuật đồ hoạ máy tính)
 Computer graphics deals with all aspects of 
creating images with a computer
model –
Interactive Computer Graphics: 
(c) SE/FIT/HUT 2003 27
Kỹ thuật đồ hoạ điểm
(Sample based-Graphics)
 Các mô hình, hình ảnh của các đối tượng được hiển thị
thông qua từng pixel (từng mẫu rời rạc)
 Đặc điểm:
 Phương pháp để tạo ra các pixel
(c) SE/FIT/HUT 2003
Bitmap
lines,areas,...
SRGP
library
Pascal / C
program
X Window 
System Graphics hardware
Image
image formats, compression, transfer
graphics algorithms
colourpositions
(c) SE/FIT/HUT 2003 29
Graphical
Model
Rendering
Output 
Device
Rendering
Parameters
Kỹ thuật đồ hoạ vector
 Vector = geometrical 
model + rendering
(c) SE/FIT/HUT 2003 30
Ví dụ về hình ảnh đồ hoạ Vector
CuuDuongThanCong.com https://fb.com/tailieudientucntt
Khoa CNTT - ĐHBK Hà nội
Email: 
[email protected]
Tel: 0913030731
6
(c) SE/FIT/HUT 2003 31
Muscle ModelWireframe Model Skeletal Model
Skin Hair Render and Touch up
© Walt Disney and TSL
(c) SE/FIT/HUT 2003 32
Raster and Vector Graphics
 Raster
 Hình ảnh và mô hình của các vật thể được biểu diễn bởi tập hợp các 
điểm của grid
 Thay đổi thuộc tính của các pixel => thay đổi từng phần và từng vùng 
của hình ảnh. 
 Copy được các pixel từ một hình ảnh này sang hình ảnh khác. 
 Vector
 Không thay đổi thuộc tính của từng điểm trực tiếp
 Xử lý với từng thành phần hình học cơ sở của nó và thực hiện quá
trình tô trát và hiển thị lại.
 Quan sát hình ảnh và mô hình của hình ảnh và sự vật ở nhiều góc
độ khác nhau bằng cách thay đổi điểm nhìn và góc nhìn.
(c) SE/FIT/HUT 2003 33
Phân loại các lĩnh vực của
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¹
(c) SE/FIT/HUT 2003 34
Phân loại theo hệ toạ độ
Kü thuËt ®å ho¹
Kü thuËt ®å ho¹ 2 chiÒu
Kü thuËt ®å ho¹ ba chiÒu
(c) SE/FIT/HUT 2003 35
Phân loại theo chức năng
 Kỹ thuật xử lý ảnh (COMPUTER IMAGING)
 Kỹ thuật nhận dạng (Computer Vision techniques 
attempt to provide meaning to computer) images.
 Kỹ thuật tổng hợp ảnh (Computer Graphics)
 Geometry modelling
(c) SE/FIT/HUT 2003 36
Các ứng dụng tiêu biểu của kỹ
thuật đồ họa
 Xây dựng giao diện người dùng (User Interface)
 Tạo các biểu đồ trong thương mại, khoa học, kỹ thuật
 Tự động hoá văn phòng và chế bản điện tử
 Thiết kế với sự trợ giúp của máy tính (CAD_CAM)
 Lĩnh vực giải trí, nghệ thuật và mô phỏng
 Điều khiển các quá trình sản xuất (Process Control)
 Lĩnh vực bản đồ (Cartography)
CuuDuongThanCong.com https://fb.com/tailieudientucntt
Khoa CNTT - ĐHBK Hà nội
Email: 
[email protected]
Tel: 0913030731
7
(c) SE/FIT/HUT 2003 37 (c) SE/FIT/HUT 2003 38
(c) SE/FIT/HUT 2003 39
CAD-CAM application
(c) SE/FIT/HUT 2003 40
Hệ đồ họa tương tác
 Mô hình hệ đồ hoạ tương tác
 Các thành phần của hệ đồ hoạ tương tác
 Bộ xử lý tương tác với người sử dụng
 Các chuẩn của hệ đồ hoạ
(c) SE/FIT/HUT 2003 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
- global rendering
Thành phần trong chức năng của
kỹ thuật đồ hoạ
(c) SE/FIT/HUT 2003 42
Các thành phần của hệ đồ hoạ tương tác
Application
Data
Structure
Application
Program
Graphics
System
Computer Graphics Devices
CuuDuongThanCong.com https://fb.com/tailieudientucntt
Khoa CNTT - ĐHBK Hà nội
Email: 
[email protected]
Tel: 0913030731
8
(c) SE/FIT/HUT 2003 43
Model of RGP
Application
model
Application
program SRGP
Display Hardware
output pipeline
input pipeline
output primitives
output attributes
Canvascontrol
copyPixel
Input device measures
Input device control
(c) SE/FIT/HUT 2003
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
(c) SE/FIT/HUT 2003 45
Thành phần thư viện đồ hoạ
 Các thực thể cơ sở
 Điểm (pixel)
 Đường thẳng (line)
 Đường tròn (circle)
 Đa giác (polygon) ..v..v.
 Các thuộc tính
 Màu sắc (color)
 Kiểu đường vẽ (line style)
 Kiểu văn bản (text style)
 Mẫu tô (pattern).
(c) SE/FIT/HUT 2003 46
Bộ xử lý tương tác với người sử
dụng
 Hệ thống đồ hoạ thông thường phải chứa một tập hợp các thủ tục
(chương trình con) để xử lý với các thiết bị vào ra (I/O System). 
 hệ thống đồ hoạ sinh ra các thiết bị ngoại vi lôgic để tương tác
giữa người sử dụng và thiết bị ngoại vi này.
 Một chu trình điển hình của các chương trình ứng dụng quản lý
các thiết bị ngoại vi được gọi là vòng lặp sự kiện từ thiết bị
(event-driven loop )
(c) SE/FIT/HUT 2003 47
Hệ thống đồ hoạ
(Graphics System)
 Interface between application software and graphics hardware system
 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
 Phần mềm đồ hoạ hệ thống:
 Là tập hợp các lệnh đồ hoạ của hệ thống (graphics output commands), 
 Thực hiện công việc hiển thị cái gì (what object) và chúng sẽ được hiển thị như
thế nào (how).
 Phần mềm đồ hoạ hệ thống là phần mềm xây dựng trên cơ sở một thể loại phần
cứng nhất định và phụ thuộc vào phần cứng.
 Phần cứng đồ hoạ:
 Là tập hợp các thiết bị điện tử (CPU, bộ nhớ màn hình) giúp cho việc thực hiện
các phần mềm đồ hoạ.
(c) SE/FIT/HUT 2003 48
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
Giao diện hệ thống đồhọa
Interface of Graphics System
CuuDuongThanCong.com https://fb.com/tailieudientucntt
Khoa CNTT - ĐHBK Hà nội
Email: 
[email protected]
Tel: 0913030731
9
(c) SE/FIT/HUT 2003 49
Các chuẩn giao diện của hệ đồ hoạ
 GKS (Graphics Kernel System):
 GKS Functional Description, ANSI X3.124 - 1985.
 GKS - 3D Functional Description, ISO Doc #8805:1988.
 CGI (Computer Graphics Interface System):
 CGM (Computer Graphics Metafile):
 VRML (Virtual Reality Modeling Language):
 PHIGS (Programmers Hierarchical Interactive
 PHIGS Functional Description, ANSI X3.144 - 1985.
 PHIGS+ Functional Description, 1988, 1992.
 IGES 
(c) SE/FIT/HUT 2003 50
Non-official industry standards
Các chuẩn của hệ đồ hoạ
 OPENGL SGI’s OpenGL 1993
 DIRECTX Direct X/Direct3D 1997
(c) SE/FIT/HUT 2003 51
OpenGL
 Software interface to graphics 
hardware
 Client-server model
 250 distinct commands
 Object specification + image 
generation
 Simple primitives: points, lines, 
polygons (pixels, images, bitmaps)
 3D rendering
 Commands interpreted 
using client-server model
 Client (Application) issues 
commands
 Server (OpenGL) interprets 
and processes commands
 Frame buffer configuration 
done by the window system
(c) SE/FIT/HUT 2003 52
 Direct control of graphics hardware
 Direct control of input/output devices, and sound
Application programApplication progra
Windows systemindows syste
Direct sound
Direct draw
Direct 3D
Direct input
Windows APIindows API
Direct X
..
DirectX
(c) SE/FIT/HUT 2003 53
Các thiết bị vào ra dữ liệu
 Máy in
 Dot size: đường kính của một điểm in bé nhất mà máy
in có thể in được
 Addressability: khả năng địa chỉ hoá các điểm in có thể
có trên một đơn vị độ dài (dot per inch)
 Số lượng màu có thể vẽ trên một điểm
 Dot size Point per inch
 InkJet 8 - 20/ 100 inch 200 ÷600
 Laser 5/1000 inch 1500
 Máy vẽ 6 ÷ 15/1000 inch 1000 ÷ 2000
(c) SE/FIT/HUT 2003 54
Phần cứng đồ hoạ (Graphics 
Hardware)
 Các thành phần phần cứng của hệ đồ hoạ tương
tác
CuuDuongThanCong.com https://fb.com/tailieudientucntt
Khoa CNTT - ĐHBK Hà nội
Email: 
[email protected]
Tel: 0913030731
10
(c) SE/FIT/HUT 2003 55
Màn hình CRT
(c) SE/FIT/HUT 2003 56
Màn hình CRT
SONY Trinitron CRT
NEC Hybrid Mask Hitachi EDP
Standard Dot-trio
(c) SE/FIT/HUT 2003 57
Các thiết bị hiển thị dạng vector
 MOVE 10,15
 LINE 400,300
 LINE 600,800
 Refesh Buffer
DrawLine(A, B):
Turn beam off, 
move to A.
Turn beam on, 
move to B. A
B
(c) SE/FIT/HUT 2003 58
Graphics Devices
Display
processor
CRT
Alphanumeric keyboard
Stylus
Data tablet
Interface to
host computer
MOVE
10
15
LINE
100
25
CHAR
LU
CY
LINE
JMP
Refresh buffer memory
(Display commands)
(interaction data)
(c) SE/FIT/HUT 2003 59
Display
processor
CRT
Interface to host computer
(Display commands) (interaction data)
Keyboard
Data input00000000000000000000000001000000
00000000000000000000000001000000
00000000000000000000000111110000
00000000011000000001111111111111
00000000111100000000000111110000
00000011111111000000000001000000
00001111111111110000000001000000
00111111111111111100000000000000
00011111111111111000000000000000
00011111111111111000000000000000
00011111111111111000000000000000
00000000000000000000000000000000
Bitmap refresh buffer
(the 1’s are accentuated
for contrast)
Typical raster graphics display 
showing a house and a star
(c) SE/FIT/HUT 2003 60
Các thiết bị hiển thị dạng điểm
CuuDuongThanCong.com https://fb.com/tailieudientucntt
Khoa CNTT - ĐHBK Hà nội
Email: 
[email protected]
Tel: 0913030731
11
(c) SE/FIT/HUT 2003 61
LCD-Liquid Crystal Display
 A transmissive technology
 Works by letting varying 
amounts of a fixed-intensity 
white backlight through an 
active filter
 Organnic crystals that lign
themselves together
 When external force is applied 
they realign themselves
 This is used to change 
polarisation and filter light
(c) SE/FIT/HUT 2003 62
CRT Displays
Advantages
 Fast repsonse (high 
resolution possible)
 Full color (large modulation 
depth of E-beam)
 Saturated and natural colors
 Inexpensive, matured 
technology
 Wide angle, high contrast 
and brightness
Disadvantages
 Large and heavy (typ. 70x70 
cm, 15 kg)
 High power consumption (typ. 
140W)
 Harmful DC and AC electric 
and magnetic fields
 Flickering at 50-80 Hz (no 
memory effect)
 Geometrical errors at edges
(c) SE/FIT/HUT 2003 63
LCD Displays
Advantages
 Small footprint (approx 1/6 of CRT)
 Light weight (typ. 1/5 of CRT)
 Low power consumption (typ. 1/4 of 
CRT)
 Completely flat screen - no 
geometrical errors
 Crisp pictures - digital and uniform 
colors
 No electromagnetic emission
 Fully digital signal processing 
possible
 Large screens (>20 inch) on desktops
Disadvantages
 High price (presently 3x CRT)
 Poor viewing angle (typ. +/- 50 
degrees)
 Low contrast and luminance (typ. 
1:100)
 Low luminance (typ. 200 cd/m2)
(c) SE/FIT/HUT 2003 64
Future Research Areas
Hướng nghiên cứu
 Graphics accelerators
 parallel processing
 Geometric modeling
 physically-based 
modeling
 level of detail
 Motion control / 
synthesis
 kinematics / dynamics
 motion capture/ 
modification
 Rendering
 photo-realism
 real-time
 image-based rendering
 non-photorealistic 
rendering
 Scientific visualization
 Geometric algorithms
 User interface
CuuDuongThanCong.com https://fb.com/tailieudientucntt