WebGL is coming!

[Bernhard Pichler]

Over the holidays i had some free time so i added WebGL support for the StageXL library (still in testing phase, release will follow).

Here are some exciting benchmark results for the "Flags benchmark". 

Previously my computer was able to draw ~3.000 flags @ 60fps. 

With the WebGL powered version i can draw ~32.000 flags @ 60fps! 

WOW!

Canvas version:
http://www.stagexl.org/samples/performance/index.html

WebGL version:
http://www.stagexl.org/samples/performance-webgl/index.html

[Alex Gann]

That is super great! Congratulations!

[Tyler Turner]

Yeah, that's awesome. I'm seeing similar results. Is there any chance you'll be able to do the drawing API with WebGL (methods from the Graphics class)? I'm guessing that doesn't translate as easily. Regardless, this is a big deal. Thanks!

[Bernhard Pichler]

Hi Tyler,

Yes you are right. the Graphics class is hard to implement with WebGL. I think i will release a version of StageXL (probably 0.9.0) where all APIs are using WebGL except the Graphics class (if WebGL is not available, everything is rendered with Canvas of course). If you are using the Graphics class in combination with the WebGL engine, the engine will either simply discard all the pixels that are drawn with the Graphics class or the graphics are drawn to a temporary Canvas element which is then drawn with WebGL.

Maybe option 2 seems the better way to go but i have to check the performance. In version 0.9.1 i will start to implement most of the graphics features in WebGL - except the really hard ones like gradients which will come with 0.9.2 or 0.9.3 or ... :)

Bernhard

[Nico Mommaerts]

Cool!

Regarding the Graphics class, it's possible but probaby a lot of work:

http://www.goodboydigital.com/pixi-webgl-primitives/

[Bernhard Pichler]

Yes i looked at Pixi.js too - they do a great job with their library in general!

The graphics object in Pixi.js has one advantage over the graphics object in StageXL - they only use a subset of the functions from Flash, therefore it's easier to draw the same pixels with Canvas and WebGL. In StageXL the Toolkit for Dart uses the more complex functions like drawing crazy curves and gradients. Therefore we can't remove those functions to find a common ground for Canvas and WebGL. So in the short term we will have the basic drawing functions in WebGL and over time we hopefully will have all the drawing functions.