import React from 'react'; import * as THREE from 'three'; /** * 정규화된 좌표계의 2D 포인트 (0.0 - 1.0) */ interface Point { x: number; y: number; } /** * 애니메이션 이징 함수 타입 */ type EasingFunction = 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' | 'easeInQuad' | 'easeOutQuad'; /** * 왜곡 애니메이션 움직임 설정 */ interface DistortionMovement { /** 왜곡 시작 벡터 */ vectorA: Point; /** 왜곡 종료 벡터 */ vectorB: Point; /** 애니메이션 지속 시간 (초) */ duration: number; /** 적용할 이징 함수 */ easing: EasingFunction; } /** * 사각형 포인트와 애니메이션 설정을 포함하는 왜곡 영역 */ interface DistortionArea { /** 고유 식별자 */ id: string; /** 사각형의 네 모서리 포인트 [topLeft, topRight, bottomRight, bottomLeft] */ basePoints: [Point, Point, Point, Point]; /** 움직임 애니메이션 설정 */ movement: DistortionMovement; /** 왜곡 강도 (0.0 - 1.0) */ distortionStrength: number; /** 현재 애니메이션 진행도 (0.0 - 1.0) */ progress: number; /** 현재 드래그 벡터 (progress로부터 계산됨) */ dragVector: Point; } /** * 영역 충돌 감지를 위한 경계 상자 */ interface AreaBounds { minX: number; minY: number; maxX: number; maxY: number; } /** * 셰이더 유니폼 변수 타입 */ interface ShaderUniforms { [uniform: string]: THREE.IUniform; /** 화면 해상도 */ u_resolution: THREE.IUniform; /** 이미지 텍스처 */ u_texture: THREE.IUniform; /** 모든 영역의 포인트 배열 (최대 32개 포인트 = 8영역 × 4포인트) */ u_points: THREE.IUniform; /** 활성 영역 개수 */ u_numAreas: THREE.IUniform; /** 각 영역의 드래그 벡터 배열 */ u_dragVectors: THREE.IUniform; /** 각 영역의 왜곡 강도 배열 */ u_distortionStrengths: THREE.IUniform; } /** * 셰이더 설정 */ interface ShaderConfig { /** 최대 영역 개수 */ maxAreas: number; /** 최대 포인트 개수 (maxAreas × 4) */ maxPoints: number; } /** * 애니메이션 상태 */ interface AnimationState { /** 재생 중 여부 */ isPlaying: boolean; /** 현재 시간 (초) */ currentTime: number; /** 델타 타임 (프레임 간 시간 차이, 초) */ deltaTime: number; /** 현재 FPS */ fps: number; } /** * 애니메이션 틱 컨트롤러 */ interface AnimationTicker { /** 애니메이션 시작 */ start: () => void; /** 애니메이션 정지 */ stop: () => void; /** 애니메이션 일시정지 */ pause: () => void; /** 애니메이션 재개 */ resume: () => void; } /** * ImageDistortion 컴포넌트 Props */ interface ImageDistortionProps { /** 이미지 소스 URL */ imageSrc: string; /** 왜곡 영역 배열 */ areas: DistortionArea[]; /** 버텍스 셰이더 경로 (선택사항) */ vertexShaderPath?: string; /** 프래그먼트 셰이더 경로 (선택사항) */ fragmentShaderPath?: string; /** 애니메이션 재생 여부 */ isPlaying?: boolean; /** 컨테이너 스타일 */ style?: React.CSSProperties; /** 컨테이너 클래스명 */ className?: string; } /** * GPU 가속 이미지 왜곡 컴포넌트 * Three.js와 GLSL 셰이더를 사용하여 실시간 이미지 왜곡 효과를 제공합니다. */ declare const ImageDistortion: React.FC; /** * 진행도에 이징 함수를 적용 * @param progress 진행도 (0.0 - 1.0) * @param easingType 적용할 이징 함수 타입 * @returns 이징이 적용된 진행도 (0.0 - 1.0) */ declare const applyEasing: (progress: number, easingType: EasingFunction) => number; /** * 셰이더 관련 설정 */ declare const SHADER_CONFIG: { /** 최대 영역 개수 */ readonly MAX_AREAS: 8; /** 최대 포인트 개수 (8영역 × 4포인트) */ readonly MAX_POINTS: 32; /** 최대 드래그 벡터 개수 */ readonly MAX_DRAG_VECTORS: 8; /** 최대 강도 배열 크기 */ readonly MAX_STRENGTHS: 8; }; /** * 애니메이션 관련 설정 */ declare const ANIMATION_CONFIG: { /** 목표 FPS */ readonly TARGET_FPS: 60; /** 델타 타임 (약 16.67ms) */ readonly DELTA_TIME: number; }; /** * 기본 영역 설정값 */ declare const DEFAULT_AREA: { /** 기본 왜곡 강도 */ readonly DISTORTION_STRENGTH: 0.5; /** 기본 애니메이션 지속 시간 (초) */ readonly DURATION: 2; /** 기본 이징 함수 */ readonly EASING: "easeInOut"; /** 기본 벡터 A */ readonly VECTOR_A: { readonly x: 0.1; readonly y: 0.1; }; /** 기본 벡터 B */ readonly VECTOR_B: { readonly x: -0.1; readonly y: -0.1; }; }; /** * Three.js 씬 관리 클래스 */ declare class ThreeScene { private container; private scene; private camera; private renderer; private mesh; private uniforms; constructor(container: HTMLElement); /** * 윈도우 리사이즈 핸들러 */ private handleResize; /** * 셰이더 머티리얼 설정 * @param vertexShader 버텍스 셰이더 소스 * @param fragmentShader 프래그먼트 셰이더 소스 */ setShaderMaterial(vertexShader: string, fragmentShader: string): void; /** * 유니폼 값 업데이트 * @param updates 업데이트할 유니폼 값들 */ updateUniforms(updates: Partial): void; /** * 씬 렌더링 */ render(): void; /** * 리소스 정리 */ dispose(): void; } /** * 셰이더 파일 로딩 및 관리 클래스 */ declare class ShaderManager { private vertexShaderSource; private fragmentShaderSource; /** * 셰이더 파일들을 비동기로 로드 * @param vertexPath 버텍스 셰이더 파일 경로 * @param fragmentPath 프래그먼트 셰이더 파일 경로 * @returns 로드된 셰이더 소스 코드 */ loadShaders(vertexPath: string, fragmentPath: string): Promise<{ vertex: string; fragment: string; }>; /** * 버텍스 셰이더 소스 코드 반환 */ getVertexShader(): string; /** * 프래그먼트 셰이더 소스 코드 반환 */ getFragmentShader(): string; } /** * 애니메이션 루프 관리 클래스 */ declare class AnimationLoop { /** * 영역들의 드래그 벡터를 현재 진행도에 따라 업데이트 * @param areas 왜곡 영역 배열 * @returns 업데이트된 영역 배열 */ static updateAreaDragVectors(areas: DistortionArea[]): DistortionArea[]; /** * 모든 영역의 진행도를 델타 타임만큼 업데이트 * @param areas 왜곡 영역 배열 * @param deltaTime 델타 타임 (초) * @returns 업데이트된 영역 배열 */ static updateProgress(areas: DistortionArea[], deltaTime: number): DistortionArea[]; } /** * requestAnimationFrame을 사용한 애니메이션 루프 훅 * @param callback 매 프레임마다 호출될 콜백 (deltaTime을 인자로 받음) * @param isPlaying 애니메이션 재생 여부 */ declare const useAnimationFrame: (callback: (deltaTime: number) => void, isPlaying?: boolean) => void; export { ANIMATION_CONFIG, AnimationLoop, type AnimationState, type AnimationTicker, type AreaBounds, DEFAULT_AREA, type DistortionArea, type DistortionMovement, type EasingFunction, ImageDistortion, type ImageDistortionProps, type Point, SHADER_CONFIG, type ShaderConfig, ShaderManager, type ShaderUniforms, ThreeScene, applyEasing, useAnimationFrame };