Skip to main content

week 8/9

     This week I've been looking at getting an unreal project onto a web browser, and I've found three ways of doing so. 

    The first requires UE4.23 and can run Firefox. In UE4 you can package the project as an HTML5 file

    Once packaged the file can be hosted from a local web server, the webpage displays the unreal viewport as a window in the center of the screen (with an optional full-screen mode) and is interactive. the output looks something like this, once each of the code files are organized into a server you can click the project connected to a webpage and it should open to a blank web page with a small window showing the unreal engine viewer. 

Once you have the HTML file you can open the html5launchhelper, from there copy the local host settings, and paste it into your browser, after that you'll see the same file directory on the webpage, click the packaged project file to run it and you'll have an unreal file that runs through the web. 
it should look like this (I used the base first-person setup that comes with Unreal, if you used something different or a customer file what's displayed will be different but the layout should be the same. this method is interactive, and because of the way it's packaged, it can be moved from one desktop to another with ease. the issue here is packaging an unreal file is a very permanent move, we would need to be very close to having a finished file before we are able to add this to our website. 

      The next method uses a plug-in from Animech that converts unreal files to glTF, this can be done in UE4 or UE5. plugin documentation here. this MUST be downloaded, the other plug-ins mentioned are packaged in with Unreal, this is the only one that is not directly supported by Unreal engine. this method allows for levels in a project file to be exported as glTF and integrated into a web page. the documentation for this method is almost non-existent, the link I provided is more of a description than anything, I can't find any tutorials or explanations on how it works, just that is exports glTF files, once you have the file there are multiple ways they can be used, for example we need an interactive viewer so we could implement the files using code like this:


which creates a similar view to what's used in Sketchfab, more info on how to use glTF files can be found here.

    The final method involves pixel streaming. 

    To start you need to install node.js and then check you have open network ports for communication (the default is port 80 and port 8888). in the unreal project enable the pixel streaming plug-in. In the level editor>play,  set the launch parameters (the ports) then you can package the project for Windows. after it is successfully packaged you can edit the properties of the application to match the port information as well as host options. I started running into issues here, for some reason, I'm not able to package a UE5 file, I updated my SDK but I get an error stating "no targets have been found". if I had been able to package the file correctly then the next steps for this method would be to set up a local webserver and set that to the same network port so that you can stream data (pixels) from an unreal file to a webpage, one the server is set up you paste the desktop IP address into the browser, and play the file in unreal engine, this should start the stream. full documentation for this process can be found here.

    The last thing I've been working on is Nikki divided up the snazzy maps with me, were duplicating the information we have from Google to a more custom map that Nikki designed, however, I don't seem to have access to the map style. this is something that can be published, and she was given a style code that should allow me to access the designs she created, I'm not sure why I can't access her designs but she's aware of this and we're going to troubleshoot the issue next group meeting. 





Comments

Post a Comment

Popular posts from this blog

week 7/8

      The main issue we've been dealing with is connecting our Google map to a 3D view. The map does not have the same features as a Google Map as it is sort of an offshoot of Google Maps, so it has no navigation feature. additionally, the issue Jasmine has noticed is the lack of customization in the programming, she can't edit the code of the map in order to make the locations into buttons which can then be connected to the code for the 3D application.      Professor Diefenbach helped us find documentation for click events, by adding a listener to the map icons, so when an icon is clicked, there is a way to communicate that information to the 3D app. The event listen will execute code upon detecting a click, that can manipulate the 3D location, so in this instance, it will change the coordinates used in the "fly to" command. Documentation on click events here . The addition of this code requires an API key, which is explained here . since we are using the ...
Post a Comment
Read more

Week 10/FINAL

       To finish up the 3D view I got AB's unreal file that has his Gaussian splats. in order for it to run I had to install the same version of UE5, the luma AI plug-in, as well as the Cesium for Unreal plugin. after I was able to open the file I tested the first-person controls. in the original file, the first-person character does not spawn so I duplicated the level and added a player start, then it spawned normally. then I enabled the pixel streaming plug-ins and updated the SDK driver to match the UE5.3 requirements.     N ext, I built touchscreen controls, under the miscellaneous tab when you right-click the unreal library there's a blueprint for the touchscreen, once I added that I used the basic joystick icons, this took a little bit of guesswork as you have to position icons based of off pixel coordinates, but both joysticks are roughly 135 x and - 135 y and vice versa so they sit in the bottom two corners of the screen. to make them functional you...
Post a Comment
Read more

Week 3/4 - development

 Testing Different Map Making Methods :      So I've been going through the different map/navigation app maker sites I found to find which would be the best fit for our project, right now the main criteria is  able to limit navigation to Philadelphia layers showing different resource types able to show route on screen, step by step Major landmarks and intersections have visual aid the final destination is connected to a NeRF      The focus is on accessibility, this is an easy use emergency resource meant to help people navigate the city through landmarks      TomTom is free (as opposed to Mapbox) however this doesn't allow for full customization. it generates a world map and lets you pick the colors and select preset levels of detail, it seems like the paid version of this unlocks more presets which is not what we are looking for. however, the general aesthetic of simplicity and the monochrome color could be useful for accessibility...
Post a Comment
Read more