Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

clean foam code #18

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

clean foam code #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9111a62
clean foam code
tcm390 Jul 23, 2022
7139624
remove blur offset
tcm390 Jul 23, 2022
4b2a9cf
increase blur
tcm390 Jul 26, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
161 changes: 3 additions & 158 deletions examples/jsm/postprocessing/WebaWaterPass.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,13 @@ import {
import { Pass, FullScreenQuad } from '../postprocessing/Pass.js';
import { WebaWaterSSRShader } from '../shaders/WebaWaterShader.js';
import { WebaWaterSSRBlurShader } from '../shaders/WebaWaterShader.js';
import { WebaWaterEdgeHBlurShader, WebaWaterEdgeVBlurShader, WebaWaterMaskShader, WebaWaterBlankShader, WebaWaterCombineShader } from '../shaders/WebaWaterShader.js';
import { WebaWaterEdgeHBlurShader, WebaWaterEdgeVBlurShader, WebaWaterMaskShader} from '../shaders/WebaWaterShader.js';
import { CopyShader } from '../shaders/CopyShader.js';
import { DoubleSide } from 'three';

class WebaWaterPass extends Pass {

constructor( { renderer, scene, camera, width, height, selects, bouncing = false, invisibleSelects } ) {
constructor( { renderer, scene, camera, width, height, selects, bouncing = false} ) {

super();

Expand All @@ -48,28 +48,6 @@ class WebaWaterPass extends Pass {

this.tempColor = new Color();

// this.foamDepthMaterial = foamDepthMaterial;
// this.foamRenderTarget = foamRenderTarget;

const pixelRatio = renderer.getPixelRatio();
this.foamRenderTarget = new WebGLRenderTarget(
window.innerWidth * pixelRatio,
window.innerHeight * pixelRatio
);
this.foamRenderTarget.texture.minFilter = NearestFilter;
this.foamRenderTarget.texture.magFilter = NearestFilter;
this.foamRenderTarget.texture.generateMipmaps = false;
this.foamRenderTarget.stencilBuffer = false;



this.foamDepthMaterial = new MeshDepthMaterial();
this.foamDepthMaterial.depthPacking = RGBADepthPacking;
this.foamDepthMaterial.blending = NoBlending;


this.invisibleSelects = invisibleSelects;

this._selects = selects;
this.selective = Array.isArray( this._selects );

Expand Down Expand Up @@ -351,42 +329,6 @@ class WebaWaterPass extends Pass {

this.originalClearColor = new Color();

this.blankMaterial = new ShaderMaterial( {
defines: Object.assign( {}, WebaWaterBlankShader.defines ),
uniforms: UniformsUtils.clone( WebaWaterBlankShader.uniforms ),
vertexShader: WebaWaterBlankShader.vertexShader,
fragmentShader: WebaWaterBlankShader.fragmentShader
} );
this.blankRenderTarget = this.ssrRenderTarget.clone();

this.combineMaterial = new ShaderMaterial( {
defines: Object.assign( {}, WebaWaterCombineShader.defines ),
uniforms: UniformsUtils.clone( WebaWaterCombineShader.uniforms ),
vertexShader: WebaWaterCombineShader.vertexShader,
fragmentShader: WebaWaterCombineShader.fragmentShader,
} );
this.combineRenderTarget = this.ssrRenderTarget.clone();
// this.combineMaterial.uniforms[ 'cameraNear' ].value = this.camera.near;
// this.combineMaterial.uniforms[ 'cameraFar' ].value = this.camera.far;
// this.combineMaterial.uniforms[ 'cameraProjectionMatrix' ].value.copy( this.camera.projectionMatrix );
// this.combineMaterial.uniforms[ 'cameraInverseProjectionMatrix' ].value.copy( this.camera.projectionMatrixInverse );
// this.combineMaterial.uniforms[ 'cameraMatrixWorldInverse' ].value.copy( this.camera.matrixWorldInverse );


this.playerOnMaterial = new MeshBasicMaterial( {
color: 'white',
side: DoubleSide,
} );
this.playerOffMaterial = new MeshBasicMaterial( {
color: 'black',
side: DoubleSide,
} );
this.playerRenderTarget = new WebGLRenderTarget( this.width, this.height, {
minFilter: NearestFilter,
magFilter: NearestFilter,
format: RGBAFormat
} );

}

dispose() {
Expand Down Expand Up @@ -620,45 +562,6 @@ class WebaWaterPass extends Pass {
console.warn( 'THREE.WebaWaterPass: Unknown output type.' );

}
if(this.foamDepthMaterial && this.foamRenderTarget){

this.originalClearColor.copy( renderer.getClearColor( this.tempColor ) );
const originalClearAlpha = renderer.getClearAlpha( this.tempColor );
const originalAutoClear = renderer.autoClear;

renderer.setRenderTarget(this.foamRenderTarget);
renderer.autoClear = false;

const clearColor = this.foamDepthMaterial.clearColor || 0;
const clearAlpha = this.foamDepthMaterial.clearAlpha || 0;

if ( ( clearColor !== undefined ) && ( clearColor !== null ) ) {

renderer.setClearColor( clearColor );
renderer.setClearAlpha( clearAlpha || 0.0 );
renderer.clear();

}

for(const invisibleSelect of this.invisibleSelects){

invisibleSelect.visible = false;
}
this.scene.overrideMaterial = this.foamDepthMaterial;

// renderer.setRenderTarget(this.renderTarget);
renderer.render(this.scene, this.camera);
renderer.setRenderTarget(null);

this.scene.overrideMaterial = null;
for(const invisibleSelect of this.invisibleSelects){
invisibleSelect.visible = true;
}

renderer.autoClear = originalAutoClear;
renderer.setClearColor( this.originalClearColor );
renderer.setClearAlpha( originalClearAlpha );
}

}

Expand Down Expand Up @@ -800,69 +703,11 @@ class WebaWaterPass extends Pass {
}

} );
for(const invisibleSelect of this.invisibleSelects){
invisibleSelect.visible = false;
}
renderer.render( this.scene, this.camera );
for(const invisibleSelect of this.invisibleSelects){

invisibleSelect.visible = true;
}
this.scene.traverseVisible( child => {

child.material = child._WebaWaterPassBackupMaterial;

} );


// restore original state

renderer.autoClear = originalAutoClear;
renderer.setClearColor( this.originalClearColor );
renderer.setClearAlpha( originalClearAlpha );

this.renderPlayer( renderer, this.playerOnMaterial, this.playerRenderTarget, 0, 0 );

}
renderPlayer( renderer, overrideMaterial, renderTarget, clearColor, clearAlpha ) {

this.originalClearColor.copy( renderer.getClearColor( this.tempColor ) );
const originalClearAlpha = renderer.getClearAlpha( this.tempColor );
const originalAutoClear = renderer.autoClear;

renderer.setRenderTarget( renderTarget );
renderer.autoClear = false;

clearColor = overrideMaterial.clearColor || clearColor;
clearAlpha = overrideMaterial.clearAlpha || clearAlpha;

if ( ( clearColor !== undefined ) && ( clearColor !== null ) ) {

renderer.setClearColor( clearColor );
renderer.setClearAlpha( clearAlpha || 0.0 );
renderer.clear();

}

this.scene.traverseVisible( child => {

child._WebaWaterPassBackupMaterial = child.material;
if ( this._selects.includes( child ) ) {

child.material = this.playerOnMaterial;

} else {

child.material = this.playerOffMaterial;

}

} );
renderer.render( this.scene, this.camera );

this.scene.traverseVisible( child => {

child.material = child._WebaWaterPassBackupMaterial;

} );


Expand Down
115 changes: 5 additions & 110 deletions examples/jsm/shaders/WebaWaterShader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,10 +158,10 @@ var WebaWaterSSRShader = {
#endif

// v1
vec3 distortion = (texture2D(distortionTexture, vec2(0.5 * vUv.x + uTime / 10., 3. * vUv.y) * 1.).rgb) * 0.025;
vec3 distortion2 = (texture2D(distortionTexture, vec2(0.3 * -vUv.x - uTime / 30., 0.1 * vUv.y - uTime / 30.)).rgb) * 0.025;
vec3 distortion = (texture2D(distortionTexture, vec2(0.5 * vUv.x + uTime / 30., 3. * vUv.y - uTime / 30.) * 1.).rgb) * 0.1;
vec3 distortion2 = (texture2D(distortionTexture, vec2(0.3 * -vUv.x - uTime / 30., 0.1 * vUv.y - uTime / 30.)).rgb) * 0.1;
vec3 reflectUv = distortion + distortion2;
reflectUv = clamp(reflectUv, 0.001, 0.999);
reflectUv = clamp(reflectUv, 0.035, 0.999);

// v2
// vec2 flowmap = texture2D(distortionTexture, vUv / 20.).rg * 2. - 1.;
Expand Down Expand Up @@ -395,7 +395,7 @@ var WebaWaterSSRBlurShader = {

vec2 offset;

offset=(vec2(-1,0))*texelSize * 20.;
offset=(vec2(-1,0))*texelSize;
vec4 cl=texture2D(tDiffuse,vUv+offset);

offset=(vec2(1,0))*texelSize;
Expand Down Expand Up @@ -628,111 +628,6 @@ var WebaWaterMaskShader = {


};
var WebaWaterBlankShader = {
vertexShader: /* glsl */`
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

`,

fragmentShader: /* glsl */`
void main() {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
`


};

var WebaWaterCombineShader = {

uniforms: {
'time': { value: 0 },
'tDiffuse': { value: null },
'tMask': { value: null },
'tDepth': { value: null },
'tPlayer': { value: null },
'dudvMap': { value: null },
'resolution': { value: new Vector2()},
'cameraInverseProjectionMatrix': { value: new Matrix4() },
'uMatrixWorld': { value: new Matrix4() },


},

vertexShader: /* glsl */`

varying vec2 vUv;
varying vec3 vPos;

void main() {

vUv = uv;
vPos = position;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );


}

`,

fragmentShader: /* glsl */`
#include <common>
#include <packing>
uniform mat4 cameraInverseProjectionMatrix;
uniform mat4 uMatrixWorld;


uniform sampler2D tDiffuse;
uniform sampler2D tMask;
uniform sampler2D tPlayer;
uniform sampler2D dudvMap;
uniform sampler2D tDepth;
uniform vec2 resolution;
uniform float time;

varying vec2 vUv;
varying vec3 vPos;

void main() {
vec4 diffuse = texture2D( tDiffuse, vUv );
vec4 mask = texture2D( tMask, vUv );
vec4 player = texture2D( tPlayer, vUv );

float normalizedDepth = unpackRGBAToDepth( texture2D( tDepth, gl_FragCoord.xy / resolution) );
vec4 ndc = vec4(
(vUv.x - 0.5) * 2.0,
(vUv.y - 0.5) * 2.0,
(normalizedDepth - 0.5) * 2.0,
1.0);


vec4 clip = cameraInverseProjectionMatrix * ndc;
vec4 view = uMatrixWorld * (clip / clip.w);
vec3 worldPos = view.xyz;


if(mask.a > 0.1 && mask.r < 1. && player.r > 0.1){
float diff = mask.r;


vec2 channelA = texture2D( dudvMap, vec2(0.25 * worldPos.x + time * 0.08, 0.5 * worldPos.z - time * 0.05) ).rg;
vec2 channelB = texture2D( dudvMap, vec2(0.5 * worldPos.x - time * 0.07, 0.35 * worldPos.z + time * 0.06) ).rg;

vec2 displacement = (channelA + channelB) * 0.5;
displacement = ( ( displacement * 2.0 ) - 1.0 ) * 1.0;
diff += displacement.x;

gl_FragColor = mix( vec4(1.0, 1.0, 1.0, diffuse.a), diffuse, step( 0.5, diff ) );
}
else{
gl_FragColor = diffuse;
}
}
`


};

export { WebaWaterSSRShader, WebaWaterSSRDepthShader, WebaWaterSSRBlurShader, WebaWaterEdgeHBlurShader, WebaWaterEdgeVBlurShader, WebaWaterMaskShader, WebaWaterBlankShader, WebaWaterCombineShader };
export { WebaWaterSSRShader, WebaWaterSSRDepthShader, WebaWaterSSRBlurShader, WebaWaterEdgeHBlurShader, WebaWaterEdgeVBlurShader, WebaWaterMaskShader};