Realistic Glass Materials in UDK

[bukkit]

http://img835.imageshack.us/img835/8606/39961473.jpg

a while ago i made an interactive bathroom visualization, which can be found here : http://forums.epicgames.com/showthread.php?t=774897

since then i received several requests to make a tutorial. so here it is - im gonna cover the various glass materials i made in this scene.

lets start then :
the most important thing to learn in CG (and UDK for that matter) is studying reference, understanding how materials look and behave in real world and trying to replicate it in CG world.

Window glass material :

http://img850.imageshack.us/img850/4742/win2.jpg
im gonna start with the easiest one which is the window glass.
its a pretty straight forward material. basically its just a transparent plane with fresnel reflection on it. but from carefully observing this material in real world, you can see that due to the multiple glass planes in today's windows, there seem to be multiple reflections visible. also the glass plane is not a perfectly smooth surface so the world refracting behind it seems to be very subtly distorted. so why not recreate this in udk ?

http://img850.imageshack.us/img850/472/win1.jpg
-this is how the shader network looks. for the window glass i used only one mesh, so to imitate the multiple glass look, i duplicated the reflection, and faked the duplicate with bump offset node - so it looks shifted from the first one.


Solid Glass Shader :

http://img135.imageshack.us/img135/7442/gulicky.jpg
this material is made out of a single cubemap. one neat trick you can do with cubemaps is. that it can be used not only for reflections, but it can also create a very neat and realistic refraction.

http://img860.imageshack.us/img860/8505/cubeh.jpg
all you need to do is swap the textures in the cubemap - as seen above. this will result in a flipped reflection - that will give the illusion of transparent material refracting the world behind it

http://img833.imageshack.us/img833/7767/gulicky2.jpg
after that, you'll just stack the cubemaps over. thats about it. i also made the glass just a bit transparent to make an illusion of light wrapping around the material.
this method can be used for solid material like this, or a water in a glass or bottle and so on.

im not sure how long a single post can be, so ill continue in the next post

[bukkit]

Arch Glass material

http://img580.imageshack.us/img580/623/vaza2.jpg
there are few things you'll need to obey to create a realistic looking glass tank, table, or anything more complex made of glass.

again as usual, important thing is to check reference from the real world
http://www.glassservicesofthesouth.com/images/cbase.jpg
what do we see. the glass is refracting the world behind it, its reflecting more when looked at from an angle, than looking directly at it. the opacity is similar. looking directly at it, it seems more transparent than looking from an angle. also notice, the edges of the taple on the photo , you cant see through them at all. so this is something were gonna recreate.

http://img694.imageshack.us/img694/467/vaza1.jpg
i made the tank out of two meshes. one for the glass part , and one for the darken edges, to simulate that particular real world behavior

http://img846.imageshack.us/img846/2996/vaza1mat.jpg
this is the shader for the glass, its made of two masked out realtime reflections. and one fake cubemap reflection with invert mask , so those two types of reflections wont interfere with one another
the reflections are then tinted with that dark aquamarine green color.

the opacity is made out of two fresnel nodes, for a smooth and also a sharp transition.

the distortion is imho basic with a huge amount of control for the user, who can edit the distortion on the area direct to camera, and also away from camera. and also the fresnel node for the distortion transition

http://img96.imageshack.us/img96/7338/vaza2mat.jpg
the dark edge material is pretty basic. here i used the same trick with cubemap refraction as in the glass spheres material.

a problem with the material setup like this is the distortion.... it is distorting not only object behind it but also objects in front of it , which can look wery strange.

luckily you can use a simple trick to fix this. the problems only occur with opaque materials. so you can switch them to an translucent material with wery high opacity (something like 0.995) to remove the artifacts

http://img4.imageshack.us/img4/479/opaque.jpg

[bukkit]

working on this scene, i noticed a problem with using cubemaps in interior. they just dont fit properly, which is imho something that has something to do with the fact that the reflection is comming from infinity.

i saw a solution to this problem made in Blender Game Engine.
http://www.gamedev.net/topic/568829-box-projected-cubemap-environment-mapping/
it would be awesome if somebody would be able to recreate this approach in udk. i wasnt able to unfortunately (it was too complicated for noob like me)

so i come up with a noob method to have at least some control over your cubemaps. its a bit tedious, requires many trials and errors, but its better than nothing.

http://img25.imageshack.us/img25/3189/cuuub.jpg
if you setup the cubemap like seen here. you can adjust the size of the reflected map ,and also its X Y Z position.

so i guess this is all from me. hope i was somewhat helpful. and i also thank you for your attention.

any comments or questions are of course welcome

[geodav]

awesome work there, just one question, could you do a tutorial for a Stained Glass Window like you see in Churches or like when the kids paint pictures on thier windows

[bukkit]

http://udn.epicgames.com/Three/Lightmass.html#Translucent%20shadows.
never done that, but i would start from here.

[horoxhoro]

awesome thanks for sharing :) great stuff

[keroki]

Wow, that´s really good.
Thank you very much

[Tom Shannon]

Wow, great tutorial. Some really well thought out solutions and attention to detail! Thank you so much!

[Freko]

wow, this is fantastic !!!. Thanks dude!

[A Rabbit]

Arch Glass material
a problem with the material setup like this is the distortion.... it is distorting not only object behind it but also objects in front of it , which can look wery strange.

I found that ticking "Use One Layer Distortion" in the translucency tab of the material also solves this problem but obviously will limits you to one layer distortions.

