kl huynh thanh phong

Trong khi ó ể làm ược iều này, web 2D phải cho hiển thị nhiều bức ảnh ở các góc ộ khác nhau của sản phẩm, chưa kể phải kèm theo một oạn video clip ể minh họa cơ chế vận hành sản phẩm.. K

KHOA CÔNG NGHỆ THÔNG TIN

LUẬN VĂN TỐT NGHIỆP

TÌM HIỂU WEB3D VÀ ỨNG DỤNG XÂY

DỰNG WEBSITE MINH HỌA

Học Tôn Đức Thắng tạo iều kiện cho chúng em thực hiện ề tài nghiên cứu này

Chúng em xin chân thành cảm ơn thạc sĩ V Đ nh Hồng tận t nh hướng dẫn,

chỉ bảo chúng em trong suốt quá trình nghiên cứu và thực hiện ề tài

Chúng em xin cảm ơn quý thầy cô trong Khoa tận tình giảng dạy, trang bị

cho chúng em những kiến thức nền tảng cần thiết trong suốt quá trình học tập tại

trường Chúng em c ng xin bày tỏ lòng biết ơn sâu sắc ến cha, mẹ, người thân và bạn

bè ộng viên, ủng hộ, giúp ỡ chúng em trong suốt thời gian học c ng như quá tr nh

nghiên cứu nhiều khó khăn, thử thách

Mặc dù rất cố gắng ể hoàn thành ề tài một cách tốt nhất dựa trên nỗ lực

của bản thân, song chắc chắn bài báo cáo này không tránh khỏi những sai sót và hạn

chế, chúng em kính mong nhận ược sự thông cảm, góp ý chỉ bảo của thầy cô và các

bạn

Chúng em xin chân thành cảm ơn quý thầy cô

Nhóm thực hiện

Hu nh Thanh Phong Nguy n Kim Hồng Thắm

………

………

………

………

………

………

.………

………

………

………

………

………

………

……….…

………

………

………

………

………

………

………

……….………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

.………

………

………

………

………

………

………

……….…

………

………

………

………

………

………

………

……….………

………

………

………

………

………

………

………

………

MỤC LỤC

1.1 KHÁI QUÁT VẤN ĐỀ 8

1.2 LÝ DO THỰC HIỆN ĐỀ TÀI 8

CHƯƠNG 2: T M HIỂU CƠ SỞ LÝ THUYẾT 10 2.1 T M HIỂU C NG NGHỆ 3D 10

2.1.1 Sơ lược 2D và 3D 10

2.1.2 Tìm hiểu các loại ảnh nổi 3D 10

2.1.3 Các loại phim nổi 3D 13

2.1.4 Nguyên lý tạo ảnh 3D tích hợp 14

2.2 WEBSITE 3D 15

2.2.1 Định nghĩa 15

2.2.2 Khái quát 16

2.2.3 Ưu iểm của Web3D 16

2.3 GAME ENGINE 17

2.3.1 Khái niệm 17

2.3.2 Mối quan hệ giữa Game Engine và Game 17

2.4 UNITY 3D ENGINE 18

2.4.1 Giới thiệu 18

2.4.2 Đặc iểm Unity3 18

2.4.3 Triển khai trên nền web 19

CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 22 3.1 TỔNG QUAN ĐỀ TÀI 22

3.1.1 Mục tiêu cơ bản của ề tài 22

3.1.2 Xác ịnh yêu cầu 22

3.1.3 Tính trực quan tương tác của ề tài 22

3.1.4 Phạm vi giới hạn ề tài 22

3.2 M TẢ HỆ THỐNG 23

3.2.1 Mô tả chung 23

3.2.2 Mô tả yêu cầu người dùng 23

3.2.3 Đối với người quản trị 23

3.3 SƠ ĐỒ USECASE 24

3.3.1 Usecase cho người dùng là khách 24

3.3.2 Usecase cho người quản trị 25

3.3.3 Đặc tả các usecase chính 25

3.4 SƠ ĐỒ LỚP HỆ THỐNG 33

3.5 THIẾT KẾ CƠ SỞ LIỆU 34

3.5.1 Tạo bảng dữ liệu 34

3.5.2 Các bảng dữ liệu 35

CHƯƠNG 4: THIẾT KẾ 3D 39 4.1 TỔNG QUAN 39

4.2 M I TRƯỜNG THỰC HIỆN 39

4.3 CHI TIẾT CÁC CẢN H 40

4.3.1 Khu vực ngoại cảnh 40

4.3.2 Cách thức thực hiện 41

4.3.3 Cảnh phòng học nhỏ 56

4.3.4 Cảnh phòng học lớn 57

4.3.5 Phòng thực hành tin học 58

4.3.6 Cảnh văn phòng loại 1 59

4.3.7 Cảnh văn phòng loại 2 60

4.3.8 Hội trường lầu 6 61

4.3.9 Thư viện 62

CHƯƠNG 5: KẾT QUẢ ĐỀ TÀI 64 5.1 Kết quả 64

