glTF 3D Model in Shopify's Product Viewer is too bright - can the lighting be adjusted?

Store Design
1

I have a glTF 3D model of one of my products, and the colors are accurate using several online glTF viewers that I tried.

But Shopify’s produces the image too bright, so the gray product looks white, and the black emblem looks gray.

Can the brightness/lighting of the 3D model viewer be adjusted, like it can for most other 3D model viewers that are found online?

I don’t want to give customers an inaccurate depiction of what the product will look like.

2

Hi @able36

If you aren’t able to modify the Base Color channels on your 3D model yourself - I would recommend trying the levAR Shopify plugin to preview your glTF model - our viewer was custom built with color accuracy in mind - take a look at some models in our viewer here. We also support augmented reality on all mobile platforms!

Feel free to DM me or reach out if you need further assistance.

-Vik

3

We had many people tying to solve this for us and then played around with the GLB fil in threejs and worked out that if you change the RGBdepthpacking to Basicdepthpacking it makes both sides the true colour. see https://saltsunsand.com.au/collections/sss-bondi-cushions/products/bondi_tidewater_green_-_45_x_45_cm_piped_cushion for a 3d model that was showing super bright one side and is now corrected with that fix. We thought we should put something up as we couldnt find anyone in the world - tried 3d experts . shopify experts - upwork and nobody could solve the problem so hope this helps someone.

Cheers,

Tim

saltsunsand.com.au

4

What could cause the video to show satisfactory on cellular model of the website (both apple and Andriod) but not on desktop version of the internet site?

5

@timbroo can you elaborate on what you changed within the depthpacking specifically? Do you have some documentation on how this can be achieved in three.js? I’m looking on three.js documentation , but I am not finding it