StageGL – A Faster, Better, Stronger WebGL update to EaselJS

We are happy to formally introduce StageGL, a better, faster, more feature-rich WebGL renderer for EaselJS. It removes restrictions, boosts performance, and adds filter support. Most importantly, unlike its predecessor, StageGL is a drop-in replacement for the CreateJS Stage.

Check out “Coasting on Cos Waves” in the gskinner lab, and GitHub

Our previous WebGL renderer, SpriteStage, enforced a model where each branch of the display list could utilize only a single texture. This was great for performance, but made content creation a major pain. StageGL uses a dynamic draw model to eliminate this restriction, making it a proper drop-in replacement for the default Stage.

You can use Container, Bitmap, Sprite, BitmapText, and DOMElement without any change. Other content can be cached, or added to a sprite sheet (see SpriteSheetBuilder) for inclusion. The new batching heuristics work under the hood to optimize your content for you and take full advantage of the GPU, making it perform spectacularly for real-world content.

We also added a filter model for StageGL, and updated existing filters to work with it. Even if you’re developing for the default `Stage`, you can leverage WebGL shaders as filters in your content.

Notable features:

  • Intelligent batching, with multiple textures in a batch, using the full number available on your hardware
  • No restrictions on display list order
  • Automatic GPU memory management
  • Full cache support
  • Full filter support
  • Canvas 2D Stage fallback

All of this has been underway for some time (keen observers may have noticed the beta branch), and we’re very excited to finally merge it back into the master branch on GitHub. We’ll be releasing demos, documentation, and getting started materials over the next week or two.

Happy coding!

11 thoughts on StageGL – A Faster, Better, Stronger WebGL update to EaselJS

  1. Pingback: StageGL – A Faster, Better, Stronger WebGL update to EaselJS – Javascript World

  2. Very excited to see this merged to master, thank you CreateJS team!

    The Cos wave demo describes itself as “additive cos waves” … I got excited and hoped to see additive composite operations, but sadly not yet implemented? What strategy should be adopted for such blending – ideally in a drop-in way? Thanks.

  3. Been working on a CreateJS game project for over 2 years straight. This was something I had been hoping for to take my game visuals to the next level. Very excited to start using this!

  4. Pingback: createjs推出新版本stageGL - createjs技术博客

  5. Tried applying StageGL on a test file and getting the following error: createjs.StageGL is not a constructor. Do i need to change the easeljs link in the script?

    Currently i am using “https://code.createjs.com/easeljs-0.8.2.min.js”
    This is the code i replaced

    stage = new createjs.Stage(“demoCanvas”);
    //stage = new createjs.StageGL(“demoCanvas”);

    • StageGL is not available in 0.8.2 (released Nov 2015). You need the NEXT version in GitHub, which we are hoping to release to the CDN soon!

  6. Great news indeed!

    Have I understood it right from brief code glance :) that StageGL checks if WebGL is available and falls back to canvas if not?

Leave a Reply

Your email address will not be published. Required fields are marked *

© Copyright 2017