Bryan Tai

Carolyn Shen

What:
An escape the room game, located in ICCS in the Cube. You have woken up in the middle of the night in the Cube after finishing your CPSC 210 project and want to get out before the timer is up.
A classic escape the room game, find the clues to get out!

Required framework:
- 3D objects: we've modelled the cube and the furniture in the cube using hierarchies for the different furniture and loops to reduce the redunadancy of structures.
- 3D camera: first click to enable hiding the cursor, and then walk around in the 3D environment using WASD and the cursor to look. Pick objects centered on the reticle onscreen.
Use ctrl for crouching.
- Interactivity: we can interact with objects via user input, i.e. by collecting clues, unlocking abilities once some clues have been collected, shooting a box, and triggering dialogue.
- Lighting: turn on the light and turn off the light. Light comes through the windows and from the lights on the ceiling.
- Picking: we can pick objects in the scene, which highlight red, and also shoot bullets.
- Texturing: Objects are textured to look like furniture.
- Onscreen control panel: we have an FPS counter, and an inventory to keep track of the clues you've picked up so far, as well as a timer that counts the time to starvation (lose).
We also have a dialogue box in the center of the screen.
- Gameplay: You win by finding all the clues and opening up the door. Lose by running out of time. You can also just read interesting dialogue that is irrelevant to winning the game.
Feature options:
- Shaders: shaded a ball using Cook-Torrance model.
- Collision detection to not leave the ceiling, floor, walls and furniture.
- Animation: walking or crouching forward is done in "steps" which is an animation of the camera. We can swing open fridge and cabinet doors. We can shoot bullets at things.
How:=====================================================================
- 3D modelling: every furniture has a transformation hierarchy.
- 3D camera: whenever the mouse moves, we projected a point into the world space and have the camera move to that place the mouse stops, but we only take a small fraction of this movement to actually move the camera,
so as to not spin uncontrollably.
We lock the mouse using an HTML5 API.
Added reticle by adding a transparent image to a plane and adding it as a child of the camera, very close to the camera.
- Picking: using THREE.JS raycaster; instead of checking every single object, we have an array of pickable objects and if the raycaster intersects any of them, it will be highlighted.
If we click while the raycaster was intersected, it will trigger an event.
- Lighting: Lights are located on the ceiling as point lights. Also spotlights located in order to give shadows of the furniture (since point lights don't do shadow casting).
Need to set floors to receive shadows. We have some lights coming out of the window when the light is off.
- Onscreen control panel: done using HTML and CSS.
- Texturing: using WEBGL api.
- Shaders: Cook-Torrance model.
- Collision detection is done by adding the boundaries of the room, including furniture, and vertically, to ensure we can't walk to the top of the shelf.
- Animation: we rotate and translate by a fraction, where the fraction is over the number of frames that this animation takes.


Sources:
http://ruh.li/GraphicsCookTorrance.html
http://www.isaacsukin.com/news/2012/06/how-build-first-person-shooter-browser-threejs-and-webglhtml5-canvas
http://stackoverflow.com/questions/16432804/recording-fps-in-webgl
And our own previous projects for CPSC314.
Minor sources were cited in the code.