Swiftpack.co - Package - samuelz/webvr-ducks

VR Ducks

Team Members:

Adrian Ensan & Samuel Zhou


A live deployment can be found here.


A video demo of the game can be found here.

Backend API:

The API documentation for the backend can be found here

Description of the Web Application:

VR Ducks is a two-player competitive survival game with one player (the Astronaut) in charge of fending off legions of Rubber Ducks, and the second player (the Duck Master) having an overhead view of the game with the ability to spawn ducks in any direction.

Player 1 will have the option of playing using a VR headset (such as the HTC Vive, Oculus Rift, Google Cardboard, or Google Daydream) or standard mouse and keyboard controls in the browser. Player 2 will play in the browser.

Game scores are be saved to leaderboards accessible on the website.

Key Features of the Beta Version:

In the beta version, the two players will be able to connect to each other in a game session, and have the game state be synchronized between them.

A user will be able to register and log in to play the game, with their scores being automatically saved if both players are logged in. The site will have leaderboards where any visitor can view high scores.

The Astronaut will be able to view the world in 3D, either through a VR headset or via moving the mouse to look around in the browser. The player will be able to point and click on enemies to destroy them.

The Duck Master will be able to see a top-down view of the world in 2D, with a constantly updating view of enemies.

Additional Features in the Final Version:

Players are able to create and join game sessions via a lobby system. A user is able to either create a room or view a list of currently open rooms to join, rather than connecting to their partner directly. Rooms can be password protected.

Technology Used:

  • WebRTC - used to synchronize game state between players
  • WebVR - the new JavaScript API that will be used to enable interaction with the application via VR devices
  • WebGL via Three.js - the primary means of rendering the game content
  • Vue.js - This framework will be responsible for client routing and the frontend interactions
  • Perfect (Server-side Swift) - This will be used for our backend.
  • MongoDB - database management system of choice to store information about users and game sessions

Top 5 Technical Challenges:

  1. WebVR - using a new experimental technology and making the experience compatible with both VR-capable and non-VR capable clients

  2. Real Time Web Communication - synchronizing the game state and the view of both players, and allowing interaction between them

  3. WebGL - rendering a 3D interactive environment within the browser, as well as the 2D view that Player 1 sees

  4. Game statistics - selectively storing data and choosing an appropriate database structure so that it is possible to quickly retrieve different player/game statistics

  5. Learning new frameworks - this will be our first experience with both Vue.js and Perfect


Refer to the README.md for the frontend and backend folders.


Stars: 0
Help us keep the lights on


Used By

Total: 0