Glass Material without Texture

Questions
1

Hi,
Is it possible to create a glass effect without having either a texture or using reflection?
Basically a shiny sphere that is transparent.

Use-case: Just having a very basic glass. Like in older games.

1 Like
3

https://www.babylonjs-playground.com/#9AB3AV#7

image
image.jpg1264×1166 60.4 KB

https://www.babylonjs-playground.com/#9AB3AV#9
https://www.babylonjs-playground.com/#9AB3AV#10

2 Likes
4

Wow!
Two very different but working solutions, thank you so much! :hugs::hugs::hugs:

5

@nasimiasl is that the appropriate way of writing a shader or is it more of a quick-fix solution? Just so I know for future code, because it looks different than what I find in the docs about shaders.

6

if you like i can explain it
https://www.babylonjs-playground.com/#9AB3AV#11

you most use min(1. ,max(0. , … )) for keep value in correct range

for calculate Fresnel :
1. - dot( normal , normalize(( camera ) - world position ))

so that explain all this line
float fs = min(1.,max(0.,1.-pow(dot(vNormalW,normalize(( vEyePosition) - vPositionW)),1.0)));

for have the reflection we have 2 kind of method
first is reflect and second is refract
in this code i calculate a reflact value by 2 direction
camera and {100,100,100 }
i attach some mathematical code for have dark and light on the refract
**sin(length(f1*0.1)1.2+min( (f1.y+(abs(f1.x))),min(sin(f1.y),cos(0.01f1.x)))0.5+1.5 )0.5;
you can change that and have different result

https://www.babylonjs-playground.com/#9AB3AV#12

now for make reality light effect just need a bit specular
pow( a , 2 ) *2. ( make light more ) if you use pow( a , 50.)*60. that make it point light
if we use pow(a , 0.5)*0.5 that keep around light effect too

  l1 = pow(l1,5.)+   pow(l2*0.83+(1.-fs),12.)*0.5;
  l2 = pow(l1,33.)*58. + pow(l1,0.6)*0.8;
  l2 = (pow(l2,33.)*58. + pow(l2,0.6)*0.8)*0.5+l1*.5;

the finalize step you can choose your color and attach light for that

vec3(1.)*l2 + color.xyz and select l2 as transparency

it is customMaterial that help you have all shadow and fog and other standard material settings

2 Likes
7

Hi @schoening and welcome to the forum from me. You should know that nasimiasl is a shader genius and, I believe, the author of CustomMaterial - Babylon.js Documentation. Using custommaterial is an alternative to the standard way described in the docs. If you have a good understanding of shaders, and I don’t, then custommaterial gives you a direct way of using their power in Babylon.js.

2 Likes
8

I also need to mention the new Node material editor :slight_smile:
https://doc.babylonjs.com/how_to/node_material

3 Likes
9

@nasimiasl thanks for the explanation, bit over my head but in time it’ll make sense :grin:

@JohnK thank you, and yeah, while I was browsing for answers I did get the impression that he is that :stuck_out_tongue: Shaders are a bit out of scope for me at the moment, good to have so many clever people here to learn from :smile:

@Deltakosh thanks! Looks impressive!

1 Like
10

This is dated but I was looking for the same thing. Found this PG great: https://www.babylonjs-playground.com/#10D6YT#214. It looks nice in the PG but was not working with my scene’s lighting. I ended up with something this: https://www.babylonjs-playground.com/#10D6YT#238. Note that these are really simple materials but they might be good enough depending on what you need.

Hope this will be useful to the next person :slight_smile:

5 Likes