P5 с реагирует на 60 FPS

Question

Чтобы заставить P5 работать с React, я использую P5Wrapper import.

У меня есть простая starfield анимация для работы на моей плитке, нопроизводительность является проблемой.Анимация замедляется до 512 «звездных» объектов, поэтому я уменьшил ее до 128. Однако даже при 128 FPS кажется слишком низким, в среднем ниже 30 FPS.Я ищу способы ускорить производительность P5 в React, чтобы анимации могли работать ближе к 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:

import P5Wrapper from 'react-p5-wrapper'

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

Как на самом деле выглядит плитка звездного поля (2 плитки).

Я планирую добавить больше анимации в зависимости от производительности.Или переход на SVG.

Answer 1

Решена проблема с частотой кадров без изменения фактической логики анимации.Все еще может быть много оптимизации производительности, которая все еще необходима.

Я заметил, что анимация становится все медленнее, когда я отключаю и перемонтирую компонент.В связи с проблемой Github в этом посте сообщается о снижении производительности .Постер содержал пиар и коммит, которые никогда не объединялись, а хранилище не обновлялось более года.

Вместо этого лучше удалить пакет и просто создать свой собственный компонент после обновления постера:

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, поскольку для импорта больше не использую реагирующую оболочку p5.