使用 pixi 和 p5 声音库制作的音频反应视觉效果存在性能问题

Question

查看示例here

我想这取决于你的机器，但对我来说，在第一首歌之后帧率会疯狂下降。我确保没有超过必要的精灵（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);
}

使用 pixi 和 p5 声音库制作的音频反应视觉效果存在性能问题

performance issue with audioreactive visuals made with pixi and p5 sound lib

javascript

performance

webgl

pixi.js