React-pixi с крючками отрисовывает 10000 раз одно и то же изображение - PullRequest
Новая
       71

React-pixi с крючками отрисовывает 10000 раз одно и то же изображение

0 голосов
/ 13 апреля 2020

Я пытался отобразить около 10k + экземпляров одного и того же изображения (с различными простыми преобразованиями, такими как вращение / положение) на элементе с react-pixi, используя крючки. 

import * as React from 'react'
import * as PIXI from 'pixi.js'
import { ParticleContainer, useApp, useTick, Stage, Sprite } from '@inlet/react-pixi'

const texture = PIXI.Texture.from('./images/bg-arrow.png')

export function PixiTest() {

    // Unused right now but I think I have to use this maybe with 
    // `app.stage.addChild( ??? )` ?
    const app = useApp()

    const sprite = (i: number) => <Sprite
        texture={texture}
        anchor={0.5}
        x={i}
        y={i}
        scale={0.01 * i}
    />

    // Very dumb implementation that starts lagging heavily before 1000
    return (
        <ParticleContainer position={[0, 0]} properties={{ position: true }}>
            {
                Array(100).fill(undefined).map((_, i) => sprite(i))
            }
        </ParticleContainer>
    )
}

Выше приведено вызывается внутри <Stage {...}></Stage> тегов.

Как я могу заставить эту работу работать с постоянными 50-60 кадрами в секунду и 10k + экземплярами?

1 Ответ

0 голосов
/ 13 апреля 2020

Похоже, проблема не в вашем коде, а в ограничениях браузера. Если бы мне пришлось угадывать, это потому, что текстура, которую вы используете, имеет слишком высокое разрешение. Вы уменьшаете спрайт в вашем коде в 100 раз. Вместо этого используйте изображение, которое в 100 раз меньше.

Обратите внимание: - Если изображение имеет размер 32x32 пикселей и 100 спрайтов, вы отображаете 102 400 пикселей на кадр. - Если изображение имеет размер 32x32 пикселей и 1000 спрайтов, вы визуализируете 1 024 000 пикселей на кадр. - Если изображение имеет размер 3x3px и 1000 спрайтов, вы отображаете 9000 пикселей на кадр.

Кроме того, оно совсем не похоже на useApp. Я бы также рекомендовал обернуть PixiTest в React.memo, так как он не принимает никаких входных данных и не нуждается в повторном рендеринге (то есть в React).

...