Tổng quan đồ án

Trong những năm gần đây, công nghệ thực tế ảo (Virtual Reality – VR) đã và đang trở thành một xu hướng phát triển quan trọng, không chỉ trong ngành công nghệ thông tin mà còn lan rộng sang các lĩnh vực khác như giáo dục, y tế, giải trí, và kiến trúc. Các tập đoàn công nghệ lớn, đặc biệt là Meta (trước đây là Facebook), đang đầu tư mạnh mẽ vào VR và hướng đến xây dựng các nền tảng như Metaverse – một không gian số tương tác thực tế ảo, nơi con người có thể làm việc, học tập và giải trí trong một môi trường ảo hoàn toàn.

Xu hướng này được dự đoán sẽ trở thành một phần quan trọng của tương lai công nghệ khi các thiết bị VR ngày càng phổ biến và khả năng tương tác với không gian 3D ngày càng tự nhiên hơn. Trong bối cảnh đó, việc xây dựng các ứng dụng VR, đặc biệt là WebVR – nền tảng VR có thể truy cập qua trình duyệt mà không cần cài đặt ứng dụng, được xem là một bước tiến tiềm năng để đưa VR đến gần hơn với người dùng phổ thông.

Nhận thấy sự phát triển nhanh chóng của công nghệ VR và các ứng dụng của nó, em quyết định chọn đề tài “Ứng dụng WebVR cho trải nghiệm kiến trúc và nội thất” phản ánh mục tiêu xây dựng một nền tảng WebVR giúp người dùng tương tác với các không gian kiến trúc và nội thất được mô phỏng trực quan. Việc lựa chọn đề tài này xuất phát từ các lý do chính sau:

• Xu hướng ứng dụng công nghệ mới: Công nghệ VR nói chung và WebVR nói riêng đang được chú trọng phát triển, đặc biệt là trong ngành kiến trúc. Đề tài này giúp nhóm tiếp cận và ứng dụng các công nghệ hiện đại vào thực tế.
• Tính thực tiễn cao: Ứng dụng WebVR cho phép người dùng dễ dàng trải nghiệm các không gian kiến trúc trực tiếp trên trình duyệt, tiết kiệm thời gian và chi phí so với các phương pháp truyền thống như xây dựng mô hình vật lý.
• Tăng cường tính tiện lợi: Người dùng không cần các thiết bị phần cứng cao cấp mà vẫn có thể tham quan không gian kiến trúc thông qua môi trường ảo. Điều này làm cho công nghệ tiếp cận được với nhiều đối tượng hơn.
• Mở rộng khả năng ứng dụng: Đề tài này đặt nền tảng để phát triển các ứng dụng trong tương lai, từ giới thiệu dự án kiến trúc, bán hàng, đến giáo dục và mô phỏng.

Ý nghĩa thực tiễn

Đối với ngành kiến trúc và nội thất: Hỗ trợ các kiến trúc sư và nhà thiết kế trình bày ý tưởng một cách sinh động và trực quan, giúp khách hàng hiểu rõ hơn về sản phẩm.

Đối với người dùng: Mang lại trải nghiệm mới mẻ và tiện lợi khi tham quan không gian kiến trúc mà không cần đến trực tiếp.

Đối với sinh viên và nhà nghiên cứu: Là cơ hội thực hành và áp dụng kiến thức công nghệ để giải quyết các bài toán thực tiễn trong lĩnh vực đồ hoạ nói riêng và công nghệ thông tin nói chung.

Mục tiêu nghiên cứu

Mục tiêu chính của đề tài này là nghiên cứu cách ứng dụng công nghệ WebVR để đánh giá tính khả thi và giá trị mà nó mang lại trong việc trình bày và mô phỏng không gian kiến trúc. Đề tài hướng đến việc xây dựng một môi trường tương tác 3D trực quan, giúp người dùng có thể khám phá các không gian nội thất một cách chân thực, từ đó nâng cao trải nghiệm người dùng lên một tầm cao mới.

