matter.js - 监视器影响引擎物理学

Question

所有的内容都是不变的，但将Chrome标签移动到另一个监视器会在一定程度上影响落球物理学。

问题视频：（在Mac上录制） https://www.youtube.com/watch?v=eNoVshieh08

据我所知，引擎pixelRatio被定义为1:1，这意味着具有不同分辨率的更大/更小屏幕不应改变球体物理行为。

此外，似乎最左边的监视器始终具有相同的预期行为（球从一个点掉落，通过相同的钉子路线到达精确的终点）。

我的另外两个监视器，中间的那一个（具有最大分辨率）和右侧的MacBook Retina显示器，会导致球不时掉落并改变路线。

更新

将中间的监视器分辨率和刷新率更改为与其他监视器相同后，球的行为完全相同。 现在的问题是为什么刷新率会改变引擎物理行为，以及我们如何控制它？

引擎创建：

      // create an this.engine
      this.engine = Engine.create()

      // create a renderer
      this.render = Render.create({
        element: this.$refs.scene,
        engine: this.engine,
        options: {
          wireframes: true,
          showAngleIndicator: true,
          showBroadphase: false,
          showBounds: true,
          // pixelRatio: 'auto',
          background: 'transparent',
          width: DEFS.WIDTH,
          height: 930,
        },
      })

创造钉 Pegs：

      // Create a generic peg object
      const peg = (x, y) => {
        return Bodies.circle(x, y, DEFS.PEGS.RADIUS, {
          isStatic: true,
          collisionFilter: {
            category: this.collisionCategories.default,
          },
          friction: 0,
          frictionAir: 0,
          frictionStatic: 0,
          restitution: 0,
          render: {
            fillStyle: 'lightblue',
            /* sprite: {
              texture: require('~/assets/wall-pin.png'),
              xScale: DEFS.PEGS.SCALE,
              yScale: DEFS.PEGS.SCALE,
            }, */
          },
        })
      }

创建球体:

      Bodies.circle(350, DEFS.DROPPER.Y + 20, DEFS.BALL.RADIUS, {
        density: 0.01,
        friction: 0.1,
        frictionAir: 0,
        frictionStatic: 0,
        restitution: 0.3,
        collisionFilter: {
          category: this.collisionCategories.ball,
          mask: this.collisionCategories.default,
        },
        render: {
          fillStyle: 'lightblue',
          /* sprite: {
            texture: require('~/assets/ball.png'),
            xScale: DEFS.BALL.SCALE,
            yScale: DEFS.BALL.SCALE,
          }, */
        },
      })

- Ehud Shahak

Answer 1

好的，问题在于每个显示器具有不同的刷新率，加上Runner类处理识别变化的刷新率和请求动画帧调用的方式不同。

简而言之：

Runner.create({
  isFixed: true,
})

更详细地说： https://brm.io/matter-js/docs/classes/Runner.html#property_isFixed

Runner.toFixed指定运行程序是否应使用固定时间步长（否则为可变）。如果时间是固定的，则表面模拟速度将根据帧速率而改变（但行为将是确定性的）。如果时间是可变的，则表面模拟速度将是恒定的（近似，但以确定性为代价）。

默认值：false

此外，一个好的解释是： https://gafferongames.com/post/fix_your_timestep/

- Ehud Shahak