2

In three.js I'm a bit confused about metalness and roughness. What would be the difference in the metalness and/or roughness in a mirror and metal/steel example, and how would I make them?

For example, how can I make a mirror, like this:

Mirror

and a metal material, like this:

Metal

TylerH
  • 20,799
  • 66
  • 75
  • 101
  • A real "perfect" mirror would need more than a simple material in order to accurately reflect the scene... – AKX Aug 11 '21 at 19:50
  • Haha, that's alright! I didn't mean it like that. Any answer would be appreciated :) –  Aug 11 '21 at 19:51
  • Have you read the documentation page on [MeshStandardMaterial](https://threejs.org/docs/?q=materi#api/en/materials/MeshStandardMaterial)? In there you'll find two links to articles that explain the concept behind physically-based rendering. The first one: [Basic Theory of Physically-Based Rendering](https://marmoset.co/posts/basic-theory-of-physically-based-rendering/) and the second one: [Physically-Based Rendering, And You Can Too!](https://marmoset.co/posts/physically-based-rendering-and-you-can-too/). They're very good at describing the physics behind metalness and roughness. – M - Aug 12 '21 at 02:37
  • Thanks, I'll take a look at that. –  Aug 12 '21 at 13:03
  • This works fine for the metal/steel look, but what about the mirror? Could you also write some code on how to create it? –  Aug 12 '21 at 17:58
  • @Anye Sure, I'd be happy to write some code if you hire me to do it. Otherwise, a simple search for Three.js mirror [will give you this](https://threejs.org/examples/#webgl_mirror). – M - Aug 12 '21 at 23:45

1 Answers1

1

If you have ever used PhotoShop or GIMP, you may remember using the Gaus blur tool. This is exactly how the roughness works. If you set roughness to 1, the environment map will be blurred. If you set it to 0, it won't have any of the blur at all.

Metalness on the other hand, is how much of a environment the object is supposed to reflect. Setting this to 1, will set the intensiveness of environment to 100%, so you will get the clear image. Think of this as of a opacity of enviroment placed on object. If you set it to 0, you may find yourself troubled, as the object - that has no textures (In your case, that's the mirror - the reflecting part has no texture set. It may have attached displacement map, or a UV texture to give a bit more details) will be black. And that makes sense, since you don't have any textures placed.

Here are great examples from the three.js:
https://threejs.org/examples/webgl_materials_envmaps.html https://threejs.org/examples/webgl_materials_envmaps_hdr.html

Maciej Górski
  • 136
  • 8
  • Woah, this is exactly what I was looking for! I've used GIMP and I can relate perfectly now. Thank you so much! –  Aug 13 '21 at 22:04