关于javascript:不懂物理的前端不是好的游戏开发者一-物理引擎基础

游戏当初仿佛曾经成为了大家绕不开的一个娱乐形式，从大型端游到手游，到页游，再到各种 APP 外面的 H5 小游戏，它以各种形式入侵了咱们的生存。那么在享受游戏的同时，作为一名前端开发，也开始思考如何开发一款游戏，在技术层面它该当具备什么？

除了根本的游戏画面、动效开发、渲染性能，还有一项值得探索的货色，那就是物理引擎。一个好的物理引擎，保障了游戏内的交互体验和事实中类似，给人提供了更优质的体验。

当初好用的物理引擎有很多，大部分都是开箱即用，但物理引擎的根底和底层逻辑是什么样子的，可能有些人并不理解。从这期开始咱们将分多个局部介绍物理引擎的根底，让大家对此更加理解。以下的内容局部参考自《游戏物理引擎开发》。

引擎是什么？当然这里是延展了汽车中引擎的概念。在汽车中，引擎——一种能量转换的安装，将其余能变为机械能提供给汽车，是汽车可能静止的外围模块。

那对应的，在开发当中的引擎是什么呢？在我的了解中，是一个能够将一个个性能疾速退出到我的项目中，并且保障性能运行的外围模块。渲染引擎，就可能疾速实现内容的渲染。游戏引擎，就可能疾速实现一个游戏的根底开发。而物理引擎，就是能够疾速模仿事实中物理状态。

理解完引擎是什么之后，咱们能够再来关注一下，引擎有什么特点。引擎最大的特点就是两个——疾速，通用。它可能疾速实现须要的性能，并且有很强的通用性，它并非是针对某个专门的业务开发的，而是针对一大类状况进行开发，所以必须领有弱小的通用性。

疾速意味着须要做到功能完善，API 封装残缺，应用便捷。通用意味着代码自身的逻辑须要足够底层，利用最根本的逻辑能力做到最大的通用性。

一个物理引擎的根底是什么呢？那就是物理和数学。其实一个物理零碎在游戏中的体现是整个物理零碎内各个对象的地位。每一帧都须要计算物体的地位，使得他们能呈现在正确的中央。所以合乎物理学法则的数学运算，是一个物理引擎的根底。咱们上面的一切都是以此为根据来进行论述的。

首先要看一下，在游戏世界中，数学在哪些地方起到了作用。无论是在二维还是三维的世界中，针对对象的地位的形容都是由向量来实现的。而向量的解决，免不了的就是向量自身的一些合成、加减、点积、向量积等常识。

所以咱们要先建设一个最根底的向量类：

class Vector {
  x: number
  y: number
  z: number
  constructor(x: number,y: number,z: number) {
      this.x = x
      this.y = y
      this.z = z
  }

  setX(x: number) {this.x = x}

  setY(y: number) {this.y = y}

  setZ(z: number) {this.z = z}
}

向量的合成，利用的是三角函数的内容，将一个向量通过角度合成到 x 轴、y 轴、z 轴，或者依据不同轴上的坐标来计算对应的角度。
<center>

<img src="https://img10.360buyimg.com/ling/jfs/t1/187655/26/15116/36501/60fe5e98E34fe5aa7/0ed9686b387c2d38.png" width=400>
</img>
<p> 三角函数 </p>

</center>

而向量的计算原理，就不认真论述了。在游戏世界中，最初都会被合成到对应坐标轴的方向进行计算，即使是点积或者向量积也不例外。所以只有纯熟使用三角函数和向量计算公式，就可能进行向量的解决了。

咱们将给向量减少以下计算方法：

class VectorOperation {add (vectorA: Vector, vectorB: Vector) { //  向量相加
    return new Vector(
        vectorA.x + vectorB.x,
        vectorA.y + vectorB.y,
        vectorA.z + vectorB.z
    )
  }

  minus (vectorA: Vector, vectorB: Vector) { // 向量相减
    return new Vector(
        vectorA.x - vectorB.x,
        vectorA.y - vectorB.y,
        vectorA.z - vectorB.z
    )
  }

  multiply (vectorA: Vector, times: number) { // 向量缩放
    return new Vector(
        vectorA.x * times,
        vectorA.y * times,
        vectorA.z * times
    )
  }

  dotProduct (vectorA: Vector, vectorB: Vector) { // 向量点积
    return vectorA.x* vectorB.x + vectorA.y* vectorB.y + vectorA.z* vectorB.z
  }

  vectorProduct (vectorA: Vector, vectorB: Vector) { // 向量外积
    return new Vector(
      vectorA.y * vectorB.z - vectorA.z * vectorB.y,
      vectorA.z * vectorB.x - vectorA.x * vectorB.z,
      vectorA.x * vectorB.y - vectorA.y * vectorB.x,
      )
  }
}

而在游戏物理学中，还须要用到一门很重要的数学知识，那就是微积分。

