three.js tutorials

Rendering snow with shaders

In this tutorial I’m going to show you how to render a snow simulation with three.js and WebGL shaders like the following:

If you can’t see a heavy snow shower in the above frame and get a black frame or a bold red error message, then either your browser does not support WebGL or there’s something wrong with your configuration. Please go to the Get WebGL page and follow their advice.

At the end of the tutorial you will know how to build a particle system with 10,000 (ten thousand!) particles simulating snow, all running in your GPU, which means the CPU will be almost totally free for your JavaScript code. Nice, isn’t it?

We’ll start by building a simple THREE.ParticleSystem and updating its particles’ position with JavaScript, and then will change to using shaders in order to get the best performance.

SOURCE CODE: The source code for each step is in github.

So keep reading if you’d like to learn how to do this!

5 Replies to “Rendering snow with shaders”

    1. Thanks for the comment!

      You’re right. I’ll setup a github project soon, so you can download the source code for all the examples and even modify them as you see fit. Stay tuned!

  1. Thanks for the update sole. cool stuff. Can’t wait for more of your three.js tutorials.

    1. Thanks! I’m really glad you liked it. I’m working on more tutorials, got a long list of topics already actually!

Comments are closed.