Open squareclouds opened 6 months ago
i got it working. i changed this in my shader fragment
i define a focus point 'focusx' in the shader
uniform float time;
uniform float pixelRatio;
uniform float focusx;
...
i changed
vec2 vUv = (uv - vec2(0.5))*resolution.zw + vec2(0.5);
to
vec2 vUv = (uv - vec2(focusx))*resolution.zw + vec2(focusx);
then i define and pass that uniform from js
//look for the relevant areas in js code where similar definitions are done and add this to each part
this.focusx = this.container.getAttribute('data-focusx');
...
this.uFocusx = new Uniform('focusx', '1f', this.program, this.gl);
...
this.uFocusx.set(this.focusx);
now if i set 'data-focusx' in my html element like data-focusx="0.75" then the image is rendered focusing the area at 75% of the width when the image is getting cropped
hello and thanks for the great library! i have added a scroll event for my project and it works great. i was wondering, do you have a quick trick for offsetting the image so when cropped the canvas focuses a specific area? either in percent like 75% 100% or just "center right" or something like that.
any help is appreciated!