Is there a 2d sprite library for webgl?

Question

I am looking to build a 2d game using WebGL. I want the hardware acceleration that WebGL provides and I cannot get this from the 2D canvas context in the canvas tag.

With that said, is there a tutorial on creating 2D sprites using webGL? Or, better yet, is there a 2D sprite library for WebGL? Ideally, I'm looking for something like cocos2d ported to WebGL.

Not surprisingly, all of the demos, tutorials and libraries I have found for WebGL focus on 3D manipulation. Are there any WebGL libraries that support 2D sprites?

score 5 · Answer 1 · answered Mar 11 '10 at 12:28

I may be mistaken, but I thought that the 2D canvas API was designed in such a way that browsers can make use of hardware acceleration, but they have chosen not to yet. I expect the implementations of canvas 2D to improve dramatically as WebGL progresses.

score 5 · Answer 2 · answered Apr 03 '11 at 14:40

5

You can find the canvas 2D API in webGL here

answered Apr 03 '11 at 14:40

keheliya

2,393
2
24
35

score 3 · Answer 3 · answered Oct 08 '11 at 17:48

I recently pushed to github a simple 2d library written on webgl with a naive (but functional) canvas fallback. It uses the same scene graph than cocos2d, you can check it on http://github.com/funkaster/ChesterGL - note that its not 100% functional, but you can use it as a starting point to write a simple 2d game

score 1 · Answer 4 · answered Jun 02 '13 at 01:29

1

Keep in mind, that you can use the gl.POINTS draw mode and draw a texture ( sprite ) at each point instead of a point. You simply have to use a sampler. It is really powerful.

answered Jun 02 '13 at 01:29

Ray Hulha

10,701
5
53
53

score 1 · Answer 5 · answered Nov 24 '13 at 17:15

1

Pixi.js is currently the most stable and active:

https://github.com/GoodBoyDigital/pixi.js/

answered Nov 24 '13 at 17:15

d13

9,817
12
36
44

score 1 · Answer 6 · answered Apr 05 '10 at 19:00

1

2D in 3D is extremely easy to do. You just have to place all your objects in a plane and scale your viewport to draw the desired portion of that plane.

In any case, there is approx 10 years 'till you can expect to find WebGL capability in most peoples browsers. With the right methods you can get a long way without using canvas, the trick of using prerendered rotations of your graphics is a must know to any JavaScript game developer, along with "sprite" animations.

The important question is, are you just playing with the tools, or are you making a game that people should be able to play and enjoy?

answered Apr 05 '10 at 19:00

aaaaaaaaaaaa

3,630
1
24
23

3

Although not majority of people will be using latest HTML5/webgl browsers soon; a lot will. Firefox/Chrome/Safari are committed to HTML5/WebGL and according to following link their users have been pretty quick in upgrading. These browsers together have significant share in market. So HTML5/WebGL should be a safe bate (also note Flash ban from some "i"-platforms) "Getting Users to Upgrade Their Browsers" [http://ajaxian.com/archives/getting-users-to-upgrade-their-browsers?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+ajaxian+%28Ajaxian+Blog%29&utm_content=Google+Reader] – Jayesh Apr 10 '10 at 14:03
Safe [Whatever it is you call it] is a term I'd use when you can reach 99+ % of market. I wouldn't say that it is always a bad idea to cut ~50% of market to get some more features, but the features you gain must be very significant for this strategy to hold. – aaaaaaaaaaaa Apr 10 '10 at 20:13

score 0 · Answer 7 · answered May 19 '14 at 10:21

This might be a bit extemporaneous, but I think it's worth the effort in case anyone is trying to find a good WebGL wrapper for 2D object manipulation. I strongly recommend fabric.js, which provides interactive object model on top of canvas element. It also has SVG-to-canvas (and canvas-to-SVG) parsers. The demos section of the official web site clearly shows the potential of this javascript library.

Is there a 2d sprite library for webgl?

7 Answers7