I am currently working on creating water effects in three.js and I haven't come across any examples in three.js that incorporate both reflection and refraction. If you know of any examples, please feel free to share the links with me. Currently, I am building on top of Mirror.js by Slayvin, which you can find here.
My approach involves using a second rendertarget to render the refraction texture in a similar manner as the reflection and then blending the two textures in the shader.
Currently, I am using a temporary refraction rendertarget for blending, which is working. However, the temporary refraction is distorted because I am not applying the correct matrix multiplications to the texture. While I believe it should be simpler than the mirror, the results are not as expected. How can I determine the initial texture matrix settings?
this.updateMatrixWorld();
this.camera.updateMatrixWorld();
// Update the texture matrix
this.textureMatrixRefraction.set( 0.5, 0.0, 0.0, 0.5,
0.0, 0.5, 0.0, 0.5,
0.0, 0.0, 0.5, 0.5,
0.0, 0.0, 0.0, 1.0 );
this.textureMatrixMirror.multiply( this.camera.projectionMatrix );
this.textureMatrixMirror.multiply( this.camera.matrixWorldInverse );
I am currently trying to understand how the matrix operations for the mirror work as I seem to be missing an important element. I attempted to simplify the process with the code above, with comments indicating my uncertainties. Any help in clarifying those points would be greatly appreciated.
THREE.Water.prototype.updateTextureMatrixMirror = function () {
//UPDATE TO CURRENT WORLD AND CAMERA FOR MIRROROBJECT
this.updateMatrixWorld();
this.camera.updateMatrixWorld();
//COPY VALUES FROM WORLD AND CAMERA, GETTING TRANSFORMATIONS IN WORLD
this.mirrorWorldPosition.setFromMatrixPosition( this.matrixWorld );
this.cameraWorldPosition.setFromMatrixPosition( this.camera.matrixWorld );
this.rotationMatrix.extractRotation( this.matrixWorld );
//SET NORMAL AND APPLY ROTATION
this.normal.set( 0, 0, 1 );
this.normal.applyMatrix4( this.rotationMatrix );
//CREATE NEW CAMERA VIEW, THIS IS ONLY RELEVANT FOR THE REFLECTION
var view = this.mirrorWorldPosition.clone().sub( this.cameraWorldPosition );
view.reflect( this.normal ).negate(); //tHIS IS NOT NEEDED FOR REFRACTION?
view.add( this.mirrorWorldPosition );
//Further code omitted for brevity.
Update: I have made some progress in achieving a visually acceptable result, but I am facing several issues. I suspect that I am not properly creating the refraction texture due to the flawed matrix transformations. Additionally, I am struggling to achieve a smooth flow for the offset of the dudv-map I implemented. Currently, I am using a sine-function which results in a swaying motion that looks unnatural. I am looking for a better solution to avoid a sudden "jump cut" effect. You can view the current result and full code here.