Ngoài ra, nghiên cứu này cũng tập trung vào việc cải thiện chất lượng đồ họa, áp dụng các kỹ thuật tiên tiến nhằm đảm bảo khả năng hiển thị sinh động và mượt mà trên nền tảng WebVR. Thông qua quá trình phát triển và thử nghiệm, đề tài đánh giá những lợi ích và hạn chế của công nghệ WebVR trong lĩnh vực kiến trúc, đồng thời đề xuất các giải pháp phù hợp để khắc phục khó khăn. Kết quả của nghiên cứu sẽ đặt nền tảng cho việc phát triển các ứng dụng mở rộng trong tương lai, như tích hợp công cụ tùy chỉnh không gian hay hiển thị trên nhiều loại thiết bị khác nhau, góp phần hiện thực hóa tiềm năng của WebVR trong ngành công nghiệp này.

Phạm vi nghiên cứu

Phạm vi nghiên cứu giới hạn trong việc mô phỏng không gian kiến trúc và nội thất với mục tiêu mang lại sự tương tác chân thực, dễ sử dụng, và trực quan trên nền tảng trình duyệt. Các khía cạnh chuyên sâu về kỹ thuật đồ họa nâng cao hoặc tối ưu hóa hiệu suất trên các thiết bị VR cao cấp không phải là trọng tâm của nghiên cứu này.

Cơ sở lý thuyết

Thực tế ảo (Virtual Reality – VR)

Thực tế ảo (VR) là một trong những công nghệ tiên tiến nhất của thế kỷ 21, mang đến cho người dùng khả năng trải nghiệm các môi trường số hoá với độ chân thực cao thông qua các thiết bị như kính VR, bộ điều khiển cầm tay, hoặc thậm chí là các bộ cảm biến toàn thân. VR tạo ra một không gian kỹ thuật số hoàn toàn tách biệt với thế giới thực, nơi người dùng có thể tương tác với các đối tượng, môi trường, và đôi khi là với những người khác trong không gian ảo đó.

VR ứng dụng nguyên lý lập thể (stereoscopy), trong đó hai hình ảnh được tạo ra với góc nhìn hơi khác nhau để tạo cảm giác chiều sâu. Khi kết hợp với các công nghệ như theo dõi chuyển động (motion tracking) và âm thanh không gian (spatial audio), VR mang lại một trải nghiệm đa giác quan, giúp người dùng cảm nhận như đang ở trong không gian thực.

Trong lĩnh vực kiến trúc và thiết kế nội thất, VR đang ngày càng chứng tỏ vai trò quan trọng. Thay vì dựa vào bản vẽ 2D hoặc mô hình 3D trên màn hình, VR cho phép các kiến trúc sư, nhà thiết kế và khách hàng “bước vào” không gian được thiết kế. Người dùng có thể quan sát toàn cảnh, cảm nhận được tỷ lệ của các chi tiết, màu sắc, ánh sáng, và bố trí nội thất

Công nghệ WebVR và WebXR

WebVR là một công nghệ được phát triển để mang lại khả năng truy cập nội dung thực tế ảo (VR) trực tiếp từ trình duyệt web. Được giới thiệu vào năm 2016 bởi Mozilla, WebVR cho phép các nhà phát triển xây dựng trải nghiệm VR mà không yêu cầu người dùng phải cài đặt phần mềm bổ sung hoặc sử dụng thiết bị phần cứng đặc biệt ngoài kính VR và trình duyệt hỗ trợ.

Đồ họa 3D trên web với Three.js

Three.js là một thư viện JavaScript mạnh mẽ và phổ biến, được thiết kế để đơn giản hóa việc phát triển đồ họa 3D trên nền tảng web. Ra mắt vào năm 2010, Three.js cung cấp một bộ công cụ hoàn chỉnh giúp các nhà phát triển dễ dàng tạo ra các cảnh 3D phức tạp, từ mô hình đơn giản đến các môi trường thực tế ảo tinh vi. Với khả năng hỗ trợ WebGL (Web Graphics Library), Three.js đảm bảo hiệu suất cao, đồng thời hoạt động mượt mà trên hầu hết các trình duyệt hiện đại.