5.2 Hướng phát triển 64

TÓM TẮT LUẬN VĂN

Luận văn chia làm 4 chương:

Chương 1: Giới thiệu tổng quan ề tài - Nêu khái quát về web3D từ ó dẫn ến lý do

chọn thực hiện ề tài c ng như phạm vi, yêu cầu của ề tài

Chương 2: T m hiểu cơ sở lý thuyết - Giới thiệu khái quát các vấn ề t m hiểu ể

phục vụ cho ề tài

Chương 3: Phân t ch thiết kế hệ thống - Giới thiệu sơ ồ usecase, sơ ồ lớp và cơ sở dữ

liệu

Chương 4: Thiết kế 3D – Các hình ảnh 3D trong ứng dụng

Chương 5: Kết quả ề tài - Đưa ra những kết quả của ề tài cùng với hướng phát triển

DANH MỤC CÁC BẢNG BIỂU

Bảng 1: Usecase Di chuyển 27

Bảng 2: Usecase Thay ổi góc nhìn .27

Bảng 3: Usecase Xem thông tin 28

Bảng 4: Usecase Chuyển cảnh .28

Bảng 5: Usecase Thêm cổng chuyển cảnh .29

Bảng 6: Usecase Cập nhật cổng 29

Bảng 7: Usecase Xóa cổng .30

Bảng 8: Usecase Thêm cơ sở vật chất .30

Bảng 9: Usecase Sửa cơ sở vật chất .31

Bảng 10: Usecase Xóa cơ sở vật chất .31

Bảng 11: Usecase Thêm tài kho ản quản trị 32

Bảng 12: Usecase Sửa tài khoản quản trị .32

Bảng 13: Usecase Xóa tài khoản quản trị 33

DANH MỤC CÁC HÌNH

CHƯƠNG 1: GIỚI THIỆU TỔNG QUAN ĐỀ TÀI

1.1 KHÁI QUÁT VẤN ĐỀ

Khoa học công nghệ ang phát triển từng ngày, cả người tìm hiểu thông tin lẫn nhà quảng bá thông tin ều trông ợi một phương pháp tiếp cận thông tin mới, thú vị hơn, chủ ộng và bao quát hơn Tuy nhiên, a số các website hiện tại chỉ dừng lại ở việc cung cấp hình ảnh hai chiều khiến cho việc quan sát thông tin bị giới hạn ở một góc nhìn

Giả sử khách hàng muốn mua một sản phẩm thì việc tìm hiểu thông tin trên Internet là iều cần thiết Doanh nghiệp nắm bắt ược iều ó và sẽ ưa lên website của m nh thông tin c ng như h nh ảnh của sản phẩm ể thu hút khách hàng Nếu áp dụng web 3D, khách hàng sẽ có thể xem ược tất cả các góc ộ của sản phẩm, ồng thời hiểu ược cách thức vận hành Trong khi ó ể làm ược iều này, web 2D phải cho hiển thị nhiều bức ảnh ở các góc ộ khác nhau của sản phẩm, chưa kể phải kèm theo một oạn video clip ể minh họa cơ chế vận hành sản phẩm

Việc ứng dụng công nghệ 3D vào website nhằm giải quyết vấn ề trên Khác biệt cơ bản giữa web 2D và 3D là cùng trong một không gian màn hình máy tính, thông tin có thể ược xem ở tất cả các góc nhìn Nhờ vậy mà thông tin nhận ược từ web3D là rất lớn

Ngoài mục ch giới thiệu và quảng bá sản phẩm ến với người tiêu dùng, web3D còn có thể dùng ể giới thiệu thiết kế nội thất của một căn hộ, kiến trúc của một tòa nhà… Với ời sống hiện nay, việc rời khỏi nơi làm việc ể i xem sản phẩm mới hoặc nội thất căn hộ mà mình quan tâm c ng là một vấn ề Đáp ứng thực tế ó, web3D cho phép người dùng chỉ ngồi tại nơi làm việc truy cập vào web3D, sử dụng chuột và bàn phím là có thể xem mọi chi tiết của sản phẩm hoặc trải nghiệm cảm giác

di chuyển trong không gian mà mình muốn tìm hiểu

Phong có các dãy phòng học khang trang, trang bị các phòng thực hành ầy ủ, có thư viện ầy ủ tiện nghi cho sinh viên nơi ể học tập, có các phòng thí nghiệm, phòng mô phỏng Trường c ng tạo iều kiện cho sinh viên ược thư gi n với các sân chơi thể thao, hồ bơi… Ngoài ra, trường có khuôn viên rộng rãi, thoáng mát với những hàng cây xanh rì, có dòng kênh chạy qua khuôn viên trường…

Với mong muốn giới thiệu trường chúng ta ến với những người quan tâm, những ối tác, những bậc phụ huynh có con em sắp sửa bước vào ngưỡng cửa ại học, những em thí sinh muốn tìm hiểu trước về cơ sở vật chất của trường, những người không có iều kiện ến tham quan trường trực tiếp… Mọi việc trở nên thật d dàng, mọi người chỉ cần truy cập Internet, vào trang web3 “Giới thiệu trường ại học Tôn Đức Thắng” của nhóm em là có thể tham quan ược trường chúng ta

