Отслеживание причины сбоя webGL - возможная утечка видеопамяти

Question

Я создаю новые AnimatedSprites для события указателя (и удаляю их при следующем событии указателя) в течение срока действия приложения. Приблизительно в 20 кликов приложение вылетает с ошибкой: Крысы! упал webGl. В этот момент ошибка не отображается в консоли. Сбой происходит на мобильном устройстве и, вероятно, также произойдет на настольном компьютере, если кто-то выполнит много нажатий.

Код, который многократно используется ниже. Я также включил живой пример на http://forwardingsolutions.club/. Может кто-нибудь указать, что я делаю не так?

Из других ответов я сделал вывод, что вам нужно перезагрузить загрузчик и вызвать destroy() для анимированного спрайта. Я называю оба этих метода, но все еще есть проблема.

function setupNextSpritesAnimation(){
    setupNextAnimation();
    console.log("next color: "+nextColor);
    switch (nextColor) {
        case "red":
            var newLoader = new PIXI.loaders.Loader()
            .add('nextSprite', '/assets/sprite/red.png.png')
            .load(function (loader, resources){
                var interval = setInterval(function(){
                    if (!isAnimating){
                        clearInterval(interval);
                        createNewAnimatedSprite(resources,newLoader);
                    }
                },50);

            });

            break;
        case "aqua":
            var newLoader = new PIXI.loaders.Loader()
            .add('nextSprite', '/assets/sprite/aqua.png.png')
            .load(function (loader, resources){
                var interval = setInterval(function(){
                    if (!isAnimating){
                        clearInterval(interval);
                        createNewAnimatedSprite(resources,newLoader);
                    }
                },50);
            });
            break;            
        case "green":
            var newLoader = new PIXI.loaders.Loader()
            .add('nextSprite', '/assets/sprite/blue.png.png')
            .load(function (loader, resources){
                var interval = setInterval(function(){
                    if (!isAnimating){
                        clearInterval(interval);
                        createNewAnimatedSprite(resources,newLoader);
                    }
                },50);
            });
            break;            
        case "purple":
            var newLoader = new PIXI.loaders.Loader()
            .add('nextSprite', '/assets/sprite/purple.png.png')
            .load(function (loader, resources){
                var interval = setInterval(function(){
                    if (!isAnimating){
                        clearInterval(interval);
                        createNewAnimatedSprite(resources,newLoader);
                    }
                },50);
            });
            break;   
                     }
}


function createNewAnimatedSprite(resources,newLoader){
    var tmpSprite = new PIXI.extras.AnimatedSprite(setupFrames(resources["nextSprite"].texture.baseTexture));
    app.stage.addChild(tmpSprite);
    spritesArray.push(tmpSprite);
    setupNextSprites(tmpSprite);

    app.renderer.plugins.prepare.upload(tmpSprite, function(){
        console.log("updoaded now");
        canRunNext = true;
        newLoader.reset();
        //console.log("kill");
        delete tmpSprite;

    });
}


function setupNextSprites(nextSprite){
    nextSprite.x = app.renderer.width / 2;
    nextSprite.y = app.renderer.height / 2;
    nextSprite.anchor.set(0.5);
    nextSprite.loop = false;
    nextSprite.animationSpeed = 0.5; 
    nextSprite.visible = false;
    nextSprite.onComplete = function (){
        console.log("animation finished");
        isAnimating = false;
    };
}


function setupNextAnimation(){
    var randomNumber = getRandomInt(0,3);
    switch (randomNumber) {
        case 0:
            nextColor = "red";
            break;
        case 1:
            nextColor = "aqua";
            break;            
        case 2:
            nextColor = "green";
            break;            
        case 3:
            nextColor = "purple";
            break;   
                        }  
}




app.stage.on("pointerdown", function () {
    if (firstRun && !isAnimating) {
        firstRun = false;
        isAnimating = true;
        currentSprite.gotoAndPlay(0);
        currentSprite.gotoAndPlay(0);
    }else{ 
        if (canRunNext && !isAnimating){
            isAnimating=true;

            if (currentSprite.visible){
                currentSprite.visible = false;
                currentSprite.destroy(true);
            }
            spritesArray[spritesArray.length-1].visible = true;
            spritesArray[spritesArray.length-1].gotoAndPlay(0);

            app.stage.removeChild(spritesArray[spritesArray.length-2]);
            spritesArray[spritesArray.length-2].destroy({ children:true, texture:true, baseTexture:true});

            canRunNext = false;
            setupNextSpritesAnimation();

        }
    }
});


function setupSpritesAnimation(){
//created currentSprite just once at the start of app
spritesArray.push(currentSprite);
}