diff --git a/README.md b/README.md
index 16f54da7..7c1cfc40 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
# Bitbybit Monorepo
-This git repo contains multiple bitbybit packages and contains code for core 3D algorithms of Bitbybit platform which are open-sourced under MIT license.
+This git repo contains multiple bitbybit packages and code for core 3D algorithms of Bitbybit platform which are open-sourced under MIT license.
# [FULL PLATFORM AT BITBYBIT.DEV](https://bitbybit.dev)
# [LEARN BITBYBIT](https://learn.bitbybit.dev)
diff --git a/docs/blog/2024-04-23-introducing-bitbybit-runner.md b/docs/blog/2024-04-23-introducing-bitbybit-runner.md
index a137a945..dd293ac0 100644
--- a/docs/blog/2024-04-23-introducing-bitbybit-runner.md
+++ b/docs/blog/2024-04-23-introducing-bitbybit-runner.md
@@ -60,7 +60,7 @@ We've developed and launched three different types of examples to demonstrate a
When you only need to run a script created in Bitbybit.dev without much external interaction, this is a good starting point. There are several ways to load the exported script file into your website, but perhaps the simplest is to just copy and paste its content and assign it to a variable or return it from a function.
We've provided this example on three popular external coding sites:
-* [StackBlitz Example](https://stackblitz.com/edit/stackblitz-starters-f6d3a2?file=script.js)
+* [StackBlitz Example](https://stackblitz.com/edit/bitbybit-dev-runner-example-inline-string-embed-from-ret?file=script.js)
* [JSFiddle Example](https://jsfiddle.net/matas_bitbybitdev/sa5jroqn/11/)
* [CodePen Example](https://codepen.io/matas-bitbybit-dev/pen/XWQoxmX)
@@ -98,7 +98,7 @@ While this example is basic, it includes all the essential elements of a 3D conf
* Demonstration of how you can provide inputs to your exported Rete script and read outputs from it.
Check out the examples:
-* [StackBlitz Example](https://stackblitz.com/edit/stackblitz-starters-ohhh1g?file=script.js)
+* [StackBlitz Example](https://stackblitz.com/edit/bitbybit-dev-runner-example-io-from-rete-editor?file=index.html,script.js)
* [JSFiddle Example](https://jsfiddle.net/matas_bitbybitdev/z1pku4gj/3/)
* [CodePen Example](https://codepen.io/matas-bitbybit-dev/pen/KKYbJdj)
diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts
index 36a4613a..68beb1c9 100644
--- a/docs/docusaurus.config.ts
+++ b/docs/docusaurus.config.ts
@@ -30,7 +30,23 @@ const config: Config = {
defaultLocale: "en",
locales: ["en"],
},
-
+ plugins: [
+ [
+ "@docusaurus/plugin-client-redirects",
+ {
+ redirects: [
+ {
+ from: "/learn/npm-packages/start-with-three-js",
+ to: "/learn/npm-packages/threejs/start-with-three-js",
+ },
+ {
+ from: "/learn/npm-packages/start-with-babylon-js",
+ to: "/learn/npm-packages/babylonjs/start-with-babylon-js",
+ },
+ ],
+ }
+ ],
+ ],
presets: [
[
"classic",
@@ -65,7 +81,7 @@ const config: Config = {
],
themeConfig: {
// Replace with your project's social card
- image: "img/docusaurus-social-card.jpg",
+ image: "img/learn-bitbybit-social-card.jpeg",
colorMode: {
defaultMode: "dark",
disableSwitch: false,
diff --git a/docs/learn/3d-bits/faq.md b/docs/learn/3d-bits/faq.md
new file mode 100644
index 00000000..ced51980
--- /dev/null
+++ b/docs/learn/3d-bits/faq.md
@@ -0,0 +1,143 @@
+---
+sidebar_position: 2
+title: "3D Bits Shopify App - FAQ"
+sidebar_label: "3D Bits FAQ"
+description: "Frequently asked questions about using the 3D Bits app to integrate 3D models and product configurators into your Shopify store."
+tags: [shopify, 3d-bits]
+---
+
+import Admonition from '@theme/Admonition';
+
+# 3D Bits Shopify App: Frequently Asked Questions
+
+As 3D Bits makes its way into Shopify stores, we’ve started getting some recurring questions from merchants. So, here’s a quick FAQ with some honest answers to help you understand what 3D Bits can do for your store.
+
+
+
If you have other questions or just need some initial guidance, please contact us, we're here to help you out!
+ info@bitbybit.dev
+
+
+---
+
+### Can I use 3D Bits if I have zero coding skills?
+
+**Yes, absolutely!** If you can click buttons and copy-paste, you’re good to go for basic 3D model display.
+
+**Here's the simple process:**
+1. Install 3D Bits app, subscribe for a trial and pin it.
+2. Go to Metafields sections within the app admin page and hit create button.
+3. Upload your 3D models to Shopify via **Content > Files**.
+4. Copy the link to your uploaded 3D model.
+5. Paste this link into one of our designated 3D Bits metafields associated with your product.
+6. Voilà! Your 3D model should now appear on your product page.
+
+Feeling a bit more adventurous but still don't want to code? You can try our **BITBYBIT VIEWER** editor block within the Shopify Theme Editor. It allows for arranging slightly fancier scenes with multiple models or different camera angles, still without writing any code – just courage required!
+
+
+ For a detailed walkthrough, check out our guide: 3D Bits Setup Guide.
+
+
+---
+
+### Can I build a product configurator without writing code?
+
+**To a certain extent, yes.**
+
+The **BITBYBIT VIEWER** block (used within the Viewer Editor) lets you match static 3D models with your existing Shopify product variants. This is great for handling common scenarios like:
+* Showing a different 3D model for each color option (e.g., a blue chair model when "Blue" is selected).
+* Displaying different models for size variations.
+
+
+ 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.
+
+
+- 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)
+
+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.
+
+---
+
+### I already use [bitbybit.dev](https://bitbybit.dev) for my projects – can I connect those to Shopify?
+
+**Yes, you can!**
+
+* **For Simple Previews:** Use the **BITBYBIT PREVIEW** extension block in the Shopify Theme Editor. Make your project public on `bitbybit.dev`, and paste the project link into the block. That’s it! This is great for showcasing existing non-interactive or pre-animated scenes.
+* **For More Interactivity:** If you want your `bitbybit.dev` script to react to Shopify variants or other page elements, you'll need to integrate your scripts using the **BITBYBIT RUNNER** theme extension block. This involves exporting your script from `bitbybit.dev` (as a JavaScript snippet) and then setting up the Runner block to execute it. This approach is more complex but offers much greater control.
+
+
+ Learn more about connecting your projects: Connecting bitbybit.dev Projects to Shopify.
+
+
+---
+
+### We’re developers building stores for merchants. Should we bother with 3D Bits?
+
+**Definitely.**
+
+While you *can* build everything from scratch (integrating a WebGL viewer, handling model loading, Shopify integration, etc.), ask yourself: do you really want to keep reinventing that wheel for each new theme or client?
+
+
+3D Bits handles the essential groundwork:
+* Easy 3D model embedding.
+* Shopify metafield integration for 3D assets.
+* Basic variant-to-model mapping.
+* A bridge (the Runner block) for your custom JavaScript/TypeScript logic to interact with the 3D scene.
+
+This frees you up to focus on the unique business logic, creative 3D experiences, and advanced interactivity your clients need, rather than spending time wrangling 3D viewers into every theme variation. We’ve been there – it wasn't fun! 🥹
+
+
+ We currently use BabylonJS in 3D Bits app. All of the videos and viewer editor is based on it.
+
+
+---
+
+### Can I use 3D Bits for complex pricing (e.g., a slider value changes the product price)?
+
+**Not directly for the pricing calculation itself.**
+
+3D Bits is focused on handling the **3D visualization**. It can:
+* Read a value from a slider (or any other UI element on your page).
+* Update the 3D model based on that value (e.g., change dimensions, swap parts).
+
+However, **3D Bits does not calculate or update the product price in Shopify.** Pricing logic, especially for complex, dynamically calculated prices, needs to be handled by:
+* Shopify's built-in variant pricing.
+* A dedicated third-party Shopify pricing app.
+* Custom backend development with secure validation.
+
+Shopify offers three variant types with many options out of the box, which covers most standard pricing scenarios. For anything fancier, you’ll need to combine 3D Bits for the visuals with other tools or custom solutions for the pricing logic.
+
+---
+
+### My product has a ton of configurable parts and complex logic. Can I build a fully custom configurator with 3D Bits?
+
+**Yes, if you or your team can write JavaScript or TypeScript.**
+
+This is where the **BITBYBIT RUNNER** theme extension block truly shines. It acts as a bridge:
+1. You develop your complex configuration logic, part-swapping rules, and geometric manipulations as a script (e.g., using Rete, Blockly, or TypeScript on `bitbybit.dev` and then exporting it, or writing it directly for the runner).
+2. The Runner block executes this script within your Shopify theme.
+3. Your script can then interact with the 3D scene, listen to Shopify variant changes (or other custom UI elements you add to the page), and update the 3D model accordingly.
+
+3D Bits provides the 3D rendering pipeline and the connection to Shopify. You'll need to bring your own:
+* Custom configuration logic (as a script).
+* Pricing strategy (likely handled by Shopify or another app).
+* Custom UI elements (if Shopify's default variant selectors aren't sufficient).
+
+
+ Dive deeper into building custom configurators: Using the Bitbybit Runner for Custom Logic.
+
+
+---
+
+### Does 3D Bits offer fancy UI controls for product pages (like custom sliders, color swatches, etc.)?
+
+**Nope. 3D Bits is not here to reinvent the dropdown or the color swatch.**
+
+There are many excellent Shopify apps and theme development techniques dedicated to creating sophisticated UI controls for product options.
+
+3D Bits focuses on the 3D visualization. It's designed to **listen** to what options are already selected on your product page (whether through standard Shopify variants or custom UI controls you've implemented) and then **update the 3D scene accordingly**:
+* Show the correct 3D model or parts.
+* Hide what shouldn’t be visible.
+* Update 3D model dimensions or features based on selected options.
+
+**Think of 3D Bits as the 3D backbone of your product visualization – not the entire user interface nervous system. 💪** It plays well with others, allowing you to choose the best UI tools for your store while it handles the 3D heavy lifting.
\ No newline at end of file
diff --git a/docs/learn/3d-bits/theme-app-extensions/_category_.json b/docs/learn/3d-bits/theme-app-extensions/_category_.json
index 1afc188a..38db85ae 100644
--- a/docs/learn/3d-bits/theme-app-extensions/_category_.json
+++ b/docs/learn/3d-bits/theme-app-extensions/_category_.json
@@ -1,4 +1,4 @@
{
"label": "Theme App Extensions",
- "position": 1
+ "position": 3
}
\ No newline at end of file
diff --git a/docs/learn/3d-bits/tutorials/_category_.json b/docs/learn/3d-bits/tutorials/_category_.json
index c57773eb..b9dada94 100644
--- a/docs/learn/3d-bits/tutorials/_category_.json
+++ b/docs/learn/3d-bits/tutorials/_category_.json
@@ -1,4 +1,4 @@
{
"label": "Tutorials",
- "position": 2
+ "position": 4
}
diff --git a/docs/learn/3d-bits/tutorials/viewer-no-code-gltf-configurators copy.md b/docs/learn/3d-bits/tutorials/viewer-no-code-gltf-configurators.md
similarity index 100%
rename from docs/learn/3d-bits/tutorials/viewer-no-code-gltf-configurators copy.md
rename to docs/learn/3d-bits/tutorials/viewer-no-code-gltf-configurators.md
diff --git a/docs/learn/intro.md b/docs/learn/intro.md
index 9f757dc4..1f42679a 100644
--- a/docs/learn/intro.md
+++ b/docs/learn/intro.md
@@ -10,10 +10,36 @@ import Admonition from '@theme/Admonition';
# Welcome! 🎉
-We're thrilled you're interested in using our platform! These "Start" pages are designed to help you quickly get up to speed and begin creating amazing 3D experiences.
+We're thrilled you're interested in using our platform! This site is designed to help you quickly get up to speed and begin creating amazing 3D experiences.
+
+In this essential introduction to Bitbybit video Matas Ubarevičius explains the fundamental ideas of the platform - if you haven't watched it yet - it's highly recommended.
+
+
+
Let's find the best starting point for you:
+### Are you a programmer?
+
+If you're a professional programmer, you can jump right into our [**TypeScript Monaco editor**](https://bitbybit.dev/app?editor=typescript). Find the [**API Docs here**](https://docs.bitbybit.dev).
+
+To get started:
+
+* We offer [**NPM packages**](/learn/npm-packages/intro) that you can incorporate into your own websites.
+ * *Note: These packages do not include our proprietary advanced algorithms or the models available in the 3D Models section.*
+* Check out how to set up our algorithms with [**Three.JS**](/learn/npm-packages/threejs/intro) or [**Babylon.JS**](/learn/npm-packages/babylonjs/intro). We include some complete powerful demos with explanations.
+* Also consider our course: [**Introduction To Programming 3D In TypeScript**](https://bitbybit.dev/school/courses/introduction-to-programming-3d-in-typescript).
+* Or, if you're familiar with BabylonJS: [**Bitbybit For BabylonJS Developers**](https://bitbybit.dev/school/courses/bitbybit-for-babylonjs-developers).
+ These courses explore how our algorithms can create 3D CAD applications.
+
### Are you looking for ready-made 3D models?
Many of our standalone 3D model configurators require a subscription to our paid plans: Silver or Gold.
@@ -65,15 +91,3 @@ This platform is a great place to teach 3D computational design, mathematics, ge
If you're familiar with our tools and interested in becoming a teacher in our School to share your knowledge, please reach out to us at [info@bitbybit.dev](mailto:info@bitbybit.dev).
-
-### Are you a programmer?
-
-If you're a professional programmer, you can jump right into our **TypeScript Monaco editor**.
-
-To get started:
-
-* Consider our course: [**Introduction To Programming 3D In TypeScript**](https://bitbybit.dev/school/courses/introduction-to-programming-3d-in-typescript).
-* Or, if you're familiar with BabylonJS: [**Bitbybit For BabylonJS Developers**](https://bitbybit.dev/school/courses/bitbybit-for-babylonjs-developers).
- These courses explore how our algorithms can create 3D CAD applications.
-* We also offer [**NPM packages**](/learn/npm-packages/intro) that you can incorporate into your own websites.
- * *Note: These packages do not include our proprietary advanced algorithms or the models available in the 3D Models section.*
\ No newline at end of file
diff --git a/docs/learn/npm-packages/babylonjs/_category_.json b/docs/learn/npm-packages/babylonjs/_category_.json
new file mode 100644
index 00000000..4154d49e
--- /dev/null
+++ b/docs/learn/npm-packages/babylonjs/_category_.json
@@ -0,0 +1,4 @@
+{
+ "label": "BabylonJS",
+ "position": 3
+}
diff --git a/docs/learn/npm-packages/babylonjs/advanced-parametric-3d-model.mdx b/docs/learn/npm-packages/babylonjs/advanced-parametric-3d-model.mdx
new file mode 100644
index 00000000..f6c7c5c2
--- /dev/null
+++ b/docs/learn/npm-packages/babylonjs/advanced-parametric-3d-model.mdx
@@ -0,0 +1,403 @@
+---
+sidebar_position: 3
+title: "Advanced Parametric 3D Model with BabylonJS & Bitbybit"
+sidebar_label: "Parametric Model (BabylonJS)"
+description: "Learn how to build an advanced, interactive parametric 3D model using Bitbybit with BabylonJS, OCCT, and a GUI for real-time control."
+tags: [npm-packages, babylonjs]
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+import Admonition from '@theme/Admonition';
+
+# Advanced Parametric 3D Model with BabylonJS & Bitbybit
+
+This tutorial explores building a sophisticated, interactive parametric 3D model utilizing Bitbybit's robust integration with the BabylonJS rendering engine. We will construct a configurable "Hex Shell" 3D shape, where its geometry is dynamically controlled by parameters from a `lil-gui` interface. The underlying complex CAD operations will be handled by the OpenCascade (OCCT) kernel, accessed via Bitbybit.
+
+You can see what the results of this app look like (rendered in Unreal Engine):
+
+
+
+
+Through this example, you will learn to:
+
+* Set up a BabylonJS scene and rendering engine.
+* Initialize Bitbybit with specific geometry kernels (OCCT in this case) for a BabylonJS environment.
+* Create intricate parametric geometry using Bitbybit's OCCT API.
+* Employ `lil-gui` to generate a user interface for real-time control over model parameters.
+* Dynamically update the 3D model in the BabylonJS scene as UI parameters change.
+* Implement a Level of Detail (LOD) strategy for efficient shape generation during interaction and finalization.
+* Integrate functionality to export the 3D model in common formats like STEP, STL, and GLB.
+
+We are providing a higher level explanations of the codebase below, but for working reference always check this live example on StackBlitz, which, as platform evolves could change slightly.
+
+
+
+
+
+## Project Structure Overview
+
+A well-organized project structure is key for managing more complex applications. This example typically involves:
+
+* `index.html`: The entry point for the browser, hosting the canvas and loading our scripts.
+* `style.css`: Contains basic CSS for page layout, canvas presentation, and UI elements such as a loading spinner.
+* `src/main.ts`: The primary TypeScript file that orchestrates the entire application, from scene setup and Bitbybit initialization to GUI interactions and geometry updates.
+* `src/models/`: A directory to define the data structures (TypeScript interfaces/types and initial values) for:
+ * `model.ts`: Parameters controlling the 3D shape's geometry.
+ * `kernel-options.ts`: Configuration for enabling Bitbybit geometry kernels.
+ * `current.ts`: References to current scene objects (meshes, lights, GUI instance).
+* `src/helpers/`: This directory houses utility functions, each with a distinct responsibility:
+ * `init-babylonjs.ts`: Responsible for setting up the BabylonJS `Engine`, `Scene`, `Camera`, default lighting, and a ground plane.
+ * `init-kernels.ts`: Manages the initialization of the selected Bitbybit geometry kernels (e.g., OCCT).
+ * `create-shape.ts`: The core of the geometric logic, containing the functions that use Bitbybit's OCCT API to generate the parametric "Hex Shell" model.
+ * `create-gui.ts`: Configures the `lil-gui` panel, linking its controls to the parameters in `model.ts` and connecting them to the geometry update functions.
+ * `downloads.ts`: Implements the logic for exporting the generated 3D model to STEP, STL, and GLB file formats.
+ * `gui-helper.ts`: Provides simple utility functions for managing the GUI's visual state (e.g., showing/hiding a loading spinner, enabling/disabling GUI controls).
+* `src/workers/`: This directory would contain the individual Web Worker files for each geometry kernel Bitbybit uses (e.g., `occt.worker.ts`).
+
+
+ For a detailed explanation on setting up the Web Worker files (e.g., `occt.worker.ts`), which are essential for running geometry kernels in a separate thread, please refer to our [**BabylonJS Integration Starter Tutorial**](./start-with-babylon-js) or a general guide on using workers with Bitbybit. This tutorial assumes that foundation is in place and focuses on the application logic.
+
+
+## 1. HTML Setup (`index.html`)
+
+The `index.html` file provides the basic webpage structure.
+
+
+{`
+
+
+
+
+
+ Bitbybit & BabylonJS Hex Shell Example
+
+
+
+
+