Drawing multiple objects while making them share a shader

Question

There are two draw object groups that I'd like to combine into one canvas, a rain effect layer and points forming a circle. These are their vertex shader codes, taken from this website

// Rain effect
const vs = `#version 300 es
uniform int numVerts;
uniform float time;

// hash function from https://www.shadertoy.com/view/4djSRW
// given a value between 0 and 1
// returns a value between 0 and 1 that *appears* kind of random
float hash(float p) {
  vec2 p2 = fract(vec2(p * 5.3983, p * 5.4427));
  p2 += dot(p2.yx, p2.xy + vec2(21.5351, 14.3137));
  return fract(p2.x * p2.y * 95.4337);
}

void main() {
  float u = float(gl_VertexID) / float(numVerts);  // goes from 0 to 1
  float off = floor(time + u) / 1000.0;            // changes once per second per vertex
  float x = hash(u + off) * 2.0 - 1.0;             // random position
  float y = fract(time + u) * -2.0 + 1.0;          // 1.0 ->  -1.0

  gl_Position = vec4(x, y, 0, 1);
  gl_PointSize = 2.0;
}
`;

// Points forming a circle
const vs = `#version 300 es
uniform int numVerts;
uniform vec2 resolution;

#define PI radians(180.0)

void main() {
  float u = float(gl_VertexID) / float(numVerts);  // goes from 0 to 1
  float angle = u * PI * 2.0;                      // goes from 0 to 2PI
  float radius = 0.8;

  vec2 pos = vec2(cos(angle), sin(angle)) * radius;
  
  float aspect = resolution.y / resolution.x;
  vec2 scale = vec2(aspect, 1);
  
  gl_Position = vec4(pos * scale, 0, 1);
  gl_PointSize = 5.0;
}
`;

Both shaders assign different values to gl_Position and gl_PointSize. I couldn't think of a way to combine them under one vertex shader without conflict. It doesn't help that the vertex dataset is entirely generated on site, inside the shader instead of having it passed from the buffer.

Answer 1

Add a uniform variable to the shader that indicates which algorithm to use.

#version 300 es
uniform int numVerts;
uniform float time;

uniform int mode; // 0 or 1

// hash function 
// [...]

void main() {
    float u = float(gl_VertexID) / float(numVerts);  // goes from 0 to 1
  
    vec2 pos;
    float pointSize;
    if (mode == 0) {
         float off = floor(time + u) / 1000.0;            // changes once per second per vertex
         float x = hash(u + off) * 2.0 - 1.0;             // random position
         float y = fract(time + u) * -2.0 + 1.0;          // 1.0 ->  -1.0

         pos = vec2(x, y);
         pointSize = 2.0
    }
    else {
        float angle = u * PI * 2.0;                      // goes from 0 to 2PI
        float radius = 0.8;
        float aspect = resolution.y / resolution.x;
        vec2 scale = vec2(aspect, 1);

        pos = vec2(cos(angle), sin(angle)) * radius * scale;
        pointSize = 5.0;
    }
 
    gl_Position = vec4(pos, 0, 1);
    gl_PointSize = pointSize;
}