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.
- 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!
Been waiting for this for a long time now! Can’t wait to get my hands dirty. Thanks guys!
Pingback: StageGL – A Faster, Better, Stronger WebGL update to EaselJS – Javascript World
Great news!
I use CreateJS library for 3 years, it gived me second life, after being flash programmer.
Thank you for all your work!
so long………….time
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.
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!
Pingback: createjs推出新版本stageGL - createjs技术博客
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!
Hi Lanny… Any word on the CDN release?
Not yet. We have submitted our tagged build to Adobe, so hopefully very soon!
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?
Yes, that is correct, it should fall back to Canvas2d.
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
Have you tried “caching” mask shape objects? Assuming the behave like Text and normal Shapes, this might work! :)
Yeah i tried but it’s not working. Nothing get masked… This is weird as “cached” mask shape works in traditionnal Stage instance
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 :)