CHƯƠNG 2: TÌM HIỂU CƠ SỞ LÝ THUYẾT

2.1 TÌM HIỂU CÔNG NGHỆ 3D

2.1.1 Sơ lược 2D và 3D

 Nói theo cách d h nh dung th ồ họa 2 tương tự hình học phẳng trên

hệ trục tọa ộ Oxy, còn 3 tương tự hình học không gian trên hệ trục tọa ộ Oxyz Đi vào phân t ch:

- Đồ họa 2D: là hình ảnh ược xây dựng trên chương tr nh ồ họa máy tính 2 chiều (Two imensional), c ng như hệ tọa ộ 2 chiều của trục tọa ộ, nó phản ánh một phong cách ồ họa phẳng Đặc trưng của chương tr nh vẽ 2D là không thể xoay góc quay ược Đặc trưng tiếp theo là mọi thứ ều hoàn toàn bằng 2D từ hậu cảnh, vật thể ến tiền cảnh tạo nên một cái hình giống như phim hoạt hình cắt giấy, mọi thứ ều nằm trên một mặt phẳng

- Đồ họa 3 : Khung h nh 3 ược xây dựng trên hệ thống ồ họa máy tính 3 chiều (Three Dimentional), hệ thống ồ họa 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 2 Đồ họa 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 nhờ vào hệ thống nguồn sáng vẽ xử lý bằng máy tính Tuy vậy hình ảnh chụp từ khung hình 3D vẫn gọi là 2 , nhưng bằng chương trình 3D ta có thể chụp nhiều tấm ảnh ở nhiều góc cạnh khác nhau từ một khung hình 3D

2.1.2 Tìm hiểu các loại ảnh nổi 3D

2.1.2.1 Ảnh stereo nhìn chéo và nhìn song song

- Con người có thể cảm nhận thế giới không gian 3 chiều bằng tất cả các giác quan, trong ó thị giác ược sử dụng nhiều nhất Chúng ta dùng mắt ể quan sát thế giới xung quanh, cảm nhận h nh dáng, k ch thước c ng như chiều sâu, khoảng cách giữa các ối tượng

- Phương pháp sơ khai nhất ể quan sát hiệu ứng nổi 3D là ặt hai ảnh trái phải của ối tượng bên cạnh nhau, và tùy vào cách nhìn, mắt chúng ta sẽ iều tiết

ể cho ra hình ảnh có hiệu ứng

- Nếu mắt trái nhìn vào ảnh bên phải, mắt phải nhìn vào ảnh bên trái (Cross view) Ta sẽ thấy một bức ảnh 3D nổi ra ngoài màn ảnh

- Ngược lại nếu ảo vị trí hai ảnh, rồi mắt trái nhìn vào ảnh bên trái, mắt phải nhìn vào ảnh bên phải (Parallel view), ta sẽ thấy một bức ảnh 3D lõm sâu vào trong màn ảnh

- Nhược iểm của phương pháp này là rất khó thực hiện, phải tập luyện rất nhiều, không phải ai c ng có thể nh n ra ược Nếu nhìn quá nhiều có thể gây chóng mặt nhức ầu do sự tập trung và iều tiết mắt quá ộ

- Autostereogram là kỹ thuật sử dụng ảo ảnh quang học do n o người tạo ra ể dựng các hình ảnh 3 chiều từ ảnh 2 chiều Nguyên lý tương tự như ảnh Stereo nhưng Autostereogram sẽ lặp i lặp lại một mẫu hình ảnh nào ó theo chiều ngang Nếu nhìn hình ảnh úng cách th n o người sẽ tạo ra ảnh có ộ nổi so với nền Vì vậy ối tượng ba chiều cần quan sát là ảo và ược giấu dưới cấu trúc nền

- Nhược iểm của phương pháp này là hình ảnh phân giải kém, màu sắc ơn iệu do trùng với màu nền, và cần tập luyện nhiều mới quan sát ược Đây là trò chơi giấu hình từng rất ược yêu thích

- Kỹ thuật Holographic cho phép ánh sáng tán xạ từ một vật thể ược ghi lại

và sau ó tái tạo lại thành hình ảnh 3 chiều bằng tia laser

- Áp dụng kỹ thuật Holographic, ảnh Hologram là một bức ảnh phẳng, nhờ sự

bố trí các chi tiết sao cho chúng phản xạ ánh sáng một cách thích hợp ể tạo cảm giác nổi lên như ảnh 3 chiều, ảnh không ghi trực tiếp lên phim, mà ghi các mẫu giao thoa bằng laser lên một môi trường nhạy quang Khi xem ảnh không cần dùng kính mà vẫn thấy nổi

