通过找到删除许多if语句的方法来简化代码

Question

I'm having trouble figuring out a good way to structure my code. I am writing a shader in GLSL. I'm using WebGL. So I have a sprite sheet with 22 items. The sheet is 640 X 640. Except for the last each row has 5 sprites. So I used the following code just to test things out.

float positionInTime = (currentAge / duration);
positionInTime /= 0.04545;
positionInTime = sign(positionInTime)*floor(abs(positionInTime)+0.5);
vec2 TextureCoord = vec2( 0.0, 0.0 );

if ( positionInTime == 22.0) {
   TextureCoord = vec2( 0.0, 0.0 ); 
}
if ( positionInTime == 21.0) {
   TextureCoord = vec2( 0.2, 0.0 ); 
}
if ( positionInTime == 20.0) {
   TextureCoord = vec2( 0.4, 0.0 ); 
}
if ( positionInTime == 19.0) {
   TextureCoord = vec2( 0.6, 0.0 ); 
}
if ( positionInTime == 18.0) {
   TextureCoord = vec2( 0.8, 0.0 ); 
}
if ( positionInTime == 17.0) {
   TextureCoord = vec2( 0.0, 0.2 ); 
}
if ( positionInTime == 16.0) {
   TextureCoord = vec2( 0.2, 0.2 ); 
}
if ( positionInTime == 15.0) {
   TextureCoord = vec2( 0.4, 0.2 ); 
}
if ( positionInTime == 14.0) {
   TextureCoord = vec2( 0.6, 0.2 ); 
}
if ( positionInTime == 13.0) {
   TextureCoord = vec2( 0.8, 0.2 ); 
}
if ( positionInTime == 12.0) {
   TextureCoord = vec2( 0.0, 0.4 ); 
}
if ( positionInTime == 11.0) {
   TextureCoord = vec2( 0.2, 0.4 ); 
}
if ( positionInTime == 10.0) {
   TextureCoord = vec2( 0.4, 0.4 ); 
}
if ( positionInTime == 9.0) {
   TextureCoord = vec2( 0.6, 0.4 ); 
}
if ( positionInTime == 8.0) {
   TextureCoord = vec2( 0.8, 0.4 ); 
}
if ( positionInTime == 7.0) {
   TextureCoord = vec2( 0.0, 0.6 ); 
}
if ( positionInTime == 6.0) {
   TextureCoord = vec2( 0.2, 0.6 ); 
}
if ( positionInTime == 5.0) {
   TextureCoord = vec2( 0.4, 0.6 ); 
}
if ( positionInTime == 4.0) {
   TextureCoord = vec2( 0.6, 0.6 ); 
}
if ( positionInTime == 3.0) {
   TextureCoord = vec2( 0.8, 0.8 ); 
}
if ( positionInTime == 2.0) {
   TextureCoord = vec2( 0.0, 0.8 ); 
}
if ( positionInTime == 1.0) {
   TextureCoord = vec2( 0.2, 0.8 ); 
}

vec2 TextureSize = vec2(.2, .2);
mediump vec2 realTexCoord = TextureCoord + (gl_PointCoord * TextureSize);
vec4 rotatedTexture = texture2D( texture, realTexCoord );
gl_FragColor = rotatedTexture;

}

The code works but I'd like to improve upon it. It seems like these if states could be greatly simplified by a for loop. Any one have any ideas? Or if 2 variables could be created for TextureCoord x and y that would be great.

Answer 1

If you can change to a simple pattern of 5x5, this will calculate it in Javascript:

var x = ((25 - positionInTime) % 5) / 5.0;
var y = Math.floor((25 - positionInTime) / 5) / 10.0;
TextureCoord = vec2(x, y);

If not, you can use:

if (positionInTime > 22) {
    var x = 0;
    var y = 0;
if (positionInTime > 7) {
    x = ((22 - positionInTime) % 5) / 5.0;
    y = Math.floor((22 - positionInTime) / 5) / 10.0;
} else {
    x = ((7 - positionInTime) % 4) / 5.0;
    y = Math.floor((7 - positionInTime) / 5) / 10.0;
}
TextureCoord = vec2(x, y);

Answer 2

You can create array of vec2 and use rounded positionInTime as index of this array without loop.

You can also to calculate each vector, but if values have regularity. The following code is in doubt:

if ( positionInTime == 7.0) {
   TextureCoord = vec2( 0.0, 0.6 ); 
}
if ( positionInTime == 6.0) {
   TextureCoord = vec2( 0.4, 0.6 ); 
}

I think there is an error (0.4 instead of 0.2).