# CAD material look

**URL:** <https://forum.babylonjs.com/t/cad-material-look/18582>\
**Category:** Questions\
**Created:** [February 21, 2021, 5:34pm UTC](https://forum.babylonjs.com/t/cad-material-look/18582 "2021-02-21T17:34:24Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![samevision](https://avatars.discourse-cdn.com/v4/letter/s/73ab20/32.png) [@samevision](https://forum.babylonjs.com/u/samevision)\
**Post date:** [February 21, 2021, 5:34pm UTC](https://forum.babylonjs.com/t/cad-material-look/18582/1 "2021-02-21T17:34:24Z")

</div>

Hello guys,

I came across a 3D viewer for CAD models. You can start it here after clicking on “Load in 3D viewer”: [https://grabcad.com/library/f4208-solenoid-valve-w-double-ring-fitting-1](https://grabcad.com/library/f4208-solenoid-valve-w-double-ring-fitting-1)

 ![Screenshot 2021-02-21 at 18.26.25](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/7/72b182c0c7625222f979d86ce1957e82ea774ba3.jpeg)

I like this look, so I wonder how create such materials in babylon. Is that a complex shader or can it easily achieved by using standardMaterial?

Best

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [February 21, 2021, 7:25pm UTC](https://forum.babylonjs.com/t/cad-material-look/18582/2 "2021-02-21T19:25:58Z")

</div>

You should be able to achieve this rendering with a standard material.

Regarding the edge rendering, in the viewer they are simply drawing lines over the geometry.

You can try to generate the edges automatically in Babylon using the [edge renderer](https://doc.babylonjs.com/divingDeeper/mesh/edgeRenderer) or the [screen space curvature post process](https://forum.babylonjs.com/t/cavity-shader-effect-like-blender-2-8-viewport-for-babylon-js/11789/7), but as it is an automated process it does not always render the edges as you would like them and you won’t have a lot of control about that.

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [February 21, 2021, 11:41pm UTC](https://forum.babylonjs.com/t/cad-material-look/18582/3 "2021-02-21T23:41:58Z")

</div>

Here is the example how it looks after the import of STP file into C4D (with colors converted to materials) and export to GLB - [https://playground.babylonjs.com/#UKNERM#343](https://playground.babylonjs.com/#UKNERM#343)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/a/a73b4c34a37ebbf7d6e95ade2288074b6627f737.png)

With edge rendering (red color by default) - [https://playground.babylonjs.com/#UKNERM#346](https://playground.babylonjs.com/#UKNERM#346)

Materials in GLB model are PBR materials, so you can tweak them (add metallic/roughness etc) according to their colors (or do this part in DCC tool).  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/0/07b1fe7f6ec0a71a744d043d873c595e40e05c45.png)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [February 22, 2021, 1:40am UTC](https://forum.babylonjs.com/t/cad-material-look/18582/4 "2021-02-22T01:40:12Z")

</div>

The PG from @labris with the screen space curvature post process:

[https://playground.babylonjs.com/#UKNERM#348](https://playground.babylonjs.com/#UKNERM#348)

Not ideal…

Note I had to invert the side orientation, it seems it is wrong in the gtlf file.

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [February 22, 2021, 2:26am UTC](https://forum.babylonjs.com/t/cad-material-look/18582/5 "2021-02-22T02:26:55Z")

</div>

> [@Evgeni\_Popov](#):
>
> Note I had to invert the side orientation, it seems it is wrong in the gtlf file.

I think it is also possible to do it in DCC tool before GLB export. I just used default settings.

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [February 22, 2021, 3:35am UTC](https://forum.babylonjs.com/t/cad-material-look/18582/6 "2021-02-22T03:35:22Z")

</div>

Here parameter `metallic = 0.8;`  
is assigned to all materials - [https://playground.babylonjs.com/#UKNERM#349](https://playground.babylonjs.com/#UKNERM#349) (and some particles 🙂 )

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/9/99e3d11ff8dc1e3dc220e3f4ddba3226294ea94a.jpeg)

---

<div class="post-metadata">

**Author:** ![samevision](https://avatars.discourse-cdn.com/v4/letter/s/73ab20/32.png) [@samevision](https://forum.babylonjs.com/u/samevision)\
**Post date:** [February 22, 2021, 12:46pm UTC](https://forum.babylonjs.com/t/cad-material-look/18582/7 "2021-02-22T12:46:12Z")

</div>

Thanks @Evgeni_Popov and @labris!

Yes, it’s looks way more like the reference with pbr marterial. And edge rendering plays definetely the most important role that the model looks like a drawing. I adjusted some parts of the cad in blender, added metallic pbr and enabled edgeRendering.

The result looks promising. But as you mentioned Evgeni the edgeRendering isn’t perfect - some lines are missing and sometimes there are two lines next to each other. What’s the best way to improve the edgeRendering? I am sure that the babylonjs team has created a way better script than I could. So manipulating the edgeRendering.js wouldn’t be very effective.

[https://playground.babylonjs.com/#LJG6ZD#7](https://playground.babylonjs.com/#LJG6ZD#7)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [February 22, 2021, 1:05pm UTC](https://forum.babylonjs.com/t/cad-material-look/18582/8 "2021-02-22T13:05:05Z")

</div>

You can try to update the options passed to `enableEdgesRendering` ([IEdgesRendererOptions | Babylon.js Documentation](https://doc.babylonjs.com/typedoc/interfaces/babylon.iedgesrendereroptions)) as well as testing with other values for the first parameter (which is 0.95 by default).

But as explained, it will be very difficult/impossible to get rid of all the artifacts because the processing is using a heuristic to detect edges that does not always work. That’s the reason why the 3D viewer you pointed to previously does not use an automated process but draw real lines instead. That’s something you can do in Babylon too, but you will need to provide the starting/ending points of each line yourself (which can certainly be tedious).

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [February 22, 2021, 1:49pm UTC](https://forum.babylonjs.com/t/cad-material-look/18582/9 "2021-02-22T13:49:09Z")

</div>

Edge rendering also shows some geometry flaws which model has. So you can either manually correct geometry/polygons in problem areas (which is not the solution which I’d like, especially when you have hundreds of STP files) with DCC tool; or try to make edge lines a bit smoother and less contrast - [https://playground.babylonjs.com/#LJG6ZD#8](https://playground.babylonjs.com/#LJG6ZD#8)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/8/8c8d401aec993d1804580857d8a2955122fd4b59.jpeg)

Here is quite interesting article about the problems regarding STP to polygon models conversion - [How to streamline your STEP to polygon mesh conversion and optimization - Meshmatic](https://meshmatic3d.com/technical/step-to-polygon-mesh-conversion-and-optimization/)  
If you use Blender, try to tune tesselation options (if there are any) to avoid edge artefacts, maybe this way will help.

Seems that addition of default rendering pipeline helps to make more realistic metallic look - [https://playground.babylonjs.com/#LJG6ZD#10](https://playground.babylonjs.com/#LJG6ZD#10)

---

<div class="post-metadata">

**Author:** ![samevision](https://avatars.discourse-cdn.com/v4/letter/s/73ab20/32.png) [@samevision](https://forum.babylonjs.com/u/samevision)\
**Post date:** [February 23, 2021, 7:45am UTC](https://forum.babylonjs.com/t/cad-material-look/18582/10 "2021-02-23T07:45:10Z")

</div>

Too bad that there is no universal solution. But I will try to wreak the parameters.

You’re right, @labris, there are some geometrical artifacts. That’s always a problem, but since I don’t have hundreds of cad models in this case I can modify the mesh in blender. Thanks for the article and pgs too. That looks good.