- Nhược iểm của ảnh Hologram là ộ phân giải kém do kết hạt và rất ít màu sắc, vì vậy hình ảnh càng ơn giản thì khi chiếu lên sẽ càng tạo hiệu ứng ẹp hơn những hình có thiết kế phức tạp Ảnh Hologram xuất hiện ở Việt Nam từ cách

ây hàng chục năm, dưới dạng ồ chơi của trẻ em

- Analyph là hiệu ứng ạt ược bằng cách sử dụng các bộ lọc màu khác nhau

ể mã hóa hình ảnh của mỗi mắt, hay màu thường dùng là ỏ và lam Hai ảnh gốc stereo mỗi ảnh ược phân một kênh màu khác nhau rồi lồng vào nhau Khi quan sát ảnh anaglyph, ta phải eo k nh Red-Cyan Nhờ mỗi mắt kính có tác dụng lọc màu chỉ cho ảnh tương ứng truyền qua nên mắt trái ta chỉ thấy ảnh trái, mắt phải chỉ thấy ảnh phải Và do ó, ảnh Anaglyph d xem hơn Stereo, ta sẽ có cảm giác nổi 3D mà không cần nỗ lực iều tiết mắt ặc biệt gì cả

- Hạn chế của phương pháp này là bị mất bớt màu sắc khi quan sát ảnh do phải qua kính lọc màu Công nghệ Anaglyph khá phổ biến trong iện ảnh 3D nhưng t khi ược dùng ể xem ảnh tĩnh

2.1.2.5 Ảnh lật (Flip) và ảnh biến hình (Morphing)

- Flip và Morphing là hiệu ứng ặc biệt sử dụng cho các bức ảnh chuyển ộng, hình ảnh này biến thành hình ành khác thông qua một quá trình chuyển ổi liền mạch Khi nhìn vào tấm ảnh Flip hay Morphing dưới các góc khác nhau, ta thấy những hình ảnh khác nhau lật qua lật lại (2 ối với Flip và 3-10 với Morphing) Khá sống ộng vì có thể mô tả sự chuyển ộng của một vật thể nào

ó

- Tuy nhiên, hoàn toàn không có hiệu ứng ba chiều (và không ược xếp vào dạng ảnh nổi) Thường thấy trên các móc ch a khóa hay thước kẻ nhựa nhập từ Trung Quốc

2.1.2.6 Ảnh cắt lớp giả 3D (multi-layers 2D to pseudo-3D)

- Được tạo ra bằng cách nhân bản hình ảnh thành nhiều bản, sau ó ặt các lớp hình ảnh chồng lên nhau (từ 2-5 lớp), mỗi lớp là một layer tương ứng với một

ối tượng Cảm giác nổi có ược là nhờ hiệu ứng tạo khoảng cách giữa các lớp Khi xem trên thiết bị trình chiếu 3D, ta có cảm giác hình ảnh chia làm 2 lớp, lớp nền sâu vào trong và lớp chủ thể nổi ra ngoài

- Không gian giả 3D là không gian rời rạc và lượng thông tin trong tấm ảnh ó chỉ ngang với một ảnh 2 Ưu iểm là rất d làm nên giá thành rẻ

2.1.2.7 Ảnh nổi 3D tích hợp (integrated image)

- Ảnh nổi 3D tích hợp hay còn gọi là ảnh 3D chân thực (real-world 3D) dùng tấm vi thấu kính (lenticular) Ảnh nổi 3D chứa lượng thông tin gấp 10-20 lần bức ảnh thông thường nên người xem có thể cảm nhận ộ nổi, chiều sâu của ối tượng trong ảnh

- Một chuỗi các hình ảnh chụp ồng thời một ối tượng ở các góc chụp liên tiếp nhau, theo một quy trình chụp ặc biệt ể lấy ược ầy ủ 3 chiều không gian của ối tượng, sau ó chuỗi hình ảnh ược xử lý trong một quy trình phức tạp, và sản phẩm cuối cùng là ảnh nổi 3D tích hợp Đây là công nghệ tiên tiến nhất hiện nay

2.1.3 Các loại phim nổi 3D

- Công nghệ 3D phân cực dùng nguyên lý phân cực ánh sáng ể tách hình ảnh của mắt trái và mắt phải, sau ó dùng hai máy chiếu cùng loại, mỗi máy chiếu chỉ

có nhiệm vụ chiếu hình ảnh cho mắt trái hoặc mắt phải Hình ảnh của hai máy chiếu ược chiếu cùng lúc trên màn hình thông qua tấm lọc phân cực, ể tách ra phân cực trái và phải trước khi ến mắt người xem

- Công nghệ 3D phân cực là công nghệ chiếu phim nổi 3D phổ biến nhất hiện nay ở các rạp phim 3D Một số mẫu TV 3D của các hãng lớn c ng dùng công nghệ này (loại TV 3D dùng kèm kính)

2.1.3.2 Màn hình 3D dùng công nghệ chớp tắt điện tử theo thời gian (shutter)

