Tips on recreating this specific material

Questions
,
1

Hello all, looking for some advise to recreate a very specific material (see the video attached)

The material I try to recreate is a carbon material that has a chrome/metal effect with a color printed glass layer on top. I’m building a product configurator for it and have tried many different material options and settings. Since the material I’m trying to recreate is so specific and there are so many options I decided to ask for advise since there are many people here with much more knowledge and experience than me.

Any help is much appreciated, thanks in advance!

You can see what I currently have here: Board Configurator2 | Boardschmiede Custom Shaped Kiteboards (creativist-lab.com)
And this is what the material should look like

2

I suggest you start with MeshPhysicalMaterial and its clear coat features. The clear coat shading model is often used for special materials like carbon fiber or automotive paint. It is ideal for representing so called multi layer materials. Meaning materials with a thin translucent layer over a standard layer.

The official three.js clear coat example looks like so: three.js examples

1 Like
3

BTW: glTF can understand clear coat via its KHR_materials_clearcoat extension. So it would the ideal 3D format for representing your board models.

1 Like
4

Thanks for your tips, I will give them a go! :slight_smile:

5

Hello @Mugen87 sorry for this maybe obvious question but how can I implement this KHR_materials_clearcoat extension I tried to find more info about it but it’s unclear to me.
I found this example: three.js examples which also uses a Khronos extension to add transmission but also here it is unclear for me how they implemented this extension.

So is this standard available in the GLTF Loader or should I import this extension from somewhere… Or maybe I should just ask if you have a different kind of example available on how this works.

Update

So I found in the Blender manual about gltf and so is it correct that I apply this KHR_materials_clearcoat extension into my 3D file and this is the only way of using these gltf extensions?

And last question (hopefully) would it also be best practice to include a normal map into my 3D file?

Thanks.

6

For whoever is wondering how to use these KHR extensions I found this exporter by Don Mccurdy https://gltf.report/ with this exporter you can run these extensions and assign them to your materials

import {
    MaterialsIOR,
    MaterialsSpecular,
    MaterialsTransmission,
    MaterialsVolume,
    MaterialsClearcoat,
    Clearcoat,
    
} from '@gltf-transform/extensions';

// Register extensions, and define extension material properties.

const transmissionExt = document.createExtension(MaterialsTransmission);
const transmission = transmissionExt.createTransmission()
    .setTransmissionFactor(1.0);

const volumeExt = document.createExtension(MaterialsVolume);
const volume = volumeExt.createVolume()
    .setThicknessFactor(1.0)
    .setAttenuationDistance(1.0)
    .setAttenuationColorHex(0x4285f4);

const iorExt = document.createExtension(MaterialsIOR);
const ior = iorExt.createIOR()
    .setIOR(1.75);

const specularExt = document.createExtension(MaterialsSpecular);
const specular = specularExt.createSpecular()
    .setSpecularFactor(1.0);

const clearcoatExtension = document.createExtension(MaterialsClearcoat);
const clearcoat = clearcoatExtension.createClearcoat()
    .setClearcoatFactor(1.0);

// Update material.

const material = document.getRoot()
    .listMaterials()
    .find((mat) => mat.getName() === 'MyMaterial');

material
    .setAlphaMode('OPAQUE')
    .setMetallicFactor(0.0)
    .setRoughnessFactor(0.2)
    .setExtension('KHR_materials_transmission', transmission)
    .setExtension('KHR_materials_volume', volume)
    .setExtension('KHR_materials_ior', ior)
    .setExtension('KHR_materials_specular', specular)
    .setExtension('KHR_materials_clearcoat', clearcoat);

If there is something incorrect about what I’m typing here, please correct this since I’m not an expert at all :slight_smile:

7

Could you please explain how I use that to get it into Blender?