BabylonJS Full Runner

The full runner bundles Babylon.js together with Bitbybit, so you don't need to load Babylon.js separately. This makes setup simpler but results in a larger bundle size.

Live Example

StackBlitz - Babylon.js Full Runner Example

Complete Example

Below is a complete example that creates a parametric lofted surface with rectangle holes using OCCT:

<!doctype html>
<html lang="en">

<head>
    <title>Bitbybit Runner BabylonJS Full Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Load the full BabylonJS runner (includes BabylonJS) -->
    <script src="https://git-cdn.bitbybit.dev/latest/runner/bitbybit-runner-babylonjs.js"></script>
    <script>
        // Timeout ensures canvas element is available
        setTimeout(async () => {

            const runnerOptions = {
                canvasId: 'myCanvas',
                canvasZoneClass: 'myCanvasZone',
                enableOCCT: true,
                enableJSCAD: false,
                enableManifold: false,
                cameraPosition: [20, 10, 20],
                cameraTarget: [10, 5, 0],
                backgroundColor: "#1a1c1f",
                loadFonts: ['Roboto'],
            };

            const runner = window.bitbybitRunner.getRunnerInstance();
            const { bitbybit, Bit, BABYLON, GUI, scene } = await runner.run(
                runnerOptions
            );

            // Model parameters
            const model = {
                uRec: 16,
                vRec: 16,
                rounding: 0.5,
                drawEdges: true,
                drawFaces: true,
                color: '#6600ff'
            }

            // Create curve points for lofting
            const curvePts = [
                [[-10, 0, -10], [0, 3, -10], [10, -1, -10], [20, 2, -10]],
                [[-10, -5, 0], [0, -3, 0], [10, 1, 0], [20, -2, 0]],
                [[-10, 0, 10], [0, 3, 10], [10, -1, 10], [20, 2, 10]]
            ];

            // Create wires from interpolated points
            const wirePromises = curvePts.map((pts) => {
                return bitbybit.occt.shapes.wire.interpolatePoints({
                    points: pts, periodic: false, tolerance: 1e-7
                });
            });

            const wires = await Promise.all(wirePromises);
            const loft = await bitbybit.occt.operations.loft({ shapes: wires, makeSolid: false });
            const translated = await bitbybit.occt.transforms.translate({ shape: loft, translation: [0, 10, 0] });
            const faces = await bitbybit.occt.shapes.face.getFaces({ shape: translated });

            // Subdivide face with rectangle holes
            const subdivideOptions = new Bit.Inputs.OCCT.FaceSubdivideToRectangleHolesDto(faces[0]);
            subdivideOptions.nrRectanglesU = model.vRec;
            subdivideOptions.nrRectanglesV = model.uRec;
            subdivideOptions.scalePatternU = [0.9, 0.5, 0.7];
            subdivideOptions.scalePatternV = [0.9, 0.5, 0.7];
            subdivideOptions.filletPattern = [model.rounding];
            subdivideOptions.inclusionPattern = [false, true, true, true, true];
            subdivideOptions.offsetFromBorderU = 0.01;
            subdivideOptions.offsetFromBorderV = 0.01;

            const withHoles = await bitbybit.occt.shapes.face.subdivideToRectangleHoles(subdivideOptions);
            const finalShape = await bitbybit.occt.operations.makeThickSolidSimple({
                shape: withHoles[0], offset: 0.5
            });

            // Draw options
            const options = new Bit.Inputs.Draw.DrawOcctShapeOptions();
            options.precision = 0.02;
            options.drawEdges = model.drawEdges;
            options.drawFaces = model.drawFaces;
            options.drawVertices = false;
            options.edgeColour = "#000000";
            options.faceColour = model.color;

            const group = await bitbybit.draw.drawAnyAsync({ entity: finalShape, options });

        }, 0);
    </script>
    <style>
        body {
            margin: 0;
            background-color: #1a1c1f;
        }
        #myCanvas {
            display: block;
            width: 100%;
            height: 100vh;
        }
        .myCanvasZone {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div className="myCanvasZone">
        <canvas id="myCanvas"></canvas>
    </div>
</body>

</html>

Key Points

Runner Script

<script src="https://git-cdn.bitbybit.dev/latest/runner/bitbybit-runner-babylonjs.js"></script>

The full runner includes BabylonJS, so you don't need to load it separately.

Using setTimeout

setTimeout(async () => {
    // Your code here
}, 0);

Unlike PlayCanvas and ThreeJS runners, the BabylonJS runner often uses setTimeout to ensure the canvas element is fully rendered before initialization.

Initialization

const runner = window.bitbybitRunner.getRunnerInstance();
const { bitbybit, Bit, BABYLON, GUI, scene } = await runner.run(runnerOptions);

The run() method returns:

• bitbybit - The main Bitbybit API object
• Bit - Helper classes including input DTOs
• BABYLON - The BabylonJS library itself
• GUI - BabylonJS GUI library for UI elements
• scene - The BabylonJS Scene

Additional Options

The BabylonJS runner supports additional options:

Option	Type	Description
canvasId	string	The ID of your canvas element
canvasZoneClass	string	CSS class for the canvas container
enableOCCT	boolean	Enable the Bitbybit OCCT Kernel
enableJSCAD	boolean	Enable JSCAD kernel
enableManifold	boolean	Enable Manifold kernel
enablePhysics	boolean	Enable Havok physics
enableKeyEventListeners	boolean	Enable keyboard event listeners
cameraPosition	number[]	Initial camera position [x, y, z]
cameraTarget	number[]	Camera look-at target [x, y, z]
backgroundColor	string	Scene background color (hex)
loadFonts	string[]	Fonts to load for text operations

Executing Rete Scripts

You can also execute exported Rete scripts:

const runner = window.bitbybitRunner.getRunnerInstance();
const { bitbybit, Bit, BABYLON, GUI } = await runner.run(runnerOptions);

// Execute an exported Rete script
runner.executeScript(exportedScriptString, { /* inputs */ });

GitHub Source

View the full source code on GitHub: BabylonJS Full Runner Examples