How To Add Textures

In order to add textures in DynaMaker models, we will go through these points:

• Prepare pictures
• Create textures
• Apply textures

1. Prepare Pictures

To add textures to a model, we will use the following pictures to create textures of wood, brick and fabric. In DynaMaker, textures generate a tiled pattern to ensure the surface is covered completely.

To create a feeling of 3D, you can add a normal map, an image that stores a direction at each pixel, faking high-resolution details on low-resolution models. The normal map pictures for the previous examples are:

You can download these examples here.

2. Create Textures

Once we have the pictures, we need to upload them to the project. For this:

• Go to the app dashboard of your app
• Upload all files and give proper names:

• Under Images, create a texture for each material:

3. Apply Textures

Great! Let's add the textures to our model. Textures can be applied to/with:

• Entire model
• Different sides
• Transparency

Entire Model

When you want to apply the same texture to the entire model:

• Go to the component you want to add the texture to
• Make sure ASSETS is imported (it will show up in the list as soon as you have uploaded a file)
• Go to the function where the model is added to the geometry (typically in generateGeometry() in COMPONENT)
• Add the texture to the material and adjust its scale with textureHeight and/or textureWidth:

const materials = [new SKYCAD.Material({ textureId: ASSETS.TEXTURES.WOOD, textureHeight: 100 })]

geometryGroup.addGeometry(model, { materials })

Perfect! You should be able to see a result similar to the following one that uses the template.

Different Sides

When you want to apply a texture to a specific side or face of your model:

• Go back to your component model and its material
• keep adding more materials to different surfaces, use arguments:
  • surfaceGroup: SKYCAD.SURFACE_GROUP to specify the surface according to the CAD features used.
  • or surfaceIndexList: number[] to specify a list of individual surfaces (e.g. up to 6 for this cube)

const materials = [
  new SKYCAD.Material({
    textureId: ASSETS.TEXTURES.WOOD,
    textureHeight: 100,
    surfaceGroup: SKYCAD.SURFACE_GROUP.BASE,
  }),
  new SKYCAD.Material({
    textureId: ASSETS.TEXTURES.BRICK,
    textureHeight: 75,
    surfaceGroup: SKYCAD.SURFACE_GROUP.SIDE,
  }),
  new SKYCAD.Material({
    textureId: ASSETS.TEXTURES.FABRIC,
    textureHeight: 300,
    surfaceGroup: SKYCAD.SURFACE_GROUP.TOP,
  }),
]

Here the cube is extruded at an angle so that the base is visible.

Transparent Textures

As a way of optimizing your models, having textures with transparent background will help tremendously with the app performance. E.g. each wire or hole of a mesh-grid wall doesn't need to be modelled since it would come with the texture.

When you have pictures (must be in PNG format) that have transparent background like these (download to try them out below):

• Mesh circle (.png).
• Mesh square (.png).

then you need to use transparent: true in your material to enable the transparent background and make sure the render reads the transparent background of your PNG pictures correctly, as:

const meshCircleMaterial = new SKYCAD.Material({
  textureId: ASSETS.TEXTURES.MESH_CIRCLE,
  transparent: true,
  metalness: 1,
  roughness: 0.1,
})

const meshSquareMaterial = new SKYCAD.Material({
  textureId: ASSETS.TEXTURES.MESH_SQUARE,
  transparent: true,
  metalness: 1,
  roughness: 0.1,
})

Remember that you can still change the material color, opacity, metalness & roughness even with an applied texture. Also, it's important to keep the size of the picture files as low as possible so that the performance of the app is not affected negatively.