- Công nghệ Shutter sẽ thực hiện tách các hình ảnh trái và phải của phim 3D hay ảnh 3D rồi tạo thành các dòng iểm ảnh xen kẽ (dòng chẵn-lẻ tương ứng với ảnh trái-phải) Sau ó, dùng card ồ họa chuyên dụng có thể iều khiển các dòng chẵn lẻ chớp tắt liên tục và xen kẽ theo thời gian với tần số cực nhanh Người xem

sử dụng một k nh iện tử ược ồng bộ hóa với tần số ó có thể quan sát thấy hiệu ứng 3D Về cơ bản ó là các cặp kính có nhiệm vụ ngăn cách luân phiên mắt trái và mắt phải trong khi các hình ảnh riêng rẽ ược phát cho mỗi mắt, tạo nên

ảnh 3 trong tâm tr người xem Công nghệ này c ng ược nhiều hãng phát triển dùng ể xem phim nổi 3D hoặc chơi game 3

- Phụ thuộc vào tần số frame ược sử dụng mà có thể dùng màn h nh H ể xem phim 3 H , nhưng do sự chớp tắt liên tục (dù rất nhanh) có thể gây mỏi mắt nếu xem trong thời gian dài, ồng thời giá thành của kính shutter khá cao

2.1.3.3 Màn hình 3D dùng vi thấu kính (lenticular) hoặc parallax barrier

- Công nghệ Lenticular Lenses dùng các thấu kính hình trụ nhỏ, dán thành mạng trên một phiến trong suốt, sau ó dán lên bề mặt của thiết bị chiếu hình ảnh Các thấu kính hình trụ có chức năng phóng to h nh ảnh khi người xem sử dụng

- Công nghệ Lenticular Lenses cho hiệu ứng 3 tương tự như ảnh 3D tích hợp Công nghệ này không cần dùng k nh ể xem hiệu ứng 3D, tuy nhiên có thể

bị hạn chế về vị trí quan sát, nó òi hỏi phải ngồi úng vị tr ể ạt ược hiệu ứng 3D

- Công nghệ parallax barrier cho phép xuất ảnh autostereoscopic, dùng một lưới tinh thể lỏng ặt ở ph a trước màn hình, với những kẻ hở tương ứng với những cột pixel nhất ịnh của màn hình Các vị tr này ược cắt ể cho phép truyền các ảnh luân phiên tới mỗi mắt người xem khi họ ngồi ở những vị trí xem tối ưu Khi một iện áp thấp ược ặt vào parallax barrier các khe hở của nó sẽ hướng ánh sáng từ mỗi ảnh tới mắt trái và mắt phải khác nhau một ít, do vậy tạo

lượng ảnh ơn trung b nh của một ảnh 3D là 15-20 ảnh, tối a lên tới 30 ảnh Đầu vào c ng có thể là chuỗi ảnh kết xuất từ các góc liên tiếp nhau của mô hình 3D ảo dựng từ các phần mềm 3D hoặc c ng có thể là một ảnh 2D kỹ thuật số thông thường (file jpg, psd, )

+ Xử lý mã hóa trên máy tính: Các bức ảnh này sau ó ược xử lý theo một quy trình mã hóa phức tạp ể tạo thành một bức ảnh tích hợp ầu ra duy nhất Do quá trình mã hóa không mất mát thông tin nên ảnh tích hợp có dung lượng dữ liệu rất lớn, bằng tổng lượng dữ liệu của tất cả các ảnh

ơn Việc xử lý ảnh mã hóa cần máy tính cấu hình rất mạnh

+ In ấn và hiển thị 3D trên giấy

2.2 WEBSITE 3D

2.2.1 Định nghĩa

- Hiện nay chưa có một ịnh nghĩa nào mang ến 1 cái nhìn rõ ràng nhất về Web3D Có nhiều vấn ề ặt ra như: “Nếu gọi là web3D thì phải chứa ựng một hay nhiều nội dung 3 ”, ” Các nội dung 3D phải quy mô lớn thì trang web mới ược gọi là web3 không?” Một website dù chứa ít hay nhiều các nội dung 3D vẫn ược xem là web3D, nhưng các website 3 như vậy sẽ không mang lại hiệu quả cao ược

- Trong một bài viết trả lời phỏng vấn của Tony Parisi, chủ tịch và là giám ốc iều hành của công ty Media Machines Ông chia sẻ về cái nhìn, và một số kinh nghiệm của mình trong quá trình làm việc: “Web3 là tất cả giao diện 3D, bao gồm môi trường, con người, ịa iểm, các vật thể

- Trong ó:

+ Chúng ta có thể tác ộng lên các ối tượng, ối tượng có thể là hoàn toàn

do tr tưởng tượng, không có trong thế giới thật, hoặc có thể ại diện cho các thực thể vật lý

+ Chúng ta có thể khám phá, tham quan môi trường như i bộ trong cảnh quan, mô phỏng trọng lực, ánh sáng, ổ bóng …

+ Con người có thể giao tiếp, một con người có thể là một nhân vật ầy ủ

