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

我很难找到一个好的方法来构造我的代码。我正在用GLSL编写一个着色器。我正在使用WebGL。所以我有一张有22个项目的雪碧表。这张纸是640x640。除最后一行外，每行有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;

}

---

代码可以工作，但我想改进它。似乎这些if状态可以通过for循环大大简化。有人有什么想法吗？或者，如果可以为TextureCord x和y创建两个变量，那就太好了。

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

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

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

---

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

如果您可以更改为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);

---

为什么你需要一个环？你不能从

positionInTime

值中计算出这两个参数吗？如果你使用

或者如果
@Barmar Yea你的权利，这会有很大的改进。我正要更新关于这一点的问题。比较浮点数是否相等可能很棘手。小心。你不需要for循环，但需要一些数学来填充vec2。@NeilKirk它们不是真正的浮动，因为他在分配时使用
floor
。谢谢你的回答。我一直在使用第一个示例，它几乎可以完美地工作。唯一的一件事是，我认为它在我所寻找的东西之间给了我价值观。是否可以将它四舍五入到这些值中最接近的值0.0、0.2、0.4、0.6或0.8。我不知道为什么它会给出介于两者之间的值。计算
positionInTime
时，将其舍入为整数。请注意，这些值在二进制浮点中没有精确的表示形式，因此会有一点错误。但是如果你只显示1个十进制数字，它应该会正确地四舍五入。刚刚意识到我被10除，但它应该是5。很酷，我将从float转换为int。GLSL中没有控制台日志，所以解决问题有点困难。哦，我也会调整它