Một trong những điểm mạnh của Three.js là tính linh hoạt và khả năng tương thích. Thư viện này hỗ trợ đa dạng các loại đối tượng 3D như hình học cơ bản (hình cầu, hình hộp, hình nón…), vật liệu (phản xạ, ánh sáng môi trường, bóng đổ…), và hệ thống ánh sáng (ánh sáng điểm, ánh sáng định hướng, ánh sáng xung quanh). Các hiệu ứng đặc biệt như sương mù, đổ bóng, hay texture mapping cũng được tích hợp, mang lại trải nghiệm chân thực cho người dùng.

Vector trong đồ họa 3D

Trong đồ họa 3D, vector là một khái niệm nền tảng, đóng vai trò quan trọng trong việc xác định vị trí, hướng và sự chuyển động của các đối tượng trong không gian ba chiều. Vector được biểu diễn dưới dạng một tập hợp các giá trị tọa độ (x, y, z) và thường được sử dụng để mô tả điểm, đường thẳng, mặt phẳng hoặc bất kỳ hình dạng nào trong không gian.

Mô hình vật lý và tương tác trong VR

Mô hình vật lý và khả năng tương tác là hai yếu tố quan trọng góp phần tạo nên trải nghiệm chân thực trong môi trường thực tế ảo (VR). Chúng giúp mô phỏng cách các vật thể tương tác với nhau và phản hồi hành động của người dùng, từ đó mang lại cảm giác sống động
và tự nhiên khi tham gia vào không gian ảo.

Mô hình vật lý trong VR dựa trên các nguyên tắc vật lý thực tế như lực, trọng lực, ma sát và động lượng. Các hệ thống vật lý được triển khai thông qua các công cụ hoặc thư viện phần mềm như Ammo.js, Cannon.js, và PhysX, giúp lập trình viên mô phỏng hành vi của các vật thể khi chịu tác động từ các lực khác nhau. Ví dụ, khi một quả bóng trong môi trường VR bị người dùng đẩy, mô hình vật lý sẽ xác định quỹ đạo di chuyển, vận tốc giảm dần do ma sát, và sự va chạm với các vật thể khác. Điều này mang lại cảm giác chân thực khi tương tác với các đối tượng ảo.

Phân tích thiết kế

Yêu cầu chức năng

Dự án cần có những tính năng chính sau đây để đảm bảo trải nghiệm người dùng:

• Hiển thị mô hình 3D: Hệ thống phải hiển thị các mô hình 3D với chất lượng đồ họa cao, bao gồm cả ánh sáng, bóng đổ và chất liệu.
• Di chuyển và điều hướng: Người dùng có thể tự do di chuyển trong không gian ảo bằng các phím điều hướng WASD hoặc các phương thức khác như rê chuột hoặc sử dụng touchpad.
• Tương tác với đồ vật: Cho phép người dùng thực hiện các thao tác như cầm nắm, kéo thả, xoay, hoặc thay đổi vị trí của các đồ vật trong không gian.
• Thay đổi thuộc tính đồ vật: Hỗ trợ người dùng sơn màu, thay đổi chất liệu hoặc tùy chỉnh các thuộc tính khác của đồ vật.
• Tải lên mô hình 3D: Người dùng có thể tải lên các mô hình 3D cá nhân để hiển thị và tương tác trong không gian.

Yêu cầu phi chức năng

• Thân thiện với người dùng: Giao diện cần trực quan, dễ sử dụng và phù hợp với cả người dùng không chuyên về công nghệ.
• Tương thích đa nền tảng: Hỗ trợ trình duyệt web phổ biến như Chrome, Firefox, Edge, đảm bảo trải nghiệm đồng nhất trên cả máy tính và thiết bị di động.
• Hiệu năng: Ứng dụng cần đảm bảo khả năng hiển thị mượt mà các mô hình 3D với tốc độ khung hình tối thiểu 60 FPS để tránh gây khó chịu khi trải nghiệm VR.

Mô hình chức năng

Mô hình Use Case của hệ thống được xây dựng dựa trên các chức năng chính mà ứng dụng cung cấp. Hệ thống chia thành hai loại người dùng chính: Người dùng khách và Người dùng đã đăng ký.

Dựa trên công nghệ AWS, các thành phần được triển khai như sau:

Frontend:

