Some particle effects

I found myself at home unexpectedly this evening, so what better way to pass the time than learning about particle effects? These are what you use to show explosions, flames, smoke, and other useful things; Google have put together an excellent WebGL demo (actually ported over from O3D) showing a number of different things you can do with them.

The excellent OpenGL ES 2.0 Programming Guide has a simple introduction to particles, so here’s a direct translation into WebGL; if you look hard, you should see small “puffs” of points appearing at regular intervals on the canvas. Unfortunately it looks pretty pathetic; this is because the point sprites that make up the puffs are all just one pixel in size. The code is trying to make them larger, and is trying to put a texture on them too, but unfortunately none of the browsers have quite got the relevant bit of the shader language working yet; this is why I’ve not introduced point sprites yet in the tutorials. [UPDATE: Jacob Seidelin reminded me in the comments that there's a really easy workaround to the point sprite problem; just put gl.enable(0x8642) in the initialisation code. I've done that, and this first example works perfectly well. Thanks, Jacob!]

So, here’s a workaround. Instead of using a point sprite for each particle in the scene, let’s use something we know works: triangles. Specifically, this version of the example uses two triangles for each particle, making each one a square. The result is something that looks just like the OpenGL ES book’s sample; less of a “puff” effect, more of an explosion.

Personally, I didn’t think that was very pretty. So, after a bit of tweaking to make the puffs/explosions spherical, to slow them down, increase the number of particles, and a few other things, the result was this page, which I do think looks rather good :-)

That’s it for particles for now; I’ll be writing a proper tutorial on them later on, after render-to-texture, picking, and shadows.

You can leave a response, or trackback from your own site.

20 Responses to “Some particle effects”

  1. I’ve used point sprites in both my demos (the sun in the first one and all the tiny planets in the second one) but I also had problems getting them to work properly at first. The trick that worked was to use the value of GL_VERTEX_PROGRAM_POINT_SIZE to enable point sizes (gl.VERTEX_PROGRAM_POINT_SIZE doesn’t appear to be defined in any of the browsers). Its value is 0×8642 (http://www.opengl.org/registry/api/glext.h) so gl.enable(0×8642) should do it. As I understand it VERTEX_PROGRAM_POINT_SIZE is not part of ES 2.0 though – maybe WebGL implentations are supposed to enable it for us?

  2. giles says:

    Thanks, Jacob! Now you mention it, I remember a discussion on the forums where that was suggested. Perhaps I should go back to having a bit of compatibility cruft in all of my WebGL pages, enabling both 0×8642 and gl.TEXTURE_2D.

  3. giles says:

    Yes, Twitter’s abuzz with that — definitely the leader for today’s roundup :-)

  4. giles says:

    @Jacob — I’ve just tried adding gl.enable(0×8642); to the first example, and it works fine now — thanks for reminding me about that! Now I’ve gone back to the forums it seems that I was an active participant in a discussion about why that was necessary, and then completely forgot about it o_O

  5. Haha, great. Glad you got it working.

  6. steve says:

    I have to laugh, but here goes:

    ERROR: 0:11: ‘gl_PointCoord’ : undeclared identifier
    ERROR: 0:11: ‘texture2D’ : no matching overloaded function found
    ERROR: 0:11: ‘assign’ : cannot convert from ‘const float’ to ‘4-component vector of float’

    It’s like I have a debugging browser or something! “Guaranteed not to work on Steve’s machine”! I’ll save the analysis for when you’re writing the lesson though. :)

  7. giles says:

    @steve — aargh! I hope #2 and #3 work, anyway… Does Jacob’s demo at http://blog.nihilogic.dk/2010/03/worlds-of-webgl.html work for you?

  8. steve says:

    Yep, works for me. In fact you’ll see me in the comments there. :) It does fall back to software rendering though, so it needs a bit of investigation for NPOT texture or something else.

  9. giles says:

    Thanks, Steve. You truly do have the best machine for testing :-)

    @Jacob — did you use something other than gl_PointCoord to texture your point sprites?

  10. No Name Joe says:

    Steve is not alone. I am running the latest Firefox ( so fresh, I just downloaded it and am entering this comment with it ), 3.7a4pre, and neither yours nor Jacob’s demos work. Yours throws an error “gl is not defined”, his says:

    Trying to get WebGL context
    Trying experimental-webgl?
    Trying moz-webgl?
    Trying webkit-3d?
    Could not get 3d context, is WebGL enabled?

    Something is definitely not right, as some Googling indicates it should be supported. This is on Linux/Ubuntu, fyi.

  11. No Name Joe says:

    Of course, no sooner than I submit the prior comment, that I dig a tad deeper and discover about:config webgl enable. DOH!

    I retract my comment. :-) Both your and Jacob’s demos run great. This is most excellent!

  12. giles says:

    @No Name Joe — glad you’ve got it working!

  13. giles says:

    OK, I’ve reported the need for gl.enable(0×8642) as a bug on both Minefield (https://bugzilla.mozilla.org/show_bug.cgi?id=557516) and Chromium (http://code.google.com/p/chromium/issues/detail?id=40543 )

  14. steve says:

    If you’re bogging down with the difficulty of picking and shadows, I noticed something simple but useful missing from the lessons…

    Billboarding!

    Without particle sizes, the easy way of sticking an icon on the screen has disappeared so this becomes even more useful now. :)

  15. steve says:

    And then if you’re flush with success, I’m currently breaking my brain on texture projection. What’s this q thing all about? I get that it’s like a depth function, but not how it’s putting the texture onto the thing being drawn. I swear that mathematics was invented by crazy insane people because some of it is very unnatural!

  16. giles says:

    @steve — no, don’t worry — just very very busy with my day job at the moment, I’ve been working 12-hour days and all weekend. So no time for picking :-(

    Still, it’s hopefully coming to an end now. Billboarding is a great idea, I’ll add it to the list — perhaps after picking but before shadows.

    I’ve carefully avoided trying to understand the maths underlying texture projections, it does look scary…

  17. Evgeny says:

    look at point sprites based “Fire demo”
    http://www.ibiblio.org/e-notes/webgl/fire.html

  18. giles says:

    Nice! I’ll put it in today’s “around the net” post.

  19. Stef says:

    Thank you so much! you help a lot!

    This is modified version of your code i need to make for my collage class.

    http://dl.dropbox.com/u/14004354/webgl/labos2.html

    thanks again

Leave a Reply

Subscribe to RSS Feed Follow Learning WebGL on Twitter