Rendering 3D Flash Content on an HTML5 Canvas

This week, I have had a project which uses Javascript extensively in order to create a web application interface. An important component to the application is a 3D render, which represents a product you are building through this application.

Now that version 1.0 of the specification has been released, WebGL may be the best technology for achieving this type of integration in the future. In the meantime, I will be using Flash to perform my rendering, since I do not know of a suitable Javascript engine which supports the Collada model format, reliable depth sorting and quality UV mapping.

Similar to most media applications, Flash Player uses an “overlay” layer which the operating system displays over the top of your web browser. This works well for performance, but always displays Flash in front of other content in your page. Flash has support for “window modes” that will display inside of the browser, but these run a lot slower. In the case of my web application, running Flash caused all of my Javascript animations to appear choppy and unprofessional. Since I do not need to render my 3D scene in real-time, I can push my renders to an HTML5 Canvas so that the application remains smooth and responsive. Continue reading Rendering 3D Flash Content on an HTML5 Canvas