Bài giảng Đồ họa hiện thực ảo - Bài 8: Ngôn ngữ mô hình hóa thực tại ảo VRML - Lê Tấn Hùng

Page 1
Lờ Tấn Hựng CNTT- ĐHBK Hà nội
Email: [email protected] 
(c) SE/FIT/HUT 2002
Ngôn ngữ mô hình hóa thực tại ảo
VRML
(c) SE/FIT/HUT 2002
VRML ? Lịch sử
„ VRML là một ngôn ngữ văn bản dùng để mô tả các môi tr−ờng t−ơng tác 
và các vật thể 3-D 
„ Các file text VRML có đuôi là .wrl 
„ VRML 1.0 dựa trên ngôn ngữ mô tả Silicon Graphics 3D gọi là “Open Inventor”. VRML 
1.0 cho phép mô tả các cảnh tỉnh và không t−ơng tác.
„ VRML 2.0 là một ngôn ngữ mô tả dựa trên Silicon Graphics và đ−ợc goi là “Moving 
Worlds”. 
„ VRML1 (1994) & VRML2 (1997) có mở rộng thêm các chủ đề liên quan
(c) SE/FIT/HUT 2002
Tính chất
„ Bạn có thể xem các file VRML nhờ trình duyệt VRML :
„ Một ứng dụng hỗ trợ VRML 
„ Một ứng dụng VRML nhúng vào một trình duyệt HTML 
„ Bạn có thể xem các file VRML từ đĩa cứng , hay qua mạng Internet 
„ Toàn bộ trang Web 
„ Nhúng vào trang Web 
„ Toàn bộ khung của trang Web
„ Nhúng vào khung của trang Web
„ Nhúng vào các ứng dụng đa thời gian
„ Bạn có thể tạo các file VRML nhờ : 
„ Một trình soạn thảo văn bản đơn giản
„ Một ch−ơng trình ứng dụng 
„ Một trình dịch định dạng và mô hình hóa 3D 
„ Một ngôn ngữ tạo vật thể (nh− ngôn ngữ kịch bản Perl )
(c) SE/FIT/HUT 2002
Cấu trúc file VRML
„ Trong file VRML gồm có : 
„ Đầu đề của file
„ Comments – chú thích 
của bạn 
„ Nodes – nút chứa các 
thông tin quan trọng của 
cảnh vật 
„ Fields – các thuộch tính 
của nút mà bạn có thể
thay đổi 
„ Values – các thuộc tính 
giá trị 
„ Và . . . 
#VRML V2.0 utf8
# example1.wrl - a yellow box
Shape
{ geometry Box{ } # default box
appearance Appearance # override 
appearance
{material Material # with a new 
material
{diffuseColor 1.0 1.0 0.0 # 
yellow
}
}
}
(c) SE/FIT/HUT 2002
Comments-chú thích
„ Lời chú thích bắt đầu với ký tự # .
„ Ký tự # trong nháy kép không phải bắt đầu chú thích.
„ Chú ý rằng dòng đầu của VRML 2.0 là :
#VRML 2.0 utf8
và là bắt buộc !
„ Từ khóa utf dùng để nói đến bộ ký tự quốc tế UTF-8 đ−ợc 
dùng trong file.
„ Lời chú thích và khoảng trắng có thể không đ−ợc bảo toàn 
bởi VRML document server.
(c) SE/FIT/HUT 2002
Phần tử cơ bản của VRML: Nút
„ Một file VRML gồm có một danh sách các nút, mỗi nút chứa một phần 
thông tin mô tả toàn cảnh.
„ Một nút có thể định nghĩa hình dạng vật thể, hay thuộc tính của của một 
đối t−ợng , nh− màu màu sắc và hệ tọa độ của nó.
„ Mỗi nút có một tên, theo sau là cặp dấu { } có thể không chứa tr−ờng nào 
hoặc nhiều tr−ờng.
„ Một câu lệnh tr−ờng gồm có tên tr−ờng sau đó có thể có một hay nhiều 
giá trị.Các tr−ờng có thể đ−ợc viết theo các trật tự khác nhau.
„ Tên của nút bắt đầu bằng ký tự hoa, tên tr−ờng bắt đầu bằng ký tự
th−ờng (case sensitive).
„ Ví dụ về nút
„ Shape, Box, Appearance, Material,lights, sounds, .
Page 2
Lờ Tấn Hựng CNTT- ĐHBK Hà nội
Email: [email protected] 
(c) SE/FIT/HUT 2002
Cấu trúc phân lớp
„ Nút Shape chứa hai tr−ờng, geometry và appearance, mỗi tr−ờng lại 
chứa các nút khác đ−ợc coi nh− giá trị của chúng.
„ Shape
{ appearance NULL exposedField SFNode
geometry NULL exposedField SFNode
}
„ Đôi khi nút Shape có một tr−ờng Appearance nh−ng không có tr−ờng 
geometry (ví dụ nh− các vật thể không nhìn thấy!)
„ Tr−ờng geometry chứa nút Box và tr−ờng appearance coi nút 
Appearance nh− là giá trị của có.
„ Nút Appearance lại chứa một nút khác là Material.
„ Câu trúc cây của nút mà nút lại đ−ợc chứa trong nút khác gọi là scene 
graph.
(c) SE/FIT/HUT 2002
Cấu trúc cảnh
„ VRML giúp bạn chia một lớp thành các khoanh có thể quản lý đ−ợc .
„ Mỗi nút riêng lẻ thì rất đơn giản, sự kết nối giữa các nút cho phép tạo ra 
các lớp phức tạp.
„ Nút shape đ−ợc tạo nên trung tâm của thế giới VRML . 
„ Một file VRML có thể chứa nhiều nút shape 
„ Các nút shape có thể trùng lên nhau khi chúng đ−ợc tạo nên ở cùng một 
vị trí.
„ Bạn nên xem và sử dụng một trong các tr−ờng geometries sau
z Shape
geometry
appearance z Appearance
material
z Box
z Material
diffuseColor
(c) SE/FIT/HUT 2002
Cơ bản về nút shape
„ Box
{size 8 12 10 # x, y, z (=w, h, 
d)
}
Xem code Chạy ví dụ
„ Cone
{ bottomRadius 5 # so 10 
units wide
height 12
side TRUE
bottom TRUE
Xem code Chạy ví dụ
}
„ Nút Shape là những viên gạch 
tạo nên thế giới VRML Các nút 
Shape gốc là các khối chuẩn : 
• Box 
• Cone 
• Cylinder 
• Sphere 
• Text
„ Các tr−ờng của nút Geometry 
điều khiển kích th−ớc 
„ Kích th−ớc th−ờng có đơn vị là m, 
nh−ng có thể bất cứ đơn vị gì
(c) SE/FIT/HUT 2002
Cơ bản về nút shape
„ Cylinder
{ radius 4 # chiều rộng là 8
height 6
bottom TRUE # “cup” có cạnh và đáy
side TRUE
top FALSE # nh−ng không có đỉnh
}
Xem code Chạy ví dụ
„ Sphere # đơn giản nhất trong các nút shape
{ radius 2 # nh−ng cũng là phức tạp
} Xem code Chạy ví dụ
(c) SE/FIT/HUT 2002
Nút text
„ Tránh tạo ra các đặc tả kỹ thuật Web-based 3D/VR.
„ Text rất hữu ích ở các hệ chuyên gia,ví dụ nh− trong khoa học về trực quan.
„ Text
{ string “Hi!” # multi-field
length 0 # stretch to this width (0=natural width)
fontStyle FontStyle
{ family“SERIF” # or SANS or TYPEWRITER
style “PLAIN” # or BOLD ITALIC
size 4
}
} Xem code Chaỵ ví dụ
(c) SE/FIT/HUT 2002
Cấu trúc ảnh bitmap
„ Sử dụng ảnh bitmap thay cho một mô hình 3D thật cụ thể có thể tiết kiệm 
đ−ợc nhiều thời gian xử lý...
„ Tuy vậy việc sử dụng rộng rãi ảnh bitmap có thể có những bất lợi sau:
„ Cấu trúc của ảnh sẽ đ−ợc gủi cho trình duyệt ,có thể phải qua một 
quá trình thông tin chậm.
„ Thiết kế một ảnh bitmap và đ−a nó lên màn hình là công đoạn xử lý 
khá là kỹ l−ỡng.
Page 3
Lờ Tấn Hựng CNTT- ĐHBK Hà nội
Email: [email protected] 
(c) SE/FIT/HUT 2002
Cấu trúc trong VRML 
„ Appearance
{ texture ImageTexture
{ url “skin.gif” # GIF, JPG or PNG
repeatSTRUE # repeat or stretch?
repeatT TRUE
}
} Xem code Chạy ví dụ
„ Các Texture có thể là một URL đầy đủ hoặc chỉ là một URLt−ơng đối đơn 
giản nh− sử dụng ở trên.
„ Có ba kiểu nút texture là : ImageTexture, MovieTexture and PixelTexture
Xem code Chạy ví dụ
(c) SE/FIT/HUT 2002
Hệ tọa độ
„ Một file VRML xây dựng nên các thành phần của thế giới VRML 
„ Một file thành đ−ợc xây dựng trong thế giới hệ toạ độ
„ Theo mặc định , tất cả các vật thể đ−ợc xây dựng từ gốc của hệ toạ độ
„ VRML sử dụng hệ toạ độ thuận .hệ toạ độ Đề Các
„ Đơn vị chuẩn đo chều dài và khoảng cách trong VRML là m.
„ Góc là radian.
„ Một vòng quay là 2π radian.
„ 360 là 2π radian, khoảng 6.28 radian,
90 là π/2 radian, khoảng 1.57 radian.
(c) SE/FIT/HUT 2002
Chuyển đổi một hệ toạ độ
„ Một nút transform tạo ra một hệ toạ
độ có: 
„ Positioned :gốc
„ Rotated :góc quay
„ Scaled :tỷ lệ
„ Liên hệ với hệ toạ độ cha của nó 
„ Các vật thể đ−ợc xây dựng trong hệ
toạ độ mới đ−ợc định vị ,quay và tỷ lệ
cùng với nó. 
„ Nhóm các nút Transform tạo ra 
một nhóm với hê toạ độ của chính 
nó
• rotation – h−ớng 
• scale – kích cỡ
• translation – vị trí
• children – các vật thậ tạo 
Transform { 
translation . . . 
rotation . . . 
scale . . . 
children [ . . . ] }
(c) SE/FIT/HUT 2002
Tr−ờng children
„ Tr−ờng children bao gồm một danh sách một hay nhiều nút
„ Transform { . . . 
children [
Shape { . . . }
Shape { . . . }
Transform { . . . } . . . ] }
(c) SE/FIT/HUT 2002
Nút transform
„ Tr−ờng Translation định vị hệ toạ
độ bởi X,Y và Z
„ Transform { # X Y Z 
translation 2.0 0.0 0.0 children 
[ . . . ] }
„ Tr−ờng Scale để co hay giản một 
hệ toạ độ dựa vàu hệ số tỷ lệ ở
các trục X, Y, và Z 
„ Transform { # X Y Z scale 0.5 
0.5 0.5 children [ . . . ] }
„ Tr−ờng Rotation định h−ớng hệ toạ độ
quay quoanh một cạnh bởi một góc 
quay 
• Góc th−ờng đ−ợc đu bằng đơn 
vị radian
• radian = độ/ 180.0 * 3.141
Transform { # X Y Z Angle 
rotation 0.0 0.0 1.0 0.52 
children [ . . . ] }
(c) SE/FIT/HUT 2002
Nút transform
„ Co giãn , xoay và dịch một hệ toạ độ, cái này sau cái kia 
Transform {
translation 2.0 0.0 0.0 
rotation 0.0 0.0 1.0 0.52 
scale 0.5 0.5 0.5 
children [ . . . ] }
„ Các thao tác đ−ợc thực hiện từ d−ới lên bottom-up: 
„ Tr−ờng children đ−ợc co giãn ,xoay rồi sau đó mới dịch 
„ Thứ tự giữa các tr−ờng đ−ợc ấn định, độc lập với trật tự của các tr−ờng
Xem code Chạy ví dụ
Page 4
Lờ Tấn Hựng CNTT- ĐHBK Hà nội
Email: [email protected] 
(c) SE/FIT/HUT 2002
nút Appearance
„ Các vật thể gốc có màu phát ra từ bề 
ngoài là màu trắng 
„ Bạn có thể điều khiển màu của một 
vật thể:
• Màu bóng 
• Màu phát ra
• Tính trong suốt 
• Tính không chiếu sáng
• C−ờng độ ánh sáng bao 
quanh
„ Một nút Appearance miêu tả toàn 
bộ hình dạng của vật thể
• Tr−ờng material gồm các 
thuộc tính nh− color, 
transparency, etc. 
„ Shape { 
appearance Appearance { 
material . . . } 
geometry . . . }
(c) SE/FIT/HUT 2002
nút Material
„ Một nút Material điều khiển các thuộc tính về chất liệu của vật thể
• diffuseColor – màu bóng chính
• emissiveColor – màu phát chính
• transparency – Trong suốt hay không 
„ Shape { 
appearance Appearance { 
material Material {
diffuseColor 0.8 0.8 0.8
emissiveColor 0.0 0.0 0.0 
transparency 0.0 } 
} 
geometry . . . } 
(c) SE/FIT/HUT 2002
Nút material
„ Nút Material cũng có thể điều khiển tính chiếu sáng của một vật thể
• specularColor – điểm có màu nổi bật nhất
• shininess – kích cở chỗ nổi bật nhất
• ambientIntensity – hiêu ứng ánh sáng xung quanh 
„ Shape {
appearance Appearance { 
material Material {
specularColor 0.71 0.70 0.56 
shininess 0.16
ambientIntensity 0.4 } } 
geometry . . . } Xem code Chạy ví dụ
(c) SE/FIT/HUT 2002
Bảng màu th−ờng dùng
0.120.83 0.83 0.830.20 0.20 0.710.10Plastic Blue
0.200.61 0.13 0.180.27 0.00 0.000.15Metalic Red
0.200.64 0.00 0.980.10 0.03 0.220.17Metalic Purple
0.160.71 0.70 0.560.22 0.15 0.000.40Gold
0.080.75 0.33 0.000.30 0.11 0.000.26Copper
0.100.70 0.70 0.800.30 0.30 0.500.30Aluminum
shininessspecularColor
diffuse
Color
ambient
IntensityMô tả
(c) SE/FIT/HUT 2002
nút Group
„ Thông th−ờng chúng ta cẩn nhóm các 
đối t−ợng lại với nhau. VRML dùng nút 
Group để thực hiện điều này
„ Nút Group có thể có các nút con.
„ Có thể chính các nút con là các nút
group .
„ Có các kiểu nút group sau:
„ Bạn có thể nhóm các vật thể lại với 
nhau để tạo thành một vật thể phức 
tạp .
„ VRML có nhiều nút group bao gồm
Group { . . . }
Switch { . . . }
Transform { . . . } 
Billboard { . . . } 
Anchor { . . . } 
Inline { . . . }
Xem code Chaỵ ví dụ
BillboardSwitchCollision
InlineAnchor
LODGroupTransform
(c) SE/FIT/HUT 2002
Kết nối tới một vị trí khác
„ Cũng nh− trong trang Web , siêu liên kết cũng sẵn có trong VRML.
„ Có thể kết nối tới các kiểu dữ liệu hợp lệ , bao gồm các trang VRML 
khác, các trang HTML và các ứng dụng CGI .
„ Vị trí (x, y, z) của con trỏ có thể đ−ợc truyền tới URL, chỉ thực sự có ích với 
các ứng dụng CGI.
Page 5
Lờ Tấn Hựng CNTT- ĐHBK Hà nội
Email: [email protected] 
(c) SE/FIT/HUT 2002
Các nút Group-Switch-Transform
„ Nút Group tạo ra các nút cơ bản 
khác 
„ Mỗi nút child trong group là đ−ợc 
hiển thị
„ Group { children [ . . . ] }
„ Nút nhóm Switch tạo ra một nhóm có 
thể chuyển cho nhau.
„ Chỉ có một nút child group is 
trong nhóm là đ−ợc hiển thị 
„ Bạn chọn nút child nào
• Nút con đ−ợc đánh số t−ờng 
minh từ 0 
• A -1 không chọn nút con nào 
Switch { whichChoice 0 choice [ . . . ] 
} 
Xem code Chaỵ ví dụ
„ Nút Transform tạo ra một nhóm dựa 
trên chính hệ toạ độ của nó 
„ Mỗi nút child là đ−ợc hiển thị
Transform { 
translation 0.0 0.0 0.0 
rotation 0.0 1.0 0.0 0.0 
scale 1.0 1.0 1.0 children [ . . . ] }
„ Nút nhóm Billboard tạo ra một nhóm 
với hệ toạđộ đặc biệt
• Mỗi nút child đ−ợc hiển thị 
displayed 
• Hệ toạ độ trở lại mặt xem
„ Billboard {
axisOfRotation 0.0 1.0 0.0 
children [ . . . ] }
(c) SE/FIT/HUT 2002
Nút Anchor và Inline
„ Nút Anchor tạo ra một nhóm mà hoạt 
động nh− kiểu có thể kích chuột đ−ợc 
„ Chỉ nút child là đ−ợc hiển thị
„ Kích chuột vào nút child theo sau 
bởi một URL
„ Tr−ờng description đặt tên cho nút 
anchor 
Anchor {
url "stairwy.wrl" 
description "Twisty Stairs" 
children [ . . . ] }
„ Xem code Chạy ví dụ
Nút Inline tạo ra một nhóm đặc biệt từ 
nội dung của một file VRML khác
„ Nút con đọc từ file đ−ợc chọn bởi 
URL 
„ Mỗi nút child là đ−ợc hiển thị
„ Inline { url "table.wrl" }
„ Inline {
url "table.wrl" } . . . 
Transform { 
translation -0.95 0.0 0.0 
rotation 0.0 1.0 0.0 3.14 
children [ Inline { url "chair.wrl" } ] } 
Xem code Chạy ví dụ
(c) SE/FIT/HUT 2002
Đặt tên
„ Nếu nhiều vật thể giống nhau về các 
yếu tố hình học hay hình dạng , bạn 
phải dùng nhiều nút giống hệt nhau
„ Thay vào đó , định nghĩa một tên 
cho nút tìm thấy đầu tiên 
„ Sau đó, sử dụng tên đấy để chia sẻ
cho nút t−ơng tự ở trong ngữ cảnh 
mới
„ Cú pháp DEF tạo ra tên cho một 
nút
„ Shape { 
appearance Appearance { 
material 
DEF RedColor
Material { diffuseColor 1.0 0.0 0.0 
} } geometry . . . }
„ DEF bắt buộc phải ký tự hoa 
„ Có thể đặt tên cho một nút nào đấy 
„ Tên có thể là hầu hết các chuỗi ký 
tự và số
„ Trong một file tên phải là duy 
nhất 
(c) SE/FIT/HUT 2002
Từ khóa use
„ Từ khoá USE cho phép sử dụng 
một nút đã đ−ợc đặt tên tr−ớc 
„ Shape { 
appearance Appearance {
material 
USE RedColor } 
geometry . . . }
Xem code Chạy ví dụ
„ USE bắt buộc phải là chử hoa 
„ Sử dụng lại nút đã đ−ợc đặt tên 
gọi là một biến hay một thể hiện
„ Một nút đã đ−ợc đặt tên có thể có 
một vài thể hiện
„ Mỗi thể hiện chia sẻ cùng một 
miêu tả về nút đấy 
„ Chỉ có thể có thể hiên mà tên 
của nút đã đ−ợc định nghĩa 
trong cùng một file
(c) SE/FIT/HUT 2002
−u điểm
„ Đặt tên và sử dụng nút: 
„ L−u những gì đã đánh vào
„ Giảm kích th−ớc file 
„ Cho phép thay đổi nhanh chóng các vật thể có cùng thuộc tính 
„ Tăng tốc độ cho quá trình xử lý trên trình duyệt 
„ Tên cũng cần thiết cho cảnh động... 
(c) SE/FIT/HUT 2002
Giới thiệu hoạt cảnh
„ Các nút nh− Billboard và Anchor có các hành động xây dựng sẵn 
„ Bạn có thể tạo ra hành động của riêng bạn nh− làm cho các vật thể có 
thể di chuyển,xoay, co giãn và hơn thế nữa 
„ Chúng ta cần một ph−ơng thức để kích , thời gian hoá, và đáp ứng một 
chuỗi các sự kiện theo một trật tự để một sự t−ơng tác tốt hơn giữa ng−ời 
dùng và thế giới bên ngoài
„ Hầu hết các nút đều có thể là thành phần trong một dòng hoạt cảnh 
„ Nút hoạt động nh− các phần điện tử ảo 
„ Nút có thể gửi và nhận các sự kiện 
„ Các đ−ờng dây nối các nút lại với nhau
„ Một sự kiện là một thông báo đ−ợc gửi giữa các nút 
„ Một giá trị dữ liệu (giống nh− sự dịch chuyển) 
„ Thời gian hoàn thành (Khi sự kiện đ−ợc chứng nhận là đã đ−ợc gửi)
Page 6
Lờ Tấn Hựng CNTT- ĐHBK Hà nội
Email: [email protected] 
(c) SE/FIT/HUT 2002
Thêm các sự kiện
„ Để quay một vật thể: 
• Nối một nút mà gửi sự kiện rotation với tr−ờng rotation của nút 
Transform
„ Để làm một vật thể nhấp nháy: 
• Nối nút gửi sự kiện color vớii tr−ờng diffuseColor của nút
Material
(c) SE/FIT/HUT 2002
Cài đặt hoạt cảnh
„ Để cài đặt một dòng hoạt cảnh , bạn cần ba thứ : 
„ Một nút gửi sự kiện 
„ Nút phải đ−ợc đặt tên với câu lệnh DEF
„ Một  ... ve : 
„ Ra dữ liệu là TRUE khi bộ thời gian bắt 
đầu
„ Ra dữ liệu là FALSE khi bộ thời gian 
kết thúc
„ Tr−ờng ra dữ liệu time : 
„ Đ−a ra thời gian tuyệt đối 
„ Tr−ờng ra dữ liệu fraction_changed : 
„ Đ−a ra các giá trị từ 0.0 tới 1.0 trong 
suốt một chu ký
„ Đặt lại giá trị 0.0 lúc bắt đầu mỗi chu 
kỳ
Xem code Chạy ví dụ
(c) SE/FIT/HUT 2002
Chuyển đổi thời gian ra toạ độ
„ Để kích hoạt vị trí của một vật thể
VRML cung cấp: 
• Một danh sách khoá về vị 
trí key positions cho đ−ờng 
di chuyển 
• Thời gian bắt đầu ở mỗi vị 
trí 
„ Nút interpolator có thể chuyển đổi 
một đầu vàu thời gian thành một 
đầu ra toạ độ
• Khi thời gian ở giữa hai 
khoá vị trí, nút interpolator 
sẽ tính toán vị trí trung gian 
„ Interpolating positions
„ Mỗi khoá vị trí cùng với đ−ờng 
dẫn có: 
„ Một khoá giá trị key value
(nh− là một vị trí) 
„ Một khoá thời gian phân đoạn 
„ Phép nội suy sẽ điền vàu các giá
trị vàu giữa các giá trị khoá: 
„ Fractional TimePosition
„ 0
„ 0.1
„ ..
„ 1
(c) SE/FIT/HUT 2002
Nút positioninterpolator
„ Nút PositionInterpolator miêu 
tả vị trí của đ−ờng dẫn 
• key – khoá thời gian phân 
đoạn
• keyValue – khoá vị trí
„ PositionInterpolator { key [ 0.0, 
. . . ] keyValue [ 0.0 0.0 0.0, . . . ] 
}
„ Th−ờng để gửi vào sự kiện đầu 
vào set_translation của nút 
Transform
„ Sự kiện đầu vào set_fraction : 
• Đặt thời gian phân đoạn 
hiện thời theo khoá đ−ờng 
dẫn 
„ Sự kiện đầu ra value_changed : 
• Đ−a ra vị trí theo đ−ờng 
dẫn mỗi khi fraction đ−ợc 
đặt 
Xem code Chạy ví dụ
(c) SE/FIT/HUT 2002
Sử dụng các nút interpolator khác
„ Kích hoạt vị trí PositionInterpolator
„ Kích hoạt h−ớng OrientationInterpolator
„ Kích hoạt co giãn Position Interpolator
„ Kích hoạt màu sắc ColorInterpolator
„ Kích hoạt tính trong suốt ScalarInterpolator
Page 8
Lờ Tấn Hựng CNTT- ĐHBK Hà nội
Email: [email protected] 
(c) SE/FIT/HUT 2002
„ OrientationInterpolator
„ Nút OrientationInterpolator mô
tả đ−ờng dẫn h−ớng 
• key – khoá thời gian phân 
đoạn
• keyValue – khoá về xoay 
(gồm cạnh và góc)
„ OrientationInterpolator { key [ 
0.0, . . . ] keyValue [ 0.0 1.0 0.0 
0.0, . . . ] }
„ Th−ờng gửi giá trị về góc xoay 
vào sự kiện set_rotation của nút 
Transform
„ PositionInterpolator
„ Nút PositionInterpolator mô tả
đ−ờng dẫn vị trí hay tỷ lệ
• key – khoá thời 
gian phân đuạn
• keyValue – khoá
vị trí (hoặc tỷ lệ)
• PositionInterpolator { 
key [ 0.0, . . . ] keyValue [ 
0.0 0.0 0.0, . . . ] }
• Th−ờng gửi giá trị vị trí vào 
sự kiện set_scale của nút 
Transform
(c) SE/FIT/HUT 2002
Colorinterpolator-scalarinterpotator
„ ColorInterpolator
„ Nút ColorInterpolator mô tả đ−ờng 
dẫn màu sắc
• key – khoá thời gian phân 
đoạn
• keyValue – khoá màu 
(đỏ,xanh d−ơng,xanh da trời)
„ ColorInterpolator { key [ 0.0, . . . ]
keyValue [ 1.0 1.0 0.0, . . . ] }
„ Th−ờng gửi vàu sự kiện đầu vào 
set_diffuseColor hay 
set_emissiveColor của nút 
Material
„ Xem code Chạy ví dụ
„ ScalarInterpolator
„ Nút ScalarInterpolator mô tả
đ−ờng dẫn vô h−ớng
• key – khoá thời gian phân 
đoạn
• keyValue – khoá vô
h−ớng (dùng cho bất cứ
vật thể nào)
„ ScalarInterpolator { key [ 0.0, . . 
. ] keyValue [ 4.5, . . . ] }
„ Th−ờng gửi vào sự kiện 
set_transparency của nút 
Material
„ Xem code Chạy ví dụ
(c) SE/FIT/HUT 2002
nút Sensor
„ Có 7 kiểu nút sensor .
„ Nút sensor dò các hành động của ng−ời dùng và phát ra một 
sự kiên.
„ Bạn có thể liên kết các sự kiện này tới các nút khác để tạo ra 
chu kỳ đơn gồm có nguyên nhân_kết quả.
„ Bốn bài cuối cùng trong phần “VRML Resources | Example 
VRML Worlds” của Website là nh−ng ví dụ hay về các nút
sensor và liên kết với các sự kiện.
(c) SE/FIT/HUT 2002
nút Sensor
„ Nút ProximitySensor phát hiện ra vị trí quan sát gần nhất
„ Nút TouchSensor phát hiện sự kiện kích chuột
„ Nút TimeSensor là bộ đếm thời gian
„ Tất cả các nút CylinderSensor, PlaneSensor and 
SphereSensor phát hiện trạng thái kéo các vật thể.
„ Nút VisibilitySensor nhận biết một đối t−ợng là hữu hình đối 
với ng−ời dùng
(c) SE/FIT/HUT 2002
nút Sensor viewer
„ Motivation
„ Cảm ứng vị trí ng−ời dùng cho phép kích hoạt các hoạt cảnh 
• Khi một vùng hữu hình đối với ng−ời dùng 
• Khi ng−ời dùng ở trong một vùng nào đó 
• Khi ng−ời dùng va chạm với một vật thể nào đó 
„ LOD và Billboard là các nút đặc biệt có các đáp ứng với viewer sensors 
đ−ợc xây dựng săn 
„ Có 3 kiểu nút viewer sensor: 
• Nút VisibilitySensor cảm biến nếu ng−ời dùng có thể thấy một 
vùng nào đó a region 
• Nút ProximitySensor cảm biến khi ng−ời dùng đến phạm vi xung 
quanh vật thể
• Nút Collision cảm biến xung đột giúp điều khiển và phát hiện 
xung đột 
(c) SE/FIT/HUT 2002
Dùng visibilitysensor và proximitysensor
„ Hai nút VisibilitySensor và ProximitySensor cảm biến vùng vật thể
dạng hộp 
• center – tâm vùng 
• size – kích th−ớc vùng
„ Cả hai nút có đầu ra giống nhau :
• Sự kiện enterTime – gửi thời gian vào vùng vào hay lúc hữu hình 
• Sự kiện exitTime – gửi thời gian vào vùng ra hay lúc không hữu 
hình
• Sự kiện isActive – gửi true ở vùng vào, false ở vùng ra 
Page 9
Lờ Tấn Hựng CNTT- ĐHBK Hà nội
Email: [email protected] 
(c) SE/FIT/HUT 2002
Nút VisibilitySensor
„ Nút VisibilitySensor cảm biến nếu ng−ời dùng nhìn thấy hoặc ngừng 
quan sát một vùng nào đó
• center và size –tâm và kích th−ớc của vùng
• enterTime và exitTime – gửi thời gian vào\ra
• isActive –gửi giá trị true/false vào vùng vào\vùng ra 
„ DEF VisSense VisibilitySensor { center 0.0 0.0 0.0 size 14.0 14.0 14.0 
} ROUTE VisSense.enterTime TO Clock.set_startTime
(c) SE/FIT/HUT 2002
nút ProximitySensor
„ Nút ProximitySensor cảm biến khi ng−ời dùng vào/ rời khỏi một vùng nào đó
• center và size – kích th−ớc và vị trí của vùng
• enterTime và exitTime –gửi thời gian vào vùng vào/vùng ra
• isActive – gửi giá trị true/false nếu vào vùng vào/ vùng ra 
„ DEF ProxSense ProximitySensor { center 0.0 0.0 0.0 size 14.0 14.0 14.0 } 
ROUTE ProxSense.enterTime TO Clock.set_startTime 
„ ProximitySensor
• Nút ProximitySensor cảm biến khi ng−ời dùng đang ở trong 
vùng 
• position và orientation –gửi vị trí và h−ớng khi ng−ời dùng 
đang ở trong vùng
• DEF ProxSense ProximitySensor { . . . } ROUTE
• ProxSense.position_changed TO
PetRobotFollower.set_translation
Xem code Chạy ví dụ
(c) SE/FIT/HUT 2002
nút Collision
„ Nút Collision cảm biến đ−ợc khi tầm 
quan sát của ng−ời dùng v−ớng các vật 
thể
„ collide – cho phép/không cho 
phép cảm biến 
„ proxy – vật thể đơn giản đ−ợc 
cảm biến thay cho các nút con 
„ children – các nút con đ−ợc cảm 
biến
„ collideTime – gửi thời gian khi 
ng−ời dùng chạm vào vật thể
„ DEF Collide Collision { collide TRUE 
proxy Shape { geometry Box { . . . } } 
children [ . . . ] } ROUTE 
Collide.collideTime TO
OuchSound.set_startTime 
„ Xem code Chạy ví dụ
„ Tối −u hoá việc phát hiện xung đột
„ Sự kiện collision luôn đ−ợc kích hoạt 
theo ngầm định 
„ Tắt nó bất cứ khi nàu có thể! 
„ Tuy nhiên, một khi nút collision cha 
tắt thì nút child không thể bật nó trở
lại! 
„ Kết quả phát hiện xung đột là từ ng−ời 
dùng va chạm với một vật thể chứ
không phải là vật thể va chạm với 
ng−ời dùng 
„ Sử dụng nhiều nút sensor
„ Một số nút sensor có thể cảm biến 
cùng một lúc 
„ Bạn có thể tạo ra nhiều 
nútvisibility, proximity, and 
collision sensor
„ Các vùng cảm biến có thể chông 
lên nhau 
„ Nếu nhiều nút sensor đ−ợc kích 
hoạt, chúng sẽ thực hiện 
(c) SE/FIT/HUT 2002
Các nút sensor hành động
„ Có 4 nút sensor hành động 
chính:
• TouchSensor cảm biến khi 
chạm vào vật thể
• SphereSensor khi kéo chuột
• CylinderSensor khi kéo 
chuột
• PlaneSensor khi kéo chuột
„ Nút Anchor là nút cảm biến 
hành động có mục đích đặc biệt 
mà các đáp ứng đ−ợc xây dựng 
sẵn
„ Cảm biến các vật thể
„ Tất cả các cảm biến hành 
động cảm biến đ−ợc tất cả
các vật thể cùng nhóm
„ Cảm biến đ−ợc kích hoạt khi 
khi con trỏ của ng−ời dùng 
chạm phải vật thể đ−ợc cảm 
biến
Xem code Chạy ví dụ
(c) SE/FIT/HUT 2002
Touchsensor và spheresensor 
„ Nút TouchSensor cảm biến sự va 
chạm của con trỏ
• isOver – gửi giá trị true/false 
khi con trỏ đang ở trong hay 
ở ngoài vùng vật thể
• isActive – gửi giá trị 
true/false khi chuột đ−ợc 
nhấn hay thả
• touchTime –đ−a ra thời gian 
khi chuột đ−ợc thả
„ Transform { children [ DEF 
Touched TouchSensor { } 
Shape { . . . } . . . ] }
Xem code Chạy ví dụ
„ Nút SphereSensor cảm biến sự
dich chuyển con trỏ tạo ra sự
xoayquanh hình cầu
• isActive –gửi các giá trị 
true/false khi con chuột 
đ−ợc nhấn hay thả
• rotation_changed - đ−a 
ra sự quay khi rê con 
chuột
„ Transform { children [ DEF 
Rotator SphereSensor { } 
DEF RotateMe Transform { . 
. . } ] } ROUTE 
Rotator.rotation_changed 
TO RotateMe.set_rotation
(c) SE/FIT/HUT 2002
Cylindersensor-planesensor
„ Nút CylinderSensor nhận biết 
con trỏ đ−ợc rê và làm cho vật 
thể xoay quanh hình trụ
• isActive – gửi giá trị 
true/false khi chuột đ−ợc 
nhấn hay thả
• rotation_changed – làm 
cho vật thể quay khi kéo 
„ Transform { children [ DEF 
Rotator CylinderSensor { } 
DEF RotateMe Transform { . 
. . } ] } ROUTE 
Rotator.rotation_changed 
TO RotateMe.set_rotation
„ Xem code Chạy ví dụ
„ Nút PlaneSensor nhận biết con trỏ
đ−ợc rê và làm dịch chuyển vật thể
trên một mặt phẳng
• isActive – gửi các giá trị 
true/false khi chuột đ−ợc 
nhấn hay thả
• translation_changed – làm 
cho vật thể dịch chuyển khi 
rê chuột 
„ Transform { children [ DEF 
Mover PlaneSensor { } DEF
MoveMe Transform { . . . } ] } 
ROUTE 
Mover.translation_changed TO
MoveMe.set_translation
„ Xem code Chạy ví dụ
Page 10
Lờ Tấn Hựng CNTT- ĐHBK Hà nội
Email: [email protected] 
(c) SE/FIT/HUT 2002
Sử dụng nhiều nút sensor
Nhiều nút sensor có thể cảm biến cùng một vật thể nh−ng. . .
• Nếu các nút sensor ở trong cùng một nhóm :
• Tất cả đều có thể đáp ứng các sự kiện
• Nếu các nút sensors có độ sâu khác nhau trong cấu trúc cây của 
nút : 
• Nút sensor sâu nhất sẽ đáp ứng 
• Các nút khác không đáp ứng
(c) SE/FIT/HUT 2002
ví dụ sử dụng các nút sensor
#Clock to drive animations
DEF Clock TimeSensor { cycleInterval 10.0 loop TRUE }
# Colour changes for sphere (red -> green -> blue -> red)
DEF NewColour ColorInterpolator { key [0.0, 0.33, 0.66, 1.0 ]
keyValue [1.0 0.2 0.2, 0.2 1.0 0.2, 0.2 0.2 1.0, 1.0 0.2 0.2 ] }
. . . (Above is Grouped with the object we’re changing)
# use clock to run a ColorInterpolator, generating smoothly varying colour
ROUTE Clock.fraction_changed TO NewColour.set_fraction
# use varying colour value to feed material's diffuseColor field
ROUTE NewColour.value_changed TO
SphereColour.set_diffuseColor
(c) SE/FIT/HUT 2002
các ngôn ngữ kịch bản
„ Nhiều hành động quá phức tạp đối với các nút hoạt cảnh 
• Tính toán đ−ờng đi (ví dụ lực hấp dẫn)
• Giải thuật về vật thể (eg. fractals) 
• Các môi tr−ờng cần sự công tác (ví dụ game)
„ Bạn có thể tạo ra các nút sensors, interpolators, vân vân , bằng cánh sử dụng 
các ch−ơng trình kịch bản viết bằng các ngôn ngử
• Java – ngôn ngử lập trình rất mạnh 
• JavaScript – ngôn ngử kịch bản dễ học
• VRMLscript – giống JavaScript 
Ngôn ngữ VRML không bắt buộc phải hỗ trợ các ngôn ngữ kịch bản 
• Hầu hết các trình duyêt đều hõ trợ JavaScript và
• Nhiều trình duyêt hỗ trợ Java
„ VRMLScript = JavaScript = ECMAScript
• JavaScript không giống Java
• VRMLScript là phần mềm của Cosmo Software hỗ trợ JavaScript 
• Các đặc tả kỹ thuật của ISO VRML gọi là ECMAScript, phiên bản có hỗ
trơ JavaScript 
(c) SE/FIT/HUT 2002
nút Script
„ Nút Script chọn một ch−ơng trình 
kịch bản để chạy:
„ url – chọn ch−ơng trình kịch 
bản 
„ DEF Bouncer Script {
url "bouncer.class" or...
url "bouncer.js" or...
url "javascript: ..." or...
url "vrmlscript: ..." }
Xem code Chạy ví dụ
„ Định nghĩa giao tiếp các 
ch−ơng trình kịch bản ứng 
dụng
„ Nút Script cũng khai báo giao 
tiếp ch−ơng trình kịch bản
• field, eventIn, và
eventOut – là các thao 
tác xuất nhập
• Mỗi cái có một tên và kiểu 
dữ liệu 
• Các tr−ờng có một giá trị 
khởi đầu 
„ DEF Bouncer Script { field
SFFloat bounceHeight 3.0
eventIn SFFloat set_fraction
eventOut SFVec3f 
value_changed }
(c) SE/FIT/HUT 2002
Java
„ So với các ngôn ngữ nh−
JavaScript/VRMLscript, Java có 
khả năng: 
• Mô đun ch−ơng trình tốt 
hơn 
• Cấu trúc dữ liệu tốt hơn
• Khả năng thực hiện nhanh 
hơn 
• Truy cập mạng
„ Với những công việc đơn giản thì
sử dụng JavaScript/VRMLscript
„ Những ch−ơng trình phức tạp thì
dùng Java 
„ Khai báo giao tiếp ch−ơng 
trình kịch bản
„ Với ch−ơng trình kịch bản viết 
bằng ngôn ngữ Java tạo ra một 
file class trong tr−ờng url củanút 
Script
• file class đ−ợc biên dịch 
bằng ch−ơng trình kịch 
bản Java
„ DEF Bouncer Script { field
SFFloat bounceHeight 3.0
eventIn SFFloat
set_fraction eventOut
SFVec3f value_changed url
"bounce2.class" }
(c) SE/FIT/HUT 2002
Java class
„ Nhập các package cho lớp Java
„ File của ch−ơng trình kịch bảnphải import các package của VRML : 
• Đ−ợc cung cấp các công ty phân phối trình duyệt VRML
„ import vrml.*; 
„ import vrml.field.*; 
„ import vrml.node.*;
„ Tạo ra các file Java class
„ Các ch−ơng trình kịch bản phải định nghĩa một lớp có tính public kế thừa từ lớp 
Script 
„ public class bounce2 extends Script { . . . }
• Ph−ơng thức tuỳ chọn initialize đ−ợc gọi khi script đ−ợc tải 
• public void initialize ( ) { . . . }
• Quá trình khởi tạo xẩy ra khi: 
• Nút Script đ−ợc tạo (th−ờng khi trình duyệt nạp thế giới các vật thể) 
• Ph−ơng thức shutdown đ−ợc gọi đến khi script thôi nạp
• public void shutdown ( ) { . . . }
• Shutdown xẩy ra : 
• Nút Script bị xoá
• Trình duyệt nạp thế giới mới 
Page 11
Lờ Tấn Hựng CNTT- ĐHBK Hà nội
Email: [email protected] 
(c) SE/FIT/HUT 2002
Sự kiện -event
„ Đáp ứng một sự kiện
• Ph−ơng thức 
processEvent đ−ợc gọi 
mỗi khi một sự kiện nhận 
đ−ợc , chuyển một đối 
t−ợng sự kiện chứa 
• Giá trị của sự kiện
• Thời gian 
„ public void processEvent( 
Event event ) { . . . }
Xem code vrml
Xem code java
„ Truy nhập các tr−ờng từ Java
„ Mỗi tr−ờng giao tiếp có thể đ−ợc 
đọc và viết 
• Gọi getField để đọc 
tr−ờng của đối t−ợng
„ obj = (SFFloat) getField( 
"bounceHeight" );
• Gọi getValue để lấy giá trị 
của tr−ờng
„ lastval = obj.getValue( );
• Gọi setValue đặt giá trị 
cho một tr−ờng
„ obj.setValue( newval );
(c) SE/FIT/HUT 2002
Tr−ờng eventout từ java
„ Truy nhập tr−ờng eventOuts từ 
Java
„ Mỗi giao tiếp eventOut có thể đọc 
và ghi 
• gọi getEventOut để đọc 
tr−ờng eventOut của đối 
t−ợng
„ obj = (SFVec3f)
getEventOut( 
"value_changed" );
• Gọi getValue đọc giá trị 
cuối cùng đ−ợc gửi
„ lastval = obj.getValue( );
• Gọi setValue để gửi một 
sự kiện
„ obj.setValue( newval );
„ Ví dụ Java script 
„ Tạo nút interpolator vớiquả bóng 
nẩy rồi tính trọng lực nh− chuyển 
động nẩy ngang từ dữ liệu đầu 
vào là thời gian phân đoạn
„ Nút cần: DEF Ball Transform { . 
. . } DEF Clock TimeSensor { . . 
. } DEF Bouncer Script { . . . }