使用 pixi 和 p5 sound lib 制作的 audioreactive 视觉效果的性能问题

Question

查看示例here

我想这取决于你的机器，但对我来说，在第一首歌之后，帧率就像疯了一样下降。我确保没有多余的精灵（4：2 图像和 2 个置换贴图）。

这是一个 pixi 的东西，也许是 WebGL？我不确定如何改进它或在哪里寻找更好的性能。

Answer 1

好的。我发现了这个问题。您一次又一次地向舞台（stage.addChild(displacementTexture) 添加displacementTexture 并且您从未真正删除它。所以您的totalSpritesOnStage 无法正常工作。

添加这样的东西怎么样：

if (stage.children.length > 4) {
    // let's destroy the sprite now
    stage.removeChildren(4);

虽然我没有非常彻底地检查功能，但它很快看起来似乎也可以使用。

这也让我个人感到困扰，因为声音被一次又一次地下载:)

function preload(song) {
console.log('preloading song: ' + currentSong);
console.log(song.filename);
if (allSounds[song]) {
    sound = allSounds[song];
    sound.setVolume(volume);
    sound.play();
    return;
}
allSounds[song] = sound = new p5.SoundFile('songs/' + song.filename,
    onMusicLoaded,
    h.onError
);

// The volume is reset (to 1) when a new song is loaded. so we force it 
sound.setVolume(volume);
}