Image Ripple Effect

1"use client";
2 
3import { OrthographicCamera, useFBO, useTexture } from "@react-three/drei";
4import { Canvas, useFrame, useThree } from "@react-three/fiber";
5import { cn } from "@/lib/utils";
6import * as React from "react";
7import * as THREE from "three";
8import { WebGLErrorBoundary, WebGLFallback } from "./webgl-error-boundary";
9 
10const fragmentShader = `
11uniform sampler2D uTexture;
12uniform sampler2D uDisplacement;
13uniform vec2 winResolution;
14uniform float uStrength;
15 
16const float PI = 3.141592653589793238;
17 
18void main() {
19  vec2 vUvScreen = gl_FragCoord.xy / winResolution.xy;
20  vec4 displacement = texture2D(uDisplacement, vUvScreen);
21  float theta = displacement.r * 2.0 * PI;
22 
23  vec2 dir = vec2(sin(theta), cos(theta));
24  vec2 uv = vUvScreen + dir * displacement.r * uStrength;
25  vec4 color = texture2D(uTexture, uv);
26 
27  gl_FragColor = color;
28}
29`;
30 
31const vertexShader = `
32varying vec2 vUv;
33 
34void main() {
35  vUv = uv;
36  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
37}
38`;
39 
40const BRUSH_DATA_URI = `data:image/svg+xml;utf8,${encodeURIComponent(`
41  <svg xmlns="http://www.w3.org/2000/svg" width="128" height="128">
42    <defs>
43      <radialGradient id="g" cx="50%" cy="50%" r="50%">
44        <stop offset="0%" stop-color="white" stop-opacity="1"/>
45        <stop offset="65%" stop-color="white" stop-opacity="0.55"/>
46        <stop offset="100%" stop-color="white" stop-opacity="0"/>
47      </radialGradient>
48    </defs>
49    <rect width="128" height="128" fill="url(#g)"/>
50  </svg>
51`)}`;
52 
53function createDemoImage(title: string, colorA: string, colorB: string) {
54  const svg = `
55    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1000">
56      <defs>
57        <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
58          <stop offset="0%" stop-color="${colorA}" />
59          <stop offset="100%" stop-color="${colorB}" />
60        </linearGradient>
61      </defs>
62      <rect width="800" height="1000" fill="url(#g)"/>
63      <circle cx="610" cy="180" r="130" fill="white" fill-opacity="0.12"/>
64      <circle cx="180" cy="760" r="190" fill="white" fill-opacity="0.12"/>
65      <text x="64" y="900" fill="white" font-size="64" font-family="system-ui, sans-serif" opacity="0.9">
66        ${title}
67      </text>
68    </svg>
69  `;
70  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
71}
72 
73const DEFAULT_IMAGE_URLS = [createDemoImage("Aurora", "#0f172a", "#155e75")];
74 
75export interface RippleImageItem {
76  src: string;
77  x?: number;
78  y?: number;
79  widthScale?: number;
80// … truncated