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

Question

一切都是不变的，但是将 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,
          }, */
        },
      })

Answer 1

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

Runner.create({
  isFixed: true,
})

更多细节: https://brm.io/matter-js/docs/classes/Runner.html#property_isFixed

Runner.toFixed specifies if the runner should use a fixed timestep (otherwise it is variable). If timing is fixed, then the apparent simulation speed will change depending on the frame rate (but behaviour will be deterministic). If the timing is variable, then the apparent simulation speed will be constant (approximately, but at the cost of determininism).

Default: false

还有一个很好的解释是: https://gafferongames.com/post/fix_your_timestep/