1
BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƢỜNG ĐẠI HỌC SƢ PHẠM HÀ NỘI 2
NGUYỄN QUANG THÀNH
NGHIÊN CỨU MỘT SỐ KỸ THUẬT
TƢƠNG TÁC TRONG WEB 3D
Chuyên ngành: Khoa học máy tính
Mã số: 60 48 01 01
LUẬN VĂN THẠC SĨ MÁY TÍNH
Ngƣời hƣớng dẫn khoa học:
PGS.TS Đỗ Năng Toàn
HÀ NỘI, 2013
2
LỜI CẢM ƠN
Trong quá trình thực hiện luận văn này, em luôn nhận đƣợc sự hƣớng
dẫn, chỉ bảo tận tình của PGS. TS. Đỗ Năng Toàn, Viện Công nghệ Thông tin
thuộc Viện Khoa học và Công nghệ Việt Nam là cán bộ trực tiếp hƣớng dẫn
khoa học cho em. Em xin chân thành cảm ơn sự giúp đỡ quý báu đó.
Em xin chân thành cảm ơn các Thầy, Cô giáo trong khoa Công nghệ
thông tin, các thầy cô thuộc Viện Công nghệ Thông tin thuộc Viện Khoa học
và Công nghệ Việt Nam và các cán bộ, nhân viên phòng Đào tạo Sau đại học,
trƣờng Đại học sƣ phạm Hà Nội 2 cùng các anh chị đồng nghiệp trong cơ
quan đã tạo những điều kiện thuận lợi cho tôi học tập và nghiên cứu tại
trƣờng Đại học Sƣ Phạm Hà Nội 2.
Xin chân thành cảm ơn các anh, các chị và các bạn học viên lớp Cao
học K15KHMT- trƣờng Đại học sƣ phạm Hà Nội 2 đã luôn động viên, giúp
đỡ và nhiệt tình chia sẻ với tôi những kinh nghiệm học tập, công tác trong
suốt khoá học.
Cuối cùng, tôi muốn gửi lời cảm vô hạn tới gia đình và bạn bè, những
ngƣời thân yêu luôn bên cạnh và động viên tôi trong suốt quá trình thực hiện
luận văn tốt nghiệp.
Mặc dù rất cố gắng, song luận văn này không thể tránh khỏi những thiếu
sót, kính mong đƣợc sự chỉ dẫn của các quý thầy cô và các bạn.
Hà Nội, tháng 12 năm 2013
Tác giả
Nguyễn Quang Thành
3
LỜI CAM ĐOAN
Tôi xin cam đoan rằng số liệu và kết quả nghiên cứu trong luận văn này
là trung thực và không trùng lặp với các đề tài khác. Tôi cũng xin cam đoan
rằng mọi sự
ệc thực hiện luận văn này đã đƣợc cảm ơn và các
thông tin trích dẫn trong luận văn đã đƣợc chỉ rõ nguồn gốc.
Hà Nội, tháng 12 năm 2013
Tác giả
Nguyễn Quang Thành
4
MỤC LỤC
MỞ ĐẦU .......................................................................................................... 1
1. Lý do chọn đề tài ......................................................................................... 1
2. Mục đích nghiên cứu ................................................................................... 2
3. Nhiệm vụ nghiên cứu .................................................................................. 2
4. Đối tƣợng và phạm vi nghiên cứu.............................................................. 2
5. Phƣơng pháp nghiên cứu............................................................................ 2
6. Dự kiến đóng góp mới ................................................................................. 2
NỘI DUNG
Chƣơng 1: KHÁI QUÁT VỀ WEB 3D VÀ TƢƠNG TÁC ............................. 3
3D ................................................................................. 3
? ........................................................................................ 3
3D) .................................... 6
3D ..................................... 7
(Virtual Reality Modeling Language) ................... 10
.................................. 13
1.2.1. Adobe Flash .......................................................................................... 13
1.2.2. Java 3D ................................................................................................. 15
1.2.3. Extensible 3D(X3D) ............................................................................. 15
.......................................................................... 18
Chƣơng 2: MỘT SỐ KỸ THUẬT TƢƠNG TÁC TRONG WEB 3D...... 19
2.1.
.x3d. ................................................................................ 19
........................................................................ 23
2.2.1. Shape ..................................................................................................... 23
2.2.2. Box ......................................................................................................... 24
2.2.3. Cone ...................................................................................................... 25
5
2.2.4. Cylinder ................................................................................................. 26
2.2.5. Sphere .................................................................................................... 27
2.2.6. Text ........................................................................................................ 28
2.2.7. FontStyle ............................................................................................... 29
2.3.
– Grouping ........................................................... 30
........................................................................... 30
2.3.2. Transform ............................................................................................ 31
2.3.3. Inline ..................................................................................................... 33
2.3.4. LOD ...................................................................................................... 34
2.3.5. Switch .................................................................................................... 35
2.4. Các node cần sử dụng cho hoạt hoá ......................................................... 36
2.5. Các phép biến đổi ..................................................................................... 43
2.5.1. Translation and Scale (Phép biến đổi và tính tỉ lệ) .............................. 44
2.5.2. Rotation (Phép quay) ............................................................................ 45
2.6. Các sự kiện ............................................................................................... 45
2.7. Th
– Viewing, Navigation .................... 46
2.7.1. Viewpoint............................................................................................... 46
2.7.2. NavigationInfo...................................................................................... 48
2.7.3. Anchor ................................................................................................... 49
2.7.4. Billboard................................................................................................ 50
2.7.5. Collision ................................................................................................ 50
- Appearance,
Material, Textures ........................................................................................... 51
2.8.1. Appeatance ............................................................................................ 51
2.8.2. Material ................................................................................................. 52
2.8.3. ImageTexture......................................................................................... 53
6
Chƣơng 3: CHƢƠNG TRÌNH THỬ NGHIỆM ......................................... 55
. .................................................................................... 55
3.2. Phân tích và lựa chọn công cụ.................................................................. 55
3.3. Một số kết quả chƣơng trình .................................................................... 57
KẾT LUẬN .................................................................................................... 59
TÀI LIỆU THAM KHẢO ............................................................................ 60
7
DANH MỤC HÌNH VẼ
Hình 1.1: Một sản phẩm 3D đƣợc hiển thị trên Web ........................................ 4
Hình 1.2: Phân biệt đồ họa 2D, 3D và 2.5D ..................................................... 7
Hình 2.1: Cấu trúc tệp tin .x3d ........................................................................ 20
Hình 2.2: Các loại Profile................................................................................ 22
Hình 2.3: Ví dụ về một đoạn mã sử dụng thành phần Shape.......................... 23
Hình 2.4: Định nghĩa các chiều trong không gian 3D của 1 Box ................... 24
Hình 2.5: Ví dụ về một đoạn mã sử dụng Box ............................................... 24
Hình 2.6: Một thành phần Box đƣợc hiển thị trên web .................................. 25
Hình 2.7: Ví dụ một đoạn mã sử dụng thành phần Cone ................................ 25
Hình 2.8: Định nghĩa các thành phần của một Cone ...................................... 26
Hình 2.9:Ví dụ một đoạn mã sử dụng thành phần Cylinder ........................... 26
Hình 2.10: Định nghĩa các thành phần của một Cylinder trong không gian 3D
......................................................................................................................... 26
Hình 2.11: Một đối tƣợng Cylinder đƣợc hiển thị trên web ........................... 27
Hình 2.12: Ví dụ một đoạn mã sử dụng thành phần Sphere ........................... 27
Hình 2.13: Đĩnh nghĩa các thành phần của một Sphere trong không gian 3D
......................................................................................................................... 27
Hình 2.14: Một đối tƣợng Sphere đƣợc hiện thị trên web .............................. 28
Hình 2.15: Ví dụ một đoạn mã sử dụng thành phần Text .............................. 28
Hình 2.16: Thuộc tính length và maxExTent.................................................. 29
Hình 2.17: Ví dụ một đoạn mã sử dụng thành phần FontStyle ...................... 29
Hình 2.18: Thuộc tính size và spacing ............................................................ 30
Hình 2.19: Ví dụ một đoạn mã sử dụng thành phần Group ............................ 30
Hình 2.20: Một đối tƣợng Group đƣợc hiển thị .............................................. 31
Hình 2.21: Ví dụ một đoạn mã sử dụng thành phần Transform ..................... 31
8
Hình 2.22: Các thành phần bên trong một đối tƣợng Transform ................... 33
Hình 2.23: Ví dụ một đoạn mã sử dụng thành phần Inline ............................. 33
Hình 2.24: Ví dụ một đoạn mã sử dụng thành phần LOD .............................. 34
Hình 2.25: Các thành phần bên trong một LOD ............................................. 35
Hình 2.26: Ví dụ một đoạn mã sử dụng thành phần Switch ........................... 35
Hình 2.27: Ví dụ các thành phần bên trong một Switch ................................. 36
Hình 2.28: Ví dụ một đoạn mã sử dụng thành phần Viewpoit ...................... 46
Hình 2.29: Hình ảnh từ các điểm nhìn khác nhau.......................................... 47
Hình 2.30: Ví dụ một đoạn mã sử dụng thành phần NavigationInfo............. 48
Hình 2.31: Ví dụ một đoạn mã sử dụng thành phần Anchor ......................... 49
Hình 2.32: Ví dụ một đoạn mã sử dụng thành phần Billboard ...................... 50
Hình 2.33: Ví dụ một đoạn mã sử dụng thành phần Collision ...................... 51
Hình 2.34: Ví dụ một đoạn mã sử dụng thành phần Appearance .................. 52
Hình 2.35: Ví dụ một đoạn mã sử dụng thành phần Material........................ 53
Hình 2.36: Ví dụ một đoạn mã sử dụng thành phần ImageTexture............... 54
Hình 3.1: Sơ đồ tiến trình công việc ............................................................... 56
Hình 3.2: mô hình tĩnh không thể tƣơng tác ................................................... 57
Hình 3.3: minh hoạ mô hình tĩnh quay theo hai hƣớng khác nhau ................. 57
Hình 3.4: Mô hình động .................................................................................. 58
Hình 3.5: Mô hình xe đạp có thể dùng trục quay để quay và thanh kéo để
zoom ................................................................................................................ 58
1
MỞ ĐẦU
7. Lý do chọn đề tài
- Cùng với sự bùng nổ của Internet, nhu cầu sử dụng Website và số
lƣợng Website ngày càng tăng cao. Website trở thành một công cụ để ngƣời
ta quảng bá mọi vấn đề, mọi lĩnh vực, đặc biệt là trong thƣơng mại.
- Các công nghệ mới luôn đƣợc áp dụng vào Website: công nghệ quản
trị nội dung, kiết xuất thông tin, tác tử,... Trong đó, sử dụng yếu tố đồ hoạ vào
trong Website là một công nghệ đang rất đƣợc quan tâm.
- Công nghệ thiết kế đồ hoạ cho Website cũng có nhiều cách tiếp cận
khác nhau. Cách tiếp cận lâu đời và đang phổ biến hiện nay đó là Website sử
dụng các hình ảnh 2 chiều. Các hình ảnh hai chiều chỉ thể hiện đƣợc các sự
vật theo chiều dài và chiều rộng. Điều này sẽ hạn chế khá nhiều khi muốn
quan sát một vật nào đó một cách kĩ càng. Với các trang Web giới thiệu sản
phẩm, nếu giới thiệu một cách tỉ mỉ một sản phẩm nào đó thì ngƣời ta phải
trình bày các bức ảnh chụp sản phẩm ở các góc độ khác nhau sẽ tốn bộ nhớ,
tốn thời gian tải, tốn diện tích trang Web.
- Một cách tiếp cận khác chính là sử dụng các hình ảnh 3 chiều. Trong
đó, cũng rẽ ra làm hai khuynh hƣớng. Đó là 3D giả lập và 3D.
- 3D giả lập chỉ mô phỏng các nguyên lý dựng hình 3 chiều. Tiêu biểu
cho 3D giả lập là flash. Quả thật dùng flash đã làm cho Website trông sống
động hơn rất nhiều. Các file này cũng khá nặng và đòi hỏi ở máy khách phải
cài các phần mềm mới có thể đọc đƣợc. Và nói chung, ngƣời xem vẫn ở thế bị
động vì các flash chuyển động không phụ thuộc vào ý muốn của ngƣời xem.
Từ những vấn đề nêu trên, tôi chọn đề tài “Nghiên cứu một số kỹ thuật
tương tác trong Web 3D” để làm luận văn tốt nghiệp.
2
8. Mục đích nghiên cứu
- Tìm hiểu các kĩ thuật dựng hình phổ biến hiện nay. Quá trình tìm hiểu
này nhằm phân tích các kĩ thuật dựng hình vốn rất phong phú hiện nay để tìm
hiểu thế mạnh của từng kĩ thuật và áp dụng kĩ thuật nào vào trƣờng hợp dựng
hình cụ thể nào thì cho hiệu quả tốt nhất.
- Tìm hiểu các kĩ thuật tạo Web3D theo khuynh hƣớng thứ 2, tức là sử
dụng các mô hình 3D thực sự. Thực chất của mục đích này là muốn giới thiệu
kĩ thuật đẩy các mô hình 3D lên trang Web.
9. Nhiệm vụ nghiên cứu
- Nghiên cứu lý thuyết về Web và các kỹ thuật dựng hình 3D.
- Xác định bài toán cụ thể.
- Xây dựng các mô hình 3D và đẩy các mô hình lên trang Web.
10.
Đối tƣợng và phạm vi nghiên cứu
Đối tƣợng nghiên cứu:
Kỹ thuật tƣơng tác trong Web 3D trong đó đối tƣợng nghiên cứu chính
là các mô hình 3D.
Phạm vi nghiên cứu:
Tìm hiểu các kĩ thuật tạo Web3D theo khuynh hƣớng sử dụng các mô
hình 3D thực sự.
11.
Phƣơng pháp nghiên cứu
- Phƣơng pháp lý luận
- Phƣơng pháp nghiên cứu thực tiễn.
- Phƣơng pháp nghiên cứu tài liệu.
12.
Dự kiến đóng góp mới
- Xây dựng đƣợc một Website ứng dụng đƣợc trong thực tiễn.
3
NỘI DUNG
Chƣơng 1: KHÁI QUÁT VỀ WEB 3D VÀ TƢƠNG TÁC
1.1.
3D
1.1.1. Web
?
Web
3D
.
Web
ng
.
3D.
. Giờ đây 3D đã chinh phục rất nhiều lĩnh vực và đang tạo nên một cuộc
cách mạng công nghệ mới. Tính hiệu quả của công nghệ 3D đã thu hút rất
nhiều nhà sản xuất, kinh doanh, từ đó có thể đƣa đến những sản phẩm công
nghệ tiêu biểu nhƣ Tivi 3D, phim 3D, game 3D, điện thoại 3D không cần
kính…, và không thể không kể đến các sản phẩm Web 3D.
chân
i
.
4
Hình 1.1: Một sản phẩm 3D đƣợc hiển thị trên Web
3.0 (Semantic Web
ực
(Service Oriented Architecture - Kiến trúc
Định hƣớng Dịch vụ),
ệ nhân tạ
3.0.
3D:
+ “…Tại Hội thảo Công nghệ GPU NVIDIA (Mỹ) ngày 30/9/2009, một
giải pháp tƣơng tác mô hình 3D trên trình duyệt Web đƣợc trình diễn thực tế.
Đó là nền tảng tính toán NVIDIA RealityServer ra đời từ sự kết hợp giữa máy
chủ trang bị bộ xử lý đồ họa Testla của NVIDIA và PM RealityServer của
Metal Images. Nền tảng cho phép dựng hình 3D trực tiếp trên máy chủ (xây
dựng theo mô hình điện toán mây – cloud computing) và hiển thị trên trình
duyệt máy khách trong vòng 15-20 giây (trong khi dựng trên máy tính cá
5
nhân có thể mất đến vài giờ). Mô hình 3D còn có thể tƣơng tác chân thực với
nhiều nguồn sáng và môi trƣờng: thể hiện đƣợc trạng thái ngày/đêm, bật
đèn/tắt đèn và phản chiếu cảnh quan thực tế.
Trên phƣơng diện hiển thị đầu cuối, NVIDIA hợp tác với Adobe để
khai thác sức mạnh của bộ xử lý đồ họa vào việc tăng tốc trình Flash Player
10.1 và các ứng dụng đồ họa khác trên thiết bị di động. Kết quả này là một
phần
trong
dự
án
mang
tên
gọi
Open
Screen
Project
(www.openscreenproject.org) khởi xƣớng bởi Adobe, qui tụ gần 50 công ty
công nghệ hàng đầu. Điều này mở ra nhiều hƣớng cung cấp nội dung, trình
bày 3D trên môi trƣờng Internet và cơ hội mới cho những nhà cung cấp dịch
vụ/nội dung Internet…” [10]
+ “Khronos Group, tổ chức phát triển và quản lý giao diện OpenGL,
tuyên bố đang hợp tác với Mozilla để đƣa đồ họa ba chiều vào thế giới web và
một bản dự thảo cho chuẩn mới, mang tên WebGL, đã hình thành
WebGL cho phép các lập trình viên JavaScript tận dụng card video để
xử lý đồ họa ba chiều. Khronos đang tập hợp những đánh giá của các chuyên
gia phát triển web để có thể sớm hoàn tất các thông số “không đơn giản chỉ là
dự thảo vào quý I/2010”
Internet Explorer hiện vẫn là trình duyệt đƣợc sử dụng nhiều nhất trên
thị trƣờng. Tuy nhiên, bốn đối thủ chính là Mozilla Firefox, Apple Safari,
Google Chrome và Opera cũng đang cạnh tranh gay gắt và công nghệ ba
chiều là một trong những mục tiêu mà các trình duyệt này hƣớng tới.
Hỗ trợ 3D trên web sẽ giúp nâng cao giao diện ngƣời dùng của các ứng
dụng web đặc biệt là game. Tuy vậy, chƣa thể xác định thời điểm công nghệ
này có mặt trên máy tính ngƣời dùng bởi sau khi WebGL đƣợc phê chuẩn, nó
phải đƣợc tích hợp vào trình duyệt và giới lập trình viên cũng phải học cách
hỗ trợ công nghệ……” [11]
6
+ “Hai dự án liên quan đến việc phát triển công nghệ web 3D, mục đích
tƣơng tự nhau là tăng tốc phần cứng đồ họa 3D cho web từ Mozilla và Google
tƣởng chừng đi đến bế tắc thì bất ngờ một dấu hiệu tốt đẹp đến từ Google hứa
hẹn công nghệ web 3D sẽ đến hồi xuất hiện trong thời gian sắp tới.
Hai dự án nổi lên gần nhƣ tại cùng một thời điểm trong năm 2009: trình
duyệt O3D đến từ Google và tiêu chuẩn WebGL đƣợc đề xuất từ Mozilla và
Khronos Group. O3D là một công nghệ cao cấp, trong khi WebGL đƣợc quan
tâm nhiều hơn trong công nghệ đồ họa 3D.
Trong những tháng gần đây, mặc dù O3D đã bị ngừng hoạt động phát
triển, nhƣng không phải vì thế mà Google quyết định rời bỏ 3D. Nhiều dự
đoán cho rằng Google đang cố gắng tập trung năng lực của mình bằng cách
xây dựng nó trên nền tảng WebGL. Điều này sẽ có tác động tốt cho cả
Mozilla và Google khi nó sẽ có dấu hiệu cho sự hợp tác nhiều hơn là sự cạnh
tranh mà cả 2 muốn thực hiện cho các dự án của mình, làm việc trong một
môi trƣờng cô lập củng cố cho dự án của mình…..” [12]
1.1.2.
3D)
3D).
2D đƣợc xây dựng trên hệ thống đồ hoạ máy tính 2 chiều (2
Dimensional), cũng nhƣ hệ toạ độ 2 chiều của trục toạ độ, nó phản ánh một
phong cách đồ hoạ phẳng. Đồ hoạ 2 chiều không có sự tham gia hoặc có
nhƣng rất ít của các hiệu ứng 3 chiều đặc trƣng nhƣ hiệu ứng chiếu sáng, phản
chiếu, đổ bóng. Đặc trƣng dễ nhận dạng nhất củ
2D là không thể
xoay góc quay đƣợc, tất nhiên yếu tố này không thể giúp ta khẳng định chắc
chắ
2D, có nhữ
3D vẫn hạn chế không cho xoay màn
hình. Đặc trƣng kế tiếp là không có ấn tƣợng 3 chiều rõ rệ
7
2 chiều là chiều thẳng và chiều ngang khác với 3D không
dùng hình thức cuộn bản đồ mà dựa vào không gian khối của bản đồ.
3D đƣợc xây dựng trên hệ thống đồ hoạ máy tính 3 chiều
hiện đại (3 Dimentional), hệ thống đồ hoạ này khai thác 3 chiều không gian là
chiều ngang - dọc - sâu tạo nên một thế giới hình khối khác hẳn thế giới hình
phẳng của 2D. Đồ hoạ 3D khai thác tối đa các hiệu ứng 3 chiều nhƣ đổ bóng,
chiều ánh sáng, sự phản chiếu.
Nếu 2D và 3D dễ định nghĩa và xác định thì 2.5D là một khái niệm trừu
tƣợng. Theo định nghĩa thì 2.5D là nhữ
ử dụng một phần hệ
thống đồ hoạ 2D và phần còn lại của 3D hay mộ
2D dùng các hiệu
ứng đồ hoạ 3D để mô phỏng tính chất của 3D (giả 3D).
Hình 1.2: Phân biệt đồ họa 2D, 3D và 2.5D
1.1.3.
1. Khối cầu 2D
2. Khối cầu 2.5D
3. Cách vẽ một khối cầu 2D giả 3D
4. Khối cầu 3D
3D
(World Wide Web)
8
.
.
3D
.
t
9
3D trên web.
.
3D
. Nhƣng J
ava.
3D
3D
trên
3D
g Java
.
3D
3D
.
5. WebGL (Web-based Graphics
10
Library) là một thƣ viện phần mềm mở rộng khả năng của ngôn ngữ
JavaScript để cho phép nó tạo ra tƣơng tác đồ họa 3D trong bất kỳ trình duyệt
nào tƣơng thích (Firefox, chrome...). Mã của WebGL thực hiện xử
trên card xử lý đồ họa (GPU). [13]
3D
VRML
eb 3D (Web 3d
C
1.0.
2.0
s
, Sun M
3C. X3D
.
1.1.4.
(Virtual Reality Modeling Language)
, Intranet
(local
.
11
(texture
mapping).
3D trên
1MB.
.
-
3D
3D.
VRML
, hay
.
nternet
12
.
:
3D-VRML
Java appl
.
–
-
3D”.
3D.
- Xem thêm -