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
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
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 or the screen space curvature post process, 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.
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
With edge rendering (red color by default) - 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).
The PG from @labris with the screen space curvature post process:
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.
I think it is also possible to do it in DCC tool before GLB export. I just used default settings.
Here parameter metallic = 0.8;
is assigned to all materials - https://playground.babylonjs.com/#UKNERM#349 (and some particles 
)
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.
You can try to update the options passed to enableEdgesRendering (IEdgesRendererOptions | Babylon.js Documentation) 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).
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
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
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
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.
