Question

我无法找到构建代码的好方法。我正在用GLSL写一个着色器。我正在使用WebGL。所以我有一个包含22个项目的精灵表。工作表是640 X 640.除了最后一行，每行有5个精灵。所以我使用下面的代码来测试一下。

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;

}

代码有效，但我想改进它。似乎这些状态可以通过for循环大大简化。有人有主意吗？或者，如果可以为TextureCoord x和y创建2个变量，那将是很好的。

Answer 1

如果您可以更改为5x5的简单模式，则会在Javascript中计算：

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

如果没有，您可以使用：

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

您可以创建vec2数组，并使用舍入的positionInTime作为此数组的索引而不循环。

您还可以计算每个向量，但是如果值有规律性。以下代码存在疑问：

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

我认为有一个错误（0.4而不是0.2）。

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

2 个答案: