What do you think about WebGL-2d ?

[Ezelia]

WebGL-2D is (was?) a project aiming to be a complete port of the Canvas2D API implemented in a WebGL context.
 

the project seems to be abandonned.

I personnally loved the idea of making an abstraction layer on top of WebGL to allow using Canvas2D functions ...

but when I tested on a real game, performances was not here, I can't explain why since I'm a WebGL expert

 

anyone have tested this library ? what do you think about the project idea ?

 

 

the project repository is available here : https://github.com/gameclosure/webgl-2d

[triptych]

You may want to look instead at something like Pixi.js - they want to be the "three.js" for 2D using webgl.

http://www.goodboydigital.com/pixi-js-has-landed/

[Ezelia]

@triptych yeah I know about pixi.js and I'm writing a test renderer for one of my games with pixi
but what's interesting with WebGL-2D is that it's unobstructive : you write your code as it was a canvas 2D but instead of using canvas.getContext('2d') you use a custom context : canvas.getContext('webgl-2d')  that's all you need to convert your code

 

this approach is perfect IMHO ...

also, pixi.js has different goal, it's an abstraction on top of canvas 2D and WebGL with objects pool handling ...etc  WebGL-2D is just a "adaptation" layer between WebGL and canvas2D

[IvanK]

I am not sure if you have an idea how vector graphics is rasterized, but it is totally different approach, than WebGL or other HW rasterization techniques. 2D canvas can not be implemented with WebGL much more efficiently, than it already is.

 

Let me give you an example. You want to fill a curved shape. You use arcTo and then fillPath or something. To do it in WebGL, you have 2 options: 
1) draw shape on CPU into texture and then send that texture to GPU
2) split the shape into triangles, but you have to do that on CPU, you may need thousands of triangles to make the shape smooth, so you can not change the shape too often.

There is the third option, to standardize WebVG - port of OpenVG - http://www.khronos.org/openvg/ , but it will take a long time...

 

BTW. I have efficient WebGL-based vector drawing functions in my IvanK lib, I am doing it using triangles.

[gin5eng]

I've dropped that WebGL2d lib into a couple of my games and it's quite impressive how smooth and responsive it makes your canvas feel. I really like it. I'm just a little concerned that the github repo hasn't been updated in like 2 years... not sure if that's good or bad.

 

What's really cool is that it's like a one line change to use the special canvasContext and that's all you need to update to use it.

[Rybar]

I very recently tried that out with ImpactJS, but was unable to see much of a performance difference.  On my old 2008 macbook pro in chrome I get about 1000 non-colliding entities on screen either way (canvas2d or webgl) before the FPS drops below 30.  I don't think it's batching draw calls/any other typical GPU optimizations or I'd be getitng much better performance.  On other webgl benchmarks I can easily get to 9,000 - 10,000 moving sprites without dropping below 50 fps.