Fix foil effect aspect ratio

zk-phi · Jun 25, 2024 · fdb5a1d · fdb5a1d
1 parent fcbc35a
commit fdb5a1d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/src/shaders/foil.glsl b/src/shaders/foil.glsl
@@ -2,13 +2,14 @@ precision highp float;
 uniform sampler2D texture;
 varying vec2 vUv;
 
-uniform float width;
 uniform float keyframe;
+uniform float ratio;
+uniform float width;
 uniform float brightness;
 
 void main(void) {
   gl_FragColor = texture2D(texture, vUv);
-  // y = x + [-1, 1]
-  float dist = vUv.x + 1. - keyframe * 2. - vUv.y;
-  gl_FragColor.rgb += brightness * max(0., width - abs(dist)) / width;
+  // y = ratio * x + [1, - ratio]
+  float dist = ratio * vUv.x + 1. - (ratio + 1.) * keyframe - vUv.y;
+  gl_FragColor.rgb += brightness * max(0., width - abs(dist / sqrt(ratio))) / width;
 }
diff --git a/src/webgleffects/foil.ts b/src/webgleffects/foil.ts
@@ -4,10 +4,11 @@ import shaderFoil from "../shaders/foil.glsl";
 
 const shader = webglEffectShader(shaderFoil.sourceCode);
 
-const webglFoil: WebGLEffect = (keyframe) => {
+const webglFoil: WebGLEffect = (keyframe, width, height) => {
   const program = webglLoadEffectShader(shader);
   webglSetFloat(program, "width", 0.2);
   webglSetFloat(program, "brightness", 0.4);
+  webglSetFloat(program, "ratio", width / height);
   webglSetFloat(program, "keyframe", keyframe);
   return program;
 };