mô hình và khớp nối, hoặc một thực thể trừu tượng (như một khối lập phương có nh n là tên một người), hoặc như một hình ảnh thu nhỏ video kết nối với một webcam.”

- “Một số bước xây dựng một ứng dụng Web3D:

+ Một số hiệu ứng 3D nổi bật thể hiện bao quát cửa sổ trình duyệt

+ Các liên kết ến nội dung 2D ở nơi nào ó ược ặt trôi nổi xung quanh không gian 3D (chứ không phải bên ngoài không gian ấy)

+ Liên kết ặt trong không gian 3D này trỏ ến không gian 3D khác, các trang web khác

+ Người dùng khác trong cùng một không gian có thể nhìn thấy nhau Chúng ta có thể nói chuyện, tương tác bên trong không gian 3 ”

- Web3 thường yêu cầu cài ặt một plugin “Web 3 viewer “ ể trình duyệt hiển thị ược các nội dung 3D

2.2.2 Khái quát

- Ngày nay, Web3 ang là xu hướng trong tiếp thị sản phẩm, quảng bá thông tin ến mọi người Công nghệ 3D ứng dụng trên website cho ra ời những gian hàng trưng bày sản phẩm một cách chân thật và sinh ộng khi xem ược sản phẩm ở tất cả các góc nhìn và cả cơ chế vận hành

- Với hình thức quảng cáo kiểu c trên Internet, những hình ảnh giới thiệu sản phẩm (showroom, nhà máy, không gian nội thất ) chỉ cho phép người xem nhìn thấy trên một chiều duy nhất Nếu muốn khách hàng có cơ hội h nh dung rõ hơn

về mọi góc ộ của sản phẩm muốn giới thiệu, doanh nghiệp buộc phải ưa lên website nhiều hình ảnh khác nhau Kèm theo ó là những lời chú thích về chất liệu, công dụng

- Cách quảng cáo này vừa tốn nhiều công sức và thời gian, lại chưa ủ sức

em ến cho người xem một cái nhìn bao quát, chủ ộng Công nghệ 3D thì khác, dựa chủ yếu vào công nghệ ảnh 3 chiều, giải pháp quảng cáo 3D trên website cho phép người xem có thể chủ ộng lựa chọn những góc nhìn mà mình quan tâm, có thể quan sát sản phẩm từ mọi góc ộ Tất cả chỉ cần một ộng tác click chuột

2.2.3 Ưu điểm của Web3D

- Ưu iểm ầu tiên của giải pháp quảng cáo mới này chính là: hình ảnh 3D có chất lượng cao, tốc ộ hiển thị nhanh, cho phép người xem có thể tương tác trực tiếp với hình ảnh (di chuyển chuột ể “ i lại” trong không gian hay “xoay qua xoay lại” các vật thể)

- Đây c ng là giải pháp “dựng mô h nh” duy nhất có thể triển khai trên internet Với các phiên bản ược chuyển giao, các doanh nghiệp có thể ghi thành các ĩa C ể phục vụ cho mục ch marketing, có thể nh kèm email ể gửi cho khách hàng

- Hơn thế nữa, trong quá trình thiết kế, công nghệ 3D kết hợp với phần mềm máy tính cho phép doanh nghiệp tận dụng hiệu ứng âm thanh (tự ộng phát ra các bản nhạc, hoặc âm thanh thay ổi theo từng cảnh), hiệu ứng hình ảnh (hình ảnh

mờ dần, phóng to, di chuyển lại gần/ra xa ) hay gắn thêm các liên kết (URL, tự ộng chuyển cảnh )

- Nếu sử dụng giải pháp quảng cáo 3D, các doanh nghiệp sẽ tiết kiệm ược các chi phí phát sinh do việc phải gửi các sản phẩm mẫu tới khách hàng, ội ng kinh doanh phải i lại, gặp gỡ và thuyết minh cho hình ảnh

- Hệ thống dựng hình (kết xuất) ồ họa 2D và 3D (Render System)

- Hệ thống t nh toán tương tác vật lý và phát hiện va chạm (Physics System)

- Hệ thống trí tuệ nhân tạo (Artificial Intelligence System)

- Hệ thống phân luồng, quản lý bộ nhớ và tạo dòng xử lý dữ liệu

- Hệ thống di n hoạt (Animation System)

- Hệ thống hỗ trợ mạng (Network System)

- Hệ thống tạo hiệu ứng âm thanh, hình ảnh,…

2.3.2 Mối quan hệ giữa Game Engine và Game

Game Engine là thành phần cốt lõi tạo nên nền móng ể phát triển Game C ng giống như ộng cơ và xe: chúng ta có thể sản xuất ra nhiều mẫu mã xe khác nhau dùng cùng một loại ộng cơ, sức mạnh của chiếc xe phụ thuộc khá nhiều vào ộng cơ mà nó

sử dụng o ó chất lượng Game phụ thuộc khá nhiều ến chất lượng Game Engine

