added some live runner examples, also fixed some broken links. Updated threejs and babylonjs starter template code with some better looking kernel initialization...

Author: matas-bitbybit-dev

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)
 

docs/learn/npm-packages/start-with-babylon-js.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 2
+sidebar_position: 3
 title: Using Bitbybit with Babylon.js
 sidebar_label: Babylon.js Integration
 description: Learn how to set up and use the @bitbybit-dev/babylonjs package with Vite to create 3D CAD applications, and control which geometry kernels (OCCT, JSCAD, Manifold) are initialized.
@@ -204,7 +204,7 @@ import {
     HemisphericLight,
     Color4, // Using Color4 for scene clearColor for alpha
 } from '@babylonjs/core';
-import { first } from 'rxjs';
+import { first, firstValueFrom, tap } from 'rxjs';
 
 // Define an interface for kernel options
 interface KernelOptions {
@@ -260,6 +260,7 @@ function initBabylonJS() {
         stencil: true,
     });
     const scene = new Scene(engine);
+    scene.metadata = { shadowGenerators: [] }; // Important for Bitbybit till we have better implementation...
     scene.clearColor = new Color4(0.1, 0.11, 0.12, 1); // Set background color
 
     const camera = new ArcRotateCamera(
@@ -289,93 +290,121 @@ function initBabylonJS() {
 
 // --- 5. Bitbybit Kernel Initialization Logic ---
 async function initWithKernels(
-  scene: Scene, // Babylon.js Scene
-  bitbybit: BitByBitBase,
-  options: KernelOptions
+    scene: Scene,
+    bitbybit: BitByBitBase,
+    options: KernelOptions
 ): Promise<{ message: string }> {
-  return new Promise(async (resolve) => {
     let occtWorkerInstance: Worker | undefined;
     let jscadWorkerInstance: Worker | undefined;
     let manifoldWorkerInstance: Worker | undefined;
 
-    // Conditionally create worker instances based on options
+    // 1. Conditionally create worker instances
     if (options.enableOCCT) {
-      occtWorkerInstance = new Worker(
+        occtWorkerInstance = new Worker(
         new URL('./workers/occt.worker.ts', import.meta.url),
         { name: 'OCC_WORKER', type: 'module' }
-      );
+        );
     }
     if (options.enableJSCAD) {
-      jscadWorkerInstance = new Worker(
+        jscadWorkerInstance = new Worker(
         new URL('./workers/jscad.worker.ts', import.meta.url),
         { name: 'JSCAD_WORKER', type: 'module' }
-      );
+        );
     }
     if (options.enableManifold) {
-      manifoldWorkerInstance = new Worker(
+        manifoldWorkerInstance = new Worker(
         new URL('./workers/manifold.worker.ts', import.meta.url),
         { name: 'MANIFOLD_WORKER', type: 'module' }
-      );
+        );
     }
 
-    // Initialize Bitbybit with the (potentially undefined) worker instances.
-    // This passes the Babylon.js 'scene' to Bitbybit for integration.
-    scene.metadata = { shadowGenerators: [] };
+    // 2. Initialize Bitbybit
     await bitbybit.init(
-      scene,
-      occtWorkerInstance,
-      jscadWorkerInstance,
-      manifoldWorkerInstance
+        scene,
+        occtWorkerInstance,
+        jscadWorkerInstance,
+        manifoldWorkerInstance
     );
 
-    // Logic to wait for selected kernels to be initialized
-    let nrResolved = 0;
-    let resolutionsNeeded = 0;
+    // 3. Collect promises for kernel initializations
+    const initializationPromises: Promise<void>[] = [];
+    let anyKernelSelectedForInit = false;
 
-    const checkIfAllInitialized = () => {
-      if (nrResolved === resolutionsNeeded) {
-        console.log('Selected kernels initialized:', options);
-        resolve({ message: 'Selected kernels initialized successfully.' });
-      }
-    };
+    if (options.enableOCCT) {
+        anyKernelSelectedForInit = true;
+        if (bitbybit.occtWorkerManager) {
+        initializationPromises.push(
+            firstValueFrom(
+            bitbybit.occtWorkerManager.occWorkerState$.pipe(
+                first((s) => s.state === OccStateEnum.initialised),
+                tap(() => console.log('OCCT Initialized'))
+            )
+            ).then(() => {}) // Ensure the promise resolves to void for Promise.all
+        );
+        } else {
+        console.warn(
+            'OCCT enabled in options, but occtWorkerManager not found after init.'
+        );
+        }
+    }
 
-    if (options.enableOCCT && bitbybit.occtWorkerManager) {
-      resolutionsNeeded++;
-      bitbybit.occtWorkerManager.occWorkerState$
-        .pipe(first((s) => s.state === OccStateEnum.initialised))
-        .subscribe(() => {
-          console.log('OCCT Initialized');
-          nrResolved++;
-          checkIfAllInitialized();
-        });
+    if (options.enableJSCAD) {
+        anyKernelSelectedForInit = true;
+        if (bitbybit.jscadWorkerManager) {
+        initializationPromises.push(
+            firstValueFrom(
+            bitbybit.jscadWorkerManager.jscadWorkerState$.pipe(
+                first((s) => s.state === JscadStateEnum.initialised),
+                tap(() => console.log('JSCAD Initialized'))
+            )
+            ).then(() => {})
+        );
+        } else {
+        console.warn(
+            'JSCAD enabled in options, but jscadWorkerManager not found after init.'
+        );
+        }
     }
-    if (options.enableJSCAD && bitbybit.jscadWorkerManager) {
-      resolutionsNeeded++;
-      bitbybit.jscadWorkerManager.jscadWorkerState$
-        .pipe(first((s) => s.state === JscadStateEnum.initialised))
-        .subscribe(() => {
-          console.log('JSCAD Initialized');
-          nrResolved++;
-          checkIfAllInitialized();
-        });
+
+    if (options.enableManifold) {
+        anyKernelSelectedForInit = true;
+        if (bitbybit.manifoldWorkerManager) {
+        initializationPromises.push(
+            firstValueFrom(
+            bitbybit.manifoldWorkerManager.manifoldWorkerState$.pipe(
+                first((s) => s.state === ManifoldStateEnum.initialised),
+                tap(() => console.log('Manifold Initialized'))
+            )
+            ).then(() => {})
+        );
+        } else {
+        console.warn(
+            'Manifold enabled in options, but manifoldWorkerManager not found after init.'
+        );
+        }
     }
-    if (options.enableManifold && bitbybit.manifoldWorkerManager) {
-      resolutionsNeeded++;
-      bitbybit.manifoldWorkerManager.manifoldWorkerState$
-        .pipe(first((s) => s.state === ManifoldStateEnum.initialised))
-        .subscribe(() => {
-          console.log('Manifold Initialized');
-          nrResolved++;
-          checkIfAllInitialized();
-        });
+
+    // 4. Wait for selected & available kernels or handle no selection/availability
+    if (!anyKernelSelectedForInit) {
+        console.log('No kernels selected for initialization.');
+        return { message: 'No kernels selected for initialization.' };
     }
 
-    // If no kernels were selected to be enabled
-    if (resolutionsNeeded === 0) {
-      console.log('No kernels selected for initialization.');
-      resolve({ message: 'No kernels selected for initialization.' });
+    if (initializationPromises.length === 0) {
+        // Kernels were selected, but none were awaitable (e.g., managers missing for all selected)
+        console.log(
+        'Kernels were selected, but none had managers available for awaiting initialization.'
+        );
+        return {
+        message: 'Selected kernels were not awaitable for initialization state.',
+        };
     }
-  });
+
+    await Promise.all(initializationPromises);
+    console.log('Selected and awaitable kernels initialized:', options);
+    return {
+        message: 'Selected and awaitable kernels initialized successfully.',
+    };
 }
 
 // --- 6. Geometry Creation Functions (Examples) ---