Hi Playcanvas friends!
Currently I’m working on a side project and need real glass material for that.
I try to build it in Edit-Mode but the refraction channel in playcanvas is not the same like in 3d software.
I want show you an example:
Any ideas?
Greetings,
Hüseyin
Hi there Hüseyin. So the first thing I would say here is that it is the water that is creating the refraction effect here, more than the glass. PlayCanvas’ refraction effect is for sampling the cubemap set as your skybox. It doesn’t dynamically refract 3D objects in your scene. See an example here:
https://playcanvas.com/project/362235/overview/tutorial-cube-map-refraction
A more advanced demo using the same technique is here (the chess pieces):
To do the type of refraction your illustrate in the picture is not something I’ve implemented before. Maybe @Mr_F can provide some more input here. 
Hi Will, thanks for your answer!
I mean not the water. If you look on the top edge of this glass you will it have a refraction
and the pen "abort.
But thanks fore the chees example.
This is what I’m looking for.
I believe the cheesmen recognize other objects and their materials and refrect these.
Any idea how I can build this?
I try to rebuild this effect:
In this specific example from URL, it looks more like screen space post effect, where you render scene into buffer, and then do a post effect, offsetting screensaver UV using screen-space normal map.
In case with a glass, it is more complicated, as there are things within glass. Usually technique is that you render whole scene without refracting stuff into texture, then render that texture as background and refracting object on top, preserving depth buffer, so that they get occluded, but in shader of those refracted objects, you want to also get pixel using screen-space + offset by normals from previously rendered scene. If you add here a depth map with more sampling, you can do even better job. But it will be hard to do it fast on mobile.
Although first option will work on mobile just fine.
Refraction and reflection (and many invisibility effects in games) in real-time graphics is nearly always done as render-passes and screen-space effects.
The case of glass in a non-flat shape is hard. If it were a glass plane, or a distorted glass plane, then you can just do a render pass of the normals of the glass plane, and use that to distort the rendered image.
Because the shape you want is a cylinder with wall thickness, you need to think of a way to get the actual thickness of glass at any point. Of course, this could be approximated with an edge detect - which I think is what is done in the demo.
This website does some great breakdowns of visual effects. While the one you want isn’t there, there are a few on reflection and refraction:
https://simonschreibt.de/gat/sacred-2-crystal-reflexion/
https://simonschreibt.de/gat/dead-space-3-diffuse-reflections/
While they don’t cover your use case at all, they may get you thinking in the method needed to fake this sort of thing.
The chess pieces actually don’t refract each other. The chess room has it’s own cubemap, rendered from the center of the room. This is a static cubemap. It is not re-rendered every frame, but instead, rendered offline. The cubemap has a box projection applied:
http://developer.playcanvas.com/en/api/pc.StandardMaterial.html#cubeMapProjection
For a simpler example of how a box projected cubemap is set up on a material, check out this scene:
https://playcanvas.com/project/345310/overview/orange-room
We need to expose cubemap projection to the Editor UI. At the moment, you can only set it up in script.
Thanks everyone to great feedback.
I’ll check every option!
