零基础制作物理引擎--创造世界

写在前面

2011年在写了个物理引擎，期间重新啃起了物理课本，一晃就是5年，
当年自己写的物理引擎的代码又阅读一遍，受益匪浅，加上最近制作坦克争霸使用Box2d的思考，对物理引擎管线又有了新的认识和体会。
人除了造人，还可以是造世界，这两种时候人能够扮演上帝的角色。有人会说：“几个小球撞来撞球算哪门子世界？”引用《黑客帝国》里
男主角的话：“哪一个才是真实的世界？”在小球的眼里，它的世界就是真实的世界，只是小球无意识，意识形态的程序设计太复杂，
如果有一天意识形态能用程序表达并通过图灵测试,那么:"哪一个才是真实的世界？同样都是原子构成的世界，哪一个才是真实的世界？"。
不废话，现在就开始吧...

准备工作

运行环境

准备好一款浏览器，而且必须是现代浏览器（如Google Chrome最新版），因为物理引擎虽然支持老的浏览器，但是为了看到这个物理世界发生的一切，会在canvas里渲染刚体。

顶级NameSpace

为了纪念牛顿，使用Newton作为顶级命名空间。

var Newton = {};

Class.js

代码的分类抽象完全基于Class，使用的class.js如下所示：

var Class = function () { };
Class.extend = function (prop) {
    var _super = this.prototype;
    var prototype = Object.create(this.prototype);
    for (var name in prop) {
        prototype[name] = name == "ctor" ?
            (function (name, fn) {
                return function () {
                    var tmp = this._super;
                    this._super = _super[name];
                    var ret = fn.apply(this, arguments);
                    this._super = tmp;
                    return ret;
                };
            })(name, prop[name]) :
            prop[name];
    }

    function Class() {
        this.ctor.apply(this, arguments);
    }

    Class.prototype = prototype;
    Class.prototype._super = Object.create(this.prototype);
    Class.prototype.constructor = Class;
    Class.extend = arguments.callee;

    return Class;
};

向ES6靠齐的class.js，暴露prototype给语言使用者总是不友好的，大概的使用方式如下：

• 通过Class.extend定义类
• 通过XXX.extend实现继承
• ctor方法里通过this._super访问父类ctor
• 其余方法通过this.xxx访问父类方法
• 如果本身已经包含xxx方法，通过this._super.xxx访问父类方法

以前写过一篇文章介绍。

Vector2

Vector2，一般用来表示向量，有的时候也用来当作点来进行计算。

Newton.Vector2 = Class.extend({
    ctor: function (x, y) {
        this.x = x;
        this.y = y;
    },
    clone:function() {
        return new Newton.Vector2(this.x, this.y);
    },
    length: function () {
        return Math.sqrt(this.x * this.x + this.y * this.y);
    },
    normalize: function () {
        var inv = 1 / this.length();
        this.x *= inv;
        this.y *= inv;
        return this;
    },
    add: function (v) {
        this.x += v.x;
        this.y += v.y;
        return this;
    },
    multiply: function (f) {
        this.x*=f;
        this.y*=f;
        return this;
    },
    dot: function (v) {
        return this.x * v.x + this.y * v.y;
    },
    angle: function (v) {
        return Math.acos(this.dot(v) / (this.length() * v.length())) * 180 / Math.PI;
    },
    distanceSquare: function (x, y) {
        return this.x * x + this.y * y;
    }
});

其中

• clone复制向量/点
• length求向量长度
• normalize转单位向量
• add向量叠加
• multiply向量翻倍
• dot内积
• angle方法用来求两个向量的夹角
• distanceSquare 距离的平方

除了clone方法，其余方法都不会创建新的Vector2，这里不能为了使用的代码可以连缀而创建大量的Vector2。

知识准备

[角]速度等于加速度在时间上的累加

v = a*t

[角]位移等于速度在时间上的累加

s = v*t

加速度等于过物体重心的力除以质量（最常见的物体受地球的吸引力，即重力。把物体看成质点，而且过重心先不用考虑角速度）

F = ma

运动的独立性

一个物体同时参与几种运动，各分运动都可看成独立进行的，互不影响，物体的合运动则视为几个相互独立分运动叠加的结果

如下图的运动小球：

可拆分成如下三种运动分量：

牛顿的世界

世界里需要模拟时间流逝，去累加速度、位移。
时间是连续的还是非连续的？到底有没有最小时间片？最小时间片是多少？现代物理依然无法给出定论。
但是在物理引擎里，时间是非连续的。

Newton.World = Class.extend({
    ctor: function () {
        this.bodies = [];
        this.bodiesLen = 0;
        this.timeStep = 1/60;
    }
});

如上面代码所示，bodies为世界里的所有物体,bodiesLen为物体的数量。timeStep为最小时间片段。

时间流逝