mà nó sử dụng

2.4 UNITY 3D ENGINE

2.4.1 Giới thiệu

- Unity3 : ược phát triển bởi Unity Technologies, tại website

hoặc các nội dung 3 có t nh tương tác khác như mô h nh kiến trúc 3 , hoạt h nh

- Ngôn ngữ lập tr nh dựa trên ngôn ngữ C , Javascript và ngôn ngữ oo, thiết

kế theo hướng ối tượng, hỗ trợ các API ồ họa OpenGL và irectX

- Là một I E, môi trường phát trển t ch hợp mạnh mẽ, có thể xem trước kết quả, sản phẩm có thể xây dựng trên nhiều nền tảng:

Build Setting

+ Ứng dụng trên Windows và Mac OS

+ Ứng dụng trên nền Web: thông qua plugin Unity Web Player, Flash Player (từ phiên bản 3.5 trở lên), hỗ trợ NaCL – hỗ trợ Google s Native Client (Chrome)

+ Ứng dụng chạy trên các hệ iều hành mobile: IOS, Android

+ Ứng dụng chạy trên Xbox 360, PlayStation 3, NintendoWii(Unity3 Pro, phiên bản có ph )

- Unity có thể import và sử dụng các mô h nh 3 thiết kế trên các công cụ thiết kế 3 : 3ds Max, Maya, lender, Cinema4 …

người phát triển có thể tiếp tục tu chỉnh các tập tin HTML tạo ra ể phù hợp với yêu cầu

</a>

</div>

</div>

+ Giao tiếp giữa Unity Web Player và tr nh duyệt

 Gọi hàm trong chương tr nh từ trang web: sử dụng hàm SendMessage() sẽ gọi hàm có tên tương ứng và trong ối tượng tương ứng ược truyền vào

<script type="text/javascript" language="javascript">

<! function SaySomethingToUnity() {

var unity = GetUnity();

unity.SendMessage("MyObject", "MyFunction", "Hello from a web page!");

} >

</script>

 Gọi hàm trong trang web từ chương tr nh: sử dụng hàm Application.ExternalCall() ể gọi hàm tương ứng của trang web ược truyền vào

Application.ExternalCall( "SayHello", "The game says hello!" );

 Trên trang web ịnh nghĩa hàm SayHello

<script type="text/javascript" language="javascript">

<! function SayHello( arg ) {

// show the message alert( arg );

} >

</script>

CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG

3.1 TỔNG QUAN ĐỀ TÀI

3.1.1 Mụ ti u ơ ản của đề tài

- Mục tiêu ề tài là “T m hiểu web3D và xây dựng ứng dụng minh họa”

- Nhóm chúng em quyết ịnh sẽ áp dụng những kiến thức tìm hiểu ược về web3 ể xây dựng website “Giới thiệu trường ại học Tôn Đức Thắng 3D”, nhằm mục ch ưa h nh ảnh trường lên web một cách gần g i và chân thực nhất

có thể, ể những ai quan tâm muốn tìm hiểu có thể tham quan trường trên màn hình máy tính

3.1.2 X định yêu cầu

- Áp dụng Unity Engine lên web

- Xây dựng khuôn viên trường

- Xây dựng các phòng mẫu: phòng học, văn phòng, phòng thực hành tin học, thư viện…

3.1.3 Tính trự quan tương t ủa đề tài

- Đến với website “Giới thiệu trường ại học Tôn Đức Thắng 3 ”, người tìm hiểu thông tin sẽ có thể cảm nhận cảm giác tham quan chỉ bằng một cú click chuột

- Trường ại học Tôn Đức Thắng chia làm nhiều khu, người tìm hiểu thông tin có thể chọn lựa khu vực muốn tham quan, có thể di chuyển chuột ể thay ổi góc nh n, ồng thời dùng bàn ph m ể di chuyển trong không gian tham quan

3.1.4 Phạm vi giới hạn đề tài

- Áp dụng Unity Engine lên web

- Xây dựng khuôn viên trường

- Do số lượng phòng của trường tương tự nhau nên nhóm em chỉ xây dựng một số phòng mẫu và áp dụng cho nhiều phòng

3.2 MÔ TẢ HỆ THỐNG

3.2.1 M tả hung

Trụ sở chính của Trường ại học Tôn Đức Thắng ược xây dựng trên diện tích

10 ha tọa lạc tại Phường Tân Phong, Quận 7 (Khu Nam Sài Gòn theo quyết ịnh giao

ất số 1479/QĐ-UBND), trên trục lộ chính Bắc - Nam thành phố Hồ Chí Minh Dự án ược khởi công vào ngày 27 tháng 7 năm 2008 Quá tr nh thi công ược chia thành

2 giai oạn Giai oạn 1 từ 2008 ến 2009, giai oạn 2 từ tháng 10/2009 ến tháng 4/2011

