Browser becomes unresponsive when loading the attached model

Questions
1

This is a PCB model exported from Kicad, approximately 70 MB large.

Both the three.js glb viewer and babylon.js glb viewer become unresponsive while loading it through drag-drop.

Is there any way to load it without blocking the browser?

2

@liangtie you can try my GLTF Viewer and load your model either via URL that you posted or locally from your hard drive.

Then you can re-export it to GLB with DRACO or MESHOPT compression to make the file smaller (see the attached files).

It might still take a short while to actually load the model.

video DRACO.zip (1.4 MB)
video MESHOPT.zip (2.6 MB)

EDIT: The attached files were updated and now have less draw calls.

2 Likes
3

Your model is 68 megabytes large. That takes a while to upload/download.
Once it’s loaded… it seems to run poorly.
There are 18251 meshes in the file. That is probably the cause of the slow rendering. They either need to use instancing, or be merged into some larger batches.

There are 667594 triangles in the model, which is a lot, but not impossible as long as you’re only rendering that circuit board and not much else.

You probably need to run it through an optimizer like meshopt. and/or reduce the number of drawcalls/texture sizes.

Here is a meshopt compressed version of your 68 meg glb shrunk down / optimized to ~3 megs.
video.glb.meshopt.glb (2.6 MB)

I used these settings:
./gltfpack -i ${1} -v -cc -tc -ts 0.5 -o ${1}.meshopt.glb

edit: @GitHubDragonFly I didn’t see your message before posting :smiley: Yeah… basically what you said!

3 Likes
4

another tool, based on gltf-transform, open shell, type:

npx gltfjsx video.glb --transform

2.45 mb
auto instanced (removes about 18.000 draw calls)
removed about 12.000 unnecessary groups
created a single palette material (which is very efficient, material switching is very expensive otherwise)

npx gltfjsx video.glb --transform --simplify

1.5 mb
but it starts to reduce geometry a bit so it’s visible when zooming in hard

4 Likes
5

@liangtie what is being suggested by @manthrax and @drcmda is to use command line tools which should give you a greater control over what compression features to implement.

My GLTF Viewer is just an online convenience which provides some optimization and compression. I have included instance() function in my viewer after looking at gltfjsx transform function. It did decrease the draw calls and the attached files in my initial post were updated.

Still, try to follow suggestions about using command line tools.

1 Like