Skip to main content

BabylonJS in scripts

The kernels make geometry; drawing puts it in a scene. bitbybit.babylon works on that scene: what is behind the model, how it is lit, where the camera stands, what the materials are, what a person can click and drag, and what goes in and out as files. It is the largest namespace of the API, because a scene has many parts.

These functions belong to BabylonJS, the engine of the coding editors and of the @bitbybit-dev/babylonjs package. The ThreeJS and PlayCanvas packages have their own, smaller bitbybit.three and bitbybit.playcanvas namespaces, and the kernels and draw are the same under all three.

Shaping the scene​

A script usually sets the stage first and then draws: a background, a light that casts shadows, then the parts. Every shape drawn after a light with shadows casts and receives them:

Bitbybit Platform

A part on a lit stage in Rete

rete logoRete
Script Source (rete)
{
  "id": "rete-v2-json",
  "nodes": {
    "background": {
      "id": "background",
      "name": "bitbybit.babylon.scene.twoColorLinearGradientBackground",
      "customName": "two color linear gradient background",
      "async": false,
      "drawable": false,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "colorFrom": "#1a1c1f",
        "colorTo": "#5b6b82",
        "direction": "to bottom",
        "stopFrom": 0,
        "stopTo": 100
      },
      "inputs": {},
      "position": [
        40,
        40
      ]
    },
    "sun": {
      "id": "sun",
      "name": "bitbybit.babylon.scene.drawDirectionalLight",
      "customName": "draw directional light",
      "async": false,
      "drawable": false,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "direction": [
          -1,
          -2,
          -1
        ],
        "intensity": 3,
        "diffuse": "#ffffff",
        "specular": "#ffffff",
        "shadowGeneratorMapSize": 1024,
        "enableShadows": true,
        "shadowDarkness": 0,
        "shadowUsePercentageCloserFiltering": true,
        "transparencyShadow": false,
        "shadowContactHardeningLightSizeUVRatio": 0.2,
        "shadowBias": 0.0001,
        "shadowNormalBias": 0.002,
        "shadowMaxZ": 1000,
        "shadowMinZ": 0,
        "shadowRefreshRate": 1
      },
      "inputs": {},
      "position": [
        40,
        460
      ]
    },
    "part": {
      "id": "part",
      "name": "bitbybit.occt.shapes.solid.createCylinder",
      "customName": "cylinder",
      "async": true,
      "drawable": true,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "radius": 1.5,
        "height": 3,
        "center": [
          0,
          0,
          0
        ],
        "direction": [
          0,
          1,
          0
        ],
        "angle": 360,
        "originOnCenter": false
      },
      "inputs": {},
      "position": [
        460,
        40
      ]
    },
    "ground": {
      "id": "ground",
      "name": "bitbybit.occt.shapes.solid.createBox",
      "customName": "box",
      "async": true,
      "drawable": true,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "width": 12,
        "length": 12,
        "height": 0.2,
        "center": [
          0,
          -0.1,
          0
        ],
        "originOnCenter": true
      },
      "inputs": {},
      "position": [
        460,
        460
      ]
    }
  },
  "modules": {}
}

Each run starts with a fresh scene, so the stage is set again every time the script runs.

Beyond the functions​

bitbybit.babylon.scene.getScene hands you the BabylonJS scene itself, and in the TypeScript editor BABYLON is the whole engine: anything the functions here do not cover, the BabylonJS documentation does. What a script runs in lists what a script can reach.

The namespaces​

NamespaceWhat it is forFunctionsExplained in
guiThe in-scene 2D interface: buttons, sliders, checkboxes, color pickers, text blocks, input fields, images and the containers that lay them out.107read
gizmoThe on-screen manipulators that let a user move, rotate and scale an object by dragging it.74read
meshWorking with meshes already in the BabylonJS scene, the objects draw.drawAnyAsync gives back.54read
materialMaterials: physically-based surfaces with base color, metallic and roughness, emissive and ambient contributions, transparency, and the texture slots that drive each of them.40read
sceneThe BabylonJS scene as a whole.27read
meshBuilderBabylonJS's own mesh primitives, built straight into the scene as ready-to-render meshes rather than through a CAD kernel.21read
nodeTransform nodes: invisible points with a position and an orientation that meshes and other nodes can be parented to, so a whole group moves as one.21read
cameraCameras of the BabylonJS scene.15read
gltfAdvanced glTF/glb tooling on top of the basic import/export in io.12read
ioLoading models into the scene and exporting it.11read
pickFinding what is under a ray or the pointer.11read
transformsBuilds transformation matrices for moving, rotating and scaling geometry, using the BabylonJS math.11read
rayRays: a start point and a direction, optionally with a length, used to pick what lies along a line of sight or to test intersections.6read
decalSticking images onto meshes, the way a label or a logo sits on a product.4read
gaussianSplattingGaussian splatting scenes, captured real-world environments stored as clouds of soft colored blobs in .ply files, loaded into the scene as meshes that can be moved, cloned and shadowed like any other.3read
webXrWebXR: entering virtual or augmented reality from the browser, with controller input, teleportation and hit testing against the real world.3read
engineThe rendering engine itself: the render loop, canvas sizing and resolution, hardware scaling and the frame-level settings that decide how much work each frame does.2read
lightsScene lighting: point, directional, spot and hemispheric lights, their intensity, color and range, and the shadow settings that go with them.2read
textureTextures, the images a material spreads over a surface.2read
toolsUtilities around the rendered image.2read