这么说大家可能领会不到，都是一些根底的物理内容，为什么会用到微分和积分呢？来举个例子，先看看最根本的速度公式，先从平均速度开始，是通过的途程除以通过的工夫：
$$ v = \frac {s_{1} – s_{0}}{t_{1} – t_{0}} \tag{平均速度}$$

而后是某个时刻的速度的计算，其实就是在平均速度的根底上，将时间差放大到无穷小：
$$ v = \lim_{\Delta t \to 0} \frac {\Delta s}{\Delta t} = \frac{ds}{dt} \tag{速度}$$

<img src="https://img11.360buyimg.com/ling/jfs/t1/185224/37/20023/79749/611cb271E555947b1/fb03f04909f34df0.png" width=400>
</img>
<p> 微分的原理 </p>

</center>

这就是微分的利用。那么积分的利用呢？

再来看看最根本的速度和途程的公式，在匀速运动中的公式如下，其中 t 为静止工夫：
$$ s_{1} = s_{0} + v_{0}t \tag{匀速运动}$$

其实这个公式的实质应该是：
$$ s_{1} = s_{0} + \int_{t_{0}}^{t_{1}}v_{0}dt \tag{匀速运动}$$

以上只是微积分的简略利用，阐明了在游戏中微积分的应用也非常重要，那么咱们在代码中也应该退出对应的办法。

在一个虚构的世界外面，咱们要是想要取得和事实一样的体验，也必然要遵循事实中的物理法令，不可能呈现苹果朝天上飞的情况。由此咱们先来构建一个模仿实在环境的对象。

在物理引擎中，一个物体应该具备什么样子的属性呢？最重要的就是上文提到的地位信息，那么对应的，是扭转地位的信息，也就是速度。随之又引出了一个值，那就是扭转速度的信息，也就是加速度了。在这样的根底上，咱们能够失去一个最根本的物体所应该领有的属性：

class GameObj {
  pos: Vector
  velocity: Vector
  acceleration: Vector

  constructor(pos?: Vector, velocity?: Vector, acceleration?: Vector) {this.pos = pos || new Vector(0, 0, 0)
      this.velocity = velocity || new Vector(0, 0, 0)
      this.acceleration = acceleration || new Vector(0, 0, 0)
  }

  setPos (pos: Vector) {this.pos = pos}

  setVelocity (velocity: Vector) {this.velocity = velocity}

  setAcceleration (acceleration: Vector) {this.acceleration = acceleration}
}

咱们当初领有了最根本的一个物体，想要使这个物体融入物理体系由咱们任意操作，就须要将物体与力联合在一起。而联合两者的，正是牛顿三大定律。

首先是牛顿第二定律，作用力能够扭转物体的静止状态。用一个简略的公式表白就是：

$$ \vec F = m\vec a \tag{牛顿第二定律}$$

那也就是说，咱们要联合加速度和力的话，须要给物体一个变量，那就是品质 m。那咱们给上述对象再增加上品质属性：

class GameObj {
  mess: number // 品质不得为 0

  constructor(mess?: number) {if (mess > 0) {this.mess = mess}
  }

  setMess (mess: number) {if (mess > 0) {this.mess = mess}
  }
}

然而这个时候咱们会有两个问题：第一，物体的品质不能为 0，如果设置了 0，就会导致品质设置出错；第二，某些物体，咱们须要它有着无穷大的品质，比方高空，墙体，咱们是须要它在游戏场景中放弃固定的。那么一方面是不容许呈现的 0，另一方面是难以设置的无穷大，应该怎么办呢？

在游戏物理学中提出了一个概念，叫做逆品质，奇妙的解决了这个问题。逆品质其实就是品质的倒数，也就是 $\frac{1}{m}$, 这样的话，咱们只须要将须要固定的物体的逆品质设置为 0 就能够使其的品质无穷大了，并且也防止了品质设置为 0 的状况。

class GameObj {
  inverseMess: number // 品质不得为 0

  constructor(inverseMess?: number) {if (inverseMess >= 0) {this.inverseMess = inverseMess}
  }

  setInverseMess (inverseMess: number) {if (inverseMess >= 0) {this.inverseMess = inverseMess}
  }
}

到这里为止，咱们所须要的最根底的数学和物理常识曾经胜利的被注入了物理引擎中，然而这仅仅是一个物理引擎的基石，在此基础上，咱们还要增加各种各样的货色，比方重力、阻力、动量、角动量、碰撞等等一系列的内容。在这前面还有很长的路要走，我将会在这个系列中一一展现。

欢送关注凹凸实验室博客：aotu.io

或者关注凹凸实验室公众号（AOTULabs），不定时推送文章。

关于javascript:不懂物理的前端不是好的游戏开发者一-物理引擎基础

概述

何为引擎

物理引擎的根底

代码中的数学

物理根底

结语