CODEWITHSUNDEEP
javascriptperformancewebglpixi.js
flowen
flowen

Reputation: 536

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

see the example here

I guess it depends on your machine, but for me, after the first song the framerate just drops like crazy. I make sure there are not more sprites than necessary (4: 2 images and 2 displacement maps).

Is this a pixi thing, perhaps WebGL? I'm not sure how to improve it or where to look for a better performance.

Upvotes: 0

Views: 141

Answers (1)

Hachi
Hachi

Reputation: 536

Ok. I found the issue. You are adding displacementTexture to the stage (stage.addChild(displacementTexture) again and again and you are never removing it really. So your totalSpritesOnStage do not work correctly.

How about adding something like this:

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

It would quickly looking seem to work with that too, though I didn't check the functionality very thoroughly.

Also this bothered me personally, as the sounds were downloaded again and again :)

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);
}

Upvotes: 1

Related Questions