Frost/pearl look

Questions
,
1

I’m creating bracelet designer with three.js. This is my first experience with 3D and I really like three.js.

I’d like to make some beads looks ‘frosty’ and others looks ‘pearlish’. Could you advice, how can I achieve this?

I’m already using metalness and roughness in the designer but this is slightly different.
Too many map-variables and I have no idea which one should I use.

Thanks.

2

Looking through different three.js refraction demos might give you what you want. Here are a few:

2 Likes
3

Additionally you could look through the material variations examples to see the effects of various material settings:

https://threejs.org/examples/?q=variations

1 Like
4

Thanks. I’ve already played with these demos. Unfortunately, they are different.

When I’m talking about ‘frosty look’ I mean something like the 3rd ball from the left on the picture (I just googled):

5

The effect you’re after isn’t built in in three.js as far as I know. However, it looks like all you have to do is add a fresnel snippet to an existing shader.

That said, there are two things you can do:

  1. Monkey patch one of the existing shaders, like the phong shader and add a fresnel feature to it
  2. Write your own shader from scratch.

I don’t know how experienced you are with GLSL, I know I for one don’t know that much about it to pull this off on my own, unfortunately. I did manage to find a shader on shadertoy that creates the effect you’re after to get you started:

https://www.shadertoy.com/view/4scSW4

Maybe someone else here can assist you in how to add this kind of feature to three.js.

6

Thanks a lot.
I do not have experience with GLSL (I hoped that using textures with some maps would do the trick).
However, not the first time I’ll learn something new. I can handle that.

1 Like