Nightly Roll is a small implementation of a very old and common game. Titles like "Marble Blast Ultra", "Marble Madness", and "Super Monkey Ball" have been popping up for years now. The goal of the game is simple: roll through the maze-like levels while collecting points and avoiding falling off the stage.

Obviously Nightly Roll isn't up to par with one of the best sellers I mentioned above. It is, however, a 90% complete version of these games. Although it may not look like much at the time, I've already implemented:

-3rd person camera following the 'main character'
-Phong Shader Lighting and Reflectance
-Fog
-Vertex- Based Shading
-Collision Detection
-Pointer Lock Camera
-Custom Platforms

So what am I missing? The largest missing component is actually generating more of a level. I've created a basic sin-wave for demonstration purposes, but adding more of a twist to the level makes a huge difference in how fun the game is. On top of that, there are some extra things these games have such as a point system or sparkly effects that I didn't implement as part of the base game.

First off, textures. I've actually written a solid amount of texture functionality for this demonstration, but the three.js library had some security issues with Google Chrome causing the textures to fail to render. I can use this in Firefox, but the rest of the html was designed for Chrome. Go figure. We'll just have to settle with some awesome vertex-shading and lighting instead.

Another weird issue was using a Sky-Dome to cover the level. It wasn't too hard to implement a basic Sky-Dome, but the pure scale of the level caused problems. Rendering a hemisphere around a 100,000x100,000 world is a little difficult for older laptops. Instead, I added a plain background image. Not as appealing, but it doesn't take too much away from the game.

Next off, rolling. What's a marble rolling game without rolling? This was actually a very unexpected issue I collided with. Because the third-person-camera is following the marble, rolling the marble really distorts the point of view of the player. I attempted to cancel out this change by un-rotating the camera, but it never worked at 100%. Something I'd like to have changed with more time.

And finally, force in the x-z plane. Gravity is already implemented as you can see, but I haven't added the translation to x-velocity where you can speed up and slow down. This wasn't as large of an issue as just a problem with time. A simple sin/cos multiplication can easily solve this issue.

The library I used for this, three.js, was amazingly helpful with many graphical properties. It had built in functionality for many otherwise difficult interpretations such as Phong-Shader lighting. Sadly, it didn't have everything I wanted. I had to make quite a few adjustments to the camera and collision detection functions to work with my demonstration. I also made quite a few mathematical adjustments to the shaders and generated objects.

Still, three.js made it quite easy to edit their functions to respond to any specific needs their users had. I had originally created this project using GLUT, and had something along the lines of a first person camera, collision detection, and some basic blocks in a world which I could jump on. I wanted to switch to three.js in order to gain experience for my senior project, and I caught up to my GLUT implementation within a few days. I'd definitely recommend it to future generations of graphics-students that would like to dabble in something new.