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

【问题标题】：matter.js - monitor affects the engine physicsmatter.js - 监视器影响引擎物理
【发布时间】：2019-11-14 12:13:37
【问题描述】：

一切都是不变的，但将 chrome 选项卡移动到另一台显示器会在某种程度上影响落球的物理特性

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

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

此外，最左边的监视器似乎总是具有相同的预期行为（从 1 点掉落的球经过相同的钉子路线并到达确切的结束位置。

我的其他显示器，中间的显示器（分辨率最高）和右侧的 macbook 视网膜显示器会导致球掉落并不时改变它的路线。

更新

将中间显示器更改为具有相同的分辨率和刷新率会使球的行为方式完全相同。所以现在的问题是为什么刷新率会改变引擎物理的行为，我们如何控制它？

引擎创建：

      // 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,
        },
      })

钉创建：

      // 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,
          }, */
        },
      })

【问题讨论】：

标签： physics monitor matter.js

【解决方案1】：

好的，所以问题在于每个监视器的刷新率不同，以及 Runner 类如何处理识别变化的刷新率和 requestAnimationFrame 调用。 TLDR：

Runner.create({
  isFixed: true,
})

Runner.toFixed 指定跑步者是否应该使用固定的时间步长（否则它是可变的）。如果时间是固定的，那么表观模拟速度将根据帧速率而变化（但行为将是确定性的）。如果时间是可变的，那么表观模拟速度将是恒定的（大约，但以确定性为代价）。

默认值：假

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

【讨论】：