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).
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.