How can apply a shader to a graphics object, and never the entire canvas?
I’ve a wave shader instance right here https://phaser.io/sandbox/6SsT2zfC, and I would like the wave to be unaffected by the digicam’s scrollX. Now, the wave seems prefer it’s shifting sooner/slower when the digicam strikes.
This is the principle shader code
const fragShader = `
#outline SHADER_NAME WATER_WAVE_FS
precision mediump float;
uniform sampler2D uMainSampler;
uniform float uTime;
uniform vec2 uResolution;
uniform vec2 uWaveParams; // x: amplitude, y: frequency
uniform float uSpeed;
uniform vec2 uScroll; // Digicam scrollX
void important() {
vec2 fragCoord = (gl_FragCoord.xy / uResolution.xy);
// Use fragCoord as an alternative of fragCoord in your wave calculation
float wave = sin(fragCoord.x * uWaveParams.y + uTime * uSpeed) * uWaveParams.x;
vec2 distortedCoord = vec2(gl_FragCoord.x / uResolution.x, gl_FragCoord.y / uResolution.y + wave);
// vec2 distortedCoord = vec2((gl_FragCoord.x+uScroll.x) / uResolution.x, gl_FragCoord.y / uResolution.y + wave;
vec4 texColor = texture2D(uMainSampler, distortedCoord);
gl_FragColor = texColor;
}
`;
I attempted so as to add a scrollX to offset the wave by passing the digicam’s scrollX to the shader.
For instance
vec2 distortedCoord = vec2((gl_FragCoord.x+uScroll.x) / uResolution.x, gl_FragCoord.y / uResolution.y + wave;
It will solely make the wave transfer even sooner when the digicam strikes.
The anticipated result’s to have the wave transfer constantly even when the digicam is shifting.
Possibly it is attainable to make different changes to the shader primarily based on the place of the graphics object within the scene as an alternative?
