javascript - 使用 pixi 和 p5 声音库制作的音频 react 视觉效果的性能问题

Question

参见示例here

我想这取决于你的机器，但对我来说，在第一首歌曲之后，帧速率疯狂下降。我确保没有多余的 Sprite (4:2 个图像和 2 个置换贴图)。

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

Answer 1

好的。我发现了这个问题。您一次又一次地将displacementTexture添加到舞台(stage.addChild(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);
}