Newton.World = Class.extend({
    ...
    ...
    start: function () {
        Newton.Ticker(function () {
            this.tick();
            this.start();
        }.bind(this));
    },
    tick:function(){
        var  k = 0;
        for (; k < this.bodiesLen ; k++) {
            var body = this.bodies[k];
            body.tick(this.timeStep);
        }
    },
    add: function (body) {
        this.bodies.push(body);
        this.bodiesLen = this.bodies.length;
    }    
    ...
    ...

世界可以通过add方法向世界增加物体,上面的tick处理世界上发生的所有事件，目前仅仅是调用了物体自身的tick。

ticker代码如下：

(function () {
    var lastTime = 0;
    var Ticker = function (callback, element) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function () {
                callback(currTime + timeToCall);
            },
            timeToCall);
        lastTime = currTime + timeToCall;
        return id;
    };

    Newton.Ticker = Ticker;
}());

这里不使用requestAnimationFrame的，用的智能setTimeout。因为tick里面以后会包含很多逻辑，如重力处理、AABB优化、碰撞检测、碰撞处理、重叠处理、休眠处理，
requestAnimationFrame里的函数是在repaint之前调用，和复杂且耗时的程序逻辑混在一起会导致帧率下降，起反作用。

第一个物体

小球，是这个世界第一个物体。它除了不分男女，与生俱来许多属性（运动和碰撞相关的属性）。

Newton.Circle = Class.extend({
    ctor: function (option) {
        this.bodyType = Newton.BODYTYPEDYNAMIC;
        this.r = option.r;
        this.position = new Newton.Vector2(0, 0);
        this.mass = 1;
        this.linearVelocity = new Newton.Vector2(0, 0);
        this.rotation = 0;
        this.angularVelocity = 0;

        for(var key in option){
            if (option.hasOwnProperty(key) && this.hasOwnProperty(key)) {
                this[key]=option[key];
            }
        }

        //过重心的力
        this.force=Newton.World.Gravity.clone().multiply(this.mass);
        
        if (this.bodyType === Newton.BODYTYPESTATIC) {
            this.invMass=0;
        }else{
            this.invMass=1/this.mass;
        }
    },
    integrateVelocity: function (dt) {
        this.linearVelocity.x += this.force.x*this.invMass * dt;
        this.linearVelocity.y += this.force.y*this.invMass * dt;
    },
    integratePosition: function (dt) {
        this.position.x += this.linearVelocity.x * dt;
        this.position.y += this.linearVelocity.y * dt;
    },
    integrateRotation: function (dt) {
        if (this.rotation >= 360) this.rotation %= 360;
        this.rotation += this.angularVelocity * 180 * dt / Math.PI;
    },
    tick: function (dt) {
        this.integrateVelocity(dt);
        this.integratePosition(dt);
        this.integrateRotation(dt);
    }
})

• integrateVelocity对应 v=at
• integratePosition对应 s=mv
• integrateRotation对应 s=mv
• this.force.y*this.invMass对应 a=f/m

上面的构造函数里，会把传入的参数覆盖默认的参数配置，并且提前计算好重力的倒数，因为重力的倒数会被经常用到。
好了。到目前为止已经完成了一款简陋的物理引擎，包含了物理引擎管线的：重力处理。下面要通过canvas把物理引擎的运作过程可视化。

渲染准备

Newton.Render = Class.extend({
    ctor: function (selector) {
        this.canvas = document.querySelector(selector);
        this.ctx = this.canvas.getContext("2d");
    },
    clear: function () {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    circle: function (x, y, r, rotation) {
        this.ctx.save();
        this.ctx.beginPath();
        this.ctx.setTransform(1 * Math.cos(rotation), Math.sin(rotation), -1*Math.sin(rotation), Math.cos(rotation), x, y);
        this.ctx.arc(0, 0, r, 0, 2 * Math.PI, false);
        this.ctx.lineTo(0, 0)
        this.ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);
        this.ctx.stroke();
        this.ctx.restore();
    }
});

上面使用setTransform设置变换矩阵，能完成rotate(), scale(), translate(), or transform() 所能完成的工作。

使用下面代码测试绘制：

var rd = new Newton.Render("#ourCanvas");
rd.circle(100, 100, 80, 10 * Math.PI / 180);

可以看到下面的效果：

这里为了能看出旋转的角度，从圆的重心向右边r的位置画了一条线段。因为后续文章当中，也会出现矩形的刚体，同样，我们可以封装一个绘制矩形的
方法：

    rect: function (x, y, w, h, rotation) {
        this.ctx.save();
        this.ctx.beginPath();
        this.ctx.setTransform(1 * Math.cos(rotation), Math.sin(rotation), -1 * Math.sin(rotation), Math.cos(rotation), x, y);
        this.ctx.strokeRect(-w / 2, -h / 2, w, h);
        this.ctx.beginPath();
        this.ctx.moveTo(w / 2, 0);
        this.ctx.lineTo(0, 0);
        this.ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);
        this.ctx.closePath();
        this.ctx.stroke();
        this.ctx.restore();
    }

