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