Trường ược chia thành nhiều khu phục vụ cho các mục ch học tập như: khu , C dành cho học lý thuyết; khu A dành cho thực hành, th nghiệm; khu , E dùng làm nhà giữ xe; khu F, G dùng làm ký túc xá Ngoài ra có các nơi phục vụ ngoại khoá như sân bóng, sân tennis, hồ bơi…

Mỗi khu phục vụ học tập có thể có nhiều tầng, mỗi tầng bao gồm d y hành lang

và sảnh ngoài Trong mỗi tầng có thể có nhiều phòng, ược phân biệt với nhau dựa theo tên phòng Tên phòng ược ặt theo công thức: tên khu số TT tầng số TT phòng

Trường có các loại phòng như: văn phòng, phòng học lớn, phòng học nhỏ, phòng thực hành tin học, phòng th nghiệm, phòng học chất lượng cao, hội trường

3.2.2 M tả u ầu người ng

Chương tr nh sẽ cung cấp cái nh n 3 về trường ại học Tôn Đức Thắng, toàn

bộ ngoại cảnh và nội thất bên trong sẽ ược dựng lại trên nền 3

Khi người dùng vào website “Giới thiệu trường ại học Tôn Đức Thắng”, vị tr ứng ầu tiên sẽ ược khởi tạo mặc ịnh Người dùng có thể di chuyển bằng các ph m

m i tên tương ứng trên bàn ph m, nhảy lên bằng ph m Space Người dùng có thể di chuyển trên ường, i trên cỏ, có thể i vào các khu hoặc vào từng phòng ể xem kiến trúc Khi người dùng i ến những vị tr nhất ịnh, thông tin vị tr ó sẽ ược hiển thị trên giao diện, v dụ: ạn ang ở phòng C201, thuộc khu C, tầng 2, loại: phòng học nhỏ

3.2.3 Đối với người quản trị

Khi ăng nhập trang Admin, người quản trị có thể thực hiện các chức năng Thêm, Xoá, Sửa ối với các ối tượng như Khu, Tầng, Phòng

Nếu thêm một ối tượng mới, người quản trị có thể kết nối ối tượng ó với một ường dẫn ến mô h nh tương ứng

3.3 SƠ ĐỒ USECASE

3.3.1 Us as ho người dùng là khách

H nh 1: Sơ đồ Usecase cho khách

- Khách có thể di chuyển trong không gian bằng các ph m m i tên, nhảy lên bằng phím Space

- Khách thay ổi góc nhìn bằng cách di chuyển chuột trong không gian mô phỏng

- Khách xem thông tin bằng cách nhấn vào nút Thông tin trên giao diện Web3D

- Khi i vào một phòng, khách sẽ ược chuyển ến cảnh tương ứng

3.3.2 Us as ho người quản trị

H nh 2: Us as ho người quản trị

- Người quản trị kế thừa từ khách, có tất cả các chức năng của khách

- Ngoài ra người quản trị có thêm các chức năng quản lý như quản lý tài khoản quản trị, quản lý cơ sở vật chất, quản lý chuyển cảnh

3.3.3 Đặc tả các usecase chính

3.3.3.1 Phân hệ khách

Tên usecase: Di chuyển

Hậu iều kiện Không có

Bảng 1: Usecase Di chuyển

Tên usecase: Thay đổi góc nhìn

quan không gian mô phỏng

Dòng sự kiện chính Khách di chuyển chuột trong không gian ể thay ổi góc

nhìn

Bảng 2: Usecase Thay ổi góc nhìn

Tên usecase: Xem thông tin

ang hiển thị

Dòng sự kiện chính B1: Khách di chuyển ến vị trí cần xem thông tin

B2: Chọn chức năng Thông Tin B3: Thông tin vị trí sẽ hiển thị trên màn hình

Tiền iều kiện Hệ thống phải load xong 100%

Bảng 3: Usecase Xem thông tin

Tên usecase: Chuyển cảnh

Hậu iều kiện Khách muốn quay lại cảnh c phải di chuyển lại vị tr c

ể chuyển lại cảnh

Bảng 4: Usecase Chuyển cảnh

3.3.3.2 Phân hệ quản trị

Tên usecase: Thêm cổng chuyển cảnh

thống một cổng ể chuyển cảnh

Bảng 5: Usecase Thêm cổng chuyển cảnh

Bảng 6: Usecase Cập nhật cổng

Tên usecase: Xóa cổng

Dòng sự kiện phụ Nếu thành công thông tin sẽ ược lưu vào cơ sở dữ liệu

Bảng 8: Usecase Thêm cơ sở vật chất

Tên usecase: Sửa ơ sở vật chất

sở vật chất (Khu, Tầng, Phòng)

Dòng sự kiện chính B1: Nhập thông tin cơ sở vật chất cần chỉnh sửa

B2: Hoàn tất

Dòng sự kiện phụ Nếu thành công thông tin sẽ ược lưu vào cơ sở dữ liệu

Bảng 9: Usecase Sửa cơ sở vật chất

Tên usecase: Xóa ơ sở vật chất

Bảng 10: Usecase Xóa cơ sở vật chất