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 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 LỜI CẢM ƠN Trong trình thực luận văn này, em nhận đƣợc hƣớng dẫn, bảo tận tình PGS TS Đỗ Năng Toàn, Viện Công nghệ Thông tin thuộc Viện Khoa học Công nghệ Việt Nam cán trực tiếp hƣớng dẫn khoa học cho em Em xin chân thành cảm ơn giúp đỡ quý báu Em xin chân thành cảm ơn Thầy, Cô giáo khoa Công nghệ thông tin, thầy cô thuộc Viện Công nghệ Thông tin thuộc Viện Khoa học Công nghệ Việt Nam 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 anh chị đồng nghiệp quan tạo điều kiện thuận lợi cho học tập nghiên cứu trƣờng Đại học Sƣ Phạm Hà Nội Xin chân thành cảm ơn anh, chị bạn học viên lớp Cao học K15KHMT- trƣờng Đại học sƣ phạm Hà Nội động viên, giúp đỡ nhiệt tình chia sẻ với kinh nghiệm học tập, công tác suốt khoá học Cuối cùng, muốn gửi lời cảm vô hạn tới gia đình bạn bè, ngƣời thân yêu bên cạnh động viên suốt trình thực luận văn tốt nghiệp Mặc dù cố gắng, song luận văn tránh khỏi thiếu sót, kính mong đƣợc dẫn quý thầy cô bạn Hà Nội, tháng 12 năm 2013 Tác giả Nguyễn Quang Thành LỜI CAM ĐOAN Tôi xin cam đoan số liệu kết nghiên cứu luận văn trung thực không trùng lặp với đề tài khác Tôi xin cam đoan ệc thực luận văn đƣợc cảm ơn thông tin trích dẫn luận văn đƣợc rõ nguồn gốc Hà Nội, tháng 12 năm 2013 Tác giả Nguyễn Quang Thành MỤC LỤC MỞ ĐẦU 1 Lý chọn đề tài Mục đích nghiên cứu Nhiệm vụ nghiên cứu Đối tƣợng phạm vi nghiên cứu Phƣơng pháp nghiên cứu Dự kiến đóng góp NỘI DUNG Chƣơng 1: KHÁI QUÁT VỀ WEB 3D VÀ TƢƠNG TÁC 3D ? 3D) 3D (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 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 tính tỉ lệ) 44 2.5.2 Rotation (Phép quay) 45 2.6 Các 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 Chƣơng 3: CHƢƠNG TRÌNH THỬ NGHIỆM 55 55 3.2 Phân tích lựa chọn công cụ 55 3.3 Một số kết chƣơng trình 57 KẾT LUẬN 59 TÀI LIỆU THAM KHẢO 60 DANH MỤC HÌNH VẼ Hình 1.1: Một sản phẩm 3D đƣợc hiển thị Web Hình 1.2: Phân biệt đồ họa 2D, 3D 2.5D 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ụ đoạn mã sử dụng thành phần Shape 23 Hình 2.4: Định nghĩa chiều không gian 3D Box 24 Hình 2.5: Ví dụ đoạn mã sử dụng Box 24 Hình 2.6: Một thành phần Box đƣợc hiển thị web 25 Hình 2.7: Ví dụ đoạn mã sử dụng thành phần Cone 25 Hình 2.8: Định nghĩa thành phần Cone 26 Hình 2.9:Ví dụ đoạn mã sử dụng thành phần Cylinder 26 Hình 2.10: Định nghĩa thành phần Cylinder không gian 3D 26 Hình 2.11: Một đối tƣợng Cylinder đƣợc hiển thị web 27 Hình 2.12: Ví dụ đoạn mã sử dụng thành phần Sphere 27 Hình 2.13: Đĩnh nghĩa thành phần Sphere không gian 3D 27 Hình 2.14: Một đối tƣợng Sphere đƣợc thị web 28 Hình 2.15: Ví dụ đoạn mã sử dụng thành phần Text 28 Hình 2.16: Thuộc tính length maxExTent 29 Hình 2.17: Ví dụ đoạn mã sử dụng thành phần FontStyle 29 Hình 2.18: Thuộc tính size spacing 30 Hình 2.19: Ví dụ đ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ụ đoạn mã sử dụng thành phần Transform 31 Hình 2.22: Các thành phần bên đối tƣợng Transform 33 Hình 2.23: Ví dụ đoạn mã sử dụng thành phần Inline 33 Hình 2.24: Ví dụ đoạn mã sử dụng thành phần LOD 34 Hình 2.25: Các thành phần bên LOD 35 Hình 2.26: Ví dụ đoạn mã sử dụng thành phần Switch 35 Hình 2.27: Ví dụ thành phần bên Switch 36 Hình 2.28: Ví dụ đoạn mã sử dụng thành phần Viewpoit 46 Hình 2.29: Hình ảnh từ điểm nhìn khác 47 Hình 2.30: Ví dụ đoạn mã sử dụng thành phần NavigationInfo 48 Hình 2.31: Ví dụ đoạn mã sử dụng thành phần Anchor 49 Hình 2.32: Ví dụ đoạn mã sử dụng thành phần Billboard 50 Hình 2.33: Ví dụ đoạn mã sử dụng thành phần Collision 51 Hình 2.34: Ví dụ đoạn mã sử dụng thành phần Appearance 52 Hình 2.35: Ví dụ đoạn mã sử dụng thành phần Material 53 Hình 2.36: Ví dụ đ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 tƣơng tác 57 Hình 3.3: minh hoạ mô hình tĩnh quay theo hai hƣớng khác 57 Hình 3.4: Mô hình động 58 Hình 3.5: Mô hình xe đạp dùng trục quay để quay kéo để zoom 58 MỞ ĐẦU Lý chọn đề tài - Cùng với bùng nổ Internet, nhu cầu sử dụng Website số lƣợng Website ngày tăng cao Website trở thành công cụ để ngƣời ta quảng bá vấn đề, lĩnh vực, đặc biệt thƣơng mại - Các công nghệ đƣợ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 Website công nghệ đƣợc quan tâm - Công nghệ thiết kế đồ hoạ cho Website có nhiều cách tiếp cận khác Cách tiếp cận lâu đời phổ biến Website sử dụng hình ảnh chiều Các hình ảnh hai chiều thể đƣợc vật theo chiều dài chiều rộng Điều hạn chế nhiều muốn quan sát vật cách kĩ Với trang Web giới thiệu sản phẩm, giới thiệu cách tỉ mỉ sản phẩm ngƣời ta phải trình bày ảnh chụp sản phẩm góc độ khác tốn 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 sử dụng hình ảnh chiều Trong đó, rẽ làm hai khuynh hƣớng Đó 3D giả lập 3D - 3D giả lập mô nguyên lý dựng hình chiều Tiêu biểu cho 3D giả lập flash Quả thật dùng flash làm cho Website trông sống động nhiều Các file nặng đòi hỏi máy khách phải cài phần mềm đọc đƣợc Và nói chung, ngƣời xem bị động flash chuyển động không phụ thuộc vào ý muốn ngƣời xem Từ vấn đề nêu trên, chọn đề tài “Nghiên cứu số kỹ thuật tương tác Web 3D” để làm luận văn tốt nghiệp Mục đích nghiên cứu - Tìm hiểu kĩ thuật dựng hình phổ biến Quá trình tìm hiểu nhằm phân tích kĩ thuật dựng hình vốn phong phú để tìm hiểu mạnh kĩ thuật áp dụng kĩ thuật vào trƣờng hợp dựng hình cụ thể cho hiệu tốt - Tìm hiểu kĩ thuật tạo Web3D theo khuynh hƣớng thứ 2, tức sử dụng mô hình 3D thực Thực chất mục đích muốn giới thiệu kĩ thuật đẩy mô hình 3D lên trang Web Nhiệm vụ nghiên cứu - Nghiên cứu lý thuyết Web kỹ thuật dựng hình 3D - Xác định toán cụ thể - Xây dựng mô hình 3D đẩy mô hình lên trang Web 10 Đối tƣợng phạm vi nghiên cứu  Đối tƣợng nghiên cứu: Kỹ thuật tƣơng tác Web 3D đối tƣợng nghiên cứu mô hình 3D  Phạm vi nghiên cứu: Tìm hiểu kĩ thuật tạo Web3D theo khuynh hƣớng sử dụng mô hình 3D thực 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 - Xây dựng đƣợc Website ứng dụng đƣợc thực tiễn 46 thông tin nhƣ thay đổi giá trị thời gian kích chuột Các eventIn kiện đến, chấp nhận thông tin từ bên nút thực vài thực vài điều với Mỗi sƣ kiện có loại liệu thích hợp với chúng Một vài nút có trƣờng đƣợc trƣng bày Điều có nghĩa nút có hai trƣờng định nghĩa cho trƣờng set_fieldname fieldname_changed Có eventIn eventOut trƣờng sử dụng để thiết lập giá trị thông báo cho giới bên có thay đổi Nếu bạn sử dụng set_fieldname để thiết lập giá trị trƣờng, nút phát sinh kiện fieldname_changed Để dễ dàng sử dụng, thành phần set_ _changed kiện nghiêng phái trái browser làm việc kiện đƣợc sử dụng Nếu trƣờng không đƣợc phơi bày ra, thay đổi kiện giá trị trƣờng đƣợc sử dụng suốt khoảng thời gian Để xem xét trƣờng đƣợc bày nút, giữ lấy tham chiếu từ vị trí từ trang liên kết nhận lấy tham chiếu nút phụ lục – Viewing, Navigation 2.7.1 Viewpoint Hình 2.28: Ví dụ đoạn mã sử dụng thành phần Viewpoit 47 position orientation jump ều khiể ngƣời dùng chƣa chọn điểm nhìn Hình 2.29: Hình ảnh từ điểm nhìn khác 48 2.7.2 NavigationInfo Hình 2.30: Ví dụ đoạn mã sử dụng thành phần NavigationInfo navigationInfo 3D type speed headlight true false visibilityLimit 49 2.7.3 Anchor Hình 2.31: Ví dụ đoạn mã sử dụng thành phần Anchor nchor cho p url n ) description bboxCenter bboxSize - - không nằ 50 2.7.4 Billboard billboard Hình 2.32: Ví dụ đoạn mã sử dụng thành phần Billboard axisOfRotation bboxCenter bboxSize 2.7.5 Collision Collisi Sự ặ 51 Hình 2.33: Ví dụ đoạn mã sử dụng thành phần Collision Appearance, Material, Textures 2.8.1 Appeatance – – (texture) 52 Hình 2.34: Ví dụ đoạn mã sử dụng thành phần Appearance appearance appearance 2.8.2 Material 53 Hình 2.35: Ví dụ đoạn mã sử dụng thành phần Material diffuseColor specularColor emissiviColor transparency ambientIntensity 2.9.3 ImageTexture Thành phần ImageTexture cho phép xác định bề mặt vật thể cách xác định file hình ảnh gắn với đối tƣợng Nó cho phép “dán” lên đối tƣợng bề mặt từ file hình ảnh theo đƣờng dẫn đƣợc đƣa thuộc tính url 54 Hình 2.36: Ví dụ đoạn mã sử dụng thành phần ImageTexture 55 Chƣơng 3: CHƢƠNG TRÌNH THỬ NGHIỆM Tới thời điểm nay, việc đời sàn giao dịch điện tử nƣớc có tác động tích cực đến thói quen mua sắm tìm hiểu sản phẩm mạng ngƣời dùng Tuy nhiên đa số website dừng lại việc cung cấp hình ảnh chiều sản phẩm, điều khiến cho việc quan sát sản phẩm bị giới hạn góc nhìn hình ảnh sản phẩm không đƣợc đầy đủ Việc ứng dụng công nghệ 3D vào website giải đƣợc vấn đề đƣa thƣơng mại điện tử lên phát triển Điểm khác biệt Web 2d Web 3D không gian hình máy tính sản phẩm đƣợc xem tất góc độ tất góc nhìn Để làm đƣợc điều Web 2D, website phải hiển thị hàng trăm hình ảnh góc độ khác phải kèm theo đoạn video clip để minh hoạ chế vận hành sản phẩm Chính mà thông tin sản phẩm nhận đƣợc từ Web 3D lớn Chính lý trên, em định xây dựng website thƣơng mại điện tử, mô việc mua bán xe đạp phụ tùng 3.2 Phân tích lựa chọn công cụ Các công cụ đƣợc sử dụng cho đề tài: Phần mềm dựng hình: Maya Ver 7.0 Bộ cài để phục vụ cho máy Client tải file VRML: cortvrml 2.0 Trình duyệt IE Công việc tiến hành nhƣ sau: Dựng hình Maya 56 Xuất file định dạng ảnh 2D : Gif, jpg Hoặc: Xuất file dạng VRML Dƣới sơ đồ tiến trình minh hoạ tiến trình công việc mà em thực Cũng coi sơ đồ nhƣ qui trình kỹ thuật để tạo Web3D để tham khảo Dựng mô hình modelling Hoạt hóa Animation Tối ƣu hình - Rebuild Maya Tạo kết xuất – rendering ver 7.0 Đổ bóng-Shading Chiếu sángAnimation VRML ver2.0 Kết xuất-Export Software VRML Tạo Object trang Web INTERNET WEBSITE Hình 3.1: Sơ đồ tiến trình công việc 57 3.3 Một số kết chƣơng trình Khi xuất file VMRL, có dạng mô hình sau:  Tạo object mô hình tĩnh Hình 3.2: mô hình tĩnh tƣơng tác  Tạo object mô hình tĩnh tƣơng tác chuột Hình 3.3: minh hoạ mô hình tĩnh quay theo hai hƣớng khác  Tạo object mô hình động hoạt hoá Có hai dạng mô hình chuyển động, click chuột vào mô hình chuyển động hai mô hình chuyển động liên tục 58 Hình 3.4 : Mô hình động  Tạo object mô hình gắn với trục quay zoom Hình 3.5: Mô hình xe đạp dùng trục quay để quay kéo để zoom Mô tả website Website em xây dựng đƣợc mô cách đơn giản Website bán hàng Trang chủ Website trình bày số hình ảnh xe đạp Nếu ngƣời dùng muốn xem xét kĩ xe đạp click chuột vào ảnh xe Trang Web thông tin chi tiết xe nhƣ: Tên nhà sản xuất, nơi sản xuất, giá thành, bảo hành v v với mô hình xe Mỗi mô hình minh hoạ cách tạo Object nhƣ trình bày 59 KẾT LUẬN Sau trình tìm hiểu, nghiên cứu ứng dụng, với nỗ lực thân hƣớng dẫn nhiệt tình từ PGS.TS Đỗ Năng Toàn em thu đƣợc số kết nhƣ sau: - Trình bày khái niệm Web 3D tƣơng tác Web 3D - Hệ thống hóa số vấn đề tƣơng tác Web 3D - Cài đặt chƣơng trình thử nghiệm Web 3D thành tƣơng tác toán giới thiêu sản phẩm Qua em có nhìn tổng quan giới web xu hƣớng phát triển công nghệ 3D hỗ trợ tảng web Trong trình nghiên cứu X3D, em tìm hiểu đƣợc cách sử dụng số phần mềm thiết kế 3D nhƣ 3Ds Max, Blender, SketchUp để hỗ trợ việc tạo mô hình 3D Trong trình tạo website mô Tuy cố gắng nhƣng thời gian hạn hẹp kiến thức chuyên môn thân hạn chế nên luận văn em số thiếu sót nhƣ sau: + Những tìm hiểu nghiên cứu em ngôn ngữ X3D dừng lại mức độ bản, X3D nhiều vấn đề nâng cao khác có tính ứng dụng cao nhiều + Cùng lúc em phải tìm hiểu cách xây dựng nhƣng mô hình 3D từ phần mềm vẽ 3D nhƣ 3Ds Max, Blender nên việc sử dụng phần mềm chƣa thực thành thạo vào chƣa tạo đƣợc đối tƣợng có mức độ sắc nét cao Hƣớng phát triển tƣơng lai luận văn, em mong muốn hoàn thành vấn đề sau: - Tách ghép phận mô hình - Sử dụng nhiều mô hình động - Giảm dung lƣợng mô hình 60 TÀI LIỆU THAM KHẢO Tiếng Việt [1] Đỗ Năng Toàn, Phạm Việt Bình, Giáo trình Xử lý ảnh, Nhà xuất Khoa học Kỹ thuật, Hà Nội 2008 [2] Lƣơng Mạnh Bá, Nguyễn Thanh Thủy, Nhập môn Xử lý ảnh số Nhà xuất Khoa học Kỹ thuật, Hà Nội 1999 [3] Tài liệu đính kèm phần mềm Maya Version 7.0, 3DStudioMax 6, sketchup [4] Nguyễn Công Minh (2009), 3DS Max 2009, NXB Hồng Đức Tiếng Anh [5] Eric Haines (2012), Interactive 3D Graphics Course Overview, https://www.udacity.com/course/cs291 [6] VRML Tutorial, http://www.lighthouse3d.com/vrml/tutorials.shtml [7] Victor Porof (2011), Web 3D – Semantic Santandards, WebGL, HCI, http://www.slideshare.net/victorporof/web3d-semantic-standards-webglhci [8] VRML and X3D, http://xml.coverpages.org/vrml-X3D.html [9] X3DOM, A DOM-based HTML5/ X3D Integration Model, http://www.web3d.org/wiki/images/3/30/X3dom-web3d2009-paper.pdf [10] http://www.pcworld.com.vn/articles/kinh-doanh/giai phap/2010/01/1195258/web3d-sang-tao-va-tuong-tac/ [11] http://sohoa.vnexpress.net/tin-tuc/doi-song-so/web-3d-tien-mot-buocdai-toi-hien-thuc-1518358-p1.html [12] http://xahoithongtin.com.vn/20100417073939827p0c206/google-taptrung-cho-web-3d.htm [13] http://www.khronos.org/webgl/