🎉 New <PixelSnow /> component

src/content/Backgrounds/PixelSnow/PixelSnow.vue

@@ -0,0 +1,277 @@
+<script setup lang="ts">
+import {
+  Color,
+  Mesh,
+  OrthographicCamera,
+  PlaneGeometry,
+  Scene,
+  ShaderMaterial,
+  Vector2,
+  Vector3,
+  WebGLRenderer
+} from 'three';
+import { onBeforeUnmount, onMounted, ref, useTemplateRef, watch, type CSSProperties } from 'vue';
+
+const vertexShader = `
+void main() {
+  gl_Position = vec4(position, 1.0);
+}
+`;
+
+const fragmentShader = `
+precision highp float;
+
+uniform float uTime;
+uniform vec2 uResolution;
+uniform float uFlakeSize;
+uniform float uMinFlakeSize;
+uniform float uPixelResolution;
+uniform float uSpeed;
+uniform float uDepthFade;
+uniform float uFarPlane;
+uniform vec3 uColor;
+uniform float uBrightness;
+uniform float uGamma;
+uniform float uDensity;
+uniform float uVariant;
+uniform float uDirection;
+
+#define M1 1597334677U
+#define M2 3812015801U
+#define M3 3299493293U
+#define F0 (1.0/float(0xffffffffU))
+#define hash(n) n*(n^(n>>15))
+#define coord3(p) (uvec3(p).x*M1^uvec3(p).y*M2^uvec3(p).z*M3)
+
+vec3 hash3(uint n) {
+  return vec3(hash(n) * uvec3(0x1U, 0x1ffU, 0x3ffffU)) * F0;
+}
+
+float snowflakeDist(vec2 p) {
+  float r = length(p);
+  float a = atan(p.y, p.x);
+  float PI = 3.14159265;
+  a = abs(mod(a + PI / 6.0, PI / 3.0) - PI / 6.0);
+  vec2 q = r * vec2(cos(a), sin(a));
+  float dMain = abs(q.y);
+  dMain = max(dMain, max(-q.x, q.x - 1.0));
+  vec2 b1s = vec2(0.4, 0.0);
+  vec2 b1d = vec2(0.574, 0.819);
+  float b1t = clamp(dot(q - b1s, b1d), 0.0, 0.4);
+  float dB1 = length(q - b1s - b1t * b1d);
+  vec2 b2s = vec2(0.7, 0.0);
+  float b2t = clamp(dot(q - b2s, b1d), 0.0, 0.25);
+  float dB2 = length(q - b2s - b2t * b1d);
+  return min(dMain, min(dB1, dB2)) * 10.0;
+}
+
+void main() {
+  float pixelSize = max(1.0, floor(0.5 + uResolution.x / uPixelResolution));
+  vec2 fragCoord = floor(gl_FragCoord.xy / pixelSize);
+  vec2 res = uResolution / pixelSize;
+
+  vec3 ray = normalize(vec3((fragCoord - res * 0.5) / res.x, 1.0));
+
+  vec3 camK = normalize(vec3(1.0, 1.0, 1.0));
+  vec3 camI = normalize(vec3(1.0, 0.0, -1.0));
+  vec3 camJ = cross(camK, camI);
+  ray = ray.x * camI + ray.y * camJ + ray.z * camK;
+
+  float windX = cos(uDirection) * 0.4;
+  float windY = sin(uDirection) * 0.4;
+  vec3 camPos = (windX * camI + windY * camJ + 0.1 * camK) * uTime * uSpeed;
+  vec3 pos = camPos;
+
+  vec3 strides = 1.0 / max(abs(ray), vec3(0.001));
+  vec3 phase = fract(pos) * strides;
+  phase = mix(strides - phase, phase, step(ray, vec3(0.0)));
+
+  float t = 0.0;
+  for (int i = 0; i < 256; i++) {
+    if (t >= uFarPlane) break;
+    vec3 fpos = floor(pos);
+    float cellHash = hash3(coord3(fpos)).x;
+
+    if (cellHash < uDensity) {
+      vec3 h = hash3(coord3(fpos));
+      vec3 flakePos = 0.5 - 0.5 * cos(
+        4.0 * sin(fpos.yzx * 0.073) +
+        4.0 * sin(fpos.zxy * 0.27) +
+        2.0 * h +
+        uTime * uSpeed * 0.1 * vec3(7.0, 8.0, 5.0)
+      );
+      flakePos = flakePos * 0.8 + 0.1 + fpos;
+
+      float toIntersection = dot(flakePos - pos, camK) / dot(ray, camK);
+      if (toIntersection > 0.0) {
+        vec3 testPos = pos + ray * toIntersection - flakePos;
+        vec2 testUV = abs(vec2(dot(testPos, camI), dot(testPos, camJ)));
+        float depth = dot(flakePos - camPos, camK);
+        float flakeSize = max(uFlakeSize, uMinFlakeSize * depth * 0.5 / res.x);
+        float dist;
+        if (uVariant < 0.5) dist = max(testUV.x, testUV.y);
+        else if (uVariant < 1.5) dist = length(testUV);
+        else dist = snowflakeDist(vec2(dot(testPos, camI), dot(testPos, camJ)) / flakeSize) * flakeSize;
+
+        if (dist < flakeSize) {
+          float intensity = exp2(-(t + toIntersection) / uDepthFade) *
+                           min(1.0, pow(uFlakeSize / flakeSize, 2.0)) * uBrightness;
+          gl_FragColor = vec4(uColor * pow(vec3(intensity), vec3(uGamma)), 1.0);
+          return;
+        }
+      }
+    }
+
+    float nextStep = min(min(phase.x, phase.y), phase.z);
+    vec3 sel = step(phase, vec3(nextStep));
+    phase = phase - nextStep + strides * sel;
+    t += nextStep;
+    pos = mix(pos + ray * nextStep, floor(pos + ray * nextStep + 0.5), sel);
+  }
+
+  gl_FragColor = vec4(0.0);
+}
+`;
+
+interface PixelSnowProps {
+  color?: string;
+  flakeSize?: number;
+  minFlakeSize?: number;
+  pixelResolution?: number;
+  speed?: number;
+  depthFade?: number;
+  farPlane?: number;
+  brightness?: number;
+  gamma?: number;
+  density?: number;
+  variant?: 'square' | 'round' | 'snowflake';
+  direction?: number;
+  className?: string;
+  style?: CSSProperties;
+}
+
+const props = withDefaults(defineProps<PixelSnowProps>(), {
+  color: '#ffffff',
+  flakeSize: 0.01,
+  minFlakeSize: 1.25,
+  pixelResolution: 200,
+  speed: 1.25,
+  depthFade: 8,
+  farPlane: 20,
+  brightness: 1,
+  gamma: 0.4545,
+  density: 0.3,
+  variant: 'square',
+  direction: 125,
+  className: '',
+  style: () => ({})
+});
+
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
+const animationRef = ref<number>(0);
+
+let cleanupFn: (() => void) | null = null;
+const setupFn = () => {
+  const container = containerRef.value;
+  if (!container) return;
+
+  const scene = new Scene();
+  const camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
+  const renderer = new WebGLRenderer({
+    antialias: false,
+    alpha: true,
+    premultipliedAlpha: false,
+    powerPreference: 'high-performance'
+  });
+
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+  renderer.setSize(container.offsetWidth, container.offsetHeight);
+  renderer.setClearColor(0x000000, 0);
+  container.appendChild(renderer.domElement);
+
+  const threeColor = new Color(props.color);
+  const material = new ShaderMaterial({
+    vertexShader,
+    fragmentShader,
+    uniforms: {
+      uTime: { value: 0 },
+      uResolution: { value: new Vector2(container.offsetWidth, container.offsetHeight) },
+      uFlakeSize: { value: props.flakeSize },
+      uMinFlakeSize: { value: props.minFlakeSize },
+      uPixelResolution: { value: props.pixelResolution },
+      uSpeed: { value: props.speed },
+      uDepthFade: { value: props.depthFade },
+      uFarPlane: { value: props.farPlane },
+      uColor: { value: new Vector3(threeColor.r, threeColor.g, threeColor.b) },
+      uBrightness: { value: props.brightness },
+      uGamma: { value: props.gamma },
+      uDensity: { value: props.density },
+      uVariant: { value: props.variant === 'round' ? 1.0 : props.variant === 'snowflake' ? 2.0 : 0.0 },
+      uDirection: { value: (props.direction * Math.PI) / 180 }
+    },
+    transparent: true
+  });
+
+  const geometry = new PlaneGeometry(2, 2);
+  scene.add(new Mesh(geometry, material));
+
+  const handleResize = () => {
+    const w = container.offsetWidth,
+      h = container.offsetHeight;
+    renderer.setSize(w, h);
+    material.uniforms.uResolution.value.set(w, h);
+  };
+  window.addEventListener('resize', handleResize);
+
+  const startTime = performance.now();
+  const animate = () => {
+    animationRef.value = requestAnimationFrame(animate);
+    material.uniforms.uTime.value = (performance.now() - startTime) * 0.001;
+    renderer.render(scene, camera);
+  };
+  animate();
+
+  cleanupFn = () => {
+    cancelAnimationFrame(animationRef.value);
+    window.removeEventListener('resize', handleResize);
+    container.removeChild(renderer.domElement);
+    renderer.dispose();
+    geometry.dispose();
+    material.dispose();
+  };
+};
+
+onMounted(() => {
+  setupFn();
+});
+
+onBeforeUnmount(() => {
+  cleanupFn?.();
+});
+
+watch(
+  () => [
+    props.color,
+    props.flakeSize,
+    props.minFlakeSize,
+    props.pixelResolution,
+    props.speed,
+    props.depthFade,
+    props.farPlane,
+    props.brightness,
+    props.gamma,
+    props.density,
+    props.variant,
+    props.direction
+  ],
+  () => {
+    cleanupFn?.();
+    setupFn();
+  },
+  { deep: true }
+);
+</script>
+
+<template>
+  <div ref="containerRef" :class="['absolute inset-0 w-full h-full', className]" :style="style"></div>
+</template>