Note<\/strong>: I usually make my stuff available online, e.g. on Github. Not this time though. This was a personal thing I created for my wife. I’m reproducing the images for this blog post with her permission :-)<\/em><\/p>\n\n\n\n The prototype was created for the browser and used three.js<\/a> for most of the 3D stuff. I am a fan of WebGL, and I had some prior experience from working on Photo Amaze<\/a> and Zombie Hugs<\/a>, so it seemed like a natural choice.<\/p>\n\n\n\n Here are two screenshots from the initial prototype:<\/p>\n\n\n\n The thick fog was added as a way to limit the initial view and ensure only one piece of text was visible at a time, and the rest was hidden in the fog until the player started moving forward. This fog then cleared up once the first exhibit was reached, making the scene more open.<\/p>\n\n\n\n I found photos for three out of ten exhibits and wrote the initial intro text, but the rest remained unfinished. One reason for this was that I quickly started obsessing over details like shadows and lighting instead of focusing on the core content<\/em>, which was selecting good photos and writing the right text.<\/p>\n\n\n\n Missing the birthday deadline had both good and bad consequences. I was very disappointed and embarrassed that I only had an early prototype to show, but it also allowed me to step back and rethink the project.<\/p>\n\n\n\n An appealing aspect of using three.js is that everything has to be defined in code. This provides a lot of control, but I quickly realized that I was not able to iterate and tweak the experience very fast. I had wanted to get my feet wet with a more full-fledged game engine for a while, so this was a good opportunity to do that.<\/span>1<\/sup><\/a><\/span><\/p>\n\n\n\n After researching the pros and cons of different game engines as well as experimenting briefly with Unity, Unreal Engine<\/a>, Godot<\/a> and Babylon.js<\/a> (spending way too long trying to make grass out of fur<\/a>), I ended up sticking with Unity, because it has a native Linux editor and good platform support.<\/span>2<\/sup><\/a><\/span><\/p>\n\n\n\n Unity is easy to get started with and includes lots of helpful tools out of the box. For example, I had good initial impressions of the built-in terrain editor<\/a> and tree creator<\/a>, and it seemed very easy to set up a basic outdoor environment. The Unity asset store also has a generous offering of free assets, including a ready-made first-person controller which is very handy.<\/p>\n\n\n\n Once the surface is scratched though, it becomes apparent that Unity is neither perfect nor complete, and creating games is not easy. Some of the challenges I faced were fun while others were frustrating.<\/p>\n\n\n\n The first (fun) obstacle I came across was creating the photo exhibits.<\/p>\n\n\n\n As you can see in the prototype above, an “exhibit” has three wall-like structures with a photo. I wanted the pictures to protrude a bit from the walls, making it look like a white canvas is hanging from the wall, with the photo “painted” on top of it. The drawing on the right illustrates the idea.<\/p>\n\n\n\n I thought it would be super easy to do this in Unity. Just create two cubes (a canvas cube and a wall cube)<\/span>3<\/sup><\/a><\/span>, flatten and stretch them a bit, and put them next to each other so they overlap.<\/p>\n\n\n\n Actually, this worked ok, but there were two problems:<\/p>\n\n\n\n I fixed the second problem by putting a “quad” — a flat surface — on top of the canvas cube (or rather, next to<\/em> it). The wall structure thus consisted of three 3D objects that were technically separate from each other, and it did not look good. There was still a weird flicker, and it also felt like<\/em> the wrong way to solve the problem.<\/p>\n\n\n\n So I hit an early roadblock: Either I had to define the wall structure programmatically, or I had to make my own 3D model. I opted for the latter choice.<\/p>\n\n\n\n After going through some basic tutorials for Blender<\/a>, I was able to create the wall structure and learn a thing or two about 3D modeling along the way. This is the result in all its simple glory:<\/p>\n\n\n\n Even though I only did very basic stuff in Blender, it felt like a big win to be able to make basic models. I also created an exhibit sign and a cylinder with one open end (to simulate a tunnel or tube). All models can be found here<\/a>.<\/p>\n\n\n\n Besides the photos and text, I decided to also create a “display” for each exhibit. This consisted of a 3D model or effect that was either a direct or indirect reference to the year the exhibit was for. For example, I used a Big Foot model standing on top of Mt Saint Helens for the year when we visited the area.<\/p>\n\n\n\n Using pre-made models was a fun and easy way to make the exhibits a bit more interesting. It took some time to find the right model, and it sometimes needed tweaking after import, but it gave me the opportunity to include visuals I could not have created on my own.<\/p>\n\n\n\n For the record, here is the list of the models I used:<\/p>\n\n\n\n All models are licensed under CC BY<\/a> except for MtHelens (CC BY-NC-ND<\/a>) and 15Legend (CC BY-NC<\/a>).<\/p>\n\n\n\n All the models were found on Sketchfab<\/a>, an online community with a lot of 3D models available either for free or purchase. It was a nice discovery!<\/p>\n\n\n\n Besides downloading models, I also researched the possibility of adding models to the scene by simply scanning my environment or specific objects.<\/p>\n\n\n\n A technique known as photogrammetry<\/a> makes it possible to turn multiple photos into 3D models. I played around with an open-source tool called Meshroom<\/a> which is amazingly simple to work with. Just add a lot of photos from different viewing angles, wait a few hours, and a finished 3D model comes out.<\/p>\n\n\n\n A scan of a birch log from the forest made its way into the scene:<\/p>\n\n\n\n I did not get outstanding results, but it is worth noting I also just took the photos with my bad phone camera and spent very little time making sure I got good shots from all angles.<\/p>\n\n\n\n It is mindblowing that it is possible to go from 2D photos to 3D model, and I will definitely revisit photogrammetry again in the future.<\/p>\n\n\n\n A small feature I had fun creating was a super simple rain effect. There are numerous weather system plugins available for Unity (some are free), and there was even a “hose” effect available in the standard assets that kind-of did the trick (it simulates spraying water). But I needed a more uniform down-pour, and I really<\/em> just needed something simple.<\/p>\n\n\n\n The effect was created by taking a bunch of small particles<\/a>, give them a blue\/white gradient color, apply gravity too them, and that is basically it.<\/p>\n\n\n\nFocus on the content<\/h3>\n\n\n\n
![\"\"](\"https:\/\/davidlebech.com\/thoughtflow\/wp-content\/uploads\/game_prototype1-1021x1024.jpg\"){kind=spacer}
<\/figure><\/li>![\"\"](\"https:\/\/davidlebech.com\/thoughtflow\/wp-content\/uploads\/game_prototype2-1024x1017.jpg\")
<\/figure><\/li><\/ul>Beyond the browser<\/h3>\n\n\n\n
3D modeling the photo exhibit<\/h3>\n\n\n\n
![\"\"](\"https:\/\/davidlebech.com\/thoughtflow\/wp-content\/uploads\/exhibit_drawing.jpg\")
![\"\"](\"https:\/\/davidlebech.com\/thoughtflow\/wp-content\/uploads\/wall_unity-544x1024.jpg\")
![\"\"](\"https:\/\/davidlebech.com\/thoughtflow\/wp-content\/uploads\/wall_blender.png\")
Free models are great<\/h3>\n\n\n\n
![\"\"](\"https:\/\/davidlebech.com\/thoughtflow\/wp-content\/uploads\/big_foot_helens-1024x576.jpg\")
An extra dimension<\/h3>\n\n\n\n
![\"\"](\"https:\/\/davidlebech.com\/thoughtflow\/wp-content\/uploads\/birch_scan-1024x576.jpg\")
Creating fake rain<\/h3>\n\n\n\n