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!

20 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”);

  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?

  7. So masks wont work with StageGL because it’s require a Shape object…? Is there an other way of “masking” some content with WebGL ?
    Thanks

    • Caching a shape that is used as a mask in regular stage won’t change anything (the raw shape is used, and not the cache). Unfortunately, StageGL doesn’t support vectors, which is what Canvas2d clipping paths require — so you are limited to using Bitmap effects.

      You can use AlphaMaskFilter with a cached shape, but you have to update the cache any time you expect the shape or its transformation to change. Here is a sample: https://jsfiddle.net/lannymcnie/L9xy84yu/

      • Thanks for the hint!

        Lanny, btw, do you see this “no vectors” a temporary limitation for WebGL stage, or is it your long-term strategy? Reason I ask some other frameworks fully support vector operations (fonts, graphics) on webgl. This is a lot of work, but WebGL even on mobile can definitely support that.

        • We would love to support vectors, but its a total departure from the way EaselJS works now, so we don’t have any active development at the moment. We have a few initiatives to investigate some approaches. I will definitely post something one we have a solid idea on how we can do it.

      • Thank you, i’ll try that ! But perhaps there is a performance overload with using filters for masking ?
        Anyway, thank you for the good work ! Love createjs :)

Leave a Reply

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

© Copyright 2017