README for Aaron Young’s COSC 594 Computer Graphics Final Project

For the computer graphics final project, I created a 3D Dungeons and Dragons tabletop scene. When the program loads, you start out as one of the character tokens within the confines of an medieval castle. Ahead of you a battle against a dragon is already underway. You can explore the scene by walking around using standard first person controls. Clicking on the screen will lock the mouse and will allow you to look around. You can use WASD to walk around. If you press shift you will start to run. The escape key is used to unlock the mouse. Feel free to explore the scene. Multiple unpainted plastic miniatures have been placed around the table and tell the story of the adventure in progress. Do not hesitate to walk through the castles gates and explore a second fight taking place with a giant worm. Also look for a group of adventurers talking and singing near a fire pit. Once outside the walls, you can tell that you are a game piece. Dice and character sheets are scattered around the table. The room and chairs can be seen around the table.

Once you are tired of the first person experience, You can click on the “Toggle Camera” button at the top of the screen to switch to the perspective of the player sitting around the table. The camera here is controlled with arc ball rotation and clicking and dragging on the screen will move the camera. The scroll wheel will zoom in and out. Once you are in this perspective you can see your character also on the table. As you move around from the character’s perspective, the token will move around when switched back to the player’s perspective. The graphical quality of the scene will change based on the selection of the drop down menu next to the toggle camera button.

Controls

Use the button at the top of the screen to switch views.
Use the drop down at the top of the screen to change graphical settings.

First Person Character Controls

Key	Command
W	Move forward
A	Move left
S	Move backward
D	Move right
Shift	Push to run
Mouse click and move	Lock mouse and look around
Escape	Unlock mouse

Overview Arc Ball Controls

Key	Command
Mouse click and drag	Rotate around the table
Scroll wheel	Zoom in and out

Features

Objects

Below is a list of all of the objects used in creating the scene. The town model is an Instant Town for D&D Gaming I found on Sketchup’s 3D Warehouse. The Character Models all come from Miguel Zavala and can be found on shapeways. The Dice models are creative commons license and can be found on Blend Swap. The dice were recolored by me. The table, pencils, character sheets, and player handbook models where all created by me.

4 Complete Dice Sets
Barmaid
Cat
Ellywick Character Sheet
Female Rogue
Gate Guards
Giant Spider
Gnome Female Mage
Goblins Pretending they are a Wizard
Half Elf Adventurer
Halfling Female Cleric with Missing Leg
Halfling Female Rogue
Human Male Ranger
Kenku Mage
Kitten Wizard
Luhorn Character Sheet
Mae Character Sheet
Male Elf Druid
Mastiff
Mimic Chest
Monk Bard
Mousefolk Cleric
Old Paladin
Pencils
Player’s Handbook
Preacher
Purple Wormling
Rat
Samurai
Tabaxi Female Rogue
Table
Tiamat (Large Dragon)
Tower Guard
Town
Young Gold Dragon

Effects

Multiple effects were used to create the scene. Learn OpenGL proved to be a valuable resource when figuring out how to perform the different effects.

Cube map – The images used for the cube map were taken by me and are pictures of our kitchen were I play D&D with my wife and a group of friends.
Bump map – The table has a bump map applied to it which gives the wood grain a 3D look.
Bloom – A bloom effect is applied to the overhead lights in the cube map, which gives the impression that they are giving off light. The effect can best be seen when looking at the light with the castle wall partially obstructing the light.
Phong Shading – The overhead lights shine light on the scene. There are three lights total. Two strong overhead lights, one for each ceiling light, and a weak light coming from the camera.
Shadows – The overhead lights from the ceiling cause the objects in the scene to cast shadows.
Alpha blending/Transparency – The Dice by the player’s handbook are slightly transparent and can be seen through. Also, the water in the well is transparent.

Shaders

Skybox vertex and fragment shaders used to texture the skybox.
Shadow vertex and fragment shaders used to create the depth textures from the light sources viewpoint.
Phong vertex and fragment shaders used to render most of the objects in the scene. These shaders handle applying texturing, shadows, lighting, and transparency.
Bumpmap vertex and fragment shaders. Similar to the main Phong shader but also apply a bump map texture to the object.
Blur vertex and fragment shaders used to blur the texture used for the bloom effect with a Gaussian blur.
Quad vertex and fragment shaders used to apply bloom and display the final image on a full screen quad.

Other

First person camera used to walk around the scene.
Character miniature appears in the place of the first person camera when switch to the arc ball view.
FPS counters at the top of the screen which show the instantaneous and average frames per second (FPS) values.
Quality drop down which can be used to adjust the render quality based on your hardware.

Requirements

This demo is meant to be view on a desktop or laptop with a mouse and keyboard. Although the demo can be viewed using embedded graphics, the demo is best viewed on a system with a dedicated graphics card. This Demo uses webgl2 and was tested with the chrome browser on Ubuntu and Windows. To check if your browser supports webgl2 visit WebGL Report. The graphics settings can be adjusted to help the demo run on your system. The demo can run at 60 FPS 2560 x 1440 on a Nvidia GeForce 1050 Ti on ultra setting. On an older Thinkpad T430, it can run at 10 FPS 1366 X 768 on medium setting.

Graphics Quality Settings

The demo can run in 4 different graphic quality modes.

Setting	Description
Low	Lowest setting. Many of the effects are turned off. No shadows or bloom. Also the scene size is fixed to 640 by 480.
Medium	All the effects are enabled and the scene size resizes to match the window size. The shadow textures are 1K.
High	Same as Medium with 4K shadow textures.
Ultra	Same as High with 8K shadow textures.

Troubleshooting Graphics

If you are having trouble viewing the demo. Make sure your browser supports webgl2. If you can, switch to the chrome browser. The Frame rate is effected by the screen size and the quality setting. First try to reduce the window size with the medium setting to see if the frame rate improves. If that doesn’t work, switch to the low quality setting. The frame rate also suffers while the models and textures are still loading. The demo is done loading when the table is textured and the Dragon appears in front of you.

Additional Programs Used

Gimp was used to create the bump map texture.
Blender was used to create objects, set textures and materials, and help place objects in the scene.