How to Bring Gaussian Splatting in Shopify

Last time we looked at Bitbybit, it was leveraging 3D Gaussian Splatting (3DGS) with CAD and Babylon.js. Now, they’re back with a new extension for Shopify that allows you to display your Gaussian Splatting files natively in a web store. It’s actually more straightforward than I expected.

If you prefer, you can watch the video tutorial below. Please note that this will require the 3D Bits extension for Shopify, which costs $142 annually, though there is a 14-day free trial available.

Steps:

1. File Preparation:

   • I’ll skip over the initial step of cleaning up a capture using SuperSplat. However, it’s recommended that everyone compress the file to make it more manageable—aim for a smaller file size using the .splat format.

2. Upload to Shopify:

   • Once your file is compressed, head to the Content tab in the Shopify admin page and upload the .ply file under Files.

3. Link to Bitbybit:

   • After uploading the 3DGS file to the Shopify CDN, copy the URL of the file. Return to Bitbybit, open the Rete editor, and click on the Gaussian Splatting component under the BabylonJS category. Paste the URL here.

4. Setup in Bitbybit:

   • Next, go to the Lists section (icon looks like a series of bubbles or balls) and connect the node to the Gaussian Splatting component.

   • Set the Runner value by clicking on the last icon on the dock and setting it to “meshes”.

   • Connect the node from Lists to this component as well.

5. Export and Integrate with Shopify:

   • Once done, click Export to Runner (found inside the three vertical dots at the bottom left of the screen). Copy the generated code.

   • Return to Shopify, select the product you want to represent with this model, and scroll down to the 3D Bits inline script section. Paste the copied code here.

   • Two lines below, you can adjust the default camera parameters and positions. Matas recommends setting the camera target to [0, 0, 0].

   • Preview the product page, and your 3DGS model should be visible!

As of now, this is the only way I know of to get 3DGS into Shopify, but if you know of any other workarounds, feel free to share!

The 3D Bits extension can be found here and here is a preview of a Shopify page using the plugin. Pretty cool, right!