Javascript 重置顶点位置

我正在创建一个简单的webgl程序，在画布上放置3个随机顶点，并将它们连接成一个三角形。我尝试添加平移以将三角形向右移动（增加每个顶点的X值），但是如果它永远移动，三角形将从画布中消失。是否有人知道如何检测顶点的x值是否大于1，如果是，则重置给定顶点的位置，因为我的解决方案似乎没有任何作用，就像它甚至没有触发一样

var canvas=document.getElementById（“canvas”）；
var gl=canvas.getContext（“webgl”）；
gl.clearColor（0.1,0.2,0.2,1.0）；
总图清除（总图深度缓冲区位、总图颜色缓冲区位）；
var指数=[0,0,0,0,0,0]；
对于（变量点=0；点<6；点++）{
指数[点]=（数学随机（）*2）-1；
//指数[点数+1]=数学随机（）<0.5？-1:1；
}
var buf=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，buf）；
gl.bufferData（gl.ARRAY\U BUFFER，新浮点数组（索引），
gl.静态（U形图）；
var vert=gl.createShader（gl.VERTEX\u着色器）；
gl.着色器源（垂直`
精密中泵浮子；
属性向量2位置；
统一vec2翻译；
void main（）{
gl_位置=向量4（位置+平移，0.0,1.0）；
}
`);
总帐编辑主任（垂直）；
var success1=gl.getShaderParameter（垂直，gl.COMPILE_状态）；
如果（！成功1）{
//编译过程中出错；获取错误
抛出gl.getShaderInfoLog（垂直）；
}
var frag=gl.createShader（gl.FRAGMENT\u着色器）；
总账着色器源（frag`
精密中泵浮子；
void main（）{
gl_FragColor=vec4（0.3,0.6,0.4,1.0）；
}
`);
总帐编辑主任（frag）；
var success2=gl.getShaderParameter（frag，gl.COMPILE_状态）；
如果（！成功2）{
//编译过程中出错；获取错误
抛出gl.getShaderInfoLog（frag）；
}
var program=gl.createProgram（）；
总承包商attachShader（项目，垂直）；
德国劳埃德船级社（项目，frag）；
总账链接程序（程序）；
var vertLoc=gl.GetAttriblLocation（程序，“位置”）；
gl.VertexAttribute指针（vertLoc，2，gl.FLOAT，gl.FALSE，0，0）；
gl.EnableVertexAttributeArray（vertLoc）；
gl.useProgram（程序）；
var trans=gl.getUniformLocation（程序，“翻译”）；
var换算=[0.0,0.0]；
gl.uniform2fv（翻译、翻译）；
总图数组（总图三角形，0,3）；
函数循环（）{
gl.clearColor（0.1,0.2,0.2,1.0）；
总图清除（总图深度缓冲区位、总图颜色缓冲区位）；
平移[0]+=0.01；
gl.uniform2fv（翻译、翻译）；
总图数组（总图三角形，0,3）；
对于（变量点=0；点<6；点++）{
如果（指数[点]%2==0）{
if（索引[点]+平移[0]>1）{
指数[点]=（数学随机（）*2）-1；
}
}
//指数[点数+1]=数学随机（）<0.5？-1:1；
}
请求动画帧（循环）；
}
loop（）
要实现这一点，请考虑对代码进行以下更改：


通过顶点着色器中的
translation
删除顶点的放置，以使您可以“逐顶点”控制几何体的放置（
translation
实际上意味着“对象级别”的放置，这不是您想要的位置）

在
循环（）
中迭代
点时，检查顶点坐标上的模。您应该对迭代索引执行如下检查：
if（点%2==0）

既然
平移
概念已经消失，那么在模检查之后更新顶点坐标的位置，而不是
平移
数组：
索引[点]+=0.01

最后，如果要更新
索引
顶点数据，则需要更新webgl
buf
，以确保在渲染下一帧时反映所做的更改：

gl.bindBuffer(gl.ARRAY_BUFFER, buf);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(indices), gl.STATIC_DRAW);



以下是完整的更新脚本：


var canvas=document.getElementById（“canvas”）；
var gl=canvas.getContext（“webgl”）；
gl.clearColor（0.1,0.2,0.2,1.0）；
总图清除（总图深度缓冲区位、总图颜色缓冲区位）；
var指数=[0,0,0,0,0,0]；
对于（变量点=0；点<6；点++）{
指数[点]=（数学随机（）*2）-1；
}
var buf=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，buf）；
gl.bufferData（gl.ARRAY\U BUFFER，新浮点数组（索引），
gl.静态（U形图）；
var vert=gl.createShader（gl.VERTEX\u着色器）；
gl.着色器源（垂直`
精密中泵浮子；
属性向量2位置；
void main（）{
gl_位置=vec4（位置，0.0,1.0）；
}
`);
总帐编辑主任（垂直）；
var success1=gl.getShaderParameter（垂直，gl.COMPILE_状态）；
如果（！成功1）{
抛出gl.getShaderInfoLog（垂直）；
}
var frag=gl.createShader（gl.FRAGMENT\u着色器）；
总账着色器源（frag`
精密中泵浮子；
void main（）{
gl_FragColor=vec4（0.3,0.6,0.4,1.0）；
}
`);
总帐编辑主任（frag）；
var success2=gl.getShaderParameter（frag，gl.COMPILE_状态）；
如果（！成功2）{
抛出gl.getShaderInfoLog（frag）；
}
var program=gl.createProgram（）；
总承包商attachShader（项目，垂直）；
德国劳埃德船级社（项目，frag）；
总账链接程序（程序）；
var vertLoc=gl.GetAttriblLocation（程序，“位置”）；
gl.VertexAttribute指针（vertLoc，2，gl.FLOAT，gl.FALSE，0，0）；
gl.EnableVertexAttributeArray（vertLoc）；
gl.useProgram（程序）；
总图数组（总图三角形，0,3）；
函数循环（）{
gl.clearColor（0.1,0.2,0.2,1.0）；
总图清除（总图深度缓冲区位、总图颜色缓冲区位）；
总图数组（总图三角形，0,3）；
//更新顶点数据，使每个帧的顶点x坐标增加
对于（变量点=0；点<6；点++）{
//仅处理x坐标
如果（点%2==0）{
//每帧增加x坐标
指数[点数]+=0.01；
//如果x位置>1，将其重置为新的随机值
如果（指数[点]>1）{
指数[点]=（数学r