Three.js: Refraction with custom geometry

[CesarVonc]

Description of the problem

Hello,

I noticed an issue with the Refraction example :

https://threejs.org/examples/?q=refr#webgl_refraction

If I change the plane by a box and rotate it, some times the shader show weird things :

Modifications of the example :

Line 81 :
var refractorGeometry = new THREE.BoxBufferGeometry( 4, 4, 4 );

function render() { 

    refractor.material.uniforms.time.value += clock.getDelta();

    refractor.rotation.y += 0.02;

    renderer.render( scene, camera );

}

Three.js version

• [x] r94

Browser

• [x] All of them

OS

• [x] All of them

[Mugen87]

Reflector and Refractor are intended to be used with a planar geometry.

[WestLangley]

Reflector and Refractor are intended to be used with PlaneGeometry.

Actually, in webgl_mirror.html, a CircleBufferGeometry is used.

[Mugen87]

@mrdoob Should I correct your edit? 😉

[WestLangley]

You can also use an arbitrary shape:

var shape = new THREE.Shape( points );
var geometry = new THREE.ShapeBufferGeometry( shape );

[CesarVonc]

I noticed that all kind of geometry seems to work if we keep the camera looking at the Z object axis.

Might be a nice feature to have it working for all point of view ?

I tried to fix it, but I don't really understang how it works, especially with the refractorPlane thing.

[mrdoob]

@mrdoob Should I correct your edit? 😉

Hehe, ops! I tried to make it more clear. I should have said PlaneGeometry, CircleGeometry, ShapeGeometry, ...

[mrdoob]

I noticed that all kind of geometry seems to work if we keep the camera looking at the Z object axis.

Might be a nice feature to have it working for all point of view ?

@Mugen87 Have you investigated this?

[Mugen87]

The algorithm of Reflector and Refractor assumes there is a single reflection/refraction plane. I think you need a different approach if you want to support an arbitrary amount of planes defined by a group of planar polygon faces.