1 attribute mediump float aIndex;
2 attribute mediump vec2 aPosition;
3 attribute highp vec2 aTexCoord;
4 varying mediump vec2 vTexCoord;
5 uniform mediump mat4 uMvpMatrix;
6 // the gravity applied to the y direction
7 uniform mediump float uGravity;
8 // xy: the emit position of the bubble; zw: the destination of the bubble.
9 // The bubble is moving from (xy) to (zw plus the y drop influenced by gravity).
10 uniform vec4 uStartEndPosition[NUMBER_OF_BUBBLE];
11 // The undergoing percentage of the bubble movement. 0.0: start from emit position, 1.0: reach the destination
12 uniform float uPercentage[NUMBER_OF_BUBBLE];
13 uniform vec2 uInvertedMovementArea;
14 // The bubble number is restricted by the available uniform num.
15 // To increase the displayed bubble, every uStartEndPosition and uPercentage uniform is applied to a small bunch of bubbles (9 here)
16 // The offset defines the random offset between bubbles within the bunch.
17 uniform vec2 uOffset[9];
18 // This uniform is used to change the bubble size during running time
19 uniform float uDynamicScale;
20 varying float vPercentage;
21 varying vec2 vEffectTexCoord;
25 vec4 position = vec4( aPosition, 0.0, 1.0 );
26 // The Z coordinate is used to record the bubble index within current mesh actor
27 int index = int(aIndex);
28 //for some i between 0 ~ NUMBER_OF_BUBBLE-1: i,i+NUMBER_OF_BUBBLE, i+NUMBER_OF_BUBBLE*2, ... (up to i+NUMBER_OF_BUBBLE*8) belongs to the same bunch.
29 int groupIdx = index / NUMBER_OF_BUBBLE;
30 // The bubbles within the same bunch applies the same uniforms uStartEndPosition[idx] & uPercentage[idx]
31 int idx = index - groupIdx*NUMBER_OF_BUBBLE;
32 float percentage = uPercentage[idx];
33 // early out if uPercentage is (zero || one) setting position to zero (zero sized triangles)
34 if( percentage <= 0.0 || percentage >= 1.0 )
36 gl_Position = vec4(0.0);
39 vec4 startAndEnd = uStartEndPosition[idx];
40 // The final position is added up different offset for bubbles
41 startAndEnd.zw += uOffset[groupIdx];
43 // increase the bubble size from 0% to 100% during the first 1/5 of movement & apply the dynamic scale
44 // the new xy value containes both the new scale and new bubble position
45 position.xy *= uDynamicScale*min(percentage*5.0, 1.0);
46 position.xy += mix(startAndEnd.xy, startAndEnd.zw, percentage);
47 // The gravity is g*t*t on the y direction
48 position.y += uGravity * pow(percentage, 2.0);
49 gl_Position = uMvpMatrix * position;
51 // Add multiple bubble shapes in the effect
52 vTexCoord = aTexCoord;
53 vPercentage = percentage;
54 // Use the emit position color for the bubble
55 vEffectTexCoord = startAndEnd.xy * uInvertedMovementArea + vec2(0.5);