diff --git a/src/app/components/background/background.material.ts b/src/app/components/background/background.material.ts
index 16c4ba9..ed558b6 100644
--- 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,56 +54,41 @@ 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);
@@ -111,11 +96,30 @@ float getGridFactor(vec2 canvasUv) {
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
index 559b50d..9f1b901 100644
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -3,7 +3,7 @@
>