How to refract water bottle

I want to use refractionTexture to achieve the effect below.

I try to use the reflectionProbe to create the cubeMap RTT, but i cause false effect.
I wanted to find the right way to make water refract well.
is there anyone can help me ?

Did you take a look on doc examples?

And it will be a lot more convenient if you can share a playground :wink:

bottle.zip (1.7 MB)

To be fair, I tried to reproduce the experiment, but didn’t get anywhere (check out the attached zip).

hey~ i had tried your code,is the image below right?my question is very similar to this,reflectionProbe can just RTT mesh far away ,not mesh nearby

The RTT cannot see the object itself but you should be able to add a clone of the object in the scene with a reverted culling and then use it in the probe.

That should work

1 Like

That’s not what I meant~ i don’t wanna refract self. water and the body are 2 meshes

BABYLON.SceneLoader.ImportMesh("","./model/","scene.gltf",scene,function(meshes){
            const cap = meshes[1];
            const pingshen = meshes[2];
            const logo = meshes[3];
            const water = meshes[4];
            const waterMat=water.material;
            window.waterMat=waterMat;
            const probe = new BABYLON.ReflectionProbe("main", 1024, scene);
            window.probe=probe;
            probe.renderList.push(pingshen,logo,cap,mirror);
            waterMat.refractionTexture = probe.cubeTexture;
            waterMat.alpha=1;

        })

can you repro in the PG directly?

Yo! I got it!

bottle.zip (1.7 MB)

3 Likes
 let mat = new BABYLON.PBRMaterial("refraction", scene);
            mat.diffuseColor = new BABYLON.Color3(1, 1, 1);
            mat.subSurface.isRefractionEnabled = true;
            mat.refractionTexture = new BABYLON.RefractionTexture("ref", 1024, scene, true);
            mat.linkRefractionWithTransparency = true;
            mat.refractionTexture.refractionPlane = new BABYLON.Plane(0, 0, 0, 0);
            mat.refractionTexture.renderList.push(scene.getMeshByName("ball"));
            mat.refractionTexture.renderList.push(scene.getMeshByName("hdrSkyBox"));
            mat.refractionTexture.renderList.push(scene.getMeshByName("label"));
            mat.refractionTexture.depth = 5;
            mat.subSurface.refractionIntensity = 1;
            mat.subSurface.indexOfRefraction = 1.05;
            mat.metallic = 0.3;
            mat.roughness = 0;
            mat.alpha = .01;
            bottle.material = mat;
3 Likes

3Q!
should replace the ReflectionProbe to RefractionTexture.So that’s it!

3Q~~this is a good way to deal with refraction itself

excuse me ~ I wanna get the difference between the RefractionTexture and Probe, and i’m confused at the code below.

vec3 vRefractionUVW = vec3(refractionMatrix * (view * vec4(vPositionW + refractionVector * vRefractionInfos.z, 1.0)));

vec2 refractionCoords = vRefractionUVW.xy / vRefractionUVW.z;

refractionCoords.y = 1.0 - refractionCoords.y;
  1. why this code can exchange the worldPos to the screen space of refract.
  2. especially,what’s the difference between the “projectionMatrix” and “refractionMatrix” ~

You don’t even need to clone an object: flip normals + backFaceCulling=false :slight_smile:

1 Like

that’s will export a error:WebGL Specification