Question

Is there any great tutorial out there on how to create rain in GLSL or a similar shader? I can find ones easily for Maya but not for this, sadly. Thanks!

Answer 1

What do you mean by “rain”. There are lots of ways to represent rain

This sample has a rain effect and a ripple effect

https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/google/particles/index.html

No tutorial though. It works by creating a bunch of unit squares, giving each one an random value, adding that random value to a time value and the computing a position in the shader as in

uniform float u_time;          // a time value passed in by JavaScript
uniform mat4 u_view_inverse;   // view inverse (camera world matrix)
uniform mat4 u_view_projection;// view projection matrix

attribute vec4 a_vertex;       // the unit quad values
attribute vec4 a_position;     // the base position of this particle repeated for
                               // each vertex
attribute vec4 a_velocity;     // velocity for this quad, repeated for each vertex
attribute float a_time_offset; // a time offset for this particle 
                               // repeated for each vertex

// compute a position
float localTime = u_time + a_time_offset;
vec4 base_position = a_position + a_velocity * localTime;

// rotate quad so it's perpendicular to the view
vec4 quadX = viewInverse[0] * a_vertex.x;
vec4 quadZ = viewInverse[1] * a_vertex.y;

// compute the real world position for this vertex
vec4 position = base_position + quadX + quadZ;

// at this point position is the same as any other 'standard' 3d shader
// do with it whatever. Example:
gl_Position = viewProjectionMatrix * position;

Sorry if that’s too terse.