[frostymoss]

very nice, three thumbs up!

[RAKSHASRAJA]

working on this scene, i noticed a problem with using cubemaps in interior. they just dont fit properly, which is imho something that has something to do with the fact that the reflection is comming from infinity.

i saw a solution to this problem made in Blender Game Engine.
http://www.gamedev.net/topic/568829-box-projected-cubemap-environment-mapping/
it would be awesome if somebody would be able to recreate this approach in udk. i wasnt able to unfortunately (it was too complicated for noob like me)

so i come up with a noob method to have at least some control over your cubemaps. its a bit tedious, requires many trials and errors, but its better than nothing.

http://img25.imageshack.us/img25/3189/cuuub.jpg
if you setup the cubemap like seen here. you can adjust the size of the reflected map ,and also its X Y Z position.

so i guess this is all from me. hope i was somewhat helpful. and i also thank you for your attention.

any comments or questions are of course welcome

I'm busy working on re-creating Mass Effect 2's Normandy SR-2! I used Umodel to extract the meshes and it's textures and stuff, from the original game disc!

Ur way of controlling a cubemap, gives me a good alike reflection on my Normandy screens like it is in the original game! The only thing is that it 'reflects' ONLY when the camera MOVES and when i PAN the camera and not when i TURN the camera (like looking around), which is actually what i want to achieve; CAN U HELP ME ON THIS?!

Ps. I know i missed the Vector Transform node as of now; as soon as i use that node all my controls seems to be messed up!

[bukkit]

i would love to help you but i really have no clue :/

[RAKSHASRAJA]

i would love to help you but i really have no clue :/

No problem!!! At least i achieved a quite alike reflection on my Normandy's screens, thanks to ur tips and tricks!!! :-) Thanks a ton!!!

http://members.home.nl/stefan.baars/fake_reflection.jpg

[Sei783]

Arch Glass material

http://img580.imageshack.us/img580/623/vaza2.jpg
there are few things you'll need to obey to create a realistic looking glass tank, table, or anything more complex made of glass.

again as usual, important thing is to check reference from the real world
http://www.glassservicesofthesouth.com/images/cbase.jpg
what do we see. the glass is refracting the world behind it, its reflecting more when looked at from an angle, than looking directly at it. the opacity is similar. looking directly at it, it seems more transparent than looking from an angle. also notice, the edges of the taple on the photo , you cant see through them at all. so this is something were gonna recreate.

http://img694.imageshack.us/img694/467/vaza1.jpg
i made the tank out of two meshes. one for the glass part , and one for the darken edges, to simulate that particular real world behavior

http://img846.imageshack.us/img846/2996/vaza1mat.jpg
this is the shader for the glass, its made of two masked out realtime reflections. and one fake cubemap reflection with invert mask , so those two types of reflections wont interfere with one another
the reflections are then tinted with that dark aquamarine green color.

the opacity is made out of two fresnel nodes, for a smooth and also a sharp transition.

the distortion is imho basic with a huge amount of control for the user, who can edit the distortion on the area direct to camera, and also away from camera. and also the fresnel node for the distortion transition

http://img96.imageshack.us/img96/7338/vaza2mat.jpg
the dark edge material is pretty basic. here i used the same trick with cubemap refraction as in the glass spheres material.

a problem with the material setup like this is the distortion.... it is distorting not only object behind it but also objects in front of it , which can look wery strange.

luckily you can use a simple trick to fix this. the problems only occur with opaque materials. so you can switch them to an translucent material with wery high opacity (something like 0.995) to remove the artifacts

http://img4.imageshack.us/img4/479/opaque.jpg

I actually think the opaque one looks more realistic only because, as you say... looking at real world references, if an object is close to the glass like the plant is there you would see a distorted reflection like the one you have depending on the lighting of course. In the translucent image I see hardly any reflection of the plant which kills the illusion for me. But I guess it is a matter of preference.

[MAX1009]

Thank you very much .. This is so awesome ...

[joshua.fontany]

Yeah, really good work. Thanks a lot for sharing!

[Sei783]

Would you mind posting a breakdown for the material setup? The image showing the connections for the glass material is zoomed too far out to read all the plugs / connections. I was trying to follow your setup for an interior glass pane in a door effect but I'm having issues seeing things. Thanks.

[bukkit]

damn, it was perfectly fine when i uploaded it ,
looks like imageshack shrink down mine large images. :/

[joshua.fontany]

I've recently ran into this problem (image re-sizing on free hosts). I found http://postimage.org to be a good replacement.

[Sei783]

Ok, so I tried using reflection vectors to generate fake reflections on my glass but I get weird vortex reflection effects. When I move toward or way from the glass the reflected image spirals in and out of the center. Anyone else having this issue? This happens on both cube-maps with vector transforms + reflection vectors, and on basic texture samples / 2D textures as well.

The cubemap I generated by using the RendertoCubeActor.

I don't know how to drop an image file into the forum or I'd have images for ya to look at.

[spiveylipsey]

Bukkit, can we bug ya to upload large size images again? :) Thanks for the tut regardless, excellent info here!

[bukkit]

i dont seem to have them anymore unfortunetly :/

[udkap]

nice tutorial, can you make the pictures again in a bigger size or make a graf

[excorsit]

Looks Nice, I will bookmark this for when I am ready to start my project.

[RobMotor]

Thanks a lot for your posts, they are very helpful.

[Kelt'ar]

Very noice