Running Visual Scripts with Bitbybit Runner
The Bitbybit platform allows you to create complex 3D geometry and interactive scenes using visual programming environments like Rete. But what if you want to take these creations and run them on your own website, outside of the Bitbybit editor? That's where the Bitbybit Runner comes in!
The Runner is a JavaScript library that can execute scripts exported from our visual editors (like Rete) directly in a browser environment, typically rendering the output using BabylonJS. This tutorial will guide you through the process of using an exported Rete script with the Bitbybit Runner.
The Rete Script: An Alloy Wheel Concept
First, let's look at the Rete script we'll be working with. This script designs a concept for an alloy wheel using various OpenCascade (OCCT) operations. It involves creating lines, rotating them, dividing wires, lofting surfaces, and applying fillets to create a detailed 3D model.
Below is an interactive preview of the Rete visual program. You can see the nodes and connections that define the geometry.
Script Source (rete)
{
"id": "rete-v2-json",
"nodes": {
"218de1dca38c72bc": {
"id": "218de1dca38c72bc",
"name": "bitbybit.occt.shapes.wire.createLineWire",
"customName": "line wire",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"start": [
0,
0,
0
],
"end": [
0,
1,
0
]
},
"inputs": {
"start": {
"connections": [
{
"node": "27dd09ec170f6831",
"output": "result",
"data": {}
}
]
},
"end": {
"connections": [
{
"node": "c1e697d22b075abe",
"output": "result",
"data": {}
}
]
}
},
"position": [
463.9770655687315,
-690.0334145671492
]
},
"c1e697d22b075abe": {
"id": "c1e697d22b075abe",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector xyz",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": 0,
"y": 12,
"z": 0
},
"inputs": {
"y": {
"connections": [
{
"node": "9280461dee58c36d",
"output": "result",
"data": {}
}
]
}
},
"position": [
-38.68771439472241,
-598.1009943333858
]
},
"33ba6afd0829bb36": {
"id": "33ba6afd0829bb36",
"name": "bitbybit.occt.transforms.rotate",
"customName": "rotate",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"axis": [
0,
0,
1
],
"angle": 0
},
"inputs": {
"shape": {
"connections": [
{
"node": "218de1dca38c72bc",
"output": "result",
"data": {}
}
]
},
"axis": {
"connections": [
{
"node": "9df2d8f10055f96d",
"output": "result",
"data": {}
}
]
},
"angle": {
"connections": [
{
"node": "c4d7518a5c7c9f12",
"output": "result",
"data": {}
}
]
}
},
"position": [
1524.1893363159493,
-692.8728305989143
]
},
"63eb627dd7ce84d8": {
"id": "63eb627dd7ce84d8",
"name": "bitbybit.math.number",
"customName": "number",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"number": 20
},
"inputs": {
"number": {
"connections": [
{
"node": "4ea14c12a557b185",
"output": "result",
"data": {}
}
]
}
},
"position": [
-352.682874666375,
-1116.1208427200913
]
},
"539c7a2fa6008c2f": {
"id": "539c7a2fa6008c2f",
"name": "bitbybit.math.twoNrOperation",
"customName": "two nr operation",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"first": 1,
"second": 3,
"operation": "multiply"
},
"inputs": {
"first": {
"connections": [
{
"node": "63eb627dd7ce84d8",
"output": "result",
"data": {}
}
]
}
},
"position": [
123.73665308131605,
-1048.4411748989212
]
},
"9df2d8f10055f96d": {
"id": "9df2d8f10055f96d",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector xyz",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": 0,
"y": 0,
"z": 1
},
"inputs": {},
"position": [
297.9926340309642,
-406.47460687683713
]
},
"c4d7518a5c7c9f12": {
"id": "c4d7518a5c7c9f12",
"name": "bitbybit.math.twoNrOperation",
"customName": "two nr operation",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"first": 360,
"second": 1,
"operation": "divide"
},
"inputs": {
"second": {
"connections": [
{
"node": "539c7a2fa6008c2f",
"output": "result",
"data": {}
}
]
}
},
"position": [
477.04614518345863,
-1032.4671891429125
]
},
"898cfa59ce16b6e3": {
"id": "898cfa59ce16b6e3",
"name": "bitbybit.occt.shapes.wire.divideWireByEqualDistanceToPoints",
"customName": "divide wire by equal distance to points",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"nrOfDivisions": 11,
"removeStartPoint": false,
"removeEndPoint": false
},
"inputs": {
"shape": {
"connections": [
{
"node": "574710eeb6812571",
"output": "result",
"data": {}
}
]
},
"nrOfDivisions": {
"connections": [
{
"node": "d6b5da1ac0160c67",
"output": "result",
"data": {}
}
]
}
},
"position": [
2764.42427410414,
-1331.72190795925
]
},
"108a46af3cccef39": {
"id": "108a46af3cccef39",
"name": "bitbybit.occt.shapes.wire.divideWireByEqualDistanceToPoints",
"customName": "divide wire by equal distance to points",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"nrOfDivisions": 11,
"removeStartPoint": false,
"removeEndPoint": false
},
"inputs": {
"shape": {
"connections": [
{
"node": "33ba6afd0829bb36",
"output": "result",
"data": {}
}
]
},
"nrOfDivisions": {
"connections": [
{
"node": "d6b5da1ac0160c67",
"output": "result",
"data": {}
}
]
}
},
"position": [
2744.5737979853243,
-899.9535901937707
]
},
"4cfd50e9332ae8f2": {
"id": "4cfd50e9332ae8f2",
"name": "bitbybit.lists.createList",
"customName": "create list",
"data": {},
"inputs": {
"listElements": {
"connections": [
{
"node": "4e58c7e4af0c24a9",
"output": "result",
"data": {}
},
{
"node": "c1390d60a49c7805",
"output": "result",
"data": {}
}
]
}
},
"position": [
4050.9650503995235,
-924.8890252304105
]
},
"6a1382db6c67618d": {
"id": "6a1382db6c67618d",
"name": "bitbybit.lists.flipLists",
"customName": "flip lists",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 2,
"forceExecution": false
},
"clone": true
},
"inputs": {
"list": {
"connections": [
{
"node": "4cfd50e9332ae8f2",
"output": "list",
"data": {}
}
]
}
},
"position": [
4309.1493675923275,
-972.6021715474094
]
},
"4e58c7e4af0c24a9": {
"id": "4e58c7e4af0c24a9",
"name": "bitbybit.lists.getByPattern",
"customName": "get by pattern",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"pattern": [
true,
true,
false
]
},
"inputs": {
"list": {
"connections": [
{
"node": "898cfa59ce16b6e3",
"output": "result",
"data": {}
}
]
},
"pattern": {
"connections": [
{
"node": "30fbdcd81979ea71",
"output": "result",
"data": {}
}
]
}
},
"position": [
3612.4614311679484,
-1185.4200484992114
]
},
"30fbdcd81979ea71": {
"id": "30fbdcd81979ea71",
"name": "bitbybit.json.parse",
"customName": "parse",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"text": "[true,false]"
},
"inputs": {},
"position": [
3210.5720865997982,
-1096.9839281462548
]
},
"11bcb1d3ea76d1a3": {
"id": "11bcb1d3ea76d1a3",
"name": "bitbybit.json.parse",
"customName": "parse",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"text": "[false,true]"
},
"inputs": {},
"position": [
3212.72806939763,
-784.3982810219964
]
},
"c1390d60a49c7805": {
"id": "c1390d60a49c7805",
"name": "bitbybit.lists.getByPattern",
"customName": "get by pattern",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": true,
"flatten": 0,
"forceExecution": false
},
"pattern": [
true,
true,
false
]
},
"inputs": {
"list": {
"connections": [
{
"node": "108a46af3cccef39",
"output": "result",
"data": {}
}
]
},
"pattern": {
"connections": [
{
"node": "11bcb1d3ea76d1a3",
"output": "result",
"data": {}
}
]
}
},
"position": [
3604.9524041109667,
-868.5085142743899
]
},
"82b8d769bbc0a138": {
"id": "82b8d769bbc0a138",
"name": "bitbybit.lists.createList",
"customName": "create list",
"data": {},
"inputs": {
"listElements": {
"connections": [
{
"node": "6a1382db6c67618d",
"output": "result",
"data": {}
}
]
}
},
"position": [
4620.886033109589,
-922.1289021432822
]
},
"d7159f6b4997996a": {
"id": "d7159f6b4997996a",
"name": "bitbybit.occt.shapes.wire.createPolylineWire",
"customName": "polyline wire",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"points": {
"connections": [
{
"node": "82b8d769bbc0a138",
"output": "list",
"data": {}
}
]
}
},
"position": [
5328.06016583263,
-948.6626860242721
]
},
"d6b5da1ac0160c67": {
"id": "d6b5da1ac0160c67",
"name": "bitbybit.math.numberSlider",
"customName": "number slider",
"data": {
"options": {
"min": 3,
"max": 11,
"step": 1,
"width": 350
},
"number": 5
},
"inputs": {},
"position": [
1953.1890620117313,
-1053.2235163744144
]
},
"ab0293bbe06d8aa6": {
"id": "ab0293bbe06d8aa6",
"name": "bitbybit.occt.shapes.wire.createLineWire",
"customName": "line wire",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"start": [
0,
0,
0
],
"end": [
0,
1,
0
]
},
"inputs": {
"start": {
"connections": [
{
"node": "a4ace2be030976ff",
"output": "result",
"data": {}
}
]
},
"end": {
"connections": [
{
"node": "c1e697d22b075abe",
"output": "result",
"data": {}
}
]
}
},
"position": [
853.3366877725999,
-1780.6813706462074
]
},
"239f70d64c61eb0c": {
"id": "239f70d64c61eb0c",
"name": "bitbybit.occt.transforms.rotate",
"customName": "rotate",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"axis": [
0,
0,
1
],
"angle": 0
},
"inputs": {
"shape": {
"connections": [
{
"node": "ab0293bbe06d8aa6",
"output": "result",
"data": {}
}
]
},
"axis": {
"connections": [
{
"node": "9df2d8f10055f96d",
"output": "result",
"data": {}
}
]
},
"angle": {
"connections": [
{
"node": "c5d5f1fa36acd2be",
"output": "result",
"data": {}
},
{
"node": "69f3dec1cd5cee4c",
"output": "result",
"data": {}
}
]
}
},
"position": [
1345.170236160506,
-1437.0626742149093
]
},
"c5d5f1fa36acd2be": {
"id": "c5d5f1fa36acd2be",
"name": "bitbybit.math.twoNrOperation",
"customName": "two nr operation",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"first": 1,
"second": 0.4,
"operation": "multiply"
},
"inputs": {
"first": {
"connections": [
{
"node": "c4d7518a5c7c9f12",
"output": "result",
"data": {}
}
]
}
},
"position": [
841.1040788106136,
-1395.4970218701155
]
},
"69f3dec1cd5cee4c": {
"id": "69f3dec1cd5cee4c",
"name": "bitbybit.math.twoNrOperation",
"customName": "two nr operation",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"first": 1,
"second": 0.6,
"operation": "multiply"
},
"inputs": {
"first": {
"connections": [
{
"node": "c4d7518a5c7c9f12",
"output": "result",
"data": {}
}
]
}
},
"position": [
847.4306810721185,
-1121.4487828806232
]
},
"310e4fb12a071300": {
"id": "310e4fb12a071300",
"name": "bitbybit.lists.createList",
"customName": "create list",
"data": {},
"inputs": {
"listElements": {
"connections": [
{
"node": "239f70d64c61eb0c",
"output": "result",
"data": {}
}
]
}
},
"position": [
1635.3262461228103,
-1373.3497828792763
]
},
"574710eeb6812571": {
"id": "574710eeb6812571",
"name": "bitbybit.lists.getItem",
"customName": "get item",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"index": 0,
"clone": true
},
"inputs": {
"list": {
"connections": [
{
"node": "310e4fb12a071300",
"output": "list",
"data": {}
}
]
}
},
"position": [
2074.290194593883,
-1628.1728346688278
]
},
"c7ac6e4d68044881": {
"id": "c7ac6e4d68044881",
"name": "bitbybit.occt.operations.revolve",
"customName": "revolve",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"angle": 360,
"direction": [
0,
1,
0
],
"copy": false
},
"inputs": {
"shape": {
"connections": [
{
"node": "99c6a95eccdd26a5",
"output": "result",
"data": {}
}
]
},
"angle": {
"connections": [
{
"node": "1b8728ff7b7d4ab4",
"output": "result",
"data": {}
}
]
},
"direction": {
"connections": [
{
"node": "9df2d8f10055f96d",
"output": "result",
"data": {}
}
]
}
},
"position": [
6396.943456984986,
-590.7060426127481
]
},
"1b8728ff7b7d4ab4": {
"id": "1b8728ff7b7d4ab4",
"name": "bitbybit.math.oneNrOperation",
"customName": "one nr operation",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"number": 1,
"operation": "negate"
},
"inputs": {
"number": {
"connections": [
{
"node": "c5d5f1fa36acd2be",
"output": "result",
"data": {}
}
]
}
},
"position": [
5819.542198484719,
-358.7120927532194
]
},
"51c6102fecf112e4": {
"id": "51c6102fecf112e4",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector xyz",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": 1,
"y": 0,
"z": 0
},
"inputs": {},
"position": [
15807.862180371982,
672.6619340318884
]
},
"bd78dc05672fb324": {
"id": "bd78dc05672fb324",
"name": "bitbybit.occt.transforms.mirrorAlongNormal",
"customName": "mirror along normal",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"origin": [
0,
0,
0
],
"normal": [
0,
0,
1
]
},
"inputs": {
"shape": {
"connections": [
{
"node": "301265498b340fe3",
"output": "result",
"data": {}
}
]
},
"normal": {
"connections": [
{
"node": "51c6102fecf112e4",
"output": "result",
"data": {}
}
]
}
},
"position": [
16244.965206822037,
564.014994007178
]
},
"7f7881ecd1975e85": {
"id": "7f7881ecd1975e85",
"name": "bitbybit.occt.shapes.wire.createPolylineWire",
"customName": "polyline wire",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"points": {
"connections": [
{
"node": "50f65828ccb2d9dd",
"output": "list",
"data": {}
}
]
}
},
"position": [
7225.950038596082,
-1793.3092586806304
]
},
"b60a01912717fdff": {
"id": "b60a01912717fdff",
"name": "bitbybit.math.numberSlider",
"customName": "number slider",
"data": {
"options": {
"min": 3,
"max": 24,
"step": 1,
"width": 350
},
"number": 12
},
"inputs": {},
"position": [
-1546.687212073175,
-2022.0987377705696
]
},
"24d6afca5d627660": {
"id": "24d6afca5d627660",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector xyz",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": 0,
"y": 0,
"z": 0.05
},
"inputs": {
"y": {
"connections": [
{
"node": "3b189f530d0c393f",
"output": "result",
"data": {}
}
]
}
},
"position": [
6336.897706525033,
-2338.329777514203
]
},
"00ea938a2763f24c": {
"id": "00ea938a2763f24c",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector xyz",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": 0,
"y": 0,
"z": 0
},
"inputs": {
"y": {
"connections": [
{
"node": "b60a01912717fdff",
"output": "result",
"data": {}
}
]
}
},
"position": [
6336.323141826195,
-1983.230843933767
]
},
"3b189f530d0c393f": {
"id": "3b189f530d0c393f",
"name": "bitbybit.math.twoNrOperation",
"customName": "two nr operation",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"first": 1,
"second": 0.4,
"operation": "add"
},
"inputs": {
"first": {
"connections": [
{
"node": "f7efec93735675be",
"output": "item",
"data": {}
}
]
},
"second": {
"connections": [
{
"node": "59f52c258cca6f3c",
"output": "result",
"data": {}
}
]
}
},
"position": [
5639.003435063939,
-2299.215480287385
]
},
"4f8da20792c09b6f": {
"id": "4f8da20792c09b6f",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector xyz",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": 0,
"y": 0,
"z": -1
},
"inputs": {
"y": {
"connections": [
{
"node": "19e3275144eb5cfd",
"output": "result",
"data": {}
}
]
},
"z": {
"connections": [
{
"node": "96748c06ad1a4ff5",
"output": "result",
"data": {}
}
]
}
},
"position": [
6336.722239792438,
-1630.1310479472227
]
},
"19e3275144eb5cfd": {
"id": "19e3275144eb5cfd",
"name": "bitbybit.math.twoNrOperation",
"customName": "two nr operation",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"first": 1,
"second": 0.4,
"operation": "subtract"
},
"inputs": {
"first": {
"connections": [
{
"node": "f7efec93735675be",
"output": "item",
"data": {}
}
]
},
"second": {
"connections": [
{
"node": "59f52c258cca6f3c",
"output": "result",
"data": {}
}
]
}
},
"position": [
5120.271958065713,
-1442.0172915340381
]
},
"f7efec93735675be": {
"id": "f7efec93735675be",
"name": "bitbybit.lists.passThrough",
"customName": "pass through",
"data": {},
"inputs": {
"item": {
"connections": [
{
"node": "b60a01912717fdff",
"output": "result",
"data": {}
}
]
}
},
"position": [
4488.481606713071,
-1626.730617122231
]
},
"0b45f529f59ff88c": {
"id": "0b45f529f59ff88c",
"name": "bitbybit.math.numberSlider",
"customName": "number slider",
"data": {
"options": {
"min": 1,
"max": 12,
"step": 1,
"width": 350
},
"number": 7
},
"inputs": {},
"position": [
-1476.3038081960817,
-2359.8437145260277
]
},
"af6ce4655d64f87a": {
"id": "af6ce4655d64f87a",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector xyz",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": 0,
"y": 0,
"z": 0
},
"inputs": {
"y": {
"connections": [
{
"node": "19e3275144eb5cfd",
"output": "result",
"data": {}
}
]
},
"z": {
"connections": [
{
"node": "1dd93dfe8b142635",
"output": "result",
"data": {}
}
]
}
},
"position": [
6331.093334116769,
-1274.6153120839
]
},
"1dd93dfe8b142635": {
"id": "1dd93dfe8b142635",
"name": "bitbybit.math.twoNrOperation",
"customName": "two nr operation",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"first": 1,
"second": -2,
"operation": "divide"
},
"inputs": {
"first": {
"connections": [
{
"node": "0b45f529f59ff88c",
"output": "result",
"data": {}
}
]
}
},
"position": [
4419.941732444564,
-2336.749809095635
]
},
"96748c06ad1a4ff5": {
"id": "96748c06ad1a4ff5",
"name": "bitbybit.math.twoNrOperation",
"customName": "two nr operation",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"first": 1,
"second": -4,
"operation": "divide"
},
"inputs": {
"first": {
"connections": [
{
"node": "0b45f529f59ff88c",
"output": "result",
"data": {}
}
]
}
},
"position": [
4422.8276210657805,
-1987.927704704189
]
},
"50f65828ccb2d9dd": {
"id": "50f65828ccb2d9dd",
"name": "bitbybit.lists.createList",
"customName": "create list",
"data": {},
"inputs": {
"listElements": {
"connections": [
{
"node": "24d6afca5d627660",
"output": "result",
"data": {}
},
{
"node": "00ea938a2763f24c",
"output": "result",
"data": {}
},
{
"node": "4f8da20792c09b6f",
"output": "result",
"data": {}
},
{
"node": "af6ce4655d64f87a",
"output": "result",
"data": {}
}
]
}
},
"position": [
6932.409825884994,
-1752.490032102593
]
},
"4bdf742bc75e8d2e": {
"id": "4bdf742bc75e8d2e",
"name": "bitbybit.occt.transforms.mirror",
"customName": "mirror",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"origin": [
0,
0,
0
],
"direction": [
0,
0,
1
]
},
"inputs": {
"shape": {
"connections": [
{
"node": "7f7881ecd1975e85",
"output": "result",
"data": {}
}
]
},
"origin": {
"connections": [
{
"node": "af6ce4655d64f87a",
"output": "result",
"data": {}
}
]
},
"direction": {
"connections": [
{
"node": "72e2c6b69df61bcd",
"output": "result",
"data": {}
}
]
}
},
"position": [
7694.379399319224,
-1492.550881878487
]
},
"72e2c6b69df61bcd": {
"id": "72e2c6b69df61bcd",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector xyz",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": 0,
"y": 1,
"z": 0
},
"inputs": {},
"position": [
7112.500322859117,
-985.23165957408
]
},
"6537f22ee2f78bfb": {
"id": "6537f22ee2f78bfb",
"name": "bitbybit.occt.shapes.edge.getCornerPointsOfEdgesForShape",
"customName": "get corner points of edges for shape",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 1,
"forceExecution": false
}
},
"inputs": {
"shape": {
"connections": [
{
"node": "7f7881ecd1975e85",
"output": "result",
"data": {}
}
]
}
},
"position": [
8403.594829400232,
-1802.4238557893957
]
},
"a12ed287d9aee809": {
"id": "a12ed287d9aee809",
"name": "bitbybit.occt.shapes.edge.getCornerPointsOfEdgesForShape",
"customName": "get corner points of edges for shape",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"shape": {
"connections": [
{
"node": "4bdf742bc75e8d2e",
"output": "result",
"data": {}
}
]
}
},
"position": [
8035.839339139097,
-1491.071919432764
]
},
"a0ff91e0843f9dce": {
"id": "a0ff91e0843f9dce",
"name": "bitbybit.lists.removeItemAtIndex",
"customName": "remove item at index",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"index": 3,
"clone": true
},
"inputs": {
"list": {
"connections": [
{
"node": "a12ed287d9aee809",
"output": "result",
"data": {}
}
]
}
},
"position": [
8401.96981661339,
-1491.6010276076381
]
},
"2f95884fa314489f": {
"id": "2f95884fa314489f",
"name": "bitbybit.lists.createList",
"customName": "create list",
"data": {},
"inputs": {
"listElements": {
"connections": [
{
"node": "6537f22ee2f78bfb",
"output": "result",
"data": {}
},
{
"node": "062676b0b9f8c6c2",
"output": "result",
"data": {}
}
]
}
},
"position": [
9214.124092258982,
-1623.0541277697512
]
},
"d063accbc011139c": {
"id": "d063accbc011139c",
"name": "bitbybit.occt.shapes.wire.createPolylineWire",
"customName": "polyline wire",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"points": {
"connections": [
{
"node": "2f95884fa314489f",
"output": "list",
"data": {}
}
]
}
},
"position": [
9508.450000293606,
-1663.9730683037562
]
},
"062676b0b9f8c6c2": {
"id": "062676b0b9f8c6c2",
"name": "bitbybit.lists.reverse",
"customName": "reverse",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 1,
"forceExecution": false
},
"clone": true
},
"inputs": {
"list": {
"connections": [
{
"node": "a0ff91e0843f9dce",
"output": "result",
"data": {}
}
]
}
},
"position": [
8796.542772565803,
-1492.9858647040617
]
},
"8aef39910e687cf4": {
"id": "8aef39910e687cf4",
"name": "bitbybit.occt.fillets.fillet2d",
"customName": "fillet 2d",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"radius": 0.3
},
"inputs": {
"shape": {
"connections": [
{
"node": "d063accbc011139c",
"output": "result",
"data": {}
}
]
}
},
"position": [
11668.600461729047,
-1636.937938799816
]
},
"9280461dee58c36d": {
"id": "9280461dee58c36d",
"name": "bitbybit.math.twoNrOperation",
"customName": "two nr operation",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"first": 1,
"second": 0.4,
"operation": "add"
},
"inputs": {
"first": {
"connections": [
{
"node": "b60a01912717fdff",
"output": "result",
"data": {}
}
]
},
"second": {
"connections": [
{
"node": "59f52c258cca6f3c",
"output": "result",
"data": {}
}
]
}
},
"position": [
-881.6892539114183,
-1465.0326310458486
]
},
"fd7a87e0e7867ad9": {
"id": "fd7a87e0e7867ad9",
"name": "bitbybit.occt.operations.revolve",
"customName": "revolve",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"angle": 360,
"direction": [
0,
1,
0
],
"copy": false
},
"inputs": {
"shape": {
"connections": [
{
"node": "8aef39910e687cf4",
"output": "result",
"data": {}
}
]
},
"direction": {
"connections": [
{
"node": "efff463c80142773",
"output": "result",
"data": {}
}
]
}
},
"position": [
13583.148425061829,
687.4897452392065
]
},
"efff463c80142773": {
"id": "efff463c80142773",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector xyz",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": 0,
"y": 0,
"z": 1
},
"inputs": {},
"position": [
12804.07274420045,
-1048.7494709200005
]
},
"59f52c258cca6f3c": {
"id": "59f52c258cca6f3c",
"name": "bitbybit.math.number",
"customName": "number",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"number": 0.4
},
"inputs": {},
"position": [
-1440.691032134045,
-1512.8595933032295
]
},
"278db44265aa8fc1": {
"id": "278db44265aa8fc1",
"name": "bitbybit.occt.operations.extrude",
"customName": "extrude",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"direction": [
0,
1,
0
]
},
"inputs": {
"shape": {
"connections": [
{
"node": "c7ac6e4d68044881",
"output": "result",
"data": {}
}
]
},
"direction": {
"connections": [
{
"node": "aae8fc95cfb67c00",
"output": "result",
"data": {}
}
]
}
},
"position": [
8066.081802492367,
-541.0809505778333
]
},
"50c98fedb9ff92b2": {
"id": "50c98fedb9ff92b2",
"name": "bitbybit.lists.passThrough",
"customName": "pass through",
"data": {},
"inputs": {
"item": {
"connections": [
{
"node": "0b45f529f59ff88c",
"output": "result",
"data": {}
}
]
}
},
"position": [
6276.3230506707505,
60.11960507804139
]
},
"da6b1e61c3cde57f": {
"id": "da6b1e61c3cde57f",
"name": "bitbybit.math.twoNrOperation",
"customName": "two nr operation",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"first": 1,
"second": -0.2,
"operation": "multiply"
},
"inputs": {
"first": {
"connections": [
{
"node": "50c98fedb9ff92b2",
"output": "item",
"data": {}
}
]
}
},
"position": [
6605.129234498372,
24.22329732265874
]
},
"aae8fc95cfb67c00": {
"id": "aae8fc95cfb67c00",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector xyz",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": 0,
"y": 0,
"z": 0
},
"inputs": {
"z": {
"connections": [
{
"node": "da6b1e61c3cde57f",
"output": "result",
"data": {}
}
]
}
},
"position": [
7006.914037028376,
-166.01940241082548
]
},
"948058814e677493": {
"id": "948058814e677493",
"name": "bitbybit.occt.shapes.wire.startPointOnWire",
"customName": "start point on wire",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"shape": {
"connections": [
{
"node": "8aef39910e687cf4",
"output": "result",
"data": {}
}
]
}
},
"position": [
13819.438232345128,
-3771.815469131175
]
},
"a0631d093a903e01": {
"id": "a0631d093a903e01",
"name": "bitbybit.occt.shapes.wire.endPointOnWire",
"customName": "end point on wire",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"shape": {
"connections": [
{
"node": "8aef39910e687cf4",
"output": "result",
"data": {}
}
]
}
},
"position": [
13820.697687092576,
-3460.6670966993424
]
},
"e62aa39b99d4fcf2": {
"id": "e62aa39b99d4fcf2",
"name": "bitbybit.occt.operations.revolve",
"customName": "revolve",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"angle": 360,
"direction": [
0,
1,
0
],
"copy": false
},
"inputs": {
"shape": {
"connections": [
{
"node": "e137b928f2d38822",
"output": "result",
"data": {}
}
]
},
"direction": {
"connections": [
{
"node": "efff463c80142773",
"output": "result",
"data": {}
}
]
}
},
"position": [
13454.218698636822,
-1320.250578659114
]
},
"1eb1faa5d75c3289": {
"id": "1eb1faa5d75c3289",
"name": "bitbybit.occt.shapes.solid.fromClosedShell",
"customName": "from closed shell",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"shape": {
"connections": [
{
"node": "e62aa39b99d4fcf2",
"output": "result",
"data": {}
}
]
}
},
"position": [
15011.646730648468,
217.58725171825313
]
},
"301265498b340fe3": {
"id": "301265498b340fe3",
"name": "bitbybit.occt.booleans.difference",
"customName": "difference",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"keepEdges": false
},
"inputs": {
"shape": {
"connections": [
{
"node": "148608b614ad6834",
"output": "result",
"data": {}
}
]
},
"shapes": {
"connections": [
{
"node": "6f6d4bef031a7c37",
"output": "list",
"data": {}
}
]
}
},
"position": [
15801.919593092645,
177.85083180865126
]
},
"6f6d4bef031a7c37": {
"id": "6f6d4bef031a7c37",
"name": "bitbybit.lists.createList",
"customName": "create list",
"data": {},
"inputs": {
"listElements": {
"connections": [
{
"node": "1eb1faa5d75c3289",
"output": "result",
"data": {}
}
]
}
},
"position": [
15500.254122962486,
260.95420195684983
]
},
"c83c0293430b8b1e": {
"id": "c83c0293430b8b1e",
"name": "bitbybit.occt.shapes.compound.makeCompound",
"customName": "make compound",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"shapes": {
"connections": [
{
"node": "61f87ad4e5458146",
"output": "list",
"data": {}
}
]
}
},
"position": [
16991.557831913735,
439.27579366530085
]
},
"61f87ad4e5458146": {
"id": "61f87ad4e5458146",
"name": "bitbybit.lists.createList",
"customName": "create list",
"data": {},
"inputs": {
"listElements": {
"connections": [
{
"node": "bd78dc05672fb324",
"output": "result",
"data": {}
},
{
"node": "301265498b340fe3",
"output": "result",
"data": {}
}
]
}
},
"position": [
16703.613924273395,
459.66244534303814
]
},
"ca1dbfe6c1ce24ab": {
"id": "ca1dbfe6c1ce24ab",
"name": "bitbybit.vector.span",
"customName": "span",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 1,
"forceExecution": false
},
"step": 0.1,
"min": 0,
"max": 360
},
"inputs": {
"step": {
"connections": [
{
"node": "1db980b27d25d23a",
"output": "result",
"data": {}
}
]
}
},
"position": [
10731.415629988505,
1500.7539191970454
]
},
"5f409d2d64a8316e": {
"id": "5f409d2d64a8316e",
"name": "bitbybit.lists.passThrough",
"customName": "pass through",
"data": {},
"inputs": {
"item": {
"connections": [
{
"node": "ca1dbfe6c1ce24ab",
"output": "result",
"data": {}
}
]
}
},
"position": [
17393.623337558958,
-62.715708234054716
]
},
"1db980b27d25d23a": {
"id": "1db980b27d25d23a",
"name": "bitbybit.math.twoNrOperation",
"customName": "two nr operation",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"first": 360,
"second": 1,
"operation": "divide"
},
"inputs": {
"second": {
"connections": [
{
"node": "63eb627dd7ce84d8",
"output": "result",
"data": {}
}
]
}
},
"position": [
273.3776056346687,
-1365.0290530093102
]
},
"27dd09ec170f6831": {
"id": "27dd09ec170f6831",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector xyz",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": 0,
"y": 0,
"z": -1
},
"inputs": {},
"position": [
-237.52524430810408,
-882.2997706834503
]
},
"a4ace2be030976ff": {
"id": "a4ace2be030976ff",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector xyz",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": 0,
"y": 0,
"z": -2
},
"inputs": {},
"position": [
-226.92449703018423,
-1405.4877164899453
]
},
"99c6a95eccdd26a5": {
"id": "99c6a95eccdd26a5",
"name": "bitbybit.occt.fillets.fillet3DWire",
"customName": "fillet 3d wire",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"radius": 1,
"direction": [
0,
1,
0
]
},
"inputs": {
"shape": {
"connections": [
{
"node": "d7159f6b4997996a",
"output": "result",
"data": {}
}
]
},
"direction": {
"connections": [
{
"node": "e59515d70caa2519",
"output": "result",
"data": {}
}
]
}
},
"position": [
5827.459980305608,
-839.1486199384321
]
},
"e59515d70caa2519": {
"id": "e59515d70caa2519",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector xyz",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": 0,
"y": 0,
"z": 1
},
"inputs": {},
"position": [
5296.062625535752,
-669.7621755290653
]
},
"6d6f63c968dd82fe": {
"id": "6d6f63c968dd82fe",
"name": "bitbybit.occt.operations.offset",
"customName": "offset",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"distance": -0.2,
"tolerance": 0.1
},
"inputs": {
"shape": {
"connections": [
{
"node": "fd7a87e0e7867ad9",
"output": "result",
"data": {}
}
]
}
},
"position": [
14286.73175303863,
2085.872052022275
]
},
"bb0f8169ac808b55": {
"id": "bb0f8169ac808b55",
"name": "bitbybit.occt.shapes.edge.getEdge",
"customName": "get edge",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"index": 1
},
"inputs": {
"shape": {
"connections": [
{
"node": "b26b5a7dce39b7ca",
"output": "result",
"data": {}
}
]
}
},
"position": [
15210.52876420759,
1258.1668151960096
]
},
"899032297c6fe977": {
"id": "899032297c6fe977",
"name": "bitbybit.occt.shapes.edge.getEdge",
"customName": "get edge",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"index": 1
},
"inputs": {
"shape": {
"connections": [
{
"node": "bed5c9f41397c9de",
"output": "result",
"data": {}
}
]
}
},
"position": [
15206.590074548398,
1570.0528431656562
]
},
"e4e0d8d0ff2c4ba3": {
"id": "e4e0d8d0ff2c4ba3",
"name": "bitbybit.occt.operations.loft",
"customName": "loft",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"makeSolid": false
},
"inputs": {
"shapes": {
"connections": [
{
"node": "112235b9b1b9f098",
"output": "list",
"data": {}
}
]
}
},
"position": [
16673.203802507178,
1417.0557062942428
]
},
"42a1799056389766": {
"id": "42a1799056389766",
"name": "bitbybit.lists.createList",
"customName": "create list",
"data": {},
"inputs": {
"listElements": {
"connections": [
{
"node": "bb0f8169ac808b55",
"output": "result",
"data": {}
}
]
}
},
"position": [
15558.112694071515,
1322.9382243211492
]
},
"1e5c82c1b09d306b": {
"id": "1e5c82c1b09d306b",
"name": "bitbybit.occt.shapes.wire.combineEdgesAndWiresIntoAWire",
"customName": "combine edges and wires into a wire",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"shapes": {
"connections": [
{
"node": "42a1799056389766",
"output": "list",
"data": {}
}
]
}
},
"position": [
15840.39084418714,
1281.229883372436
]
},
"158e239006e767df": {
"id": "158e239006e767df",
"name": "bitbybit.lists.createList",
"customName": "create list",
"data": {},
"inputs": {
"listElements": {
"connections": [
{
"node": "899032297c6fe977",
"output": "result",
"data": {}
}
]
}
},
"position": [
15556.79596420074,
1621.621698972669
]
},
"d41e1f196f12459d": {
"id": "d41e1f196f12459d",
"name": "bitbybit.occt.shapes.wire.combineEdgesAndWiresIntoAWire",
"customName": "combine edges and wires into a wire",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"shapes": {
"connections": [
{
"node": "158e239006e767df",
"output": "list",
"data": {}
}
]
}
},
"position": [
15840.869113105015,
1577.1341916241563
]
},
"112235b9b1b9f098": {
"id": "112235b9b1b9f098",
"name": "bitbybit.lists.createList",
"customName": "create list",
"data": {},
"inputs": {
"listElements": {
"connections": [
{
"node": "1e5c82c1b09d306b",
"output": "result",
"data": {}
},
{
"node": "d41e1f196f12459d",
"output": "result",
"data": {}
}
]
}
},
"position": [
16355.705337773094,
1461.0705774926546
]
},
"a8d9eb72e55c46f0": {
"id": "a8d9eb72e55c46f0",
"name": "bitbybit.occt.transforms.mirror",
"customName": "mirror",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"origin": [
0,
0,
0
],
"direction": [
0,
0,
1
]
},
"inputs": {
"shape": {
"connections": [
{
"node": "e4e0d8d0ff2c4ba3",
"output": "result",
"data": {}
}
]
},
"origin": {
"connections": [
{
"node": "af6ce4655d64f87a",
"output": "result",
"data": {}
}
]
},
"direction": {
"connections": [
{
"node": "72e2c6b69df61bcd",
"output": "result",
"data": {}
}
]
}
},
"position": [
17221.576824669566,
1961.805887187113
]
},
"5611bc5cf341c2c5": {
"id": "5611bc5cf341c2c5",
"name": "bitbybit.occt.shapes.shell.sewFaces",
"customName": "sew faces",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"tolerance": 1e-7
},
"inputs": {
"shapes": {
"connections": [
{
"node": "2cf3964883634b59",
"output": "list",
"data": {}
}
]
}
},
"position": [
19181.93031016831,
536.3847295249548
]
},
"2cf3964883634b59": {
"id": "2cf3964883634b59",
"name": "bitbybit.lists.createList",
"customName": "create list",
"data": {},
"inputs": {
"listElements": {
"connections": [
{
"node": "fd7a87e0e7867ad9",
"output": "result",
"data": {}
},
{
"node": "6d6f63c968dd82fe",
"output": "result",
"data": {}
},
{
"node": "e4e0d8d0ff2c4ba3",
"output": "result",
"data": {}
},
{
"node": "a8d9eb72e55c46f0",
"output": "result",
"data": {}
}
]
}
},
"position": [
18182.879410285997,
1473.8504141159067
]
},
"b26b5a7dce39b7ca": {
"id": "b26b5a7dce39b7ca",
"name": "bitbybit.occt.shapes.wire.getWire",
"customName": "get wire",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"index": 0
},
"inputs": {
"shape": {
"connections": [
{
"node": "fd7a87e0e7867ad9",
"output": "result",
"data": {}
}
]
}
},
"position": [
14920.711651365296,
1266.6442780883274
]
},
"bed5c9f41397c9de": {
"id": "bed5c9f41397c9de",
"name": "bitbybit.occt.shapes.wire.getWire",
"customName": "get wire",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"index": 0
},
"inputs": {
"shape": {
"connections": [
{
"node": "6d6f63c968dd82fe",
"output": "result",
"data": {}
}
]
}
},
"position": [
14916.31908932537,
1579.1581315287149
]
},
"9d5f8bb663e8e2e9": {
"id": "9d5f8bb663e8e2e9",
"name": "bitbybit.occt.transforms.translate",
"customName": "translate",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"translation": [
0,
0,
0
]
},
"inputs": {
"shape": {
"connections": [
{
"node": "0f87fb6c92285ec0",
"output": "result",
"data": {}
}
]
},
"translation": {
"connections": [
{
"node": "bdb63d4657e64255",
"output": "result",
"data": {}
}
]
}
},
"position": [
15014.135170115842,
-3937.290576774915
]
},
"bdb63d4657e64255": {
"id": "bdb63d4657e64255",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector xyz",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": 0,
"y": 1.5,
"z": 0
},
"inputs": {},
"position": [
14634.048681921173,
-3736.887972066937
]
},
"6b0f4e16b8c5c1ec": {
"id": "6b0f4e16b8c5c1ec",
"name": "bitbybit.occt.shapes.wire.startPointOnWire",
"customName": "start point on wire",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"shape": {
"connections": [
{
"node": "9d5f8bb663e8e2e9",
"output": "result",
"data": {}
}
]
}
},
"position": [
15400.276062276276,
-3778.9191662482817
]
},
"c0fac981d5ad596d": {
"id": "c0fac981d5ad596d",
"name": "bitbybit.occt.shapes.wire.endPointOnWire",
"customName": "end point on wire",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"shape": {
"connections": [
{
"node": "9d5f8bb663e8e2e9",
"output": "result",
"data": {}
}
]
}
},
"position": [
15407.378552330189,
-4050.4620126925915
]
},
"16226b0354579dc7": {
"id": "16226b0354579dc7",
"name": "bitbybit.occt.shapes.wire.createPolylineWire",
"customName": "polyline wire",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"points": {
"connections": [
{
"node": "3a7203056173f3f6",
"output": "list",
"data": {}
}
]
}
},
"position": [
16618.678916921293,
-4056.2323429961543
]
},
"3a7203056173f3f6": {
"id": "3a7203056173f3f6",
"name": "bitbybit.lists.createList",
"customName": "create list",
"data": {},
"inputs": {
"listElements": {
"connections": [
{
"node": "d2796bea06170d1a",
"output": "item",
"data": {}
},
{
"node": "9eda6c9de9061721",
"output": "item",
"data": {}
},
{
"node": "bd5a9a7f478276a2",
"output": "item",
"data": {}
},
{
"node": "9aa8c3c0cd98ee5a",
"output": "item",
"data": {}
}
]
}
},
"position": [
16323.377427204425,
-4014.551230689888
]
},
"166e2a79963ce443": {
"id": "166e2a79963ce443",
"name": "bitbybit.occt.fillets.fillet2d",
"customName": "fillet 2d",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"radius": 0.5
},
"inputs": {
"shape": {
"connections": [
{
"node": "16226b0354579dc7",
"output": "result",
"data": {}
}
]
}
},
"position": [
16970.681325327747,
-4057.982863949031
]
},
"c54e8fc7e048cfb6": {
"id": "c54e8fc7e048cfb6",
"name": "bitbybit.occt.operations.revolve",
"customName": "revolve",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"angle": 360,
"direction": [
0,
1,
0
],
"copy": false
},
"inputs": {
"shape": {
"connections": [
{
"node": "166e2a79963ce443",
"output": "result",
"data": {}
}
]
},
"direction": {
"connections": [
{
"node": "efff463c80142773",
"output": "result",
"data": {}
}
]
}
},
"position": [
17576.18976531281,
-3843.3253435593374
]
},
"27bdb42b822f4911": {
"id": "27bdb42b822f4911",
"name": "bitbybit.occt.operations.makeThickSolidSimple",
"customName": "make thick solid simple",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"offset": -0.1
},
"inputs": {
"shape": {
"connections": [
{
"node": "c54e8fc7e048cfb6",
"output": "result",
"data": {}
}
]
}
},
"position": [
17953.93684930534,
-3846.2524828916003
]
},
"eb60aca680b2bd57": {
"id": "eb60aca680b2bd57",
"name": "bitbybit.draw.drawAnyAsync",
"customName": "draw any async",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"entity": {
"connections": [
{
"node": "27bdb42b822f4911",
"output": "result",
"data": {}
}
]
},
"options": {
"connections": [
{
"node": "8414c69e55e0a8e2",
"output": "result",
"data": {}
}
]
}
},
"position": [
18405.754706257783,
-3685.2189946906815
]
},
"8414c69e55e0a8e2": {
"id": "8414c69e55e0a8e2",
"name": "bitbybit.draw.optionsOcctShape",
"customName": "options occt shape",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"faceOpacity": 0.5,
"edgeOpacity": 0.5,
"edgeColour": "#000000",
"faceColour": "#212121",
"vertexColour": "#ff00ff",
"edgeWidth": 2,
"vertexSize": 0.03,
"drawEdges": true,
"drawFaces": true,
"drawVertices": false,
"precision": 0.02,
"drawEdgeIndexes": false,
"edgeIndexHeight": 0.06,
"edgeIndexColour": "ff00ff",
"drawFaceIndexes": false,
"faceIndexHeight": 0.06,
"faceIndexColour": "#0000ff",
"drawTwoSided": false,
"backFaceColour": "#0000ff",
"backFaceOpacity": 1,
"edgeArrowSize": 0,
"edgeArrowAngle": 15
},
"inputs": {},
"position": [
17926.173606419088,
-3458.2108359350927
]
},
"548bf40187024103": {
"id": "548bf40187024103",
"name": "bitbybit.draw.drawAnyAsync",
"customName": "draw any async",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"entity": {
"connections": [
{
"node": "d19e5de498b1b609",
"output": "result",
"data": {}
}
]
},
"options": {
"connections": [
{
"node": "9229d55076949b73",
"output": "result",
"data": {}
}
]
}
},
"position": [
20281.01654313461,
984.8170487787609
]
},
"9229d55076949b73": {
"id": "9229d55076949b73",
"name": "bitbybit.draw.optionsOcctShape",
"customName": "options occt shape",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"faceOpacity": 1,
"edgeOpacity": 1,
"edgeColour": "#1c1c1c",
"faceColour": "#bdbdbd",
"vertexColour": "#ff00ff",
"edgeWidth": 2,
"vertexSize": 0.03,
"drawEdges": true,
"drawFaces": true,
"drawVertices": false,
"precision": 0.01,
"drawEdgeIndexes": false,
"edgeIndexHeight": 0.06,
"edgeIndexColour": "ff00ff",
"drawFaceIndexes": false,
"faceIndexHeight": 0.06,
"faceIndexColour": "#0000ff",
"drawTwoSided": false,
"backFaceColour": "#0000ff",
"backFaceOpacity": 1,
"edgeArrowSize": 0,
"edgeArrowAngle": 15
},
"inputs": {
"faceMaterial": {
"connections": [
{
"node": "47f801eec7571396",
"output": "result",
"data": {}
}
]
}
},
"position": [
19869.514260154174,
1210.0781707105448
]
},
"d19e5de498b1b609": {
"id": "d19e5de498b1b609",
"name": "bitbybit.occt.shapes.compound.makeCompound",
"customName": "make compound",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"shapes": {
"connections": [
{
"node": "7f8c89b45ba5383c",
"output": "list",
"data": {}
}
]
}
},
"position": [
19912.88733336777,
875.81967596236
]
},
"7f8c89b45ba5383c": {
"id": "7f8c89b45ba5383c",
"name": "bitbybit.lists.createList",
"customName": "create list",
"data": {},
"inputs": {
"listElements": {
"connections": [
{
"node": "5611bc5cf341c2c5",
"output": "result",
"data": {}
},
{
"node": "8a84867ec54bf4cb",
"output": "result",
"data": {}
},
{
"node": "199d203f6262c9f4",
"output": "result",
"data": {}
}
]
}
},
"position": [
19596.13123620488,
912.7014188102432
]
},
"47f801eec7571396": {
"id": "47f801eec7571396",
"name": "bitbybit.babylon.material.pbrMetallicRoughness.create",
"customName": "pbr metallic roughness",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"name": "Custom Material",
"baseColor": "#9c9cba",
"emissiveColor": "#000000",
"metallic": 0.9,
"roughness": 0.25,
"alpha": 1,
"backFaceCulling": false,
"zOffset": 2
},
"inputs": {},
"position": [
19490.357180567935,
1398.7071866943509
]
},
"51a05592542aabd3": {
"id": "51a05592542aabd3",
"name": "bitbybit.occt.shapes.solid.createCylinder",
"customName": "cylinder",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"radius": 3,
"height": 1.9,
"center": [
0,
0,
0
],
"direction": [
0,
1,
0
],
"angle": 360,
"originOnCenter": false
},
"inputs": {
"center": {
"connections": [
{
"node": "8c04db2bdffb66e6",
"output": "result",
"data": {}
}
]
},
"direction": {
"connections": [
{
"node": "46927a3cd9b1ce67",
"output": "result",
"data": {}
}
]
}
},
"position": [
8061.657830160342,
-120.57698819108319
]
},
"46927a3cd9b1ce67": {
"id": "46927a3cd9b1ce67",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector xyz",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": 0,
"y": 0,
"z": -1
},
"inputs": {},
"position": [
7679.705932610722,
292.7821686918612
]
},
"cae005fd4eefec76": {
"id": "cae005fd4eefec76",
"name": "bitbybit.math.twoNrOperation",
"customName": "two nr operation",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"first": 2,
"second": -2,
"operation": "multiply"
},
"inputs": {
"first": {
"connections": [
{
"node": "da6b1e61c3cde57f",
"output": "result",
"data": {}
}
]
}
},
"position": [
7119.647941124932,
258.7503152406175
]
},
"148608b614ad6834": {
"id": "148608b614ad6834",
"name": "bitbybit.occt.booleans.difference",
"customName": "difference",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"keepEdges": false
},
"inputs": {
"shape": {
"connections": [
{
"node": "278db44265aa8fc1",
"output": "result",
"data": {}
}
]
},
"shapes": {
"connections": [
{
"node": "daf9f9b14aa32a90",
"output": "list",
"data": {}
}
]
}
},
"position": [
15029.179584770991,
-161.7509066710379
]
},
"daf9f9b14aa32a90": {
"id": "daf9f9b14aa32a90",
"name": "bitbybit.lists.createList",
"customName": "create list",
"data": {},
"inputs": {
"listElements": {
"connections": [
{
"node": "8a84867ec54bf4cb",
"output": "result",
"data": {}
}
]
}
},
"position": [
14724.620743747013,
-6.337224923464049
]
},
"8c04db2bdffb66e6": {
"id": "8c04db2bdffb66e6",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector xyz",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": 0,
"y": 0,
"z": -1.5
},
"inputs": {},
"position": [
7675.52380947457,
-58.80975529292897
]
},
"8a84867ec54bf4cb": {
"id": "8a84867ec54bf4cb",
"name": "bitbybit.occt.fillets.filletEdges",
"customName": "fillet edges",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"radius": 0.3
},
"inputs": {
"shape": {
"connections": [
{
"node": "51a05592542aabd3",
"output": "result",
"data": {}
}
]
}
},
"position": [
8456.724904276884,
-124.43391763369385
]
},
"d2796bea06170d1a": {
"id": "d2796bea06170d1a",
"name": "bitbybit.lists.passThrough",
"customName": "pass through",
"data": {},
"inputs": {
"item": {
"connections": [
{
"node": "948058814e677493",
"output": "result",
"data": {}
}
]
}
},
"position": [
15905.314297023333,
-4387.912757118142
]
},
"9eda6c9de9061721": {
"id": "9eda6c9de9061721",
"name": "bitbybit.lists.passThrough",
"customName": "pass through",
"data": {},
"inputs": {
"item": {
"connections": [
{
"node": "c0fac981d5ad596d",
"output": "result",
"data": {}
}
]
}
},
"position": [
15922.429479599454,
-4131.864289092536
]
},
"bd5a9a7f478276a2": {
"id": "bd5a9a7f478276a2",
"name": "bitbybit.lists.passThrough",
"customName": "pass through",
"data": {},
"inputs": {
"item": {
"connections": [
{
"node": "6b0f4e16b8c5c1ec",
"output": "result",
"data": {}
}
]
}
},
"position": [
15909.736947389538,
-3868.1914438887584
]
},
"9aa8c3c0cd98ee5a": {
"id": "9aa8c3c0cd98ee5a",
"name": "bitbybit.lists.passThrough",
"customName": "pass through",
"data": {},
"inputs": {
"item": {
"connections": [
{
"node": "a0631d093a903e01",
"output": "result",
"data": {}
}
]
}
},
"position": [
15911.58704966452,
-3573.831039752961
]
},
"4ea14c12a557b185": {
"id": "4ea14c12a557b185",
"name": "bitbybit.math.numberSlider",
"customName": "number slider",
"data": {
"options": {
"min": 10,
"max": 45,
"step": 5,
"width": 350
},
"number": 20
},
"inputs": {},
"position": [
-1638.0348223016942,
-1173.322034477159
]
},
"c53eb7e1abf92656": {
"id": "c53eb7e1abf92656",
"name": "bitbybit.lists.createList",
"customName": "create list",
"data": {},
"inputs": {
"listElements": {
"connections": [
{
"node": "88215ac428ac91df",
"output": "result",
"data": {}
}
]
}
},
"position": [
18879.106347246652,
286.46178086673945
]
},
"199d203f6262c9f4": {
"id": "199d203f6262c9f4",
"name": "bitbybit.occt.shapes.compound.makeCompound",
"customName": "make compound",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"shapes": {
"connections": [
{
"node": "c53eb7e1abf92656",
"output": "list",
"data": {}
}
]
}
},
"position": [
19161.979389872078,
254.88159204345425
]
},
"256c9f4b1e65b4ee": {
"id": "256c9f4b1e65b4ee",
"name": "bitbybit.vector.vectorXYZ",
"customName": "vector xyz",
"async": false,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"x": 0,
"y": 0,
"z": 1
},
"inputs": {},
"position": [
17342.455643248915,
123.93601443134723
]
},
"88215ac428ac91df": {
"id": "88215ac428ac91df",
"name": "bitbybit.occt.transforms.rotateAroundCenter",
"customName": "rotate around center",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"angle": 0,
"center": [
0,
0,
0
],
"axis": [
0,
0,
1
]
},
"inputs": {
"shape": {
"connections": [
{
"node": "c83c0293430b8b1e",
"output": "result",
"data": {}
}
]
},
"angle": {
"connections": [
{
"node": "5f409d2d64a8316e",
"output": "item",
"data": {}
}
]
},
"axis": {
"connections": [
{
"node": "256c9f4b1e65b4ee",
"output": "result",
"data": {}
}
]
}
},
"position": [
18367.240454423154,
241.9130850641768
]
},
"e137b928f2d38822": {
"id": "e137b928f2d38822",
"name": "bitbybit.occt.shapes.wire.closeOpenWire",
"customName": "close open wire",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
}
},
"inputs": {
"shape": {
"connections": [
{
"node": "8aef39910e687cf4",
"output": "result",
"data": {}
}
]
}
},
"position": [
12907.325960629756,
-1453.6011060067995
]
},
"0f87fb6c92285ec0": {
"id": "0f87fb6c92285ec0",
"name": "bitbybit.occt.shapes.wire.createLineWire",
"customName": "line wire",
"async": true,
"drawable": true,
"data": {
"genericNodeData": {
"hide": true,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"start": [
0,
0,
0
],
"end": [
0,
1,
0
]
},
"inputs": {
"start": {
"connections": [
{
"node": "a0631d093a903e01",
"output": "result",
"data": {}
}
]
},
"end": {
"connections": [
{
"node": "948058814e677493",
"output": "result",
"data": {}
}
]
}
},
"position": [
14303.647871513283,
-4095.2189121142246
]
},
"113ed53d255abfb6": {
"id": "113ed53d255abfb6",
"name": "bitbybit.babylon.scene.enableSkybox",
"customName": "enable skybox",
"async": false,
"drawable": false,
"data": {
"genericNodeData": {
"hide": false,
"oneOnOne": false,
"flatten": 0,
"forceExecution": false
},
"skybox": "city",
"size": 1000,
"blur": 0.5,
"environmentIntensity": 0.7,
"hideSkybox": false
},
"inputs": {},
"position": [
-954.5233233679921,
-495.5860112470492
]
}
}
}
Exporting the Script for the Runner
When you are ready to use your Rete script outside the Bitbybit editor, you typically export it in a format that the runner can understand. This usually involves generating a JavaScript function that encapsulates the logic of your visual program. The Bitbybit platform provides an option to "Export to Runner", which gives you a JavaScript string for the Runner. You can even minify it.
The core of this exported JavaScript will be a self-executing asynchronous function that takes instances of BitByBit (the core library), bitbybit (the API access object), bitbybitRunnerResult (for outputs), and bitbybitRunnerInputs (for inputs) as arguments. This static model does not need any of those as it does not take any inputs or produce any outputs for the runner.
Live Demo: Understanding the Runner in Action
To see how all these pieces (HTML, Runner Library, and your exported script logic) come together, we've set up a live demonstration using StackBlitz.
Why is this StackBlitz demo important?
- Simulates Your Website: The StackBlitz environment effectively represents how this setup would work on your own website. It's a self-contained project with its own
index.html,styles.css, andscript.js– just like you would have if you were integrating this into your web application. - Practical Application: It moves beyond theory and shows a tangible example of the runner in use. You can inspect the code, see the rendered 3D output, and understand the minimal requirements for embedding Bitbybit-generated content.
- Deployment Context: This demonstrates that projects built this way are not confined to the Bitbybit platform. You can deploy these kinds of projects on your own hosting providers (like Netlify, Vercel, GitHub Pages, or your own servers) and have full control over the user experience and integration with other web technologies.
- Experimentation Sandbox: StackBlitz allows you (and your users) to fork the example and experiment with changes to the HTML, CSS, or even the
runnerOptionsinscript.jsto see immediate results.
By exploring the StackBlitz demo, you can gain confidence in how to take your visual programs from the Bitbybit editor and bring them to life anywhere on the web.
Setting up Your HTML Page
To use the runner on your own website, you'll need a basic HTML structure.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bitbybit Runner Example</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles.css" />
{/* Step 1: Include the Bitbybit Runner library */}
<script src="https://cdn.jsdelivr.net/gh/bitbybit-dev/bitbybit-assets@latest/runner/bitbybit-runner-babylonjs.js"></script>
{/* Step 2: Include your custom script that uses the runner */}
<script defer type="module" src="script.js"></script>
</head>
<body>
<div class="example">
<a
class="logo"
href="https://bitbybit.dev"
target="_blank"
rel="noopener noreferrer"
>
<img
alt="Logo of Bit by bit developers company"
src="https://bitbybit.dev/assets/logo-gold-small.png"
/>
<div>bitbybit.dev</div>
</a>
<h1>Runner Example - Alloy Wheel</h1>
{/* Step 3: Define a canvas element for rendering */}
<div class="myCanvasZone">
<canvas id="myCanvas"></canvas>
</div>
<a
href="https://bitbybit.dev/projects/public/EMfBhqxbI5DibbwVactv/script/7LRqBI8nFqx32lXiK3G1/script-rete-script-alloy-wheel-cad-model-in-project-3d-alloy-wheel-cad-concept-by-author-matas"
target="_blank"
rel="noopener noreferrer"
>
Link to original Rete script.
</a>
</div>
</body>
</html>
script.js
// Step 1: Define Runner Options
const runnerOptions = {
canvasId: 'myCanvas', // ID of the canvas element in your HTML
canvasZoneClass: 'myCanvasZone',// Class of the canvas container for resizing
enablePhysics: false, // Set to true if your script uses physics
enableOCCT: true, // Crucial: Set to true as our Rete script uses OCCT
enableJSCAD: false, // Set to true if using JSCAD
enableManifold: false, // Set to true if using Manifold
enableKeyEventListeners: false, // Enable if script needs to handle keyboard input (usually only Blockly or TypeScript...)
loadFonts: [], // Array of font file URLs if script uses custom 3D text fonts
};
// Step 2: Get the Runner Instance and Initialize
// The runner is globally available via window.bitbybitRunner after including the library.
const runner = window.bitbybitRunner.getRunnerInstance();
await runner.run(runnerOptions); // Asynchronously initializes the runner and BabylonJS scene
// Step 3: Define or Import Your Exported Rete Script
// This function returns the string of JavaScript code generated from your Rete editor.
// In a real application, this string might be loaded from a file, a database, or embedded directly.
function exportedScript() {
// This is the very long JavaScript string generated by "Export to Runner" from Rete.
// It starts with "!async function(e,t,s,n,r){..." where e=BitByBit, t=bitbybit, etc.
return '{"type":"rete","version":"0.21.0","script":"!async function(e,t,s,n,r){let a={};a={x:[0],y:[0],z:[1],...a};const o=[{result:e.HS.executeBasedOnType(a,!1,(e=>t.vector.vectorXYZ(e))),transformers:[]}]; ... (rest of the very long exported JS string) ... }(BitByBit,bitbybit,bitbybitRunnerResult,bitbybitRunnerInputs,Bit);"}'
}
// Step 4: Execute the Script
// The second argument to executeScript can pass input values to your script if it's designed to accept them.
runner.executeScript(exportedScript(), {});
We also needed some styling to make it pretty... :)
styles.css
body {
margin: 0;
background-color: #1a1c1f;
color: white;
font-weight: 400;
font-family: 'IBM Plex Sans', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: 100%;
height: 100%;
}
.example {
margin-top: 50px;
margin-bottom: 50px;
margin-left: 300px;
margin-right: 300px;
}
@media(max-width:1400px) {
.example {
margin-left: 100px;
margin-right: 100px;
}
}
@media(max-width:769px) {
.example {
margin-left: 20px;
margin-right: 20px;
}
}
#myCanvas {
display: block;
outline: none;
border: 1px solid white;
border-radius: 5px;
width: 100%;
}
.logo {
margin-bottom: 20px;
}
.logo img {
width: 50px;
height: 50px;
}
.myCanvasZone {
margin-top: 20px;
margin-bottom: 10px;
}
a {
color: white;
vertical-align: middle;
}
Conclusion
In this tutorial, you've learned the essential steps to take a visual script created in Bitbybit's Rete editor and run it on an external webpage. We covered how to set up a basic HTML page, include the Bitbybit Runner library, configure runner options (crucially, enabling the OCCT kernel for our example), and finally, execute the exported JavaScript string representing your Rete program. This empowers you to integrate your powerful 3D creations and geometric algorithms directly into your own web projects.