HTML5 Augmented Reality full-web App for Mobile using canvas and WebGL

A full-web online HTML5 AR-app with only 1 ‘video’ tag and 2 ‘canvas’ tags : the 1st canvas is used to capture the video flow and detect the colored spots. Once these spots detected, the 2nd canvas display the interactive WebGL Rubik’sCube (courtesy Werner Randelshofer for providing cube’s scripts).

HTML5 Augmented Reality

Moving the pad change cube’s orientation depending its alpha and beta position.Because the large amount of calculs used to define on-the-fly the position, the orientation and the size of the Rubik’s cube, it sometimes looks “cuted”. And when I click on the cube the transition (rotating a row) isn’t very smoothy. In a further version (if…) I suppose I will have to re-coordinate the different datas and rewrite the algorithm to obtain better results. One of these days… or never.

My own JS script used to display the video, to get the pad pos, to detect the spots and to define the pos and size of the 2nd canvas only requires 112 lines including tabs, comments and spaces. It’s very very light :-) Once minify I guess it’ll take less than 3ko. The Werner Rubik’s 3D script is build on a node3D.js base.

  • Author: Kiran Voleti

    An Internet savvy and a founder of Augmented Reality Blog - RealaReal. I would love to share Augmented Reality resources with our readers.I am a founder Internet Marketing Company - Toputop, & a Creative Agency - Dotndot.For more details about me visit my personal website &

    Share This Post On
    Read previous post:
    3D Compass and Waypoint Finder with Map and Augmented Reality Display!
    3D Compass and Waypoint Finder with Map and Augmented Reality Display!

    This is the Free-Ver...