Project Requirements

HyperDrive Testing Instructions

1. Go to https://abbondanzo.github.io/HyperDrive/ (Preferably on desktop using either Chrome or Firefox).
2. Click Launch (can also launch without sound).

Project Requirements

1. One Canvas:

   1. In the game:
      1. This canvas can be seen immediately after launch all around you. Use the mouse to pan around and see more of the canvas. To stop panning around via mouse, click your escape key.
   2. In the code:
      1. Our usage of a WebGLRenderer automatically builds a Canvas DOM element. We attach it here: https://github.com/Abbondanzo/HyperDrive/blob/master/src/manager/SceneManager.ts#L61-L72

2. Two 3D Geometric Shapes:

   1. The car
      1. In the game:
         1. You are inside the car. Use the mouse to pan around and see more of the car. To stop panning around via mouse, use your escape key.
      2. In the code:
         1. The car is made up of multiple geometric shapes and was made in Blender. Namely, the exterior chassis, plastic trim, leather dashboard, and seats are geometric objects composed together to form the full car. https://github.com/Abbondanzo/HyperDrive/blob/master/public/models/chassis.gltf
   2. The road
      1. In the game:
         1. You are driving along the road. Use the mouse to pan around and the road in front of you and to the left. To stop panning around via mouse, click your escape key. You can also watch the road come towards you while facing forwards.
      2. In the code:
         1. The road is a single plane object extending 2000 units into the negative Z direction: https://github.com/Abbondanzo/HyperDrive/blob/master/src/scene/road/Pavement.ts#L51
   3. Buildings
      1. In the game:
         1. You can see the buildings on either side of the car
      2. In the code:
         1. https://github.com/Abbondanzo/HyperDrive/blob/master/src/scene/road/Buildings.ts#L83
   4. Lamp posts
      1. In the game:
         1. The lamps are on either side of the car as you drive down the road, and are grouped together with spotlight sources.
      2. In the code:
         1. https://github.com/Abbondanzo/HyperDrive/blob/master/src/scene/road/Lamps.ts#L44-L59

3. One Perspective Projection

   1. In the game:
      1. The main camera computes a perspective projection based on its position, set by using pointer lock controls via the mouse.
   2. In the code:
      1. Three.js handles this for us via a PerspectiveCamera, which gets created in our CameraManager: https://github.com/Abbondanzo/HyperDrive/blob/master/src/manager/CameraManager.ts

4. One Camera

   1. In the game:
      1. You are seeing everything via the camera. You can move the camera by clicking on the canvas and using the mouse to pan around.
   2. In the code:
      1. The camera is created in our CameraManager and controlled by our BetterPointerLockControls implementation: https://github.com/Abbondanzo/HyperDrive/blob/master/src/scene/controls/BetterPointerLockControls.ts

5. Two 3D Mesh Objects

   1. The car
      1. In the game:
         1. You are inside the car. Use the mouse to pan around and see more of the car. To stop panning around via mouse, click your escape key.
      2. In the code:
         1. The car is made up of multiple geometric shapes and was made in Blender. It can be found here: https://github.com/Abbondanzo/HyperDrive/blob/master/public/models/chassis.gltf
         2. And used here: https://github.com/Abbondanzo/HyperDrive/blob/master/src/scene/car/Car.ts#L30
   2. The lamp
      1. In the game:
      2. The lamps are on either side of the car as you drive down the road, and are grouped together with spotlight sources.
      3. In the code:
         1. The lamp object is defined here: https://github.com/Abbondanzo/HyperDrive/blob/master/public/models/lamp.gltf
         2. And used here: https://github.com/Abbondanzo/HyperDrive/blob/master/src/scene/road/Lamps.ts#L26

6. One Lighting source

   1. In the game:
      1. There are four sources of light: an ambient light projected across the scene, a hemisphere light that gives purple and yellow tints, the spotlights that come from each lamp, and a purple point light on the interior of the car.
   2. In the code:
      1. Ambient and hemisphere lighting: https://github.com/Abbondanzo/HyperDrive/blob/master/src/scene/lighting/EnvironmentLighting.ts
      2. Car lighting: https://github.com/Abbondanzo/HyperDrive/blob/master/src/scene/car/Car.ts#L72-L78
      3. Lamps: https://github.com/Abbondanzo/HyperDrive/blob/master/src/scene/road/Lamps.ts#L61-L73

7. Two textures

   1. The buildings
      1. In the game
         1. The buildings are on either side of the car as you drive.
      2. In the code
         1. Usage: https://github.com/Abbondanzo/HyperDrive/blob/master/src/scene/road/Buildings.ts
         2. File: https://github.com/Abbondanzo/HyperDrive/blob/master/public/textures/skyscraper/basic.jpg
   2. The road
      1. In the game
         1. You can see the road line markings animate towards the car simulating that the car is driving forward.
      2. In the code
         1. Usage: https://github.com/Abbondanzo/HyperDrive/blob/master/src/scene/road/Pavement.ts
         2. File: https://github.com/Abbondanzo/HyperDrive/blob/master/public/textures/road/pavement.png
   3. The skybox also uses six textures here:https://github.com/Abbondanzo/HyperDrive/tree/master/public/textures/cubemap

8. Two User interactions

   1. Pointer lock controls
      1. In the game:
         1. Click on the scene to lock your pointer and then pan around by moving your mouse.
      2. In the code:
         1. Our implementation of a PointLockController is here https://github.com/Abbondanzo/HyperDrive/blob/master/src/scene/controls/BetterPointerLockControls.ts
         2. This fires a pointer lock event to capture mouse movement and move the camera. Note that you have to click on the canvas to begin moving the camera around.
   2. Music control buttons
      1. In the game:
         1. You can click on the play/pause button and the skip forward/backward buttons in the center of the car dashboard to control the songs. You can also use the play/pause button and the mtue button in the bottom right to control music playing without interacting with the scene.
      2. In the code:
         1. The play/pause and mute buttons outside the scene are located in https://github.com/Abbondanzo/HyperDrive/tree/master/src/dom/controls
         2. The play/pause and skip forward/backward buttons on the car's dashboard can be found in https://github.com/Abbondanzo/HyperDrive/blob/master/src/scene/car/SongControls.ts

Additional Requirements

1. Additional canvases
   1. In the game
      1. The project uses a second render pass based on DOM elements, called a CSS3DRenderer, to simulate as if the DOM elements were part of the scene. The controls on the dashboard of the car are all part of this transformed DOM element.
   2. In the code
      1. The construction of this CSS-based object can be found here: https://github.com/Abbondanzo/HyperDrive/blob/master/src/scene/car/Screen.ts
      2. The usage of this second render pass can be found here: https://github.com/Abbondanzo/HyperDrive/blob/master/src/manager/SceneManager.ts#L82
2. Surfaces
   1. In the game
      1. Each of the buildings are randomly generated, and once they fall out of view, the "row" of buildings is pushed further into the negative Z direction and randomly generated once again.
   2. In the code
      1. The implementation for this can be found here: https://github.com/Abbondanzo/HyperDrive/blob/master/src/scene/road/Buildings.ts#L90-L122
3. Animations
   1. In the game
      1. There are several animated objects, including the textures on the road, the position of the lamps, the positions of the buildings, and the rotation of the buildings as they fold inwards from a distance.
      2. In addition to the moving objects, the actual music that plays controls the speed at which objects are moving. If you switch between songs, your car's "speed" adjusts to the BPM of the music that plays. Lamps are synchronized to move by the car every other beat, whereas the road lines are synchronized to move twice for each beat.
   2. In the code
      1. Animations are based on the frame delta event that gets fired. Each class that uses this kind of animation extends the MovingObject abstract class here: https://github.com/Abbondanzo/HyperDrive/blob/master/src/scene/road/MovingObject.ts
      2. Road texture animations: https://github.com/Abbondanzo/HyperDrive/blob/master/src/scene/road/Pavement.ts#L62-L65
      3. Lamp animations: https://github.com/Abbondanzo/HyperDrive/blob/master/src/scene/road/Lamps.ts#L37-L42
      4. Building position: https://github.com/Abbondanzo/HyperDrive/blob/master/src/scene/road/Buildings.ts#L128-L147
      5. Building rotation: https://github.com/Abbondanzo/HyperDrive/blob/master/src/scene/road/Buildings.ts#L149-L174