Model Viewer Website vs Shopify Model Viewer

[LewisConnorx]

Hi everyone!

I’ve been actively using Model Viewer for the last few months, trying to match my model appearance in Model Viewer to Babylon and Shopify, but it’s got to the point where I’m struggling to match the look and realism across multiple viewers.

One major point is when I have Model Viewer’s website up side by side with a Shopify product 3D model, they look starkly different despite having the same neutral HDRI, could anyone explain what the differences are and also why there are some features missing? Why can we not add our own HDRIs into Shopify or is there actually a way to do this?

I just think being able to make my models look the same wherever a person could take and view them would be so useful, any and all help would be greatly appreciated!

[elalish]

Can you post some screenshots so we can see what you mean by "starkly different"? @mikkoh Can you speak to any differences between Shopify's MV and our latest MV? What version are you on these days?

Consistency is a top priority for us; almost certainly it's just a setup issue.

[LewisConnorx]

Here are some comparisons:

The metallicness of both models isn’t consistent across multiple viewers and variations of Model Viewer. What is most interesting is I have used the default HDRI lighting for Shopify’s product page, whilst using the Neutral HDRI from Model Viewer in the browser and in Babylon also. Despite the HDRI being the same, the results vary, I’m unsure as to why this is.

For the AR/Object Mode side of Shopify, the results of metallics and other forms of materials and textures don’t compare well either, with the Dove bottle losing pretty much all metallic value in those modes. Is this to do with lighting in AR? Still new to this so forgive me if any info is wrong/misguided!

[elalish]

Thanks for the great comparison images! First off, what you call Shopify Object Mode, is actually Apple's AR QuickLook in 3D mode, which has no way to be totally consistent because they use their own unknown lighting and they only support USDZ and there's no physically-correct way to convert glTF to USDZ, so that's all best effort (@grorg at Apple).

It's a little hard to tell from the screen shot what Shopify AR Mode is, but I'd guess also Quick Look? Is it on iOS? The 3D modes are what we can better match. Babylon does their tone mapping a little differently, so you need a factor of ~0.6 on exposure to match MV. Shopify does use MV, so the difference appears to be A) Shopify doesn't have shadows enabled, and B) it might be a difference between the 'neutral' and 'legacy' environments. Try it out in the second tab of our editor.

I doubt the metallicness is actually much different between any of these renders; it's generally all about where the lighting is coming from.

[LewisConnorx]

Thanks for the reply! So the AR mode and Object Mode are converting the imported file into a USD? The screenshots for the AR mode were taken on an iPhone yes, I haven’t tried Android viewing of the models to see the difference unfortunately!

Will take a look at the environments and see what sort of match I can get out of it, appreciate your time and replies!

[mikkoh]

Shopify currently uses Model Viewer 1.12 by default. We have not moved to 2.0 this may take a bit of time. environment-image can be overridden now through the Shopify admin today so relying on consistent lighting for models maybe futile.

I'm guessing Shopify AR Mode here is referencing Apple's AR Quicklook or Google's Scene Viewer rendering the 3D model. In both cases Shopify is not able to change lighting in anyway.

Is your model using any GLTF extensions?