Mystery Bottle by Hannah Fazeli May

example image

Project Description

For my CPE 471 final, I attempted to recreate the story line of the children's book Mystery Bottle, by Kristen Balouch, using computer graphics! Although the end product is not what I had originally set out to create, I learned a lot through the process and feel confident that with enough time, I could make it into something that looks a lot more like what I had envisioned.

The project I ended up creating is more of a relaxing fly through a scene populated with things that you might see along the way if you were magically being pushed accross the world by the wind, like the main character is :)


Features


Game Camera

In my project, the camera follows around the main character from a third person view as he navigates through the world. The user is able to control where he goes using the w and s keys to move forwards and backwards, respectively, as well as the a and d keys to move left and right, respectively.

The user can also control where to look around the scene by scrolling the trackpad opposite the direction they would like to look in. This pitch & yaw camera feature also updates the camera's gaze and side vectors so that the user can then move relative to the direction that they are looking in by using the keys as described above.



Hierarchical Modeling

Throughout the quarter, I spent a lot of time familiarizing myself with Maya, which allowed me to create the scene I wanted for my world. This is also how I was able to modify some of my obj files, for example, the main character and his grandpa, both of whose meshes I had to separate at the joints. Once this was done, I was able to hierarchically model each of the characters. This hierarchical modeling is shown off by the grandpa, who is waiting on the top of his house to greet the main character by waving at him. All three parts of his arm are making different rotations to demonstrate the HM. With more time, the main character would have also been animated to show off this feature.

example image

Collision Detection/Resolution

The water and mountains in my scene, as well as the buildings in the grandpa's city, are all set up to detect when the main character's bounding box is about to intersect with theirs, stopping the user from being able to make any further movements in that direction or any direction that would similarly cause a collision. This also applies to pitch and yaw movements. On a collision, a boing sound is played to indicate that the user has collided with the object.



Particle System

I used a particle system to represent rain falling from a cloud over the forest in my scene.

example image

Lighting & Textures

The skybox that I used for my scene has a sun setting in the distance. I wanted to use light to indicate where the grandpa was, and encourage the user to go in that direction. So, this image of the setting sun is also approximately the location of my world's light source. All the objects are shaded appropriately, including textured objects. This can be clearly seen in the shading on the main character when the user changes his flight direction. The main character and his grandpa are both colored entirely by textures, and other objects in the scene, such as the cars, boats, planes, mail truck, azadi tower, etc. are also textured.



Sound

I wanted to add either text or sound to my program to make it more interactive for the user. So, when text seemed too hard to implement, I chose sound. Using irrKlang, I was able to add a sound to my collision resolution, as mentioned above, and I also added some ambient noises. For example, when the main character flies over the city, you can hear cars honking and other city noises, and when he flies through the rain, it sounds like its raining. I feel like this added a lot to my program especially because, with 3D sound provided by irrKlang, it sounds like you are actually in the scene yourself.


Linking IrrKlang on Mac

Please note that this is just how I got IrrKlang to work for me, on my Mac, and that there are probably better ways to do it. Hopefully my experience helps someone who is also struggling:

  1. Download IrrKlang from here. (Note: I am using version 1.6 (64-bit))
  2. Unzip the download, rename the unzipped folder to irrKlang if it is not named that already, and move this folder into the ext directory inside the project that you would like to add sound to.
  3. I have experienced issues with the ikpMP3 plugin, so I would recommend deleting the plugins directory in irrKlang, unless you absolutely need the capability of playing MP3 files (keep in mind these can easily be converted to wav files online). The only other necessary directories within irrKlang are lib, include, and bin, so feel free to remove anything else for straightforwardness.
  4. Navigate to bin/macosx-gcc/ and copy the libirrklang.dylib file. Paste it into your project's root directory for now. Assure that you can open it, as you may get a security warning the first time. Click open if you do, so that it will not be blocked when we try to run it.
  5. Open the CMakeLists.txt file which resides in the project's root directory.
  6. After the two already existing include_directories calls, add include_directories("ext/irrKlang/include"), so that your program can find the irrKlang header files. Below this new line, also add link_directories("ext/irrKlang/bin/macosx-gcc").
  7. Locate the line where a call is being made to target_link_libraries if(APPLE). Add "irrklang" before the close parenthesis. Save the file.
  8. Now its time to build your project! Create the build directory like you normally would, except once the Makefile has been created, move your copied libirrklang.dylib file into the build directory you just created.
  9. In main.cpp, #include <irrklang.h>. You will most likely also want to add using namespace irrklang;, and then you are all set to use irrKlang in main.
  10. Unfortunately, any time you want to make and execute your program, you will have to run one extra command after make, which is: install_name_tool -change /usr/local/lib/libirrklang.dylib @executable_path/libirrklang.dylib PROJECTNAME. Please rename PROJECTNAME to your project name and then execute your project like normal.


References

A great resource throughout the quarter has been Learn OpenGL, specifically the chapter on collision detection, as well as this one, where I got my collision sound effect from!
I learned about linking libraries with CMake (it was a long trail that I now cannot retrace but I ended up there at some point and found it the most helpful). This discussion helped me get closer to solving the IrrKlang mystery and I followed ambiera's guide to 3D Sound once sound was functional.
I found all my obj files and textures on TurboSquid, except for my terrain objs, which I got from the Unity Asset Store.



And of course, my entire project inspiration came from the book Mystery Bottle by Kristen Balouch, who not only imagined up the charming story but also drew the illustrations that my computer graphics project only wishes it could emulate.