Skip to main content

Materials and the look of a model

A shape has no colour: the look belongs to the drawing. Three things decide it.

Colours and edges​

The drawing options set a face colour, an edge colour and width, opacity, and whether to draw edges, faces and vertices at all: bitbybit.draw.optionsOcctShape for OpenCascade shapes, and options of their own for Manifold and JSCAD shapes, points and lines. Draw examples shows them. Colours are hex text such as #d4a85a, or numbers from 0 to 1, never 0 to 255; Conventions says why.

Materials​

For a model that should look made of something, give its faces a physically based material (PBR): bitbybit.draw.createPBRMaterial describes a surface by its base colour, how metallic it is from 0 to 1, and how rough from 0 for a mirror to 1 for chalk. Pass it as the face material in bitbybit.draw.optionsOcctShapeMaterial:

Bitbybit Platform

A sphere in satin gold in Rete

rete logoRete
Script Source (rete)
{
  "id": "rete-v2-json",
  "nodes": {
    "sphere": {
      "id": "sphere",
      "name": "bitbybit.occt.shapes.solid.createSphere",
      "customName": "sphere",
      "async": true,
      "drawable": true,
      "data": {
        "genericNodeData": {
          "hide": true,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "radius": 3,
        "center": [
          0,
          0,
          0
        ]
      },
      "inputs": {},
      "position": [
        40,
        40
      ]
    },
    "metal": {
      "id": "metal",
      "name": "bitbybit.draw.createPBRMaterial",
      "customName": "create pbr material",
      "async": false,
      "drawable": false,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "name": "PBRMaterial",
        "baseColor": "#e8c27a",
        "metallic": 0.8,
        "roughness": 0.35,
        "alpha": 1,
        "emissiveColor": "#000000",
        "emissiveIntensity": 1,
        "zOffset": 0,
        "zOffsetUnits": 0,
        "alphaMode": "opaque",
        "alphaCutoff": 0.5,
        "doubleSided": false,
        "wireframe": false,
        "unlit": false
      },
      "inputs": {},
      "position": [
        40,
        360
      ]
    },
    "options": {
      "id": "options",
      "name": "bitbybit.draw.optionsOcctShapeMaterial",
      "customName": "options occt shape material",
      "async": false,
      "drawable": false,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "precision": 0.01,
        "drawEdges": true,
        "edgeColour": "#ffffff",
        "edgeWidth": 2
      },
      "inputs": {
        "faceMaterial": {
          "connections": [
            {
              "node": "metal",
              "output": "result",
              "data": {}
            }
          ]
        }
      },
      "position": [
        460,
        360
      ]
    },
    "draw": {
      "id": "draw",
      "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": "sphere",
              "output": "result",
              "data": {}
            }
          ]
        },
        "options": {
          "connections": [
            {
              "node": "options",
              "output": "result",
              "data": {}
            }
          ]
        }
      },
      "position": [
        880,
        40
      ]
    }
  },
  "modules": {}
}

Metal looks like metal only when it has something to reflect, so a PBR material shines once the scene has an environment. A material can also take textures, transparency and a glow of its own.

Lights and the scene​

The rest of the look is the scene: its background, its lights and their shadows, and the environment that metals reflect. In the coding editors these are bitbybit.babylon.scene functions, such as drawDirectionalLight for a sun that casts shadows; with the npm packages you set them up in the engine you use.