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
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
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!
Hey Tibi,
the website and the viewer look really nice, here are two things i found while scrolling through:
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ā¦
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 
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 
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.
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:
