Final Digital Media Project

  Feature A-Frame Unity License Cost Completely free and open source Free for personal use; subscription for Pro version starts at $40/month Learning Curve Relatively easy to learn, especially for web developers familiar with HTML and JavaScript Moderate; intuitive for beginners with a larger learning curve for advanced features Graphics Good for web-based VR experiences, optimized for lightweight performance High-quality graphics suitable for both 2D and 3D with advanced rendering capabilities Platform Support Primarily web browsers with WebVR and WebXR support Extensive: iOS, Android, Windows, macOS, Linux, VR, AR, and more Development Environment Web-based, uses HTML and JavaScript; simple integration into websites Integrated development environment with an asset store and a wide range of plugins Community and Support Smaller community but very supportive, improving documentation and examples Large community with extensive resources, tutorial...

Firstly, the theme, relevance, rationale, and objectives of my project were clearly articulated in my presentation, the teacher expressed satisfaction with these aspects. I presented the purpose and goals of my project, explaining its relevance to current trends and challenges in the field. I also outlined how the project could address these issues. In addition, I created user role profiles based on a survey I conducted, which helped me define the target audience and position the project effectively. This user-centered approach was an important part of the presentation, as it demonstrated that the project was designed with real user needs in mind. Furthermore, I provided a technical schedule, comparing the different technologies I considered. I explained the reasoning behind each choice, showcasing their suitability for the project’s objectives. This not only reflected my technical understanding but also validated my decisions. I also demonstrated two prototypes, which illustr...

  After struggling through A-Frame’s limitations and battling Unreal Engine 5’s overwhelming weight, I arrived at an unexpected but inevitable realization: I had to change direction . At the beginning, I was deeply attached to the idea of a 360-degree video experience . It felt like the perfect solution—visually immersive, cinematic, and “VR-like” without the need for real-time processing. I imagined a website where users could seamlessly explore multiple panoramic scenes, as if walking through a virtual museum. But after weeks of technical issues, performance problems, and disappointing results, the fantasy began to fall apart. The Turning Point Using Unreal Engine 5 gave me a clear picture of what’s possible—but also what’s not practical . My laptop couldn’t handle it. My browser couldn’t load the videos properly. Even when everything did work, it still didn’t feel right . There was no interaction. No presence. Just a passive viewer rotating a flat video. And then it hit me...

 Even after successfully rendering a 360-degree video using UE5, I encountered a new, unexpected problem : I couldn’t integrate it into a working, user-friendly webpage the way I had originally planned. Problem 1: Embedding Multiple 360 Videos in HTML My concept involved navigating through several different 360-degree scenes—essentially switching between videos based on user interaction. But when I tried to do this in HTML: Standard <video> elements only supported basic playback. They didn’t offer the 360-degree interactive view I needed. <a-video> from A-Frame failed to display the video correctly or couldn’t load large files. JavaScript-based 360 viewers like panolens.js and video.js either crashed under large file sizes or introduced strange visual artifacts. Each 360 video was too large , especially with high resolution, and browsers struggled to load or buffer them efficiently. On mobile, things were even worse—some videos wouldn’t load at all. P...

After reaching the limits of A-Frame, I began exploring other platforms that could help me achieve my vision for a high-quality, immersive 3D experience. One of the most powerful tools in the game development and virtual production world today is Unreal Engine 5 (UE5) . I had seen stunning cinematic scenes and interactive environments created with it, so I was hopeful it might be the solution I was looking for. The Promise of UE5 Unreal Engine 5 is incredibly powerful. It supports real-time rendering, ray tracing, high-fidelity materials, and even native VR/AR development. Most importantly for me at the time, it also supports 360-degree video rendering —allowing me to simulate an immersive environment without requiring complex real-time interactivity. I decided to try using UE5 to build a complete 3D scene, render it as a 360-degree panoramic video , and later embed that video into a webpage. On paper, it sounded like a great plan: Design and assemble a full 3D environment (impor...

 As I continued building more complex interactions, A-Frame’s limitations became increasingly apparent. It simply was not designed for the level of multimedia interactivity I had in mind. Video Texture Mapping: Poor Support One major creative goal was to play videos directly on the surfaces of 3D models. I envisioned turning parts of my models into living, dynamic canvases using video textures. However, A-Frame does not support this natively. The <a-video> element only supports flat, rectangular planes—not curved or complex geometry. Trying to assign video elements as materials requires breaking through A-Frame’s abstraction layer and manually injecting logic via Three.js. I faced issues with auto-play restrictions, decoding failures, and texture mapping bugs. Even advanced tricks like drawing the video to a canvas and converting that to a texture failed due to CORS restrictions and browser policies. This showed me that A-Frame is not well-suited for complex...

After completing the initial video navigation prototype, I felt optimistic about continuing development with A-Frame. The framework advertises itself as beginner-friendly, and it truly was—at first. However, as I began to integrate real 3D models and interactive logic into the system, a series of frustrating technical problems emerged that completely changed my opinion. Cross-Origin Resource Sharing (CORS) Issues One of the biggest challenges was related to CORS (Cross-Origin Resource Sharing). When I tried to load my exported glTF models directly into the A-Frame scene using local file paths, the browser consistently failed to render the models. The developer console displayed errors like: This problem occurred because most modern browsers restrict access to local files from a webpage opened using the file:// protocol, which has a null origin. As a result, any attempt to load assets—especially large external .gltf models—was blocked outright. Attempted Workarounds To solve th...