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:
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.
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: