Hệ thống trình diễn trực quan trên web phục vụ cho liên hoan tuổi trẻ sáng tạo thành phố hồ chí minh

ỦY BAN NHÂN DÂN THÀNH ĐỒN TP HỒ CHÍ MINH THÀNH PHỐ HỒ CHÍ MINH TRUNG TÂM PHÁT TRIỂN SỞ KHOA HỌC VÀ CÔNG NGHỆ KHOA HỌC VÀ CÔNG NGHỆ TRẺ CHƯƠNG TRÌNH KHOA HỌC VÀ CƠNG NGHỆ CẤP THÀNH PHỐ BÁO CÁO TỔNG HỢP KẾT QUẢ NHIỆM VỤ NGHIÊN CỨU KHOA HỌC VÀ CƠNG NGHỆ HỆ THỐNG TRÌNH DIỄN TRỰC QUAN TRÊN WEB PHỤC VỤ CHO LIÊN HOAN TUỔI TRẺ SÁNG TẠO THÀNH PHỐ HỒ CHÍ MINH Cơ quan chủ trì nhiệm vụ: Trung tâm Phát triển Khoa học Công nghệ Trẻ Chủ nhiệm nhiệm vụ: ThS Trần Ngọc Đạt Thành Thành phố Hồ Chí Minh - 2021 i ỦY BAN NHÂN DÂN THÀNH ĐỒN TP HỒ CHÍ MINH THÀNH PHỐ HỒ CHÍ MINH TRUNG TÂM PHÁT TRIỂN SỞ KHOA HỌC VÀ CÔNG NGHỆ KHOA HỌC VÀ CÔNG NGHỆ TRẺ CHƯƠNG TRÌNH KHOA HỌC VÀ CƠNG NGHỆ CẤP THÀNH PHỐ BÁO CÁO TỔNG HỢP KẾT QUẢ NHIỆM VỤ NGHIÊN CỨU KHOA HỌC VÀ CƠNG NGHỆ HỆ THỐNG TRÌNH DIỄN TRỰC QUAN TRÊN WEB PHỤC VỤ CHO LIÊN HOAN TUỔI TRẺ SÁNG TẠO THÀNH PHỐ HỒ CHÍ MINH (Đã chỉnh sửa theo kết luận Hội đồng nghiệm thu ngày Chủ nhiệm nhiệm vụ: Chủ tịch Hội đồng nghiệm thu (Ký ghi rõ họ tên) Trần Ngọc Đạt Thành Cơ quan chủ trì nhiệm vụ Đồn Kim Thành Thành phố Hồ Chí Minh- 2021 ii ) THÀNH ĐỒN TP HỒ CHÍ MINH CỘNG HỒ XÃ HỘI CHỦ NGHĨA VIỆT NAM TRUNG TÂM PHÁT TRIỂN Độc lập - Tự - Hạnh phúc KHOA HỌC VÀ CÔNG NGHỆ TRẺ Hồ Chí Minh, ngày tháng năm BÁO CÁO THỐNG KÊ KẾT QUẢ THỰC HIỆN NHIỆM VỤ NGHIÊN CỨU KH&CN I THƠNG TIN CHUNG Tên nhiệm vụ: Hệ thống trình diễn trực quan Web phục vụ cho Liên hoan tuổi trẻ sáng tạo Thành phố Hồ Chí Minh Thuộc: Chương trình/lĩnh vực (tên chương trình/lĩnh vực): Vườn ươm Sáng tạo Khoa học Công nghệ trẻ Chủ nhiệm nhiệm vụ: Họ tên: Trần Ngọc Đạt Thành Ngày, tháng, năm sinh: 23/10/1994 Nam/ Nữ: Nam Học hàm, học vị: Thạc Sĩ Chức danh khoa học: Chức vụ Điện thoại: 0938341940 Tổ chức: Nhà riêng: .Mobile: Fax: E-mail: tndthanh@selab.hcmus.edu.vn Tên tổ chức cơng tác: Phịng thí nghiệm Cơng nghệ Phần mềm SELab, trường ĐH Khoa học Tự nhiên, ĐHQG-HCM Địa tổ chức: 227 Nguyễn Văn Cừ, phường 4, quận 5, TP.Hồ Chí Minh Địa nhà riêng: 97/22A Hưng Phú, Phường 8, Quận 8, TP.HCM Tổ chức chủ trì nhiệm vụ: Tên tổ chức chủ trì nhiệm vụ: Trung tâm Phát triển Khoa học Công nghệ trẻ Điện thoại: 028.38.233.363 Fax: E-mail: khoahoctre@gmail.com Website: khoahoctre.com.vn Địa chỉ: Số Phạm Ngọc thạch, Phường Bến Nghé, Quận Họ tên thủ trưởng tổ chức: Đoàn Kim Thành iii Số tài khoản: 3713.0.1083277.00000 Kho bạc: Kho bạc Nhà nước Quận Thành phố Hồ Chí Minh Tên quan chủ quản đề tài: II TÌNH HÌNH THỰC HIỆN Thời gian thực nhiệm vụ: - Theo Hợp đồng ký kết: từ tháng / năm - Thực tế thực hiện: từ tháng /năm đến tháng / năm đến tháng /năm - Được gia hạn (nếu có): Khơng Kinh phí sử dụng kinh phí: a) Tổng số kinh phí thực hiện: 105 tr.đ, đó: + Kính phí hỗ trợ từ ngân sách khoa học: 105 tr.đ + Kinh phí từ nguồn khác: 00 tr.đ b) Tình hình cấp sử dụng kinh phí từ nguồn ngân sách khoa học: Thực tế đạt Theo kế hoạch Số TT Ghi Thời gian Kinh phí Thời gian Kinh phí (Số đề nghị (Tháng, năm) (Tr.đ) (Tháng, năm) (Tr.đ) toán) 12/2021 105 12/2021 105 … c) Kết sử dụng kinh phí theo khoản chi: Đối với đề tài: Đơn vị tính: Triệu đồng Theo kế hoạch Số Nội dung TT khoản chi Tổng NSKH Trả công lao động (khoa học, phổ thông) 99.856 820 99.856 820 iv Nguồn khác Thực tế đạt Tổng NSKH 99.856 820 99.856 820 Nguồn khác Nguyên, vật liệu, lượng Thiết bị, máy móc Xây dựng, sửa chữa nhỏ Chi khác Tổng cộng 5.143 180 5.143.1 80 5.143 180 5.143.1 80 105.00 0.000 105.000 000 105.00 0.000 105.000 000 - Lý thay đổi (nếu có): Khơng Đối với dự án: Đơn vị tính: Triệu đồng Số Nội dung TT khoản chi Thiết bị, máy móc mua Nhà xưởng xây dựng mới, cải tạo Kinh phí hỗ trợ cơng nghệ Chi phí lao động Nguyên vật liệu, lượng Thuê thiết bị, nhà xưởng Khác Theo kế hoạch Tổng NSKH Tổng cộng v Nguồn khác Thực tế đạt Tổng NSKH Nguồn khác - Lý thay đổi (nếu có): Khơng Các văn hành trình thực đề tài/dự án: (Liệt kê định, văn quan quản lý từ cơng đoạn xét duyệt, phê duyệt kinh phí, hợp đồng, điều chỉnh (thời gian, nội dung, kinh phí thực có); văn tổ chức chủ trì nhiệm vụ (đơn, kiến nghị điều chỉnh có) Số TT Số, thời gian ban hành văn Tên văn Ghi … Tổ chức phối hợp thực nhiệm vụ: Số TT Tên tổ chức đăng ký theo Thuyết minh Nội dung Tên tổ chức tham gia thực tham gia chủ yếu Sản phẩm chủ yếu đạt Ghi chú* - Lý thay đổi (nếu có): Khơng Cá nhân tham gia thực nhiệm vụ: (Người tham gia thực đề tài thuộc tổ chức chủ trì quan phối hợp, không 10 người kể chủ nhiệm) Số TT Tên cá nhân đăng ký theo Thuyết minh Trần Ngọc Đạt Thành Tên cá nhân tham gia thực Trần Ngọc Đạt Thành Nội dung tham gia Sản phẩm chủ yếu đạt - Đề xuất phương Định hướng pháp khoa học trình phát triển đề đề tài tài, xây dựng vi Ghi chú* - Phân tích ý nghĩa, chức tính thực tiễn đề bản, hoàn tài thành văn bản, giấy tờ - Tổ chức, quản lý, giám sát tiến độ thực đề tài hệ Xây dựng chức chính, hồn - Thử nghiệm hệ thành văn thống - Đưa hệ bản, giấy tờ thống vào thực nghiệm phân tích hiệu hệ thống Huỳnh Viết Thám Huỳnh Viết Thám - Xây thống Trần Mai Khiêm Trần Mai Khiêm - Phân tích kiến trúc Phân tích, hệ thống đề tài đánh giá xây dựng - Đề xuất giải chức pháp cơng nghệ thực đề tài dựng - Xây dựng phát triển hệ thống Lê Công Luận Lê Công Luận - Triển khai thực Kiểm thử triển khai, tối nghiệm hệ thống ưu hóa hệ - Kiểm thử, tối ưu thống hóa hệ thống - Lý thay đổi (nếu có): Khơng Tình hình hợp tác quốc tế: Thực tế đạt Theo kế hoạch Số TT (Nội dung, thời gian, kinh phí, địa điểm, tên tổ chức hợp tác, số đoàn, số lượng người tham gia ) (Nội dung, thời gian, kinh phí, địa điểm, tên tổ chức hợp tác, số đoàn, số lượng người tham gia ) vii Ghi chú* - Lý thay đổi (nếu có): Khơng Tình hình tổ chức hội thảo, hội nghị: Theo kế hoạch Thực tế đạt (Nội dung, thời gian, kinh phí, địa điểm ) (Nội dung, thời gian, kinh phí, địa điểm ) Số TT Nội dung: - Ghi chú* Nội dung: Thời gian: trước 2/12/2021 Kinh phí: 4.200.000đ Địa điểm: TT bố trí - Thời gian: 2/12/2021 Kinh phí: 4.200.000đ Địa điểm: online - Lý thay đổi (nếu có): Khơng Tóm tắt nội dung, cơng việc chủ yếu: (Nêu mục 15 thuyết minh, không bao gồm: Hội thảo khoa học, điều tra khảo sát nước nước ngoài) Thời gian Số TT (Bắt đầu, kết thúc Các nội dung, công việc chủ yếu (Các mốc đánh giá chủ yếu) - tháng … năm) Theo kế hoạch Xây dựng thuyết minh chi tiết đề tài 12/2020 viii Người, quan thực Thực tế đạt 01/2020 Huỳnh Viết Thám Khảo sát hệ thống ngồi nước 01/2021 02/2021 Lê Cơng Luận Xây dựng môi trường, không gian triển lãm 02-03/2021 03/2021 Trần Mai Khiêm Xây dựng thông tin đa phương tiện 03-04/2021 04/2021 Huỳnh Viết Thám Tương tác môi trường triển lãm 04-05/2021 05/2021 Lê Công Luận Xây dựng giao diện 05-06/2021 06/2021 Trần Mai Khiêm Xây dựng tương tác với thông tin đa phương tiện 06-07/2021 07/2021 Huỳnh Viết Thám Xây dựng giao diện tổng quan chung web 07-08/2021 08/2021 Lê Công Luận Build ứng dụng môi trường web 08-09/2021 09/2021 Trần Mai Khiêm 10 Thực kiểm tra, đánh giá chức xây dựng 09-10/2021 10/2021 Huỳnh Viết Thám 11 Thực triển khai thực tế phân tích kết hệ thống 11-12/2021 11/2021 Lê Cơng Luận 12 Báo cáo tổng kết 12/2021 12/2021 Trần Mai Khiêm - Lý thay đổi (nếu có): III SẢN PHẨM KH&CN CỦA NHIỆM VỤ Sản phẩm KH&CN tạo ra: a) Sản phẩm Dạng I: ix Số TT Tên sản phẩm tiêu chất lượng chủ yếu Đơn Số lượng vị đo Theo kế hoạch Thực tế đạt - Lý thay đổi (nếu có): b) Sản phẩm Dạng II: Yêu cầu khoa học Số TT Ghi cần đạt Tên sản phẩm Theo kế hoạch Thực tế đạt Phần mềm web trình diễn trực quan cho việc tổ chức triển lãm ảo trực tuyến, phục vụ cho Liên hoan Tuổi trẻ Sáng tạo Thành phố Hồ Chí Minh Hệ thống ứng dụng web cho phép trình diễn trực quan trình duyệt web thơng dụng máy tính (có hỗ trợ WebGL phiên từ 2.0 trở lên) tổ chức kiện triển lãm ảo trực tuyến; có khả tương tác tự nhiên với hình ảnh video; hỗ trợ liên kết đường dẫn đến trang hội thảo, kiện, họp Hệ thống có tùy biến theo nhu cầu thơng qua file cấu hình: hỗ trợ tối đa phịng triển lãm với tối đa 20 gian hàng trưng bày/phòng triển lãm; lựa chọn mẫu thiết kế gian hàng gian hàng có thiết kế thông tin đa x Hệ thống ứng dụng web cho phép trình diễn trực quan trình duyệt web thơng dụng máy tính (có hỗ trợ WebGL phiên từ 2.0 trở lên) tổ chức kiện triển lãm ảo trực tuyến; có khả tương tác tự nhiên với hình ảnh video; hỗ trợ liên kết đường dẫn đến trang hội thảo, kiện, họp Hệ thống có tùy biến theo nhu cầu thơng qua file cấu hình: hỗ trợ tối đa phòng triển lãm với tối đa 20 gian hàng trưng bày/phịng triển lãm; lựa chọn mẫu thiết kế gian hàng gian hàng có thiết kế thơng tin đa dùng đứng gần vật thể chiều, ta cho hiển thị mơ hình đầy đủ đỉnh, người dùng tiến xa vật thể chiều, ta cho hiển thị mơ hình bị giảm 60% chất lượng, góc nhìn xa người dùng nhìn khơng rõ chi tiết 4.3 Sử dụng bảng hiển thị chiều để tạo cảm giác chiều Billboard hiểu biển quảng cáo thường thấy giới thật, dựng theo kiểu mặt phẳng đối mặt với người xem đặt vị trí nhiều người xem Trong giới ảo, Billboard xem cách để giả lập lại vật thể chiều dạng chiều, tức vật chiều xây dựng mặt phẳng chiều để thể gắn vào trục, trục xoay mặt phẳng giả lập theo hướng đối diện với camera, để camera ln ln nhìn song song đối diện tạo cảm giác vật chiều Cách giúp giảm số lượng đỉnh vật chiều cần thể cách thay số lượng đỉnh cần vẽ cho mặt phẳng vật thể giả lập chiều, giúp cho ứng dụng giữ sinh động, chìm đắm Billboard thường áp dụng cho cây, bụi cỏ người dùng ý Hình 44: Các bảng billboard hệ thống 55 4.4 Giảm tác vụ vẽ hiển thị chiều cảnh chiều Để vẽ vật thể lên hình, engine cần phải gọi lệnh vẽ xuống phía thư viện hay API đồ họa (OpenGL hay Direct3D) Lệnh vẽ có chi phí tốn va phải gọi thực nhiều lần, dẫn đến tình trạng CPU bị tải việc vẽ đồ họa phải thực liên tục theo frame Unity hỗ trợ cách để xử lý việc giảm tối đa số lệnh vẽ lúc ứng dụng chạy, gom vật thể lại thành vật thể lớn, sau gọi lệnh vẽ lần cho vật thể lớn Gom vật tĩnh : sử dụng cho vật tĩnh cảnh, gom tất vật tĩnh khơng chuyển động địa hình, cối, nhà cửa để gọi lệnh vẽ cho tất vật, vật khơng cần cập nhật nhiều Cách làm chương trình chạy nhanh hiệu hơn, tốn số lần gọi lệnh vẽ đồ họa hơn, lại tốn nhớ hơn, cần phải lưu vật lớn sau gom vật tĩnh nhỏ lại Hình 45: Gom vật tĩnh chạy phát sinh thêm nhớ (Nguồn: http://www.slideshare.net/ozlael/optimizing-unity-graphics-unite-seoul-ver ) Gom vật động : sử dụng cho vật thường xuyên chuyển động cảnh, gom tất vật thường hay di chuyển số lượng đỉnh có nguyên liệu xây dựng, ví dụ thú cảnh Sau gom 56 xong cập nhật lệnh vẽ Cách Unity hỗ trợ tự động lúc chạy ứng dụng Hình 46: Gom vật động tiến hành chạy lúc thực thi ứng dụng (Nguồn: http://www.slideshare.net/ozlael/optimizing-unity-graphics-unite-seoul-ver) 4.5 Kết luận chương Trong chương này, nhóm nghiên cứu tìm hiểu, phân tích vấn đề xảy xây dựng hệ thống ứng dụng ảo khơng gian chiều Web Từ đó, nhóm đề xuất áp dụng số phương pháp cải tiến, tối ưu hóa cho ứng dụng chạy Web ổn định nhiều trình duyệt tảng khác 57 CHƯƠNG KẾT QUẢ VÀ ĐÁNH GIÁ Trong chương trình bày kết đạt đưa số đánh giá, số liệu hệ thống Website Liên hoan Tuổi trẻ Sáng tạo Thành phố Hồ Chí Minh 2021 Tổng kết 5.1 Kết xây dựng môi trường ảo chiều tảng Web Mơi trường ảo chiều có khả hỗ trợ người tham gia di chuyển tự khu vực khác nhau, khu vực định tuyến theo đường dẫn website, cụ thể: Bảng 3: Bảng thông tin khu vực không gian ảo chiều ứng với đường dẫn định tuyến website Trang chủ https://lienhoan.khoahoctre.com.vn/ sảnh tham quan bên sảnh tham quan bên Phòng triển lãm gian https://lienhoan.khoahoctre.com.vn/exhibition/?phong=1 hàng Phòng triển lãm gian https://lienhoan.khoahoctre.com.vn/exhibition/?phong=2 hàng Phòng triển lãm gian https://lienhoan.khoahoctre.com.vn/exhibition/?phong=3 hàng Phòng triển lãm gian https://lienhoan.khoahoctre.com.vn/exhibition/?phong=4 hàng Phòng trưng bày https://lienhoan.khoahoctre.com.vn/display/ Phòng trưng bày https://lienhoan.khoahoctre.com.vn/display2/ 58 Các hình ảnh khu vực: Hình 47: Trang hiển thị chờ tải trước vào sảnh Hình 48: Sảnh chào đón bên ngồi thiết kế tòa nhà Trung tâm Phát triển Khoa học Cơng nghệ Trẻ 59 Hình 49: Quang cảnh xung quanh khu vực triển lãm Hình 50: Sảnh chào đón bên với biểu tượng chiều 60 Hình 51: Các banner poster xung quanh khu vực chào đón Hình 52: Các cánh cổng dẫn đến khu vực khác 61 Hình 53: Cánh cổng dẫn đến khu vực phịng trưng bày Hình 54: Khu vực phòng chờ gian hàng triển lãm chuẩn bị 62 Hình 55: Các sảnh triển lãm gian hàng bên Hình 56: Gian hàng đucợ thiết kế để có poster, video logo tương ứng 63 Hình 57: Quang cảnh phịng trưng bày với mơ hình chiều 5.2 Đánh giá kết triển khai server Các kiện thời gian diễn server q trình triển khai hệ thống mơ tả bảng sau: Bảng 4: Bảng thông tin server trình diễn kiện Thời điểm 05/12/2021 Sự kiện Máy chủ (A) tạo với cấu hình: ● vCPU ● GB RAM ● 250 GB dung lượng lưu trữ ● 300 Mbps băng thông truyền tải (tương đương 37.5MB/s 11/12/2021 Triển lãm công bố 64 11/12/2021 16:00 Máy chủ A có dấu hiệu bị bão hịa băng thơng 11/12/2021 16:24 Máy chủ A bắt đầu bị bão hịa băng thơng 11/12/2021 16:53 Máy chủ A bị bão hịa băng thơng, máy chủ (B) đề xuất với cấu hình: ● vCPU ● GB RAM ● 250 GB dung lượng lưu trữ ● 500 Mbps băng thông truyền tải (tương đương 62.5MB/s 11/12/2021 17:08 Máy chủ B duyệt triển khai 11/12/2021 18:00 Máy chủ B bắt đầu vào hoạt động Hình 58: Sơ đồ ghi nhận lượt truy cập khu vực server 65 Tính đến 7:00 sáng ngày 19/12/2021, số lượng truy cập tổng cộng vị trí server là: ● Sảnh ngồi: 8.750 lượt ● Phịng triển lãm gian hàng: 9.405 lượt ● Phòng trưng bày 1: 1.014 lượt ● Phịng trưng bày 2: 3.333 lượt Hình 59: Sơ đồ ghi nhận lượt truy cập khu vực server Như vậy, hệ thống triển khai phổ biến rộng rãi đến cộng đồng, thu hút hàng ngàn người tham gia với 50 đơn vị tham gia triển lãm, đem lại hiệu to lớn đánh giá cao hình thức, trải nghiệm 5.3 Hướng phát triển Hệ thống trình diễn trực quan mơi trường Web có tiềm lớn việc mở rộng thay đổi cảnh quan xung quanh, thay đổi nội dung poster, banner để phục vụ cho kiện khác dễ dàng nhanh chóng, đồng thời triển khai thêm trò chơi, hoạt động xung quanh khu vực triển lãm 66 KẾT LUẬN CHUNG Trong đề tài này, nhóm nghiên cứu thực Phần mềm Web trình diễn trực quan cho việc tổ chức triển lãm ảo trực tuyến, phục vụ cho Liên hoan Tuổi trẻ Sáng tạo Thành phố Hồ Chí Minh Điểm bật hệ thống khả thay đổi, chỉnh sửa nội dung động cách tức thời Điều giúp đơn vị sử dụng khai thác mở rộng để triển khai nhiều nội dung bên trong, cập nhật, thay đổi nội dung loại hình thơng tin đa phương tiện ảnh, poster, banner, logo video Ngoài ra, hệ thống cịn có tiềm phát triển việc thêm vào kiện, trò chơi, hoạt động trình diễn triển lãm Phần mềm ứng dụng Web phát triển bao gồm khu vực: ● Sảnh chào đón bên ngồi bên ● Phòng triển lãm loại thường loại Vip, số lượng phịng tối đa 4, loại phịng có sức chứa tối đa 20 gian hàng, gồm có loại gian hàng với loại phòng Mỗi gian hàng hỗ trợ lên đến ảnh poster, banner, logo video có khả thay đổi nhanh chóng dễ dàng từ bên ngồi, hệ thống tự động cập nhật lại thay đổi ● Phòng trưng bày với số lượng 2, phòng trưng bày hiển thị từ 15 đến 20 ảnh poster để treo xung quanh mơ hình chiều scan từ bên vào phục vụ cho mục đích trưng bày sản phẩm thật từ ngồi đời Các mơ hình cảnh vật trưng bày tối ưu hóa nhiều phương pháp khác để đem lại hiệu tốc độ tải hiển thị trang web, đem lại trải nghiệm người dùng tối ưu 67 TÀI LIỆU THAM KHẢO [1] David Ball, Zoom Blog, https://blog.zoom.us/introducing-zoomimmersive-view/ [2] European conference on Computer Vision, ECCV'20 Online, https://eccv2020.eu/ [3] Association for the Advancement of Artificial Intelligence, AAAI Conference on Artificial Intelligence, https://aaai.org/Conferences/AAAI-22/ [4] Map3D, Ho Chi Minh city 3D/360, https://map3d.visithcmc.vn/ [5] The DàLat at 1200, The DàLat at 1200, https://data.globalvision.ch/file/dalat-1200-vr/ [6] 360view, Vietnam Virtual Tour, https://www.360view.vn/gallery/data/projects/vietnam/2015/hn9g/ [7] vnexpress, Agri Tech Expo 2021, https://fair.vnexpress.net/agri-techexpo/tech-expo-virtual.html [8] Travellive, VNTravellive, https://vntravellive.com/trien-lam-tranh-tructuyen-cau-chuyen-dong-song-d32778.html [9] Bộ văn hóa, thể thao du lịch, Triển lãm trực tuyến: Khơng giải pháp tình thế, https://bvhttdl.gov.vn/trien-lam-truc-tuyen-khong-chi-lagiai-phap-tinh-the-20210910134442163.htm [10] Intrado Digital Media, Virtual Event Platform, https://www.inxpo.com/virtual-events 68 [11] VirBELA, A Virtual world for Work, Education and Events, https://www.virbela.com/?fpr=andrew31 Thành phố Hồ Chí Minh, ngày tháng năm Chủ nhiệm nhiệm vụ ThS Trần Ngọc Đạt Thành 69