2021SC@SDUSC 【软件工程应用与实践】Claygl项目代码分析(三)

一、Particle.js

Particle.prototype.update

Particle.prototype.update = function(deltaTime) {
    if (this.velocity) {
        vec3.scaleAndAdd(this.position.array, this.position.array, this.velocity.array, deltaTime);
    }
    if (this.angularVelocity) {
        vec3.scaleAndAdd(this.rotation.array, this.rotation.array, this.angularVelocity.array, deltaTime);
    }
};

(1)deltaTime介绍

        如上述代码可见,函数参数有“deltaTime”,称为增量时间。这一概念十分重要故而先说明其含义。delta(即Δ),常用来表示前后变化差距,而deltaTime则是代表了每一帧间时间的差距。

        影视游戏中的渲染是按帧进行的。

        当物体每秒移动30米,即30m/s,若以30帧每秒运行,则每帧的位移为一米;当其以60帧每秒运行时,若是仍按照每帧位移一米,则结果变成60m/s,这是显然错误的。

        故需要deltaTime,其可以理解为完成上一帧所需时间或是说两帧之间的间隔时间。所以将速度(每秒移动的距离)乘以deltaTime(两帧间隔时间),获得的便是每帧移动的距离(m/帧)。这样只需要获取当前deltaTime,便可以正常渲染画面,而不用担心因为帧率不同而导致结果不同。

(2)更新速度

vec3.scaleAndAdd = function(out, a, b, scale) {
    out[0] = a[0] + (b[0] * scale);
    out[1] = a[1] + (b[1] * scale);
    out[2] = a[2] + (b[2] * scale);
    return out;
};

通过以上函数更新速度和角速度,用3个方向的速度乘以增量时间求得变化距离,求得当前位置,并赋值,返回新的位置数组。

上一篇:transform属性


下一篇:HTML简单动画