P5，反应速度为60 FPS [英] P5 with react at 60 FPS

问题描述

要使P5与React一起使用，我正在使用 P5Wrapper 导入.

To get P5 to work with React, I am using the P5Wrapper import.

我有一个简单的 starfield 动画可以在我的图块上使用，但是性能是一个问题.动画在512个星形"对象上的速度变慢，因此我将其缩放回128.但是，即使在128，FPS似乎仍然太低，平均低于30 FPS.我正在寻找方法来提高React中P5的性能，以使动画能够以接近60 FPS的速度运行.

I got a simple starfield animation to work on my tile, but the performance is an issue. The animation slows to a crawl at 512 "star" objects, so I scaled it back to 128. However, even at 128, the FPS seems much too low, averaging below 30 FPS. I am looking for ways to speed up P5's performance in React so that the animations can run closer to 60 FPS.

P5代码:

function sketch (p) {

  const star = () => {
    const x = p.random(-TILE_SIZE/2, TILE_SIZE/2)
    const y = p.random(-TILE_SIZE/2, TILE_SIZE/2)
    const z = p.random(TILE_SIZE)
    return { x, y, z }
  }

  const stars = new Array(128)

  p.setup = () => {
    p.createCanvas(TILE_SIZE, TILE_SIZE)

    for (let i = 0; i < stars.length; i++) {
      stars[i] = star()
    }
  }

  const update = (coord) => {
    const { z } = coord
    let newZ = z - 8
    if (newZ < 1) {
      newZ = p.random(TILE_SIZE)
    }
    return { ...coord, z: newZ }
  }

  const show = (coord) => {
    const { x, y, z } = coord
    p.fill(255)
    p.noStroke()

    const sx = p.map(x / z, 0, 1, 0, TILE_SIZE)
    const sy = p.map(y / z, 0, 1, 0, TILE_SIZE)

    const r = p.map(z, 0, TILE_SIZE, 4, 0)
    p.ellipse(sx, sy, r, r)
  }

  p.draw = () => {
    p.background(0)
    p.translate(TILE_SIZE/2, TILE_SIZE/2)
    for (let i = 0; i < stars.length; i++) {
      stars[i] = update(stars[i])
      show(stars[i])
    }
  }
}

如何使用P5Wrapper:

How P5Wrapper is used:

import P5Wrapper from 'react-p5-wrapper'

...
render (
 <ItemContainer key={uuidv4()}>
   <header>
     {name}
     <p>{description}</p>
   </header>
   <P5Wrapper sketch={sketch} />
 </ItemContainer>
)

星空图块的实际外观(2个图块).

How the starfield tile actually looks (2 tiles).

我计划根据性能添加更多的动画.或切换到SVG.

I am planning to add more animations depending on performance. Or switching to SVG.

推荐答案

解决了帧速率问题，而无需更改实际的动画逻辑.仍然可能需要进行大量的性能优化.

Resolved the frame-rate issue without changing the actual animation logic. There could still be plenty of performance optimization that is still needed.

我注意到，当我卸载并重新安装组件时，动画会逐渐变慢.深入探讨Github问题会导致本帖子有关性能下降.张贴者提供了PR和提交，但从未合并，并且存储库一年多没有更新.

I noticed that the animation gets progressively slower as I un-mount and re-mount the component. Digging into the Github issue results in this post about performance degradation. The poster provided a PR and commit that was never merged and the repository haven't been updated for over a year.

相反，最好是在发布者更新后删除软件包并仅创建自己的组件:

Instead, it's better to remove the package and just create your own component following the poster's update:

import React from 'react'
import p5 from 'p5'

export default class P5Wrapper extends React.Component {
  componentDidMount() {
    this.canvas = new p5(this.props.sketch, this.wrapper)
    if( this.canvas.myCustomRedrawAccordingToNewPropsHandler ) {
      this.canvas.myCustomRedrawAccordingToNewPropsHandler(this.props)
    }
  }

  componentWillReceiveProps(newprops) {
    if(this.props.sketch !== newprops.sketch){
      this.canvas.remove()
      this.canvas = new p5(newprops.sketch, this.wrapper)
    }
    if( this.canvas.myCustomRedrawAccordingToNewPropsHandler ) {
      this.canvas.myCustomRedrawAccordingToNewPropsHandler(newprops)
    }
  }

  componentWillUnmount() {
    this.canvas.remove()
  }

  render() {
    return <div ref={wrapper => this.wrapper = wrapper}></div>
  }
}

这至少解决了安装和卸载组件的性能下降问题.另外，我的帧从30帧以下跳到了60帧.这可能是因为我也导入了最新的P5软件包，因为我不再依赖react-p5-wrapper进行导入.

This at the very least resolved the performance degradation issue for mounting and unmounting the component. Additionally, my frames have jumped from sub 30 to nearly 60 FPS. This could be because I also imported the latest P5 package since I no longer rely on react-p5-wrapper to do the imports.

这篇关于P5，反应速度为60 FPS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！