How To Prepare 3D Gaussian Splatting Scan Of The Bike And Sell Via 3D Bits App For Shopify

3D Bits on Shopify app store
https://apps.shopify.com/3d-bits-1

In this tutorial we teach you how to edit 3D Gaussian splatting scans taken on your mobile phone. We use the SuperSplat editor by PlayCanvas and then export the file, which we upload on Shopify CDN. Then we take the link url to that file and use that link in the visual bitbybit.dev script to load the model into the 3D scene. Then script is exported to BITBYBIT RUNNER theme app extension via JavaScript and integrated via the inline script metafield into the product page. In this video lecture we discuss some other aspects of integration, like camera positioning, background color. This illustrates how static files can be exposed as products on 3D Bits app.

Read more about the app
https://bitbybit.dev/blog/3d-bits-app...

Tutorial page
https://bitbybit.dev/start/shopify/tu...

#shopify #app #3dbits #3d #ecommerce #tutorial #lecture #lesson #course #onlinecourse #gettingstarted #beginner #beginnerfriendly #introduction #setup #installation #howto #cad #application #3dscan #shopifyapp #3dshopify #shopify3d #3dscanning #3dprint #3dprinting #gaussiansplatting #3dgs #gltf #shopifystore #3dmerchandise #3dgoods #3dproduce #produce #goods #3dstock #stock #3dcommodity #commodity #javascript #typescript #blockly #rete #bitbybitdev #parametricdesign #computationaldesign #babylonjs #opencascade #occt #havok #physics #physicsengine #gameengine #jscad #computeraideddesign #shop #store #3dsoftware #software #webapp #3dassets #parametric #procedural #3dproduct #3dproducts #shopifydeveloper #merchants #customers #customization #3dconfigurator #3ddesign #design #webgl #webgpu #variants #adaptable #algorithmicdesign #gamedev #interactive #reactive #3dmodeling #webxr #immersive #immersiveexperience #playcanvas #supersplat #splat #mtb #bike #3dbikegame

00:00 Short introduction to the 3D Gaussian splatting tutorial for 3D Bits app
01:00 Reminder of the default product that we've created in the previous setup tutorial
01:30 Showcasing few apps that can be used to take 3D scans, like Luma and Polycam, while there are more these are probably the most popular ones
02:00 Example of some 3D scans on bitbybit.dev platform
02:55 Learn some theory behind creating and hosting 3D Gaussian splatting files and 3D scanning
04:00 Short intro into open-source SuperSplat editor from PlayCanvas
04:27 Learn how to import 3D scan splat or ply file to open-source SuperSplat editor from PlayCanvas
04:50 Learn how to edit 3D scanned file from third party software and remove noisy environment by deleting point cloud entities
07:40 Visualize splat ellipses, which are called rings in SuperSplat editor
08:00 Remove largest rings
08:28 Position the 3D scan on the center of coordinate system by moving it
08:45 Learn how to export file as a splat file to save on file size
09:30 Load splat asset file to Shopify CDN via Content section
09:45 Copy the url link of the file on Shopify, open Rete editor on bitbybit.dev and paste it to the gaussian splatting component from BabylonJS category
10:28 Inspect loaded file in 3D on bitbybit.dev platform
10:45 Set up bitbybit runner inputs and outputs in Rete editor
11:30 Export visual script to runner as JavaScript, copy the contents and paste it to product inline script metafield, also adjust camera position
12:18 Open the preview of the 3D bike on the product page
12:58 Viewing 3D Gaussian splat bike model in full screen
13:15 Adjust camera and background color for the 3D scene
14:40 Short explanation about bitbybit.dev subscriptions and the fact that they are not necessary for creating 3D models in 3D Bits app, subscription just offers convenience
14:55 Conclusion