Incredibly, the early bird tickets on my HTML5/JS training course sold out in just 20 minutes today! And to celebrate I thought you might like an early Christmas present – JavaScript HTML5 canvas snow in 3D! 
(There are still 4 standard price tickets left on the course if you’re interested in learning more about this stuff!)
I adapted one of the Mr.doob‘s three.js Particle examples. I’ve extended the particle class and added velocity to update it’s position. Anyone that knows me knows that I’ve been making snow for a while now! Most people’s first approach is to make the snow move left and right but actually you don’t need to do that. If there are lots of flakes all moving in different directions it pretty much has the same effect, and it gives much simpler and more uniform effect.
As ever, the code is fully commented and available on github.
[UPDATE: code has been updated now to work in Three.js revision 46]
Related posts:
Cool!
I particularly like the way the snow “flurries” when you move your mouse up and down. Nicely done sir
Nice! Very smooth on chrome/os x. Not so smooth on the iPad.
Thanks Felix! I’m not that surprised about the iPad though – canvas rendering on iOS is pretty slow…
Yeah – it’s ironic that people are shifting from Flash to JS because of the iPad and yet the iPad does not handle anything but the most basic JS animations.
is it possible to have content on the same page with snow ‘falling’ over it
yes, definitely – the canvas element is transparent. But are you sure you wanna annoy your users by putting snow over everything?
absolutely gorgeous.. and if I wanted to annoy the hell out of my users, how would I do so? lol- would I save all the available files, then upload them to my site, then throw in normal js tags that point to the files? ..is there a quick tut we might find? cuz this is definitely above my pay grade
Yes, please start putting HTML5 snow on EVERYTHING. And don’t forget the skip intro button, please. Show the world that you don’t need Flash to annoy the living sh*t out of people!!
Thanks for the example! I’m interested to know if you have you tried including the html5 directly in your blog’s (WordPress?) post/page? It should be possible, but I can’t seem to get it working on my own site. Cheers.
Figured it out. For whatever reason, WordPress doesn’t like a Viewpoint added to the Scene! Results are here if you’re interested.
Thanks Seb… this is awesome!
Pingback: TM Life
“canvas rendering on iOS is pretty slow”
not only on IOS, same thinghere on my android devices (smartphone and tabs)
and i have a 70% of CPU on desktop (with chrome)
for me this is to high, sorry i don’t but it.
Actually, since I posted this, canvas rendering has been getting better and better. GPU acceleration in IE9 and iOS5 (and in the nightly builds of Safari and Chrome). But if you really can’t wait there are faster ways to render stuff in current browsers using CSS 3D transforms. For more info see the techniques outlined in http://sebleedelisle.com/2011/08/smooth-animation-on-ios-with-javascript/
Are you able to post this without the mouse interaction?
Has anyone been able to adapt this to IE 7 and 8? I made an attempt using Google’s ‘excanvas.js’ but with no luck.
I think excanvas uses VML, right? Which won’t really work. FlashCanvas will probably be a better bet, depending on your specific use case of course.
Does anyone know how to set this to use its own js as it lags when my image scroller changes?
what do you mean by “use its own js”?
Any ideia how to make this code work on Internet Explorer 8 and below?
Canvas isn’t supported in IE8 and before. See my previous comments re FlashCanvas. But why not just leave out the snow in older browsers?
I like this snow…but I met an issue.
I see Three.js lib including here is r28; now the latest is r46. I replace the Three.js with the latest one. But always, it gives me error” Uncaught Type Error: undefined is not a function ” for this line in html body.
particle = new Particle3D( new THREE.ParticleBitmapMaterial( particleImage));
Is there any way to fix this problem? I prefer using the latest Three.js(r46).
Just for you, chengw, Christmas has come early. I’ve updated the source code to work with revision 46 of Three.js – there have been quite a few API changes. I hope this helps!
Seb
Pingback: May all your Christmases be #ffffff | CreativeJS
Hello,
I was interested in using this effect on our christmas ‘e-card’ this year and was wondering if the code is free to use?
Thanks,
Justin
You’ll find the licence at https://github.com/sebleedelisle/JavaScript-PixelPounding-demos/blob/master/licence.txt so yes you can use it, under certain conditions.
Hi
To answer Tomas Parkes – we’ve got it on an absolutely positioned div on here: http://www.lastordersforchristmas.co.uk/, in between the background and the content.
Nice job Graham, although the snow is pretty distracting on that page. Could you maybe knock it back a bit or make the date boxes cover it up?
The site is still in development, so I really appreciate your comments, thanks! Hopefully it will be live for the end of the week…
Hi Seb
I’ve taken your advice, thanks, and the site is live! http://www.lastordersforchristmas.co.uk/
I had to remove the touchstart and the touchmove references, otherwise ipad and iphone users couldn’t scroll.
Thanks for your help
Hi Seb,
I am a web designer for Philadelphia University and first off I have to tell you that I love this snow effect. I incorporated it into a holiday ecard that will be sent out in the next few days. Everything looks great in all browsers besides IE7 and IE8. The snow renders well on mobile devices as well. The only problem that I am having is that my anchor tags are not working on the iPad or android tablets. Do you know what might be the issue? Here is a link to my test url – http://www.philau.edu/test/snow_demo/JSSnow/snow3d.html
Thank You,
Matt
The demo doesn’t break a sweat on iOS 5. Great work, and thanks for sharing.
Hi i need your help,
watever i do, the snow just after my page, example link here
http://www.w-avetech.com/sample.html
wat i need to do, to make it fix perfectly with my coded site?
Great fun with this!
I am having the same problem as Matt is having above.
The script appears to be blocking other mouse events on IOS. The hyperlink(s) or rollover(s) are not working.
Just playing… http://www.bluetulipjewelry.com/
Thanks and have a great holiday!
fred
haha love how you can smash the lights!
The reason scrolling and tapping doesn’t work is because we’re hijacking touches to affect the snow. Look at the onDocumentTouchStart and onDocumentTouchMove functions and comment out the bit that says event.preventDefault. You won’t be able to control the snow with touches any more but at least it’ll work.
(A better solution would be to deal with the touch events more intelligently but I don’t have time to sort that out right now, sorry!)
Thanks so much for the reply!
Since I like playing in the snow so much, I’ll leave it as is for now.
BTW, the Christmas Lights smashfest is courtesy of: http://www.schillmania.com/temp/snowstorm/
I just had to have your snowstorm when I saw it. Hours of fun!
Thanks again.
fred
hi i have a flash site and i want to emeded this snow in flash or put this code in my html index and put this snow over the swf object in trasparent div how can i put it??? can you help me?
awesome particles on red background.
take a look: http://port.fm/#xmas
Pingback: HTML5,HTML5 Effects,HTML5 Demo,HTML5 Canvas