i facing a issue related slow loading of model suggest me something thanks in advance
1 Like
Hi,
I believe we would need to see a PG and the model? There are a number of ways to speed-up the loading (and a number of reasons why it would display or load only very slowly)ā¦but this really depends on what it is? Eventually the model itself might also requires to go through some optimization. But without seeing anything, all that could be said here would be just based on āassumptionsā.
https://editor.sw.fit/fde/de/easy/EL-6820-3828/c7fd9e70-9b8a-4683-958c-4333eaf9715dllnnnnnn0-431-1/64040eac881187846afe87a3a5fb2b49?sessionId=ac9e0a3ac604ebfe234b7960e1bba459
there is website link
EL-6820-3828.zip (667.7 KB) that is glb file
CreateScene(scene: Scene, canvas: HTMLCanvasElement) {
this.light = new HemisphericLight(ālightā, new Vector3(0, 1, 0), this.scene);
this.light.parent = this.camera
const envTexture = CubeTexture.CreateFromPrefilteredData(ā./assets/environment/environmentSpecular.envā, scene)
scene.environmentTexture = envTexture;
// scene.createDefaultSkybox(envTexture);
// scene.environmentIntensity = 0.2;
var blur = 0.8;
var myskybox = scene.createDefaultSkybox(envTexture, true, 10000, blur);
this.createCup()
scene.clearCachedVertexData();
scene.cleanCachedTextureBuffer();
return scene;
}
startTime = performance.now();
async createCup():Promise {
var self = this;
self.meshUrl = this.productDetail.productCode + ".glb"
self.modalPath = environment[global.env].RESOURCE_URL_AMAZON + environment[global.env].RESOURCE_CONTAINER + environment[global.env].oemCode + "/preview/" + this.productDetail.productCode + '.glb';
await SceneLoader.ImportMeshAsync("",
// "./assets/models/",
self.modalPath,
"",
this.scene, (evt)=>{
// const loadedStatus = ((evt.loaded*100)/evt.total).toFixed();
// this.loadingScreen.updateLoadStatus(loadedStatus)
} ).then((frame) => {
this.scene.createDefaultCamera(true, true, true);
this.meshes = frame.meshes;
console.log(this.meshes);
this.animationgroups = frame.animationGroups;
if(this.animationgroups.length !== 0){
// this.modelAnimation();
// this.newAnimation(this.engine);
// this.modelAnimation()
this.ifanimatedproduct = true;
this.animationgroups[0].stop();
}
const endTime = performance.now();
const loadTime = endTime - this.startTime;
// Output the load time to the console
console.log('Model load time: ' + loadTime + ' milliseconds');
this.updateMaskedArea();
if (this.selectedPaper) {
this.showPaperColorOption(this.selectedPaper);
}
this.setcameraposition(this.scene);
});
this.engine.hideLoadingUI();
}
loadComponent(engine: Engine) {
console.info(this.threedpreview.nativeElement, this.loaderRef.nativeElement, this.loadingBarRef.nativeElement, this.percentLoadedRef.nativeElement)
const loaderElement = this.loaderRef.nativeElement;
const loadingBarElement = this.loadingBarRef.nativeElement;
const percentLoadedElement = this.percentLoadedRef.nativeElement;
var canvas = this.threedpreview.nativeElement
// const context = canvas.getContext('2d');
//context.clearRect(0, 0, canvas.width, canvas.height);
var w = this.productDetail.Width + this.productDetail.Bleed * 2;
var h = this.productDetail.Height + this.productDetail.Bleed * 2;
var calculateCanvas = this.utilityService.calculateEditingArea(w, h, 0, 0);
//this.arrPaper = this.productDetail.
this.ppi = calculateCanvas.pixelPerUnit;
var settingsJSon = JSON.parse(this.productDetail.settings);
this.engine = new Engine(this.threedpreview.nativeElement, true);
this.loadingScreen = new CustomLoadingScreen(loaderElement, loadingBarElement, percentLoadedElement);
this.engine.loadingScreen = this.loadingScreen;
this.engine.displayLoadingUI();
this.scene = new Scene(this.engine);
this.createcamera();
this.CreateScene(this.scene, this.threedpreview.nativeElement);
this.engine.runRenderLoop(() => {
this.engine.resize();
this.scene.render();
});
window.addEventListener("resize", function () {
console.log('resized window');
engine.resize();
});
} that is my code
Thanks for the info. Thatās a lot more than I expected when reading the title of your post. Are you sure itās the model import causing that huge difference in loading time? Honestly, one would need to check on all this and without the PG, itās not really āconvenientā, so to say. I guess a start would be to just load the model async in a PG to see what happens. Sadly, Iām out of time to investigate this right now (sorry 
) so I hope someone else will kick-in and have enough time to go through it. May be wait a bit for the Team (though they might request a PG). Iāll check back later today when Iām done with my own assignments 
Sorry for the wait and meanwhile, have a great day 
BtW: The site looks real cool 
On my computerās browser(edge 114) this page keeps growing in memory, 100% cpu usage. Finally the page crashes.
Yep Playground please 
Itās always one of the first things we ask for because it helps isolate the problem from local factors
1 Like
why are you constantly calling resize() in the render loop? That cant be a good thing to do.?
Also, are you comparing local load times to load times on an actual deployment? Requests times are obviously then subject to the said server speed and your ISP speed
without calling resize() in renderloop it is stretch the model
this.engine.runRenderLoop(() => {
// this.engine.resize();
this.scene.render();
});
is there other method to call resize please suggest me thanks in advance
you can call resize , its a valid function , i didnt say never call it, i mentioned having it called in the render loop is probably not good since it is then resizing every single frame. I could be wrong here , perhaps the engine handles this gracefully but my suspicions are it is not good. Normally you would add some listener to the page for resizing and then call engine resize only once each time it is required to run , no more.
I also cant access your website link , same as @qq2315137135 mentioned ā¦ the page just crashes.
Resize doesnāt do anything if the canvas size hasnāt changed: Babylon.js/packages/dev/core/src/Engines/thinEngine.ts at master Ā· BabylonJS/Babylon.js Ā· GitHub, but itās good practice anyway to only call it when the canvas is resized. You can see an example here: Getting Started - Chapter 1 - Setup Your First Web App | Babylon.js Documentation (babylonjs.com)
1 Like
Hi, Just passed by looking back at this topic. Still no PG to show? 
Or did you figure it out by yourself?
Anyways, adding on top of the comments of others and with regards to
this is abnormal. Also looking at some of your init lines of codes (which Iām not sure what they are supposed to do just exactly without having the context, like this part :
// const context = canvas.getContext('2d');
//context.clearRect(0, 0, canvas.width, canvas.height);
var w = this.productDetail.Width + this.productDetail.Bleed * 2;
var h = this.productDetail.Height + this.productDetail.Bleed * 2;
var calculateCanvas = this.utilityService.calculateEditingArea(w, h, 0, 0);
//this.arrPaper = this.productDetail.
this.ppi = calculateCanvas.pixelPerUnit;
this all gives me the feeling that your entire approach may just not be correct. Obviously meshes shouldnāt need a resize, a clear or a new render of the canvas to render correctly.
1 Like