让物理引擎跑起来

var world = new Newton.World();
var c1 = new Newton.Circle({
    r: 20,
    position: new Newton.Vector2(100, 20),
    linearVelocity: new Newton.Vector2(350, 100),
    angularVelocity:Math.PI/10
});
world.add(c1);

var render = new Newton.Render("#ourCanvas");
world.onTick(function () {
    render.clear();
    render.circle(c1.position.x, c1.position.y, c1.r, c1.rotation);
})

world.start();

上面Circle的参数里面：

• r代表球的半径
• position是球的位置
• linearVelocity球的线速度
• angularVelocity球的角速度

按照上面一步一步，你将看到一个小球从（100，20 ）的位置加速旋转掉飞下。

第一次重构

因为Newton.Circle 的大部分属性和方法，在其他的刚体中也适用，只有半径这个东西是Circle特有的，
所以将Newton.Circle改名为Newton.Body，并移除属性r，然后Newton.Circle 的代码就变成了：

Newton.Circle = Newton.Body.extend({
    ctor: function (option) {
        this._super(option);
        this.r = option.r;
    }
});

加四面墙

var world = new Newton.World();
var minV =10;
var c1 = new Newton.Circle({
    r: 20,
    position: new Newton.Vector2(100, 20),
    linearVelocity: new Newton.Vector2(350, 100),
    angularVelocity:Math.PI/10
});
world.add(c1);

var render = new Newton.Render("#ourCanvas");
world.onTick(function () {
    render.clear();
    render.circle(c1.position.x, c1.position.y, c1.r, c1.rotation);

    if (c1.position.y - c1.r < 0) {
        c1.linearVelocity.y *= -0.95;
        c1.angularVelocity *= 0.9;
        c1.position.y = c1.r;
    }
    if (c1.position.y + c1.r > 400 ) {
        c1.linearVelocity.y *= -0.95;
        c1.angularVelocity *= 0.9;
        c1.position.y  = 400-c1.r;
    }

    if (c1.position.x + c1.r > 400) {
        c1.linearVelocity.x *= -0.95;
        c1.angularVelocity *= 0.9;
        c1.position.x = 400 - c1.r;
    }
    if (c1.position.x - c1.r < 0) {
        c1.linearVelocity.x *= -0.95;
        c1.angularVelocity *= 0.9;
        c1.position.x = c1.r;
    }
   
    if (Math.round( c1.position.y+c1.r)===400&& Math.abs(c1.linearVelocity.y) < minV){
        c1.linearVelocity.y = 0;
        c1.linearVelocity.x *= 0.95;
    }
    if (Math.abs(c1.linearVelocity.x) < minV) {
        c1.linearVelocity.x = 0;
    }

})

world.start();

现在你可以看到一个小球在画布里，撞来撞去最后静止。

world.onTick里面加了一大堆逻辑，用来处理小球与400*400的Canvas的碰撞，以及角速度和角速度的衰减，位置的矫正（重叠处理），到最后
的静止。因为世界只有圆一种刚体，所有只能先这样实现。但是上面的onTick里新加的代码，其实可以窥见物理引擎管线中的必备流程：

• 碰撞检测
• 碰撞反应
• 重叠处理
• 休眠处理
• ...

与鼠标互动

...
...
... 
function createBall(p){
    var c1 = new Newton.Circle({
        r: 20,
        position: new Newton.Vector2(p.x, p.y),
        linearVelocity: new Newton.Vector2(350, 100),
        angularVelocity:Math.PI/10
    });
    world.add(c1);
}

function getMousePos( evt) {
    var rect = evt.srcElement.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}

var canvas=document.querySelector("#ourCanvas");
canvas.addEventListener("click",function(evt){
    createBall(getMousePos(evt));
},false);

var render = new Newton.Render("#ourCanvas");
world.onTick(function () {
    render.clear();
    for(var i=0;i<world.bodiesLen;i++){
        var c1=world.bodies[i];
        render.circle(c1.position.x, c1.position.y, c1.r, c1.rotation);
        if (c1.position.y - c1.r < 0) {
...
...
... 

效果如下：

因为所有的刚体都会被push进world.bodies,所有在onTick中需要遍历所有的小球进行绘制和与墙面的碰撞检测。

最后

本篇幅主要做了大量的准备工作包含class.js、ticker.js、vector2.js、render.js，真正的物理引擎的部分只占了小部分，后续的文章的占比会恰好相反。

虽然社区里有许多成熟的物理引擎，但自己实现一款物理引擎有非常多的好处：

• 避开Box2d沉重的计算开销
• 自由定制和扩展自己物理引擎
• 知道每行代码的意义使用起来更放心

未完待续..
下篇预告:《零基础制作物理引擎--创造力量 》