Preloader problem

Questions
1

Hello friends so I have built a simple preloader for my assets using a global var loaderGL = 0;
and then when a model is loaded and textures etc I do this:

if (child1.isMesh) {
roughnessMipmapper.generateMipmaps(child1.material);
loaderGL++;
      }

if (child2.isMesh) {
roughnessMipmapper.generateMipmaps(child2.material);
loaderGL++;
      }

Now the loaderGL count for me ends on 31 so everything is loaded when it hits 31
and then I do this to remove the preloader:

         function animate() {
                        if (loaderGL === 31) {
        				loaderGL='loaded';
        				console.log('Assets Loader:',loaderGL);
        			
                            $(".loading-screen").fadeOut(2500);
                            $(".logo-load").fadeTo(200, 0.0);
                            $(".experience-div").fadeIn(2500);
                            $("#start").css("opacity", "1.00");
                            $("#start").addClass("intro-open");
                            $("#start").addClass("opacity-open");
                            $("#start").css("opacity", "1.00");
                            $(".start .intro-open").removeClass("intro-close");
                            $(".start .page-full").css("pointer-events", "auto");
                            setTimeout(function () {
                                $(".start .page-wrapper-para").addClass("opacity-open");
                            }, 1000);

                            setTimeout(function () {
                                $(".start .page-wrapper-title").addClass("opacity-open");
                            }, 1250);

                            setTimeout(function () {
                                $(".start .page-wrapper-ts").addClass("opacity-open");
                            }, 1500);

                            setTimeout(function () {
                                $(".start .buttn").addClass("opacity-open");
                            }, 1750);
                        }
        }

Now apparently when I have shown a few people this project online the preloader doesn’t get removed so I am wondering if the count of 31 is wrong?? or is it another issue?

Here is the full UNFINISHED project so you can have a look at the preloader:

https://ui-unicorn.co.uk/game-lesson-1/preload

thank you for reading

2

Perhaps a thing fails to load, maybe a texture too large for the GPU or something… You have no fall back.

How about this:

const loader = ( loadList ) => {
  if( loadList.length > 0 ) {
    //show preloader
    let loadable = loadList.pop();
    gltf.load( loadable , (object) => {
      scene.add( object.scene );
      loader( loadList );
    });
  }
  else {
    //hidepreloader
  }
}
loader( ['object1.glb','object2.glb'] );

An alternative approach is to use the threeJS THREE.LoadingManager and track the number of items which have started loading vs those which have completed - this is what I usually use myself, it uses an event based approach which I prefer for this kind of thing.

1 Like
3

Thanks for the reply is there a way to detect which texture might be the issue?
also it would be interesting to know if the project loaded for you?

4
  1. It seems to load and is pretty :smiley:
  2. Ask these few people to look into logs. It might be some device specific issues, or simply a slow network.
  3. As @becky_rose said:

First, there are some limitations in WebGL regarding texture sizes (although if that’d fail, it’d likely fail for most users at once.)
Second, if someone runs your app on mobile and you allocate too many resources at once - the device might still let you download all the resources, but some of them will not be allocated (applies to both ArrayBuffers and Images). In this case loader onError callback will be fired - you can add a listener there for debugging.

1 Like