Inspiration

Earlier in the week, my team was brainstorming, and we had the idea of incorporating Gaussian Splats into our design for this weekend. Well, once the hackathon began, we noticed that the track for Procedura followed very closely with our original idea, except instead of Gaussian Splats, Procedura wanted us to use 3D generated exterior meshes of buildings.

What it does

Our application allows you to input photos or videos of a building, which it outsources to RealityScan by EpicGames to generate a 3D mesh. Then, this 3D mesh is sent back to our application where it is displayed on a grid with full viewing functionality. There is also an option to extract the model, where the model along with the appropriate location, size, and texture data are downloaded onto the user's computer.

How we built it

For the frontend, we used React with some CSS framework. On the backend, we mostly used Python to write a pipeline that takes data from Google Maps and user input files (.jpg, .png, .mp4) to generate a 3D mesh in RealityScan, which is then transferred back to our application to be displayed using Three.js model viewer.

Challenges we ran into

We ran into every challenge imaginable. At first, we didn't know how to convert images into 3D meshes, so this took a good amount of research from us to find a reliable software for this job. We also ran into the issue of ambiguity, as we thought the guidelines seemed pretty open but wanted something very specific. This caused us to really think about the architecture of our design, leaving it open to changes if needed. The largest challenge we ran into was probably when we were trying to figure out how actually use the modeling software effectively to create a decent 3D rendering. To mitigate this issue, we tested the software extensively until we found the best way to create our mesh.

Accomplishments that we're proud of

Overall, we're extremely proud that we were able to finish this project. There was a point in the middle of the hackathon where it seemed like, as a team, we were extremely far from a finished application. But eventually, things ultimately fell into place despite all of our challenges. Also, for all of us, this is the first application that has ever worked at a hackathon!

What we learned

In the end, we learned a lot about creating 3D meshes and connecting that process to another application, and the importance of having good coverage with quality pictures to render the most accurate model. We also gained experience connecting a Python pipeline with our React frontend and displaying models using Three.js. Beyond that, we learned how to breakdown unfamiliar problems into small steps and adapt when our original plans didn't work.

What's next for WorldForge

We plan on adding 3D models of all the 2026 World Cup stadiums, along with facts from matches and statistics about the stadiums. It doesn't have to just stop here-- this could extend to World Cups in the future.

Built With

Share this project:

Updates

Submission history