Augmented Reality Pong - How to play

This game is a remake of Pong!, one of the earliest famous video games. This small experiment involves augmented reality techniques combined with modern browsers' HTML5 capabilities.

As seen in the picture, you use a webcam to stream a real time video of your workspace into the browser. Inside the images, you can see that we are using three special black and white markers: the biggest one is representing the court, the smaller ones represent red and yellow paddles. This web application is analyzing each frame of the video stream, attempts to detect markers, estimate their relative 3D position and orientation, and eventually draws the virtual court, paddles and ball.

You will need a webcam, a recent web browser and some markers. You can download the set of markers directly from here. You will have to print it and then cut it. It may be a good idea to use thick paper or even cardboard paper for printing. Once your markers are ready, you can play.

The application startup is quite easy:

1. Plug the webcam;
2. Launch your web browser (if you read this, it is already done ;) );
3. Start the application by going to this page;
4. Your browser will ask you to authorize the use of the webcam, a necessary step if you want to play this game;
5. The application will then ask you to show the camera marker #17, the biggest marker in the set (I recommend to put the marker on a planar surface seen by the camera);
6. The game is then starting!

In game, you just have to move your paddle in order to send back the ball to your opponent. If you miss the ball, your opponent will score one point. If you want to restart the game, you just have to hide the court's marker for a little while and you must ignore the first message stating you must put back the marker in place. After a few seconds, the game is reset.

Are you ready ? Then you can play the game!

As stated before, this small game is a proof of concept showing that augmented reality is now possible in modern browsers with the upcoming HTML5 standard. In particular, here are some APIs that are used as well as javascript libraries built upon these technologies:

• WebRTC, the API allowing to grab video streams from a webcam;
• Aruco.js, a marker detection and tracking library;
• Canvas, an HTML5 element and javascript API used to draw graphics via scripting;
• WebGL for 3D graphics;
• Three.js, a scenegraph javascript library built upon WebGL.