I’ve placed the example source code from yesterday’s webinar on GitHub. You’ll find the original FLA file complete with the JavaScript source code (it’s inside bunny.html). As an added bonus I’ve also included a TypeScript version of the example.

You can find the repository here: https://github.com/ccaleb/flash-webgl-intro

And here’s a link to a running version of the code.

  1. Hey Christopher!
    Thx for posting this! I took a screen recording of the webcast but the recording froze after 13 min… and I was looking fwd to walking back through this example. One question: Why if you are using SVG do the edges around the graphics look so pixelated … like it was converting to raster bitmaps. I notice it especially with the bunny animation. Is there a way to avoid this?

    Jeff
  2. Hi Jeff. Thanks for getting in touch.

    SVG isn’t actually being used to render the vector artwork. Instead, everything is being rendered to a WebGL-enabled HTML5 canvas. WebGL utilises your computer/device’s GPU to maximise its rendering performance.

    The pixelated edges you are seeing are identical to the artefacts that appear when rendering Flash vector content to iOS and Android using Adobe AIR’s GPU renderer. Therefore I’m assuming that they both suffer from the same problem. Here’s my understanding of the problem:

    GPUs are typically optimised for rendering bitmaps or triangles, and don’t tend to offer the same fidelity as a software renderer* when recreating the complex vector shapes used by Flash. When rendering on a GPU, Flash’s vector artwork needs to be converted to simpler triangles that can be rendered quickly by the GPU. Therefore, rendering complex vector shapes on the GPU won’t always produce the exact same results as you see when authoring from Flash Professional, and may result in visible pixelation along edges.

    Adobe AIR provides settings that let you tailor the GPU render quality, allowing you to get very close to what the CPU renderer can produce. This of course comes at the expense of additional render time per frame. The Flash Professional WebGL Runtime API doesn’t provide such a feature at the moment, although I wouldn’t be surprised if it’s something that appears in a future release.

    Hope that was of some help.

    * The Flash Player plugin for desktop browsers uses a software renderer, which ensures that everything looks identical to the original vector content that was authored within Flash Pro.

    Christopher (Author)