Hacker News new | ask | show | jobs
by amoliski2 1475 days ago
Project dev here if anyone has any questions- on a technical side, the app is built with Unity WebGL wrapped in a vue.js wrapper. The JS side handles pulling the live data from the server and determines the best Unity scene to show given the parameters- time of day, weather at his last known coordinates, and the location itself.

I wrote a separate vue.js progressive web app that is installed on his phone so he can write updates while he's outside of cell coverage, and they sync when he has internet access again.

The backend is a Node server on an AWS EC2 instance that dumps all of his updates and hourly weather data into a postgres database. Everything is timestamped, so we will be able to replay the trip or add an interactive timeline when he's done.

4 comments

This is fantastic work - just had a couple questions about it:

1. I've heard different accounts of how well unity web GL is supported, did you run into any limitations?

2. What did advantages did wrapping this in Vue provide?

1. Everything non-apple has managed to handle the project without any problems, but getting it working on iPhones was a small nightmare- silent loading fails, web assembly not loading, endless hangs initializing the scenes, textures being replaced by distorted noise that one user described as "a portal into another dimension"- in the end I had to disable compiler optimization in the source code of one of the libraries, completely turn off gz/br encoding, and remove compression on all of the textures to get it to load and run. Luckily all of the assets are actually really small, so compression wasn't giving me much benefit, but on a non-pixel-art project, it would probably be a deal breaker. If it wasn't for BrowserStack letting me test on real devices all of the available iPhones and Safari versions, I don't think I would have been able to track down the issues.

2. I have a ton of experience working with responsive web design using Vue/Angular/React, and I kept running into issues designing my UI in Unity that could have been solved with a single line of CSS. It was also nice to have a non-Unity controller for the project so I would be able to easily swap out the Unity animations with a fallback if I couldn't fix the Safari issues. Playing music in the WebGL player was a huge performance hit, especially once I started layering sounds, by having Vue handle that I could take advantage of browser optimizations with on caching music and detach the download of the audio files from the download of the rest of the assets (they were by far the largest part of the project data-wise), so a slow connection isn't waiting on the music to get into the app itself.

The trade-off was losing the ability to build the project as an exe and the loss of non-audio performance. We knew getting people to run a random exe from the internet was a hard sell, and the performance loss isn't really felt when the UI is run in the Vue side of the app. If I was making a game that needed high performance, I'm not sure the performance loss would be such viable compromise.

Hey, just an FYI, I'm on android using bromite and it blows up with the "something went wrong" message.
Why not just use canvas/HTML5? Seems do-able.
I started with canvas, but a big part of the project was making sure my artist brother would be able to easily position elements, create animations, adjust the layers, and build the scenes. The Unity editor is great for stuff like that. It was also really easy to extend the Unity editor with buttons to automate annoying tasks.

I was also having some annoying issues with scaling everything based on device screen size, and choppy performance, problems I would have fixed eventually, but nice that Unity behaved correctly right off the bat.

If I had another year, I probably would have built a unity scene file parser (or maybe an editor extension) to convert the object positions and script parameters so I could take advantage of the Unity editor while still cutting out a lot of the overhead, definitely a step I would have taken if I couldn't get the WebGL player to behave as well as I did.

If you plan on keeping this around (you should) you ought to extend it to any number of hikers on the AT. A simple drop-down to let someone choose which hiker to watch/follow....
I first found y’all via Reddit I believe. So much respect for this project. Love the aesthetic. Love the dynamic scenes. Great job.