Merge pull request #104 from bitbybit-dev/develop

v0.20.12

Author: matas-bitbybit-dev

docs/.gitignore

@@ -18,3 +18,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+wip

docs/blog/2024-07-29-3d-bits-app-for-shopify.md

@@ -119,7 +119,7 @@ The app essentially provides a window into the 3D world, seamlessly integrated.
 
 We offer a wealth of tutorials and documentation that teach you everything from computational design principles on Bitbybit.dev to setting up and optimizing your 3D products with the 3D Bits Shopify app.
 
-➡️ **[Visit the Getting Started Guide For 3D Bits App](/learn/3d-bits/tutorials/set-up)**
+➡️ **[Visit the Getting Started Guide For 3D Bits App](/learn/3d-bits/tutorials/videos-tutorials/set-up)**
 
 ![The 3D Bits app is an integral part of the broader Bitbybit.dev platform, connecting powerful design tools with e-commerce.](https://ik.imagekit.io/bitbybit/app/assets/blog/3d-bits-app-for-shopify/3d-bits-app-is-part-of-the-bitbybit-dev-platform-small.jpeg "3D Bits app is part of the bitbybit.dev platform")
 

docs/blog/2024-11-08-updated-bitbybit-runners.md

@@ -121,7 +121,7 @@ We are serving the Bitbybit Runners from the **JSDelivr CDN**. You can include t
     <script src="https://cdn.jsdelivr.net/gh/bitbybit-dev/bitbybit-assets@<version-number-of-bitbybit>/runner/bitbybit-runner-lite-threejs.js"></script>
     ```
 
-**Note:** You should replace `<version-number-of-bitbybit>` with an actual version number (e.g., `0.20.11`). You can find all the official versions of Bitbybit.dev here:
+**Note:** You should replace `<version-number-of-bitbybit>` with an actual version number (e.g., `0.20.12`). You can find all the official versions of Bitbybit.dev here:
 ➡️ **[Bitbybit.dev GitHub Releases](https://github.com/bitbybit-dev/bitbybit/releases)**
 
 ### Examples of the Runners

docs/learn/3d-bits/3d-assets/intro.md

@@ -25,6 +25,8 @@ For 3D scans, **Splat files** offer an alternative to traditional 3D models. The
 * Use lightweight, lower-poly models that abstract production-grade CAD designs.
 * Avoid uploading detailed production models directly.
 
+**Important:** Read the complete [Your Assets & Security](../tutorials/getting-started/your-assets.md) guide to fully understand asset security implications, intellectual property considerations, and best practices before uploading any 3D models.
+
 ### Rights and Permissions
 Ensure you have the rights to use all parts of your 3D models, including meshes, textures, and other assets. The **3D Bits** app renders the assets you provide, but you are responsible for their legality and compliance.
 

docs/learn/3d-bits/3d-assets/preparing-gltf.md

@@ -9,9 +9,9 @@ image: https://ik.imagekit.io/bitbybit/app/assets/start/shopify/preparing-gltf-a
 
 # Where to Start
 
-The first step in preparing 3D assets for your configurator is having 3D models of your products.  
+The first step in preparing 3D assets for your configurator is having 3D models of your products. Before you begin, make sure you understand the security implications and public accessibility of 3D assets by reading [Your Assets & Security](../tutorials/getting-started/your-assets.md).
 
-If your brand already designs and manufactures physical goods, there’s a good chance you already have detailed, good-looking 3D models on hand. Resellers can often get these from manufacturers - many keep accurate CAD files of their products for engineering or marketing purposes. Not all manufacturers will share them, though, so sometimes you’ll need to commission a 3D artist or designer to create them from scratch in professional CAD software. Some AI tools also exist, which can create 3D assets from 2D images, but in many cases they are not optimised for speed or quality, this may however change in the near future.
+If your brand already designs and manufactures physical goods, there's a good chance you already have detailed, good-looking 3D models on hand. Resellers can often get these from manufacturers - many keep accurate CAD files of their products for engineering or marketing purposes. Not all manufacturers will share them, though, so sometimes you'll need to commission a 3D artist or designer to create them from scratch in professional CAD software.
 
 ![Preparing GLTF Assets](https://ik.imagekit.io/bitbybit/app/assets/start/shopify/preparing-gltf-assets/preparing-gltf-assets-for-3d-bits-app-for-shopify.jpeg "Learn How to prepare GLTF assets")
 
@@ -88,7 +88,28 @@ The good news is that GLTF files compress very well. You should always export to
 
 ![Blender Compression Options](https://ik.imagekit.io/bitbybit/app/assets/start/shopify/preparing-gltf-assets/blender-compress.jpeg "Blender Compression Options")
 
-For even more options, try the free [Khronos GLTF Compressor](https://github.khronos.org/glTF-Compressor-Release/) and enable **Draco compression**. 3D Bits can decompress Draco-compressed files without issue. This tool can also compress textures and save them in formats like KTX.
+## Shopify's glTF Compressor
+
+If you're hosting on Shopify's CDN, we strongly recommend using [Shopify's glTF Compressor](https://gltf-compressor.com/). This open-source tool was built specifically with Shopify's infrastructure in mind and helps ensure your files will be compatible with their upload process.
+
+Here's the issue: when you upload a GLTF file to Shopify, their system processes it before storing it on the CDN. Some compression algorithms and GLTF standards that work perfectly fine elsewhere can cause Shopify's upload process to fail. Files that can't be processed won't be accepted. In some cases, incompatible files might still work in 3D Bits if you host them elsewhere, but sometimes they'll break in the app as well.
+
+Shopify's compressor is designed to help you answer one critical question: **How much can I compress the textures before the model starts looking noticeably bad?**
+
+The tool exposes all textures in your GLTF file and lets you adjust:
+- **Image format** (JPEG, PNG, WebP)
+- **Resolution**
+- **Quality**
+
+All changes happen in real time, so you can see the effects immediately. You can quickly compare the original model with the compressed version by holding and releasing the **C** key on your keyboard. This makes it easy to find the sweet spot between file size and visual quality.
+
+Additionally, the tool offers mesh and animation optimization options that can be applied on export.
+
+If you're certain your file is valid but Shopify won't accept it during upload, you'll likely need to find your own hosting provider or set up your own CDN. But for most users, sticking with Shopify's compressor will save a lot of headaches.
+
+## Alternative: Khronos glTF Compressor
+
+For even more compression options or if you're hosting outside Shopify, try the free [Khronos GLTF Compressor](https://github.khronos.org/glTF-Compressor-Release/) and enable **Draco compression**. 3D Bits can decompress Draco-compressed files without issue. This tool can also compress textures and save them in formats like KTX.
 
 Khronos compressor tool also will show you the split screen view of original vs compressed file with a nice separator line - it makes it super easy to compare before and after quality of the model.
 
@@ -101,7 +122,7 @@ Khronos compressor tool also will show you the split screen view of original vs
 
 Once your file is ready, upload it to Shopify. Go to **Content → Files**, drag and drop your GLTF or GLB, and copy its URL if you want to use it in 3D Bits. Using Shopify’s CDN ensures your file is cached on servers close to your customers. If someone in Germany loads your product page, Shopify will serve the file from a nearby server, cutting down load times.
 
-Shopify has a 20 MB file size limit, but that’s rarely an issue with well-optimized assets. If your model is bigger than that, you can split it into multiple files - 3D Bits can load several at once. If you decide to use your own CDN instead, make sure the files are publicly accessible.
+If your model is bigger than what can be uploaded to Shopify, you can split it into multiple files - 3D Bits can load several at once. If you decide to use your own CDN instead, make sure the files are publicly accessible.
 
 # Reusing Parts with Instancing
 
@@ -116,6 +137,12 @@ GLTF files need to be valid to be properly loaded into any 3D software, 3D Bits
 ![BabylonJS Sandbox](https://ik.imagekit.io/bitbybit/app/assets/start/shopify/preparing-gltf-assets/babylonjs-sandbox.jpeg "BabylonJS Sandbox can be used to test loading your compressed 3D assets, inspect contents")
 *BabylonJS Sandbox can be used to test loading your compressed 3D assets, inspect contents.*
 
+:::caution Mobile Phone Considerations
+While well-prepared 3D GLTF files run fine on most mobile phones, it's important to take precautions. When preparing 3D models and including them in your webshops, make sure you test the page on the most popular mobile devices too. Large asset files combined with high-resolution shadows may crash mobile phone browsers. Safari browsers on iPhone are the most susceptible to crashes when Random Access Memory (RAM) limits are exceeded. Apple has set a low threshold for websites running on iPhone, and whenever that memory limit is hit, the website will experience something called an "unexpected reload". If you're not careful with your assets, skybox textures, or shadow resolutions, you run the risk of experiencing this error. Desktop browsers, iPads, and Android phones will probably not experience these issues, but we advise you to make the experience lightweight for everyone.
+
+If you're using BITBYBIT VIEWER with Viewer Editor, the 3D Bits app on Shopify also takes precautions on iOS Safari browsers. Whenever we detect that your models exceed a 70 MB limit, we stop the scene from rendering and provide an explanation of why this happens (this is subject to change in the future). This safeguard exists because loading extremely large assets (100+ MB) on high-traffic pages like homepages without proper testing can crash the browsing experience for iPhone users, potentially affecting sales and customer experience. To prevent such scenarios, we've implemented automatic size checks that disable rendering of oversized assets in iPhone Safari browsers until they're properly optimized.
+:::
+
 # Wrapping Up
 
 Preparing 3D assets for the web is a balancing act between fidelity, file size, and performance. You might start with a pristine engineering model, but to make it run smoothly in a browser, you’ll need to simplify geometry, optimize textures, merge meshes, and compress files.  

docs/learn/3d-bits/faq.md

@@ -51,8 +51,8 @@ The **BITBYBIT VIEWER** block (used within the Viewer Editor) lets you match sta
   As technical founders, our initial inclination was to build in complex parametric logic for everything. However, we quickly realized that many merchants simply want to achieve straightforward visual changes based on standard Shopify variants – like showing the blue chair when "Blue" is selected. And that's perfectly fine and often all that's needed! 3D Bits handles this simple variant swapping effectively.
 </Admonition>
 
-- Have GLTF files ready? Check this tutorial: [No-Code GLTF Configurators with BITBYBIT VIEWER Editor on Shopify](/learn/3d-bits/tutorials/viewer-no-code-gltf-configurators)
-- Want to use 3D scans (Gaussian splatting)? [No-Code Gaussian Splat Configurators with BITBYBIT VIEWER Editor on Shopify](/learn/3d-bits/tutorials/viewer-no-code-3d-scan-configurators)
+- Have GLTF files ready? Check this tutorial: [No-Code GLTF Configurators with BITBYBIT VIEWER Editor on Shopify](/learn/3d-bits/tutorials/videos-tutorials/viewer-no-code-gltf-configurators)
+- Want to use 3D scans (Gaussian splatting)? [No-Code Gaussian Splat Configurators with BITBYBIT VIEWER Editor on Shopify](/learn/3d-bits/tutorials/videos-tutorials/viewer-no-code-3d-scan-configurators)
 
 For more complex configurators (e.g., where parts change dynamically beyond pre-set variants, or intricate rules are needed), you'd likely need to explore options involving some level of scripting, as discussed in later questions.