Cube in HTML5 Canvas

I wanted to see if it was possible to make a image cube that worked pretty much anywhere(mobile/desktop) without a plugin... The answer is, YES.

If you are impatient, then just go checkout the demo

There are some issues, mainly that this doesn't use a perspective projection and that the iOS3/iOS4 performance isn't great(acceptable though). 

Rendering the Cube

For the matrix math I mainly recycled an old 2005 Flash8 tutorial from Senocular. That tutorial didn't take into account gimbal lock because Flash will magically try to fix it for you when applying affine matrices(not so in HTML5 Canvas).

Stroking the edges of the faces fills in the sub-pixel gaps between faces on renderers that antialias the edge of images and gives an outside antialiased edge to images drawn with renderers that don't antialias. It also gives us a wireframe model while the images load.

I've optimized the canvas to look crisp on high density screens and mobile devices. The canvas uses devicePixelRatio to attempt to use hardware pixels instead of computed pixels(i.e. the image quality of the canvas is stupid good on the iPhone4 and high density Androids).

Compatibility

This should work on the following browsers without plugins: iOS 3+, Android 2.0+, IE9+, Windows Phone 7.1(w/ caveats I can't talk about), Firefox 2+, Chrome 4+, Safari 3+, and Opera 9+.

IE6, IE7, and IE8 are supported if they have the Flash9+ plugin via FlashCanvas.

Android 1.6 and Explorercanvas-r73 do NOT WORK; neither correctly support canvas transformations(excanvas works in IE7, but not IE6 or IE8).

Future

It would be neat to make this switch to using 3D CSS when it is available. Paul Hayes has a demo using 3D CSS. Not only does 3D CSS use perspective, but it is also MUCH faster on iOS. It currently only works in Safari, Chrome, the Android 3.1, and iOS3+. It is slated to be implemented in IE10 and in Firefox  sometime in 2011. Android has had really really really buggy implementations of 3D CSS in every browser since Android 1.6, but they finally have a working implementation in Android 3.1.

Try It Out

checkout the demo

  • Nanda Kumar ( 24.09.2013 02:12:39 )

    I am UI developer. Good Example. I am trying to understand your code for WebGL. Please share the good tutorial of WebGL(canvas 3d) and share the link across nandakumar@goldspotmedia.com

  • Nanda Kumar ( 24.09.2013 02:12:38 )

    I am UI developer. Good Example. I am trying to understand your code for WebGL. Please share the good tutorial of WebGL(canvas 3d) and share the link across nandakumar@goldspotmedia.com

  • Nanda Kumar ( 24.09.2013 02:12:37 )

    I am UI developer. Good Example. I am trying to understand your code for WebGL. Please share the good tutorial of WebGL(canvas 3d) and share the link across nandakumar@goldspotmedia.com

  • Nanda Kumar ( 24.09.2013 02:12:35 )

    I am UI developer. Good Example. I am trying to understand your code for WebGL. Please share the good tutorial of WebGL(canvas 3d) and share the link across nandakumar@goldspotmedia.com

  • Nanda Kumar ( 24.09.2013 02:12:29 )

    I am UI developer. Good Example. I am trying to understand your code for WebGL. Please share the good tutorial of WebGL(canvas 3d) and share the link across nandakumar@goldspotmedia.com

  • Nanda Kumar ( 24.09.2013 02:12:21 )

    I am UI developer. Good Example. I am trying to understand your code for WebGL. Please share the good tutorial of WebGL(canvas 3d) and share the link across nandakumar@goldspotmedia.com

  • Nanda Kumar ( 24.09.2013 02:12:20 )

    I am UI developer. Good Example. I am trying to understand your code for WebGL. Please share the good tutorial of WebGL(canvas 3d) and share the link across nandakumar@goldspotmedia.com

  • Nanda Kumar ( 24.09.2013 02:12:18 )

    I am UI developer. Good Example. I am trying to understand your code for WebGL. Please share the good tutorial of WebGL(canvas 3d) and share the link across nandakumar@goldspotmedia.com