# Tips on recreating this specific material

**URL:** <https://discourse.threejs.org/t/tips-on-recreating-this-specific-material/40443>\
**Category:** Questions\
**Tags:** materials, textures\
**Created:** [July 18, 2022, 7:36am UTC](https://discourse.threejs.org/t/tips-on-recreating-this-specific-material/40443 "2022-07-18T07:36:58Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jeroen](https://avatars.discourse-cdn.com/v4/letter/j/bbe5ce/32.png) [@Jeroen](https://discourse.threejs.org/u/Jeroen)\
**Post date:** [July 18, 2022, 7:36am UTC](https://discourse.threejs.org/t/tips-on-recreating-this-specific-material/40443/1 "2022-07-18T07:36:58Z")

</div>

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)](https://dev.schmiede.creativist-lab.com/board-configurator-2/)  
And this is what the material should look like

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/a/5a26410551f64f0d33a75aa39e080efcd56b54f4.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/a/5a26410551f64f0d33a75aa39e080efcd56b54f4.mp4)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [July 18, 2022, 8:32am UTC](https://discourse.threejs.org/t/tips-on-recreating-this-specific-material/40443/2 "2022-07-18T08:32:50Z")

</div>

> [@Jeroen](#):
>
> 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 suggest you start with [MeshPhysicalMaterial](https://threejs.org/docs/index.html#api/en/materials/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](https://threejs.org/examples/#webgl_materials_physical_clearcoat)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [July 18, 2022, 8:34am UTC](https://discourse.threejs.org/t/tips-on-recreating-this-specific-material/40443/3 "2022-07-18T08:34:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jeroen](https://avatars.discourse-cdn.com/v4/letter/j/bbe5ce/32.png) [@Jeroen](https://discourse.threejs.org/u/Jeroen)\
**Post date:** [July 18, 2022, 8:42am UTC](https://discourse.threejs.org/t/tips-on-recreating-this-specific-material/40443/4 "2022-07-18T08:42:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jeroen](https://avatars.discourse-cdn.com/v4/letter/j/bbe5ce/32.png) [@Jeroen](https://discourse.threejs.org/u/Jeroen)\
**Post date:** [July 18, 2022, 10:51am UTC](https://discourse.threejs.org/t/tips-on-recreating-this-specific-material/40443/5 "2022-07-18T10:51:25Z")

</div>

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](https://threejs.org/examples/?q=gltf#webgl_loader_gltf_transmission) 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.

---

<div class="post-metadata">

**Author:** ![Jeroen](https://avatars.discourse-cdn.com/v4/letter/j/bbe5ce/32.png) [@Jeroen](https://discourse.threejs.org/u/Jeroen)\
**Post date:** [July 21, 2022, 7:28am UTC](https://discourse.threejs.org/t/tips-on-recreating-this-specific-material/40443/6 "2022-07-21T07:28:16Z")

</div>

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

```javascript
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 🙂

---

<div class="post-metadata">

**Author:** ![Ruby\_Rieke](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ruby_rieke/32/38334_2.png) [@Ruby\_Rieke](https://discourse.threejs.org/u/Ruby_Rieke)\
**Post date:** [July 20, 2023, 5:08pm UTC](https://discourse.threejs.org/t/tips-on-recreating-this-specific-material/40443/7 "2023-07-20T17:08:21Z")

</div>

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