I created a diffusion wave using post-processing. When I zoom in or out with the mouse wheel, the diffusion wave will deform. I can’t find the reason, so I asked if you could help me take a look
Here is my post-processing code
Effect.ShadersStore[‘waveVertexShader’] = `
precision highp float;
attribute vec2 position;
varying vec2 vUV;
void main() {
vUV = position * 0.5 + 0.5;
gl_Position = vec4(position, 0.0, 1.0);
}
`;
Effect.ShadersStore[‘waveFragmentShader’] = `
precision highp float;
varying vec2 vUV;
uniform sampler2D textureSampler;
uniform sampler2D depthSampler;
uniform float time;
uniform vec3 waveCenter;
uniform float near;
uniform float far;
uniform mat4 invViewProj;
float linearizeDepth(float z) {
return (2.0 * near * far) / (far + near - z * (far - near));
}
vec3 screenToWorld(vec2 uv, float depth) {
float z = depth * 2.0 - 1.0;
vec4 clip = vec4(uv * 2.0 - 1.0, z, 1.0);
vec4 worldPos = invViewProj * clip;
return worldPos.xyz / worldPos.w;
}
void main() {
float rawDepth = texture2D(depthSampler, vUV).r;
if (rawDepth >= 1.0) {
gl_FragColor = texture2D(textureSampler, vUV);
return;
}
vec3 worldPos = screenToWorld(vUV, rawDepth); // z (rawDepth)
float depth = linearizeDepth(0.1 );
float dist = distance(worldPos.xz, waveCenter.xz);
float wave = abs(dist - mod(time, 20.0));
float strength = smoothstep(1.0, 0.0, wave); //
vec4 base = texture2D(textureSampler, vUV);
vec3 scanColor = mix(base.rgb, vec3(0.0, 1.0, 1.0), strength);
// vec3 scanColor = mix(vec3(worldPos.y * 0.1, 0.0, 0.0), vec3(0.0, 1.0, 1.0), strength);
gl_FragColor = vec4(scanColor, 1.0);
}
`;
const wavePostProcess = new PostProcess(
‘wave’,
‘wave’,
[‘time’, ‘waveCenter’, ‘invViewProj’, ‘near’, ‘far’],
[‘depthSampler’],
1.0, // ratio
camera,
Texture.TRILINEAR_SAMPLINGMODE,
engine,
false, // reusable
undefined,
Texture.NEAREST_SAMPLINGMODE //
);
wavePostProcess.onApply = (effect) => {
const t = performance.now() / 1000;
effect.setFloat('time', t);
effect.setVector3('waveCenter', new Vector3(0, 0, 0));
const invViewProj = camera.getTransformationMatrix().invert();
effect.setMatrix('invViewProj', invViewProj);
effect.setTexture('depthSampler', depthTexture);
effect.setFloat('near', camera.minZ);
effect.setFloat('far', camera.maxZ);
};