Tài liệu Nghiên cứu một số kỹ thuật tương tác trong web 3d

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.