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:
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: