refactor: recompose BackgroundMaterial shader logic

ScarletFlash · Nov 2, 2024 · 01a6c12 · 01a6c12
1 parent e747c0e
commit 01a6c12
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 42 deletions.
diff --git a/src/app/components/background/background.material.ts b/src/app/components/background/background.material.ts
@@ -36,8 +36,8 @@ uniform float ${UniformName.PassedTimeMs};
 
 varying vec2 vUv;
 
-vec2 applyPerspective(vec2 uv) {
-    const float PERSPECTIVE_STRENGTH = 0.9;
+vec2 getPerspectiveUv(vec2 uv) {
+    const float PERSPECTIVE_STRENGTH = 0.65;
     const float CENTER_OFFSET = 0.5;
     const float X_DISTORTION_FACTOR = 0.5;
 
@@ -54,68 +54,72 @@ vec2 applyPerspective(vec2 uv) {
     return vec2(x, y);
 }
 
-float getGridFactor(vec2 canvasUv) {
-    const float MIN_PERSPECTIVE_SCALE = 0.1;
-    const float MAX_PERSPECTIVE_SCALE = 1.0;
+float getGridFactor(vec2 uv, float strokeWidth, float cellSize, float yOffset) {
     const float STROKE_WIDTH_SCALE = 0.1;
     const float VERTICAL_SMOOTHNESS_FACTOR = 0.5;
     const float HORIZONTAL_SMOOTHNESS_FACTOR = 0.7;
 
-    vec2 normalizedUv = canvasUv / ${UniformName.CanvasSize};
-    vec2 perspectiveUv = applyPerspective(normalizedUv);
-
-    vec2 cellOffset = mod(${UniformName.CanvasSize}, ${UniformName.CellSize}) * 0.5;
-
-    vec2 gridUv = perspectiveUv * ${UniformName.CanvasSize} - cellOffset;
-    float yOffset = ${UniformName.MovementStepDurationMs} > 0.0
-        ? (${UniformName.PassedTimeMs} / ${UniformName.MovementStepDurationMs}) * ${UniformName.CellSize}
-        : 0.0;
+    vec2 cellOffset = mod(${UniformName.CanvasSize}, cellSize) * 0.5;
+    vec2 gridUv = uv - cellOffset;
     gridUv.y += yOffset;
-    vec2 normalizedCellUv = gridUv / ${UniformName.CellSize};
-    vec2 cellPosition = fract(normalizedCellUv);
 
-    float depthFactor = 1.0 - perspectiveUv.y;
-    float perspectiveScale = mix(
-        MIN_PERSPECTIVE_SCALE,
-        MAX_PERSPECTIVE_SCALE,
-        smoothstep(0.0, 1.0, depthFactor)
-    );
+    vec2 normalizedCellUv = gridUv / cellSize;
+    vec2 cellPosition = fract(normalizedCellUv);
 
-    float baseStrokeWidth = ${UniformName.StrokeWidth} * STROKE_WIDTH_SCALE;
-    float scaledStrokeWidth = (baseStrokeWidth / ${UniformName.CellSize}) * perspectiveScale;
+    float baseStrokeWidth = strokeWidth * STROKE_WIDTH_SCALE;
+    float scaledStrokeWidth = baseStrokeWidth / cellSize;
 
     float horizontalSmoothWidth = scaledStrokeWidth * HORIZONTAL_SMOOTHNESS_FACTOR;
     float horizontalLine = smoothstep(
-      1.0 -scaledStrokeWidth - horizontalSmoothWidth,
-      1.0 - scaledStrokeWidth + horizontalSmoothWidth,
-      cellPosition.y
+        1.0 - scaledStrokeWidth - horizontalSmoothWidth,
+        1.0 - scaledStrokeWidth + horizontalSmoothWidth,
+        cellPosition.y
     ) + smoothstep(
-      scaledStrokeWidth + horizontalSmoothWidth,
-      scaledStrokeWidth - horizontalSmoothWidth,
-      cellPosition.y
+        scaledStrokeWidth + horizontalSmoothWidth,
+        scaledStrokeWidth - horizontalSmoothWidth,
+        cellPosition.y
     );
 
     float verticalSmoothWidth = scaledStrokeWidth * VERTICAL_SMOOTHNESS_FACTOR;
     float verticalLine = smoothstep(
-      1.0 - scaledStrokeWidth - verticalSmoothWidth,
-      1.0 - scaledStrokeWidth + verticalSmoothWidth,
-      cellPosition.x
+        1.0 - scaledStrokeWidth - verticalSmoothWidth,
+        1.0 - scaledStrokeWidth + verticalSmoothWidth,
+        cellPosition.x
     ) + smoothstep(
-      scaledStrokeWidth + verticalSmoothWidth,
-      scaledStrokeWidth - verticalSmoothWidth,
-      cellPosition.x
+        scaledStrokeWidth + verticalSmoothWidth,
+        scaledStrokeWidth - verticalSmoothWidth,
+        cellPosition.x
     );
 
     return min(1.0, horizontalLine + verticalLine);
 }
 
 void main() {
     vec2 canvasUv = vUv * ${UniformName.CanvasSize};
-    float gridFactor = getGridFactor(canvasUv);
+    vec2 normalizedUv = canvasUv / ${UniformName.CanvasSize};
+    vec2 perspectiveUv = getPerspectiveUv(normalizedUv);
 
-    vec2 perspectiveUv = applyPerspective(vUv);
-    float fadeout = smoothstep(1.0, 0.0, perspectiveUv.y);
+    float yOffset = ${UniformName.MovementStepDurationMs} > 0.0
+        ? (${UniformName.PassedTimeMs} / ${UniformName.MovementStepDurationMs}) * ${UniformName.CellSize}
+        : 0.0;
 
+    const float MIN_PERSPECTIVE_SCALE = 0.1;
+    const float MAX_PERSPECTIVE_SCALE = 1.0;
+    float depthFactor = 1.0 - perspectiveUv.y;
+    float perspectiveScale = mix(
+        MIN_PERSPECTIVE_SCALE,
+        MAX_PERSPECTIVE_SCALE,
+        smoothstep(0.0, 1.0, depthFactor)
+    );
+
+    float gridFactor = getGridFactor(
+        perspectiveUv * ${UniformName.CanvasSize},
+        ${UniformName.StrokeWidth} * perspectiveScale,
+        ${UniformName.CellSize},
+        yOffset
+    );
+
+    float fadeout = smoothstep(1.0, 0.0, perspectiveUv.y);
     gl_FragColor = vec4(${UniformName.StrokeColor}, gridFactor * fadeout);
 }
 `;
@@ -154,8 +158,6 @@ export class BackgroundMaterial extends ShaderMaterial {
       );
     }
     canvasSize.set(width, height);
-
-    console.log("Canvas size set to", width, height);
   }
 
   public setFrameTimeStamp(timeStamp: DOMHighResTimeStamp): void {

diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
@@ -3,7 +3,7 @@
 >
   <app-background
     class="size-full absolute pointer-events-none"
-    movement-step-duration="0"
+    movement-step-duration="2000"
   ></app-background>
 
   <section