Script: GUI Example CAD Configurator

let computing = false;
let previousStarMesh: BABYLON.Mesh;
let previousStarShape: Bit.Inputs.OCCT.TopoDSShapePointer;
let previousMeshInstances: BABYLON.InstancedMesh[] = [];

type Model = {
    nrRays: number,
    innerRadius: number,
    outerRadius: number,
    nrSections: number
}

const model: Model = {
    nrRays: 5,
    nrSections: 3,
    innerRadius: 1,
    outerRadius: 3,
}

const start = async () => {
    bitbybit.draw.drawGridMesh(new Bit.Inputs.Draw.SceneDrawGridMeshDto())
    createGUI();

    const dirLight = new Bit.Inputs.BabylonScene.DirectionalLightDto();
    dirLight.direction = [-20, -20, -20];
    dirLight.shadowGeneratorMapSize = 2056;
    dirLight.intensity = 4;
    bitbybit.babylon.scene.drawDirectionalLight(dirLight);

    createShape(model);

    const skyBoxOptions = new Bit.Inputs.BabylonScene.SkyboxDto();

    skyBoxOptions.skybox = Bit.Inputs.Base.skyboxEnum.default;
    skyBoxOptions.blur = 5;
    bitbybit.babylon.scene.enableSkybox(skyBoxOptions);
}

start();

async function createShape(m: Model) {
    computing = true;
    await disposePrevious();

    const shapesToDelete = [];

    const star1 = await bitbybit.occt.shapes.wire.createStarWire({
        numRays: m.nrRays,
        innerRadius: m.innerRadius,
        outerRadius: m.outerRadius,
        center: [0, 0, 0],
        direction: [0, 1, 0],
        half: false,
    });

    const star2 = await bitbybit.occt.shapes.wire.createStarWire({
        numRays: m.nrRays,
        innerRadius: m.innerRadius,
        outerRadius: m.outerRadius,
        center: [0, Math.random(), 0],
        direction: [0, 1, 0],
        half: false,
    });

    shapesToDelete.push(star1, star2);

    const cornerPoints1 = await bitbybit.occt.shapes.edge.getCornerPointsOfEdgesForShape({ shape: star1 });
    const cornerPoints2 = await bitbybit.occt.shapes.edge.getCornerPointsOfEdgesForShape({ shape: star2 });
    const pts = [];

    for (let i = 0; i < cornerPoints1.length; i++) {
        if (i % 2 === 0) {
            const pt = cornerPoints2[i];
            pt[1] += Math.random() * 2;
            pts.push(pt);
        } else {
            const pt = cornerPoints1[i];
            pts.push(pt);
        }
    }

    const flower = await bitbybit.occt.shapes.wire.createPolygonWire({
        points: pts,
    });

    shapesToDelete.push(flower);

    const flowerFillet = await bitbybit.occt.fillets.fillet3DWire({
        shape: flower,
        direction: [0, 10, 0],
        radius: 360 / m.nrRays / 600,
    });

    shapesToDelete.push(flowerFillet);

    const flowers = [];
    for (let r = 1; r <= m.nrSections; r++) {

        const scaled = await bitbybit.occt.transforms.scale3d({
            shape: flowerFillet,
            scale: [1 / r, r % 2 === 0 ? r / m.nrSections * 2 : r / m.nrSections * 1.5, 1 / r],
            center: [0, 0, 0],
        });

        shapesToDelete.push(scaled);

        const translated = await bitbybit.occt.transforms.translate({
            shape: scaled,
            translation: [0, r % 2 === 0 ? r / 4 : r / 3, 0]
        });

        flowers.push(translated);
        shapesToDelete.push(translated);
    }

    const mirrored = await bitbybit.occt.transforms.mirrorAlongNormalShapes({
        shapes: flowers,
        normals: flowers.map(() => [0, -1, 0]),
        origins: flowers.map(() => [0, 0, 0]),
    });

    mirrored.reverse().forEach(m => {
        flowers.push(m);
        shapesToDelete.push(m);
    })

    const loftOptions = new Bit.Inputs.OCCT.LoftAdvancedDto<Bit.Inputs.OCCT.TopoDSWirePointer>(flowers);
    loftOptions.straight = true;
    loftOptions.closed = true;
    loftOptions.makeSolid = true;
    previousStarShape = await bitbybit.occt.operations.loftAdvanced(loftOptions)

    const options = new Bit.Inputs.Draw.DrawOcctShapeOptions();
    options.precision = 0.01;
    options.drawEdges = true;
    options.edgeWidth = 0.5;
    options.edgeColour = "#f0b89d";

    const mat = new BABYLON.PBRMetallicRoughnessMaterial("mat");
    mat.roughness = 0.1;
    mat.baseColor = new BABYLON.Color3(1, 1, 1);
    mat.zOffset = 1;
    mat.metallic = 0.9;
    options.faceMaterial = mat;

    previousStarMesh = await bitbybit.draw.drawAnyAsync({ entity: previousStarShape, options });

    await bitbybit.occt.deleteShapes({
        shapes: shapesToDelete
    })

    // previousStarMesh.receiveShadows = true;
    const meshes = previousStarMesh.getChildMeshes();
    const coord = 60;
    const step = 10;
    for (let x = -coord; x < coord; x += step) {
        for (let z = -coord; z < coord; z += step) {
            const randomAngle = Math.random();
            meshes.forEach((m: BABYLON.Mesh, index) => {
                const inst = m.createInstance(`inst${index}-${x}-${z}`);
                inst.rotateAround(new BABYLON.Vector3(0, 0, 0), new BABYLON.Vector3(0, 1, 0), Math.PI * 2 * randomAngle);
                inst.scaling = new BABYLON.Vector3(1 + randomAngle / 4, 1 + randomAngle, 1 + randomAngle / 4)
                inst.position = new BABYLON.Vector3(x, 0, z);
                previousMeshInstances.push(inst);
            });
        }
    }

    meshes.forEach(m => {
        m.disableEdgesRendering();
        m.isVisible = false;
    });
    previousStarMesh.isVisible = false;
    computing = false;
}


