Fractal Glass

1// Built using Hyperiux Vault: https://vault.hyperiux.com
2 
3'use client';
4 
5import { useEffect, useRef, useState } from "react";
6import * as THREE from "three";
7import { createSuspendedRaf } from "./createSuspendedRaf";
8 
9const DEFAULT_IMAGE_SRC = "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/h-13.jpg";
10 
11function usePrefersReducedMotion() {
12  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
13 
14  useEffect(() => {
15    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
16    const update = () => setPrefersReducedMotion(mediaQuery.matches);
17    update();
18    mediaQuery.addEventListener("change", update);
19    return () => mediaQuery.removeEventListener("change", update);
20  }, []);
21 
22  return prefersReducedMotion;
23}
24 
25const vertexShader = `
26 varying vec2 vUv;
27 void main() {
28 vUv = uv;
29 gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
30 }
31`;
32 
33const fragmentShader = `
34 uniform sampler2D uTexture;
35 uniform vec2 uResolution;
36 uniform vec2 uTextureSize;
37 uniform vec2 uMouse;
38 uniform float uParallaxStrength;
39 uniform float uDistortionMultiplier;
40 uniform float uGlassStrength;
41 uniform float uStripesFrequency;
42 uniform float uGlassSmoothness;
43 uniform float uEdgePadding;
44 
45 varying vec2 vUv;
46 
47 vec2 getCoverUV(vec2 uv, vec2 textureSize) {
48 if (textureSize.x < 1.0 || textureSize.y < 1.0) return uv;
49 
50 vec2 s = uResolution / textureSize;
51 float scale = max(s.x, s.y);
52 
53 vec2 scaledSize = textureSize * scale;
54 vec2 offset = (uResolution - scaledSize) * 0.5;
55 
56 return (uv * uResolution - offset) / scaledSize;
57 }
58 
59 float displacement(float x, float num_stripes, float strength) {
60 float modulus = 1.0 / num_stripes;
61 return mod(x, modulus) * strength;
62 }
63 
64 float fractalGlass(float x) {
65 float stripeWidth = 1.0 / uStripesFrequency;
66 float sampleStep = uGlassSmoothness * stripeWidth;
67 float d = 0.0;
68 for (int i = -5; i <= 5; i++) {
69 d += displacement(x + float(i) * sampleStep, uStripesFrequency, uGlassStrength);
70 }
71 d = d / 11.0;
72 return x + d;
73 }
74 
75 float smoothEdge(float x, float padding) {
76 float edge = padding;
77 if (x < edge) {
78 return smoothstep(0.0, edge, x);
79 } else if (x > 1.0 - edge) {
80 return smoothstep(1.0, 1.0 - edge, x);
81 }
82 return 1.0;
83 }
84 
85 void main() {
86 vec2 uv = vUv;
87 
88 float originalX = uv.x;
89 
90 float edgeFactor = smoothEdge(originalX, uEdgePadding);
91 
92 float distortedX = fractalGlass(originalX);
93 
94 uv.x = mix(originalX, distortedX, edgeFactor);
95 
96// … truncated