如何使用WebGL设置动画速度

我想通过改变平移增量来设置非常简单的动画的速度（只需在屏幕上向下移动一个2D矩形）。该代码基于“@greggman”精彩的WebGL系列课程

我可以很好地渲染矩形，并且可以使它在屏幕上移动。问题是，一开始，它移动得太快了，所以我尝试添加更多、更精细的翻译增量来减缓速度。但是，当我增加增量（循环）的数量太多时，屏幕会冻结/暂停以进行计算，当它恢复正常时，它会将矩形定位在循环结束时应该位于的位置，而不是一帧一帧地稳定渲染。（感觉就像浏览器Firefox只是想找到结束位置并进行渲染，而不是花时间一步一步地浏览每一帧）

这是我试图用来控制动画速度的循环

 var inc = -0.0001;
  for (var ii = 0; ii < 1000000; ++ii) {
    translation[1] += inc;
// If at boundaries, reverse direction . . . 
    switch (translation[1]) {
        case 1:
            inc = -inc;
        case -1:
            inc = -inc;
    }
    drawScene();
  }

非常感谢如果有任何想法如何使动画渲染顺利逐帧，同时让我控制动画的速度

如中所示，您需要使用渲染循环

requestAnimationFrame

接受回调，并以毫秒为单位传递自加载页面以来的时间。然后，根据时间或自上一帧起的时间，更新用于计算位置或旋转、大小或颜色的任何值

比如说

let then = 0;
function render(now) {
   now *= 0.001;  // convert to seconds
   const deltaTime = now - then;   // deltaTime is now number of seconds since last frame
   then = now;    // save the for the next frame

   // now update some values. Example

   positionX += moveSpeed * deltaTime; 
   rotation += rotateSpeed * deltaTime;

   // then draw your stuff using those values

   webgl goes here

   // now loop by calling requestAnimationFrame to call this function again
   requestAnimationFrame(render)
}

// start the loop
requestAnimationFrame(render)

这是您使用上面的循环发布的代码。不过请注意，我看到您使用的代码来自。你真的应该使用矩阵，所以

“严格使用”；
函数main（）{
//获取WebGL上下文
/**@type{HTMLCanvasElement}*/
var canvas=document.getElementById（“canvas”）；
var gl=canvas.getContext（“webgl”）；
如果（！gl）{
返回；
}
//安装GLSL程序
var program=webglUtils.createProgramFromScripts（gl，[“2d顶点着色器”、“2d片段着色器”]）；
gl.useProgram（程序）；
//查找顶点数据需要去的地方。
var positionLocation=gl.GetAttriblLocation（程序，“a_位置”）；
//查找制服
var resolutionLocation=gl.getUniformLocation（程序，“u_resolution”）；
var colorLocation=gl.getUniformLocation（程序，“u_颜色”）；
var translationLocation=gl.getUniformLocation（程序，“u_translation”）；
//创建一个缓冲区来放置位置
var positionBuffer=gl.createBuffer（）；
//将其绑定到ARRAY\u BUFFER（将其视为ARRAY\u BUFFER=positionBuffer）
gl.bindBuffer（gl.ARRAY\u BUFFER，positionBuffer）；
//将几何数据放入缓冲区
集合几何（gl）；
var转换=[0,0]；
var color=[Math.random（），Math.random（），Math.random（），1]；
函数drawsecene（）{
webglUtils.resizeCanvasToDisplaySize（总图画布）；
//告诉WebGL如何将剪辑空间转换为像素
总图视口（0，0，总图画布宽度，总图画布高度）；
//清理画布。
总账清除（总账颜色缓冲位）；
//告诉它使用我们的程序（一对着色器）
gl.useProgram（程序）；
//启用该属性
gl.EnableVertexAttributeArray（位置位置）；
//绑定位置缓冲区。
gl.bindBuffer（gl.ARRAY\u BUFFER，positionBuffer）；
//告诉属性如何从positionBuffer（数组\缓冲区）中获取数据
var size=2；//每次迭代2个组件
var type=gl.FLOAT；//数据为32位浮点
var normalize=false；//不规范化数据
var stride=0；//0=向前移动大小*sizeof（type）每次迭代以获得下一个位置
var offset=0；//从缓冲区的开头开始
gl.VertexAttribute指针(
位置、尺寸、类型、规格化、跨步、偏移）；
//制定决议
gl.uniform2f（分辨率位置、gl.canvas.width、gl.canvas.height）；
//设置颜色
gl.uniform4fv（颜色位置、颜色）；
//设置翻译。
gl.uniform2fv（翻译位置，翻译）；
//绘制几何图形。
var primitiveType=gl.TRIANGLES；
var偏移=0；
var count=18；//在“F”中有12个三角形，每个三角形有3个点
总账.DrawArray（原语类型、偏移量、计数）；
}
设moveSpeed=100；//单位为每秒
setupSlider（“#moveSpeed”，{value:moveSpeed，slide:updateMoveSpeed，min:0，max:400}）；
函数updateMoveSpeed（事件，ui）{
moveSpeed=ui.value；
}  
然后设=0；
函数渲染（现在）{
现在*=0.001；//转换为秒
const deltaTime=now-then；//deltaTime是自上一帧起的秒数
然后=现在；//保存下一帧的
//现在更新一些值
平移[0]+=moveSpeed*deltaTime；
平移[1]+=moveSpeed*deltaTime；
//把它们放在屏幕上
平移[0]=gl.canvas.width；
平移[1]=gl.canvas.height；
//然后画你的东西
drawScene（）
//现在通过调用requestAnimationFrame来循环以再次调用此函数
请求动画帧（渲染）；
}
//开始循环
请求动画帧（渲染）；
}
//用定义字母“F”的值填充缓冲区。
函数集几何（gl）{
缓冲数据(
gl.ARRAY\u缓冲区，
新浮点数组([
//左列
0, 0,
30, 0,
0, 150,
0, 150,
30, 0,
30, 150,
//上横档
30, 0,
100, 0,
30, 30,
30, 30,
100, 0,
100, 30,
//中间横档
30, 60,
67, 60,
30, 90,
30, 90,
67, 60,
67, 90,
]),
gl.静态（U形图）；
}
main（）
@导入url（“https://webglfundamentals.org/webgl/resources/webgl-tutorials.css");
身体{
保证金：0；
}
帆布{
宽度：100vw；
高度：100vh；
显示：块；
}

属性向量2 a_位置；
均匀vec2u_分辨率；
统一vec2u_翻译；
void main（）{
//加上翻译。
vec
let then = 0;
function render(now) {
   now *= 0.001;  // convert to seconds
   const deltaTime = now - then;   // deltaTime is now number of seconds since last frame
   then = now;    // save the for the next frame

   // now update some values. Example

   positionX += moveSpeed * deltaTime; 
   rotation += rotateSpeed * deltaTime;

   // then draw your stuff using those values

   webgl goes here

   // now loop by calling requestAnimationFrame to call this function again
   requestAnimationFrame(render)
}

// start the loop
requestAnimationFrame(render)