Công nghệ được sử dụng chủ yếu bao gồm ReactJS, Three.js. (Ngoài ra còn có Babylon.js, tuy nhiên không quá nhiều) Frontend được deploy trên AWS Amplify để cung cấp giao diện người dùng với khả năng phản hồi nhanh nhờ vào CDN (Content Delivery Network). Người dùng có
thể truy cập ứng dụng thông qua URL của Amplify. Tiếp đến, Frontend gửi các API requests đến Backend qua giao thức HTTP/HTTPS để thực hiện các chức năng như tải lên/tải xuống mô hình, chỉnh sửa thông tin, và quản lý dữ liệu.

Backend:

Ở phần backend, công nghệ được sử dụng chỉ bao gồm Node.js với ExpressJS. Backend được triển khai trên AWS EC2, đóng vai trò xử lý logic nghiệp vụ và cung cấp các API RESTful để giao tiếp giữa Frontend và các dịch vụ lưu trữ/dữ liệu. Về việc tương tác, Backend nhận các yêu cầu từ Frontend, xử lý logic, và tương tác với cơ sở dữ liệu MongoDB hoặc dịch vụ lưu trữ AWS S3.

Database & Storage:

Database: MongoDB được sử dụng để lưu trữ dữ liệu liên quan đến người dùng, thông tin đồ nội thất, và các nội dung cần thiết khác.

Storage:

AWS S3 được sử dụng để lưu trữ các tệp hình ảnh và mô hình 3D. Dịch vụ này đảm bảo khả năng mở rộng và truy xuất nhanh khi cần thiết. Tương tác giữa các thành phần trong hệ thống được tổ chức như sau: Người dùng truy cập ứng dụng thông qua giao diện được triển khai trên AWS Amplify. Tại đây, các thao tác như tải lên, chỉnh sửa, hoặc xem các mô hình 3D sẽ gửi các yêu cầu API từ Frontend đến Backend được triển khai trên AWS EC2. Backend chịu trách nhiệm xử lý logic nghiệp vụ, kiểm tra quyền truy cập (nếu cần), và thực hiện các thao tác liên quan đến dữ liệu. Khi cần lưu trữ hoặc truy xuất tệp tin và thông tin, Backend sẽ giao tiếp trực tiếp với cơ sở dữ liệu MongoDB hoặc dịch vụ lưu trữ AWS S3. Sau khi hoàn tất xử lý, kết quả sẽ được trả về Frontend, hiển thị thông tin hoặc trạng thái tương ứng cho người dùng một cách nhanh chóng và trực quan

Thiết kế

Kết quả

Mặc dù đối mặt với nhiều thách thức trong quá trình triển khai dự án, nhưng dự án đã hoàn thành với một số chức năng cơ bản và một số tính năng nâng cao, đáp ứng đúng yêu cầu ban đầu. Các kết quả cụ thể bao gồm:

Kết luận

Trong khuôn khổ dự án, em đã tiến hành xây dựng một nền tảng web VR 3D tương tác tập trung vào lĩnh vực kiến trúc và nội thất. Quy trình phát triển bao gồm nhiều giai đoạn, từ nghiên cứu các công nghệ liên quan, hình dung giao diện và chức năng, đến triển khai hệ thống.

Phần back-end được phát triển trên nền tảng Node.js và Express, kết hợp với cơ sở dữ liệu MongoDB để lưu trữ thông tin người dùng và dữ liệu liên quan đến mô hình 3D. Front-end sử dụng React và thư viện React Three Fiber để hiển thị các mô hình 3D và tạo trải nghiệm tương tác. Về front-end, ngoài việc hiển thị mô hình nội thất như thông thường, em đã tích hợp các tính năng điều chỉnh màu & vật liệu, điều hướng trong môi trường ảo bằng phím WASD, tương tác sâu hơn trong một khung cảnh được tải lên, và xây dựng giao diện thân thiện với trải nghiệm người dùng.

Sản phẩm cuối cùng là một ứng dụng web VR, nơi người dùng có thể khám phá không gian nội thất một cách sống động và tùy chỉnh theo nhu cầu. Dù còn một số hạn chế, nền tảng này đã đạt được 75-80% mục tiêu ban đầu và chứng minh tiềm năng phát triển trong tương lai.