Skip to content

Commit

Permalink
SSRPass: Correct Reflector depth. (#21403)
Browse files Browse the repository at this point in the history 
* SSRPassCorrectReflectorDepth

* Fix? or bypass? large groundReflector edge viewing problem.

* Renaming & some clean up.

* Rename all words prefixed with `is`.
Make `defines` all uppercase.

* Resolve Conflicts.
  • Loading branch information
@gonnavis
gonnavis committed Mar 27, 2021
1 parent 98c0604 commit 07e5802
Show file tree
Hide file tree
Showing 4 changed files with 199 additions and 189 deletions.
169 changes: 103 additions & 66 deletions examples/jsm/objects/ReflectorForSSRPass.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
RGBFormat,
ShaderMaterial,
UniformsUtils,
Vector2,
Vector3,
Vector4,
WebGLRenderTarget,
Expand All @@ -17,11 +18,11 @@ import {
NearestFilter
} from '../../../build/three.module.js';

var Reflector = function ( geometry, options ) {
var ReflectorForSSRPass = function ( geometry, options ) {

Mesh.call( this, geometry );

this.type = 'Reflector';
this.type = 'ReflectorForSSRPass';

var scope = this;

Expand All @@ -31,7 +32,7 @@ var Reflector = function ( geometry, options ) {
var textureWidth = options.textureWidth || 512;
var textureHeight = options.textureHeight || 512;
var clipBias = options.clipBias || 0;
var shader = options.shader || Reflector.ReflectorShader;
var shader = options.shader || ReflectorForSSRPass.ReflectorShader;
var useDepthTexture = options.useDepthTexture === true;
var yAxis = new Vector3( 0, 1, 0 );
var vecTemp0 = new Vector3();
Expand All @@ -40,41 +41,36 @@ var Reflector = function ( geometry, options ) {
//

scope.needsUpdate = false;
scope.maxDistance = Reflector.ReflectorShader.uniforms.maxDistance.value;
scope.opacity = Reflector.ReflectorShader.uniforms.opacity.value;
scope.maxDistance = ReflectorForSSRPass.ReflectorShader.uniforms.maxDistance.value;
scope.opacity = ReflectorForSSRPass.ReflectorShader.uniforms.opacity.value;
scope.color = color;
scope.worldYBias = options.worldYBias || 0;
scope.resolution = options.resolution || new Vector2( window.innerWidth, window.innerHeight );

scope._isDistanceAttenuation = Reflector.ReflectorShader.defines.isDistanceAttenuation;
Object.defineProperty( scope, 'isDistanceAttenuation', {
get() {

return scope._isDistanceAttenuation;

scope._distanceAttenuation = ReflectorForSSRPass.ReflectorShader.defines.DISTANCE_ATTENUATION;
Object.defineProperty( scope, 'distanceAttenuation', {
get() {
return scope._distanceAttenuation;
},
set( val ) {

if ( scope._isDistanceAttenuation === val ) return;
scope._isDistanceAttenuation = val;
scope.material.defines.isDistanceAttenuation = val;
if ( scope._distanceAttenuation === val ) return;
scope._distanceAttenuation = val;
scope.material.defines.DISTANCE_ATTENUATION = val;
scope.material.needsUpdate = true;

}
} );

scope._isFresnel = Reflector.ReflectorShader.defines.isFresnel;
Object.defineProperty( scope, 'isFresnel', {
scope._fresnel = ReflectorForSSRPass.ReflectorShader.defines.FRESNEL;
Object.defineProperty( scope, 'fresnel', {
get() {

return scope._isFresnel;

return scope._fresnel;
},
set( val ) {

if ( scope._isFresnel === val ) return;
scope._isFresnel = val;
scope.material.defines.isFresnel = val;
if ( scope._fresnel === val ) return;
scope._fresnel = val;
scope.material.defines.FRESNEL = val;
scope.material.needsUpdate = true;

}
} );

Expand All @@ -98,7 +94,7 @@ var Reflector = function ( geometry, options ) {
var depthTexture = new DepthTexture();
depthTexture.type = UnsignedShortType;
depthTexture.minFilter = NearestFilter;
depthTexture.maxFilter = NearestFilter;
depthTexture.magFilter = NearestFilter;

}

Expand All @@ -119,7 +115,7 @@ var Reflector = function ( geometry, options ) {

var material = new ShaderMaterial( {
transparent: useDepthTexture,
defines: Object.assign( {}, Reflector.ReflectorShader.defines, {
defines: Object.assign( {}, ReflectorForSSRPass.ReflectorShader.defines, {
useDepthTexture
} ),
uniforms: UniformsUtils.clone( shader.uniforms ),
Expand All @@ -140,18 +136,14 @@ var Reflector = function ( geometry, options ) {

this.doRender = function ( renderer, scene, camera ) {

material.uniforms[ 'maxDistance' ].value = scope.maxDistance * ( camera.position.length() / camera.position.y );
///todo: Temporary hack,
// need precise calculation like this https://github.com/mrdoob/three.js/pull/20156/commits/8181946068e386d14a283cbd4f8877bc7ae066d3 ,
// after fully understand http://www.terathon.com/lengyel/Lengyel-Oblique.pdf .

material.uniforms[ 'maxDistance' ].value = scope.maxDistance;
material.uniforms[ 'color' ].value = scope.color;
material.uniforms[ 'opacity' ].value = scope.opacity;
material.uniforms[ 'worldYBias' ].value = scope.worldYBias;

vecTemp0.copy( camera.position ).normalize();
vecTemp1.copy( vecTemp0 ).reflect( yAxis );
material.uniforms[ 'fresnel' ].value = ( vecTemp0.dot( vecTemp1 ) + 1. ) / 2.; ///todo: Also need to use glsl viewPosition and viewNormal per pixel.
// console.log(material.uniforms['fresnel'].value)
material.uniforms[ 'fresnelCoe' ].value = ( vecTemp0.dot( vecTemp1 ) + 1. ) / 2.; // TODO: Also need to use glsl viewPosition and viewNormal per pixel.

reflectorWorldPosition.setFromMatrixPosition( scope.matrixWorld );
cameraWorldPosition.setFromMatrixPosition( camera.matrixWorld );
Expand Down Expand Up @@ -191,6 +183,13 @@ var Reflector = function ( geometry, options ) {
virtualCamera.updateMatrixWorld();
virtualCamera.projectionMatrix.copy( camera.projectionMatrix );

material.uniforms[ 'virtualCameraNear' ].value = virtualCamera.near;
material.uniforms[ 'virtualCameraFar' ].value = virtualCamera.far;
material.uniforms[ 'virtualCameraMatrixWorld' ].value= virtualCamera.matrixWorld;
material.uniforms[ 'virtualCameraProjectionMatrix' ].value= virtualCamera.projectionMatrix;
material.uniforms[ 'virtualCameraInverseProjectionMatrix' ].value= virtualCamera.projectionMatrixInverse;
material.uniforms[ 'resolution' ].value = scope.resolution;

// Update the texture matrix
textureMatrix.set(
0.5, 0.0, 0.0, 0.5,
Expand All @@ -202,28 +201,32 @@ var Reflector = function ( geometry, options ) {
textureMatrix.multiply( virtualCamera.matrixWorldInverse );
textureMatrix.multiply( scope.matrixWorld );

// Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
// Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
reflectorPlane.setFromNormalAndCoplanarPoint( normal, reflectorWorldPosition );
reflectorPlane.applyMatrix4( virtualCamera.matrixWorldInverse );
/* Note: For the sake of accurate tDepth, temporarily turned off this Oblique Near-Plane Clipping feature. https://github.com/mrdoob/three.js/pull/21403
// Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
// Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
reflectorPlane.setFromNormalAndCoplanarPoint( normal, reflectorWorldPosition );
reflectorPlane.applyMatrix4( virtualCamera.matrixWorldInverse );
clipPlane.set( reflectorPlane.normal.x, reflectorPlane.normal.y, reflectorPlane.normal.z, reflectorPlane.constant );
clipPlane.set( reflectorPlane.normal.x, reflectorPlane.normal.y, reflectorPlane.normal.z, reflectorPlane.constant );
var projectionMatrix = virtualCamera.projectionMatrix;
var projectionMatrix = virtualCamera.projectionMatrix;
q.x = ( Math.sign( clipPlane.x ) + projectionMatrix.elements[ 8 ] ) / projectionMatrix.elements[ 0 ];
q.y = ( Math.sign( clipPlane.y ) + projectionMatrix.elements[ 9 ] ) / projectionMatrix.elements[ 5 ];
q.z = - 1.0;
q.w = ( 1.0 + projectionMatrix.elements[ 10 ] ) / projectionMatrix.elements[ 14 ];
q.x = ( Math.sign( clipPlane.x ) + projectionMatrix.elements[ 8 ] ) / projectionMatrix.elements[ 0 ];
q.y = ( Math.sign( clipPlane.y ) + projectionMatrix.elements[ 9 ] ) / projectionMatrix.elements[ 5 ];
q.z = - 1.0;
q.w = ( 1.0 + projectionMatrix.elements[ 10 ] ) / projectionMatrix.elements[ 14 ];
// Calculate the scaled plane vector
clipPlane.multiplyScalar( 2.0 / clipPlane.dot( q ) );
// Calculate the scaled plane vector
clipPlane.multiplyScalar( 2.0 / clipPlane.dot( q ) );
// Replacing the third row of the projection matrix
projectionMatrix.elements[ 2 ] = clipPlane.x;
projectionMatrix.elements[ 6 ] = clipPlane.y;
projectionMatrix.elements[ 10 ] = clipPlane.z + 1.0 - clipBias;
projectionMatrix.elements[ 14 ] = clipPlane.w;
// Replacing the third row of the projection matrix
projectionMatrix.elements[ 2 ] = clipPlane.x;
projectionMatrix.elements[ 6 ] = clipPlane.y;
projectionMatrix.elements[ 10 ] = clipPlane.z + 1.0 - clipBias;
projectionMatrix.elements[ 14 ] = clipPlane.w;
*/

// Render

Expand Down Expand Up @@ -273,25 +276,32 @@ var Reflector = function ( geometry, options ) {

};

Reflector.prototype = Object.create( Mesh.prototype );
Reflector.prototype.constructor = Reflector;
ReflectorForSSRPass.prototype = Object.create( Mesh.prototype );
ReflectorForSSRPass.prototype.constructor = ReflectorForSSRPass;

Reflector.ReflectorShader = { ///todo: Will conflict with Reflector.js?
ReflectorForSSRPass.ReflectorShader = {

defines: {
isDistanceAttenuation: true,
isFresnel: true,
DISTANCE_ATTENUATION: true,
FRESNEL: true,
},

uniforms: {

color: { value: null },
tDiffuse: { value: null },
tDepth: { value: null },
textureMatrix: { value: null },
textureMatrix: { value: new Matrix4() },
maxDistance: { value: 180 },
opacity: { value: 0.5 },
fresnel: { value: null },
fresnelCoe: { value: null },
worldYBias: { value: null },
virtualCameraNear: { value: null },
virtualCameraFar: { value: null },
virtualCameraProjectionMatrix: { value: new Matrix4() },
virtualCameraMatrixWorld: { value: new Matrix4() },
virtualCameraInverseProjectionMatrix: { value: new Matrix4() },
resolution: { value: new Vector2() },

},

Expand All @@ -314,27 +324,54 @@ Reflector.ReflectorShader = { ///todo: Will conflict with Reflector.js?
uniform sampler2D tDepth;
uniform float maxDistance;
uniform float opacity;
uniform float fresnel;
uniform float fresnelCoe;
uniform float worldYBias;
uniform float virtualCameraNear;
uniform float virtualCameraFar;
uniform mat4 virtualCameraProjectionMatrix;
uniform mat4 virtualCameraInverseProjectionMatrix;
uniform mat4 virtualCameraMatrixWorld;
uniform vec2 resolution;
varying vec4 vUv;
#include <packing>
float blendOverlay( float base, float blend ) {
return( base < 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );
}
vec3 blendOverlay( vec3 base, vec3 blend ) {
return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );
}
float getDepth( const in vec2 uv ) {
return texture2D( tDepth, uv ).x;
}
float getViewZ( const in float depth ) {
return perspectiveDepthToViewZ( depth, virtualCameraNear, virtualCameraFar );
}
vec3 getViewPosition( const in vec2 uv, const in float depth/*clip space*/, const in float clipW ) {
vec4 clipPosition = vec4( ( vec3( uv, depth ) - 0.5 ) * 2.0, 1.0 );//ndc
clipPosition *= clipW; //clip
return ( virtualCameraInverseProjectionMatrix * clipPosition ).xyz;//view
}
void main() {
vec4 base = texture2DProj( tDiffuse, vUv );
#ifdef useDepthTexture
float op=opacity;
vec2 uv=(gl_FragCoord.xy-.5)/resolution.xy;
uv.x=1.-uv.x;
float depth = texture2DProj( tDepth, vUv ).r;
if(depth>maxDistance) discard;
#ifdef isDistanceAttenuation
float ratio=1.-(depth/maxDistance);
float viewZ = getViewZ( depth );
float clipW = virtualCameraProjectionMatrix[2][3] * viewZ+virtualCameraProjectionMatrix[3][3];
vec3 viewPosition=getViewPosition( uv, depth, clipW );
vec3 worldPosition=(virtualCameraMatrixWorld*vec4(viewPosition,1)).xyz;
worldPosition.y+=worldYBias; // TODO: Don't know why not start from zero, temporarily use manually defined bias, need fix afterwards.
worldPosition.y=max(0.,worldPosition.y);
if(worldPosition.y>maxDistance) discard;
float op=opacity;
#ifdef DISTANCE_ATTENUATION
float ratio=1.-(worldPosition.y/maxDistance);
float attenuation=ratio*ratio;
op=opacity*attenuation;
#endif
#ifdef isFresnel
op*=fresnel;
#ifdef FRESNEL
op*=fresnelCoe;
#endif
gl_FragColor = vec4( blendOverlay( base.rgb, color ), op );
#else
Expand All @@ -344,4 +381,4 @@ Reflector.ReflectorShader = { ///todo: Will conflict with Reflector.js?
`,
};

export { Reflector };
export { ReflectorForSSRPass };
Loading

0 comments on commit 07e5802

Please sign in to comment.