Guide

Why Shopify's 3D viewer shows diamonds black, and how to fix it

The short answer

Many jewelry 3D exports write stones as a plain black metal material with no transparency, and Shopify's built-in viewer draws exactly what the file says. Real diamonds need light to bend and bounce inside the stone, which a basic material cannot do. You can fix it by exporting proper gem materials, by using a viewer that renders gems properly, or by using photographic 360 spins instead.

What you are seeing

You upload a 3D model of a ring or a pendant. The gold looks right, the shape is right, and every diamond is a flat black hole. The same model looks perfect in your design software.

Why it happens

A 3D file stores a shape and a material for each part. In the jewelry exports we have tested from Rhino, the gem material is dropped on export and each stone is written as a dark metallic placeholder with no transparency. A web viewer has no way to know the part was meant to be a diamond, so it draws a black metal stone.

Even with a transparent material, a diamond does not look like glass. Its sparkle comes from light entering through the top, bouncing between the facets and leaving in different colors. Standard real-time materials approximate transparency, but they do not follow light through the cut, so the result is flat or milky.

How to check your own file

  1. Open the file in any glTF viewer that lets you inspect materials.
  2. Find the meshes that are the stones. They are often unnamed, so look for small, faceted, repeated shapes.
  3. Look at their material. If the base color is near black, the metallic value is high and there is no transmission, that is the placeholder described above.
  4. Count the stones. A pave piece can have dozens, so fixing them one by one by hand is slow.

Fix 1: Export proper gem materials

Assign a glass or gem material to each stone in your design software before exporting, using the transmission and index of refraction properties that the glTF format supports. This works with any viewer, but the result is still an approximation, it must be redone for every piece, and viewers differ in how much of the material they honor.

Fix 2: Use a viewer that renders gems properly

Some viewers detect the stones in an unmodified export and render them by following light through the facets in the shopper's browser. That is what GemViewer does, the Shopify app we build. It reads the file you already have, finds the stones itself, and lets shoppers switch between diamond and colored stones. It has a free plan for one model and an Unlimited plan at $49 a month.

Disclosure: we make GemViewer. If you have only a few products, the other two fixes may serve you just as well.

Fix 3: Skip real-time 3D

A 360 degree photo spin or a short video is reliable and shows the real stones. The trade-offs are that it needs photography for every piece, cannot change materials, and does not let shoppers explore the model.

Shopify upload problems to watch for

Large or complex models can fail Shopify's 3D processing. In our testing, files the admin uploader rejected were accepted when uploaded through the Admin API as generic files, and reducing the vertex count and quantizing the geometry brought a 47 MB model under the 20 MB limit that applied to generic files when we tested, without changing how it looked. Keep models light, and remove hidden or duplicated parts before you export.

Which fix should you choose?

  • A handful of hero products and a design team that can re-export: Fix 1.
  • A catalog of dozens of pieces, or unmodified CAD files: Fix 2.
  • No 3D files, or a small collection with good photography: Fix 3.

Questions people ask

Why do my diamonds look fine in my design software but black in Shopify?

Your design software renders with its own gem materials and lighting. The export only carries a placeholder material, and Shopify's viewer draws exactly what the file contains.

Do I need to rebuild my models?

No. You either fix the materials on export, or use a viewer that recognises the stones in the file you already have.

Does this affect AR on Shopify?

Shopify's AR view is built from the same model, so a stone written as black metal is likely to look wrong there too.

Does GemViewer work with colored stones?

Yes. It includes presets for diamond, sapphire, ruby and emerald, and shoppers can switch between them.

Is AR ring try-on available?

Not yet. It is in development on the same engine and is not part of the App Store app.

Sources

Keep reading

Get a quote