How to refract water bottle

Questions
1

I want to use refractionTexture to achieve the effect below.

image
image1288Ă—662 47.3 KB

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 ?

2

Did you take a look on doc examples?

image
image424Ă—549 63.6 KB

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

3

bottle.zip (1.7 MB)

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

4

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

image
image998Ă—862 125 KB

5

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
6

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;

        })
7

can you repro in the PG directly?

8

Yo! I got it!

bottle.zip (1.7 MB)

Screen Shot 2020-01-09 at 17.07.06
Screen Shot 2020-01-09 at 17.07.06991Ă—817 576 KB

3 Likes
9 
 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
10

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

11

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

12

image
image854Ă—151 11.9 KB

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” ~
13

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

1 Like
14

that’s will export a error:WebGL Specification