Graphic / Canvas

In the chapters before we learned much about creating models with all it's benefits like features, expressions, sketches and so on, but we didn't really pay attention to the graphics we see in our canvas. To get any graphics there are prinicipally three ways to go on with.

Creating Buffer Geometry
Creating a Scene
Using the BuerliGeometry React Component

Which way to go is up to the user and depending on his application. In our buerli-examples app we use all of them. You will find examples where we create buffer geometry, scenes or simply use our own BuerliGeometry Component. In the end there are always THREE meshes we visualise in the canvas.

1. Creating Buffer Geometry#

BufferGeometry is a threejs class. You can find the documentation here We provide a method called createBufferGeometry() for both of our api's solid and history.

Solid API#

Within the solid API we have seen that creating a model means, that we create an empty part and add solids with different features. In the end we have one or more solids that we want to visualise in the canvas. For the visualisation we call createBufferGeometry() and as a parameter we use the ids of the created solids. The created BufferGeometry can then be used to created meshes, which can be easily visualised in the canvas.

In the buerli-examples we use to call getBufferGeom() to get the meshes step by step from the solid ids. See following snippet:

export const getBufferGeom = async (solidIds: number[], api: ApiNoHistory) => {
  if (!api) return
  const meshes: THREE.Mesh[] = []
  for await (const solidId of solidIds) {
    const geom = await api.createBufferGeometry(solidId)
    const mesh = new THREE.Mesh(
      geom,
      new THREE.MeshStandardMaterial({
        transparent: true,
        opacity: 1,
        color: new THREE.Color('rgb(179, 159, 107)'),
      }),
    )
    meshes.push(mesh)
  }
  return meshes
}

History API#

In the history API it's more or less the same. Instead of solid ids we use a product id. The product can be a part or an assembly. A part or an assembly can include a lot of solids and due to that calling createBufferGeometry() creates an array of BufferGeometry and a lot of THREE meshes. In the end it's the same we visualise in the canvas.

export const getBufferGeom = async (productId: number, api: ApiHistory) => {
  if (!api) return
  const geoms = await api.createBufferGeometry(productId)
  return geoms.map(
    geom => new THREE.Mesh(geom, new THREE.MeshStandardMaterial({ color: new THREE.Color('rgb(52, 89, 87)') })),
  )
}

2. Creating a Scene#

A Scene is a threejs class. You can find the documentation here We provide a method called createScene() for both of our api's solid and history. With this method we can build a visualisation of the created model structure. We build up the same structure in the scene as we have in the part or assembly, doesn't matter if using the solid or the history api.

Solid API#

In the solid api we're only able to work on a single part. That means we can not create assemblies with deep structures and multiple products. This part will be created automatically when solid api will be initialized. See also the api documentation of solid api. All the methods we use to build our solid model, will be called on this part. We can create different solids or edit them with other features. In the end we will have a set of one or more solids, which we're going to visualise in a scene.

In the buerli-examples we use to call getScene() to create a complete scene from solid ids. See the following snippet:

export const getScene = async (solidIds: number[], api: ApiNoHistory) => {
  if (!api) return
  const { scene, solids } = await api.createScene(solidIds)
  scene && colorize(solids)
  return scene
}

const colorize = (solids: THREE.Group[]) => {
  setObjectColor(solids[0], new Color('rgb(88, 55, 99)'))
  setObjectColor(solids[1], new Color('rgb(166, 55, 112)'))
  setObjectTransparency(solids[1], 0.5)
}

An example scene in the solid api has in general the following structure:

drawing

Scene structure

The upper structure belongs to the following model.

drawing

Model created with solid api

This is an example from our public application buerli-examples. The first example you will find there is called "fish" and shows exactly the two fishes from the picture above.

As you can see, we have the scene on the top of the structure. As a child of the scene, we have the Part, which is a Group. This part can have multiple children, which are actually the solids we've been creating and editing in the code. Also the solids are of type Group. At the bottom of the structure we have the meshes. The meshes are actually those objects we can see in the visualisation. Depending on whether we call create scene with meshPerGeometry = true or not, for each geometry element (line, plane, vertex, ...) will be created a own mesh or merged into one single mesh. This flag will always affect all the solids and cannot be chosen for single solids. In the picture above we just listed both possibilities depending on meshPerGeometry flag. For more information see also api documentation of solid api.

As a result of the createScene() method, an object containing all created THREE objects will be returned.

History API#

Whereas in solid api we can only work on parts, in the history api we can build parts and complex assemblies. Beside this difference, calling createScene() is more or less the same. Instead of solids we provide the product id as an input. We also use to call getScene() to create a complete scene from product id. See the following snippet:

export const getScene = async (productId: number, api: ApiHistory) => {
  if (!api) return
  const { scene } = await api.createScene(productId, { meshPerGeometry: true})
  return scene
}

An example scene in the history api has in general the following structure:

drawing

Scene structure

The upper structure belongs to the following model.

drawing

Model created with history api

This is an example from our public application buerli-examples. In the history chapter of the running application you will find an example called "LBracket Assembler". This example shows exactly the model from the picture above.

3. Using the BuerliGeometry React Component#

If React is your JavaScript framework/library you can simply use the BuerliGeometry component. You just have to use this component in the canvas. The component only needs the drawing id, then it will render all geometry in the drawing into the canvas. The drawing id is the id of the drawing where you've created your models. If you only use one drawing at once you also can get rid of the drawing id.

For more details about using the BuerliGeometry and activating selection possibilities see this chapter here