Hello,
I am trying to create a mockup of a slot machine. I have 2 square pieces of geometry, comprised of 2 triangles each, and I am scrolling the texture down each static square. I am trying to execute an effect where the first square will start scrolling the texture, and then a few seconds later the second square will start scrolling the texture as well. My question is how to specify which piece of geometry the shader is adjusting texture coordinates for? Will I be able to use the same shader program for both squares or will I need to create a second shader program that does the same thing? (1 for each piece of geometry)


Fragment Shader
}
precision mediump float;
varying vec2 vTextureCoord;
uniform sampler2D uSampler;
void main(void) {
gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
}




Vertex Shader
}
attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;

uniform float SCROLL;

varying vec2 vTextureCoord;

void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vTextureCoord = aTextureCoord;

vTextureCoord.t = vTextureCoord.t - SCROLL;
}



function StartReels()
{


if(Reel_1.isReelSpinning)
{
// Since texture coordinates are between 0.0 - 1.0 in GL, increment scrolling value, and check if it's at 1.0

Reel_1.CoordY += 0.10;

if(Reel_1.CoordY > .99)
{
Reel_1.CoordY = 0.0;
Reel_1.numStops++;
}
}
gl.uniform1f(shaderProgram.SCROLLuniform, Reel_1.CoordY); // updating scrolling value in vertex shader

if(Reel_2.isReelSpinning)
{
// Since texture coordinates are between 0.0 - 1.0 in GL, increment scrolling value, and check if it's at 1.0

Reel_2.CoordY += 0.10;

if(Reel_2.CoordY > .99)
{
Reel_2.CoordY = 0.0;
Reel_2.numStops++;
}
}
gl.uniform1f(shaderProgram.SCROLLuniform, Reel_2.CoordY); // updating scrolling value in vertex shader
if(Reel_1.numStops == 15)
{
HardStopShift(Reel_1);
}

if(Reel_2.numStops == 3)
{
HardStopShift(Reel_2);
}
}



Currently both squares scroll through the texture 3 times, then stop. The desired effect, in this instance, would be for the second "Reel" to scroll through the texture 3 times, and the first "Reel" to scroll through 15 times.

Any help or advice on how to achieve this would be greatly appreciated. I just can't seem to make the shader act independently on each "Reel"
(piece of geometry)