async function disposePrevious() {
    if (previousStarMesh) {
        previousStarMesh.dispose();
    }
    if (previousStarShape) {
        await bitbybit.occt.deleteShape({ shape: previousStarShape });
    }
    if (previousMeshInstances.length) {
        previousMeshInstances.forEach(s => s.dispose());
        previousMeshInstances = [];
    }
}


async function createGUI() {
    var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");

    var panel = new BABYLON.GUI.StackPanel();
    panel.width = "800px";
    panel.background = "#00000055";
    panel.paddingLeftInPixels = 40;
    panel.paddingRightInPixels = 40;
    panel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
    panel.adaptHeightToChildren = true;
    advancedTexture.addControl(panel);

    var header1 = new BABYLON.GUI.TextBlock("GUI EXAMPLE");
    header1.text = "GUI EXAMPLE";
    header1.height = "80px";
    header1.color = "#f0b89d";
    header1.fontSize = "40px"

    panel.addControl(header1);

    const label1 = "Nr Rays:";
    createSliderWithLabel(panel, label1, model.nrRays, 3, 10, 1,
        (slider: BABYLON.GUI.Slider, header: BABYLON.GUI.TextBlock) => {
            header.text = label1 + " " + slider.value;
            model.nrRays = slider.value;
            if (!computing) {
                createShape(model);
            }
        }
    );

    const label2 = "Nr Sections:";
    createSliderWithLabel(panel, label2, model.nrSections, 2, 20, 1,
        (slider: BABYLON.GUI.Slider, header: BABYLON.GUI.TextBlock) => {
            header.text = label2 + " " + slider.value;
            model.nrSections = slider.value;
            if (!computing) {
                createShape(model);
            }
        }
    );

    const label3 = "Inner Radius:";
    createSliderWithLabel(panel, label3, model.innerRadius, 0.4, 3, 0.1,
        (slider: BABYLON.GUI.Slider, header: BABYLON.GUI.TextBlock) => {
            if (slider.value > model.outerRadius) {
                model.innerRadius = model.outerRadius - 0.1;
                slider.value = model.innerRadius;
            } else {
                model.innerRadius = slider.value;
            }
            header.text = label3 + " " + slider.value.toFixed(2);
            if (!computing) {
                createShape(model);
            }
        }
    );

    const label4 = "Outer Radius:";
    createSliderWithLabel(panel, label4, model.outerRadius, 0.4, 3, 0.1,
        (slider: BABYLON.GUI.Slider, header: BABYLON.GUI.TextBlock) => {
            if (slider.value < model.innerRadius) {
                model.outerRadius = model.innerRadius + 0.1;
                slider.value = model.outerRadius;
            } else {
                model.outerRadius = slider.value;
            }
            header.text = label4 + " " + slider.value.toFixed(2);
            if (!computing) {
                createShape(model);
            }
        }
    );

    var header2 = new BABYLON.GUI.TextBlock("bitbybit.dev");
    header2.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_BOTTOM;
    header2.text = "bitbybit.dev";
    header2.height = "120px";
    header2.color = "#f0b89d";
    header2.fontSize = "40px";


    panel.addControl(header2);
}

function createSliderWithLabel(
    panel: BABYLON.GUI.StackPanel,
    name: string,
    defaultVal: number,
    min: number,
    max: number,
    step: number,
    funcToRun: (slider: BABYLON.GUI.Slider, label: BABYLON.GUI.TextBlock) => void
) {
    var header = new BABYLON.GUI.TextBlock(name);
    header.paddingTopInPixels = 10;
    header.text = name + " " + defaultVal;
    header.height = "60px";
    header.color = "white";
    header.fontSize = "30px"

    panel.addControl(header);

    var slider = new BABYLON.GUI.Slider(name);
    slider.thumbColor = "#f0b89d";
    slider.isThumbCircle = true;

    slider.borderColor = "#f0b89d"
    slider.minimum = min;
    slider.maximum = max;
    slider.step = step;
    slider.value = defaultVal;
    slider.paddingLeftInPixels = 10;
    slider.paddingRightInPixels = 10;
    slider.isVertical = false;
    slider.alpha = 1;

    slider.height = "25px";
    slider.onPointerUpObservable.add(() => {

        funcToRun(slider, header);
    });

    panel.addControl(slider);
}