Model viewer performace test

I am almost done with my model viewer, I will sell this as a javascript project, WordPress plugin, and Woocommerce plugin, I am happy with the result but I am unsure about the performance, on my computer and phone it runs perfectly.

I would appreciate it if some of the experienced developers here can look into the performance maybe I am missing something Easy 3D Model Viewer

2 Likes

My browser crashed on my iPhone trying to see the camera model.

Yeah, the camera has more vertices than the other models.

What iPhone are you using?

The problem here will be the textures. Running…

gltf-transform inspect https://webdesign-flash.ro/p/emv/models/camera/scene.gltf --allow-http

… gives:

# name uri slots instances mimeType compression resolution size gpuSize¹
0 Accessory_normal textures/Accessory_normal.png normalTexture 1 image/png 4096x4096 3.88 MB 89.48 MB
1 Accessory_baseColor textures/Accessory_baseColor.png baseColorTexture 1 image/png 4096x4096 5.18 MB 89.48 MB
2 Accessory_metallicRoughness textures/Accessory_metallicRoughness.png metallicRoughnessTexture 1 image/png 4096x4096 3.23 MB 89.48 MB
3 Lenses_normal textures/Lenses_normal.png normalTexture 1 image/png 4096x4096 765.41 KB 89.48 MB
4 Lenses_baseColor textures/Lenses_baseColor.png baseColorTexture 1 image/png 4096x4096 4.08 MB 89.48 MB
5 Lenses_metallicRoughness textures/Lenses_metallicRoughness.png metallicRoughnessTexture 1 image/png 4096x4096 6.82 MB 89.48 MB
6 IOPort_normal textures/IOPort_normal.png normalTexture 1 image/png 4096x4096 2.43 MB 89.48 MB
7 IOPort_baseColor textures/IOPort_baseColor.png baseColorTexture 1 image/png 4096x4096 6.25 MB 89.48 MB
8 IOPort_metallicRoughness textures/IOPort_metallicRoughness.png metallicRoughnessTexture 1 image/png 4096x4096 1.03 MB 89.48 MB
9 Body_normal textures/Body_normal.png normalTexture 1 image/png 4096x4096 7.14 MB 89.48 MB
10 Body_baseColor textures/Body_baseColor.png baseColorTexture 1 image/png 4096x4096 525.05 KB 89.48 MB
11 Body_metallicRoughness textures/Body_metallicRoughness.png metallicRoughnessTexture 1 image/png 4096x4096 6.29 MB 89.48 MB
12 Button_normal textures/Button_normal.png normalTexture 1 image/png 4096x4096 1.6 MB 89.48 MB
13 Button_baseColor textures/Button_baseColor.png baseColorTexture 1 image/png 4096x4096 233.31 KB 89.48 MB
14 Button_metallicRoughness textures/Button_metallicRoughness.png metallicRoughnessTexture 1 image/png 4096x4096 1 MB 89.48 MB
15 SensorAndDisplay_normal textures/SensorAndDisplay_normal.png normalTexture 1 image/png 4096x4096 4.68 MB 89.48 MB
16 SensorAndDisplay_baseColor textures/SensorAndDisplay_baseColor.png baseColorTexture 1 image/png 4096x4096 462.54 KB 89.48 MB
17 SensorAndDisplay_metallicRoughness textures/SensorAndDisplay_metallicRoughness.png metallicRoughnessTexture 1 image/png 4096x4096 1.61 MB 89.48 MB

… so that’s about 1.5 GB of VRAM required to render these textures, iPhones start crashing somewhere in the vicinity of 500 MB. Probably best to keep the textures below 2048px, or smaller if you can maintain the quality you need.

Thank you for letting me know about this, I was not aware of it.

Where exactly do you add this command to see the info?

gltf-transform inspect https://webdesign-flash.ro/p/emv/models/camera/scene.gltf --allow-http

The command runs in a shell / terminal – if you haven’t installed gltf-transform before then it would be something like:

npm install --global @gltf-transform/cli

gltf-transform inspect https://webdesign-flash.ro/p/emv/models/camera/scene.gltf --allow-http
1 Like

Thank you for the info.

I reduced the gpuSize from 89.48 MB to 22.37 MB, I think now it should work fine.

It is done, it is waiting for approval for sale, if anybody from the community wants a free copy let me know!

https://webdesign-flash.ro/p/emv/

Hey Tibi,

the website and the viewer look really nice, here are two things i found while scrolling through:

Screenshot 2024-01-12 110835

Screenshot 2024-01-12 1111032

P.S. I would love to test the viewer for personal projects.

Thank you for the tips.

Unfortunately, there is nothing I can do about the frog model, it is some kind of model bug…

https://webdesign-flash.ro/emv.zip

Looks very nice and runs smoothly. I have one suggestion for improvement though:

When a modal dialog is opened by clicking on a marker, and that dialog contains much content causing a scrollbar to appear, using the scroll-wheel will continue scrolling on the page itself, rather than inside the dialog.

I would suggest “breaking out” the modal to be floating above the page (fullscreen, fixed position), rather than inside the model viewer itself. This gets particularly frustrating when using a much smaller model viewer, since there is nearly no room for the dialog to render properly.

Apart from that, great work!

The issue here is that I am using an IFRAME embed from youtube and it is taking over the mouse wheel :slight_smile:

I think you misunderstand. The dialog itself should pop out of the model viewer container. I mean the big white box that says “Detailed Info Window” with the red close-button. That is your code, not from YouTube :smile:

1 Like

first time i see this flag, super useful! do you think gltf-transform could in the future print out performance hints like that in the console? similar to build tools that tell you a bundle exceeds a margin.

1 Like

I’m not sure how to choose a threshold for warnings, as I don’t want to make assumptions about whether the model is ‘the whole scene’ or just one prop, or something not meant for realtime at all. And don’t want to make the CLI so noisy that it’s worse than nothing (see: npm audit).

Maybe some kind of summary statistics would be the way to go? Similar to:

1 Like