responsive-image-canvas/dist/index.mjs

// src/components/ImageDistortion.tsx
import { useEffect as useEffect2, useRef as useRef2, useState, useCallback } from "react";
import * as THREE2 from "three";

// src/engine/ThreeScene.ts
import * as THREE from "three";
var ThreeScene = class {
  constructor(container) {
    this.container = container;
    this.mesh = null;
    /**
     * 윈도우 리사이즈 핸들러
     */
    this.handleResize = () => {
      const width = this.container.clientWidth;
      const height = this.container.clientHeight;
      this.renderer.setSize(width, height);
      this.uniforms.u_resolution.value.set(width, height);
      if (this.mesh) {
        this.render();
      }
    };
    this.scene = new THREE.Scene();
    this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
    this.renderer = new THREE.WebGLRenderer({
      antialias: true,
      alpha: false
    });
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.container.appendChild(this.renderer.domElement);
    this.uniforms = {
      u_resolution: { value: new THREE.Vector2() },
      u_texture: { value: null },
      u_points: { value: new Float32Array(64) },
      // 32포인트 × 2(x,y)
      u_numAreas: { value: 0 },
      u_dragVectors: { value: new Float32Array(16) },
      // 8벡터 × 2(x,y)
      u_distortionStrengths: { value: new Float32Array(8) }
    };
    this.handleResize();
    window.addEventListener("resize", this.handleResize);
  }
  /**
   * 셰이더 머티리얼 설정
   * @param vertexShader 버텍스 셰이더 소스
   * @param fragmentShader 프래그먼트 셰이더 소스
   */
  setShaderMaterial(vertexShader, fragmentShader) {
    console.log("[ThreeScene] setShaderMaterial \uD638\uCD9C\uB428");
    console.log("[ThreeScene] vertexShader \uAE38\uC774:", vertexShader.length);
    console.log("[ThreeScene] fragmentShader \uAE38\uC774:", fragmentShader.length);
    const geometry = new THREE.PlaneGeometry(2, 2);
    const material = new THREE.ShaderMaterial({
      uniforms: this.uniforms,
      vertexShader,
      fragmentShader
    });
    console.log("[ThreeScene] ShaderMaterial \uC0DD\uC131\uB428");
    const renderer = this.renderer;
    const testScene = new THREE.Scene();
    const testMesh = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), material);
    testScene.add(testMesh);
    try {
      renderer.compile(testScene, this.camera);
      console.log("[ThreeScene] \uC170\uC774\uB354 \uCEF4\uD30C\uC77C \uC131\uACF5!");
    } catch (e) {
      console.error("[ThreeScene] \uC170\uC774\uB354 \uCEF4\uD30C\uC77C \uC5D0\uB7EC:", e);
    }
    if (this.mesh) {
      this.scene.remove(this.mesh);
    }
    this.mesh = new THREE.Mesh(geometry, material);
    this.scene.add(this.mesh);
    console.log("[ThreeScene] mesh\uB97C \uC52C\uC5D0 \uCD94\uAC00\uD568");
  }
  /**
   * 유니폼 값 업데이트
   * @param updates 업데이트할 유니폼 값들
   */
  updateUniforms(updates) {
    Object.keys(updates).forEach((key) => {
      const uniformKey = key;
      this.uniforms[uniformKey].value = updates[uniformKey].value;
    });
  }
  /**
   * 씬 렌더링
   */
  render() {
    console.log("[ThreeScene] render() \uD638\uCD9C\uB428, mesh:", this.mesh);
    this.renderer.render(this.scene, this.camera);
  }
  /**
   * 리소스 정리
   */
  dispose() {
    window.removeEventListener("resize", this.handleResize);
    this.renderer.dispose();
    if (this.mesh) {
      this.mesh.geometry.dispose();
      this.mesh.material.dispose();
    }
    if (this.container.contains(this.renderer.domElement)) {
      this.container.removeChild(this.renderer.domElement);
    }
  }
};

// src/engine/ShaderManager.ts
var ShaderManager = class {
  constructor() {
    this.vertexShaderSource = null;
    this.fragmentShaderSource = null;
  }
  /**
   * 셰이더 파일들을 비동기로 로드
   * @param vertexPath 버텍스 셰이더 파일 경로
   * @param fragmentPath 프래그먼트 셰이더 파일 경로
   * @returns 로드된 셰이더 소스 코드
   */
  async loadShaders(vertexPath, fragmentPath) {
    console.log("[ShaderManager] loadShaders \uC2DC\uC791:", { vertexPath, fragmentPath });
    try {
      console.log("[ShaderManager] fetch \uC2DC\uC791...");
      const [vertexResponse, fragmentResponse] = await Promise.all([
        fetch(vertexPath),
        fetch(fragmentPath)
      ]);
      console.log("[ShaderManager] fetch \uC644\uB8CC:", {
        vertexStatus: vertexResponse.status,
        fragmentStatus: fragmentResponse.status
      });
      if (!vertexResponse.ok) {
        throw new Error(`\uBC84\uD14D\uC2A4 \uC170\uC774\uB354 \uB85C\uB4DC \uC2E4\uD328: ${vertexResponse.statusText}`);
      }
      if (!fragmentResponse.ok) {
        throw new Error(`\uD504\uB798\uADF8\uBA3C\uD2B8 \uC170\uC774\uB354 \uB85C\uB4DC \uC2E4\uD328: ${fragmentResponse.statusText}`);
      }
      console.log("[ShaderManager] text() \uBCC0\uD658 \uC2DC\uC791...");
      this.vertexShaderSource = await vertexResponse.text();
      this.fragmentShaderSource = await fragmentResponse.text();
      console.log("[ShaderManager] \uC170\uC774\uB354 \uB85C\uB4DC \uC644\uB8CC!", {
        vertexLength: this.vertexShaderSource.length,
        fragmentLength: this.fragmentShaderSource.length
      });
      return {
        vertex: this.vertexShaderSource,
        fragment: this.fragmentShaderSource
      };
    } catch (error) {
      console.error("[ShaderManager] \uC170\uC774\uB354 \uB85C\uB4DC \uC2E4\uD328:", error);
      throw new Error("\uC170\uC774\uB354 \uB85C\uB529\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4");
    }
  }
  /**
   * 버텍스 셰이더 소스 코드 반환
   */
  getVertexShader() {
    if (!this.vertexShaderSource) {
      throw new Error("\uBC84\uD14D\uC2A4 \uC170\uC774\uB354\uAC00 \uB85C\uB4DC\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4");
    }
    return this.vertexShaderSource;
  }
  /**
   * 프래그먼트 셰이더 소스 코드 반환
   */
  getFragmentShader() {
    if (!this.fragmentShaderSource) {
      throw new Error("\uD504\uB798\uADF8\uBA3C\uD2B8 \uC170\uC774\uB354\uAC00 \uB85C\uB4DC\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4");
    }
    return this.fragmentShaderSource;
  }
};

// src/utils/easing.ts
var easingFunctions = {
  linear: (t) => t,
  easeIn: (t) => t * t,
  easeOut: (t) => t * (2 - t),
  easeInOut: (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
  easeInQuad: (t) => t * t,
  easeOutQuad: (t) => t * (2 - t)
};
var applyEasing = (progress, easingType) => {
  const clampedProgress = Math.max(0, Math.min(1, progress));
  return easingFunctions[easingType](clampedProgress);
};

// src/engine/AnimationLoop.ts
var AnimationLoop = class {
  /**
   * 영역들의 드래그 벡터를 현재 진행도에 따라 업데이트
   * @param areas 왜곡 영역 배열
   * @returns 업데이트된 영역 배열
   */
  static updateAreaDragVectors(areas) {
    return areas.map((area) => {
      const { progress, movement } = area;
      const easedProgress = applyEasing(progress, movement.easing);
      let dragVector;
      if (easedProgress < 0.5) {
        const t = easedProgress * 2;
        dragVector = {
          x: movement.vectorA.x * t,
          y: movement.vectorA.y * t
        };
      } else {
        const t = (easedProgress - 0.5) * 2;
        dragVector = {
          x: movement.vectorA.x * (1 - t),
          y: movement.vectorA.y * (1 - t)
        };
      }
      return {
        ...area,
        dragVector
      };
    });
  }
  /**
   * 모든 영역의 진행도를 델타 타임만큼 업데이트
   * @param areas 왜곡 영역 배열
   * @param deltaTime 델타 타임 (초)
   * @returns 업데이트된 영역 배열
   */
  static updateProgress(areas, deltaTime) {
    return areas.map((area) => {
      let newProgress = area.progress + deltaTime / area.movement.duration;
      newProgress %= 1;
      return {
        ...area,
        progress: newProgress
      };
    });
  }
};

// src/hooks/useAnimationFrame.ts
import { useEffect, useRef } from "react";
var useAnimationFrame = (callback, isPlaying = true) => {
  const requestRef = useRef(void 0);
  const previousTimeRef = useRef(void 0);
  useEffect(() => {
    if (!isPlaying) return;
    const animate = (time) => {
      if (previousTimeRef.current !== void 0) {
        const deltaTime = (time - previousTimeRef.current) / 1e3;
        callback(deltaTime);
      }
      previousTimeRef.current = time;
      requestRef.current = requestAnimationFrame(animate);
    };
    requestRef.current = requestAnimationFrame(animate);
    return () => {
      if (requestRef.current) {
        cancelAnimationFrame(requestRef.current);
      }
    };
  }, [callback, isPlaying]);
};

// src/utils/constants.ts
var SHADER_CONFIG = {
  /** 최대 영역 개수 */
  MAX_AREAS: 8,
  /** 최대 포인트 개수 (8영역 × 4포인트) */
  MAX_POINTS: 32,
  /** 최대 드래그 벡터 개수 */
  MAX_DRAG_VECTORS: 8,
  /** 최대 강도 배열 크기 */
  MAX_STRENGTHS: 8
};
var ANIMATION_CONFIG = {
  /** 목표 FPS */
  TARGET_FPS: 60,
  /** 델타 타임 (약 16.67ms) */
  DELTA_TIME: 1 / 60
};
var DEFAULT_AREA = {
  /** 기본 왜곡 강도 */
  DISTORTION_STRENGTH: 0.5,
  /** 기본 애니메이션 지속 시간 (초) */
  DURATION: 2,
  /** 기본 이징 함수 */
  EASING: "easeInOut",
  /** 기본 벡터 A */
  VECTOR_A: { x: 0.1, y: 0.1 },
  /** 기본 벡터 B */
  VECTOR_B: { x: -0.1, y: -0.1 }
};

// src/components/ImageDistortion.tsx
import { jsx } from "react/jsx-runtime";
var ImageDistortion = ({
  imageSrc,
  areas,
  vertexShaderPath,
  fragmentShaderPath,
  isPlaying = true,
  style,
  className
}) => {
  const containerRef = useRef2(null);
  const sceneRef = useRef2(null);
  const shaderManagerRef = useRef2(new ShaderManager());
  const textureRef = useRef2(null);
  const [isReady, setIsReady] = useState(false);
  const [imageLoaded, setImageLoaded] = useState(false);
  const [currentAreas, setCurrentAreas] = useState(areas);
  useEffect2(() => {
    setCurrentAreas(areas);
  }, [areas]);
  useEffect2(() => {
    console.log("[ImageDistortion] useEffect \uC2E4\uD589, containerRef.current:", containerRef.current);
    if (!containerRef.current) {
      console.warn("[ImageDistortion] containerRef.current\uAC00 null\uC785\uB2C8\uB2E4. \uCEF4\uD3EC\uB10C\uD2B8\uAC00 \uC81C\uB300\uB85C \uB9C8\uC6B4\uD2B8\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4.");
      return;
    }
    console.log("[ImageDistortion] \uCD08\uAE30\uD654 \uC2DC\uC791");
    const scene = new ThreeScene(containerRef.current);
    sceneRef.current = scene;
    const vertPath = vertexShaderPath || "/shaders/distortion.vert.glsl";
    const fragPath = fragmentShaderPath || "/shaders/distortion.frag.glsl";
    console.log("[ImageDistortion] \uC170\uC774\uB354 \uB85C\uB4DC \uC2DC\uB3C4:", { vertPath, fragPath });
    shaderManagerRef.current.loadShaders(vertPath, fragPath).then(({ vertex, fragment }) => {
      console.log("[ImageDistortion] \uC170\uC774\uB354 \uB85C\uB4DC \uC131\uACF5");
      scene.setShaderMaterial(vertex, fragment);
      setIsReady(true);
    }).catch((error) => {
      console.error("[ImageDistortion] \uC170\uC774\uB354 \uB85C\uB4DC \uC2E4\uD328:", error);
    });
    return () => {
      scene.dispose();
      if (textureRef.current) {
        textureRef.current.dispose();
      }
    };
  }, [vertexShaderPath, fragmentShaderPath]);
  useEffect2(() => {
    if (!imageSrc || !isReady) {
      console.log("[ImageDistortion] \uC774\uBBF8\uC9C0 \uB85C\uB4DC \uC2A4\uD0B5:", { imageSrc, isReady });
      return;
    }
    console.log("[ImageDistortion] \uC774\uBBF8\uC9C0 \uB85C\uB4DC \uC2DC\uC791:", imageSrc);
    setImageLoaded(false);
    const loader = new THREE2.TextureLoader();
    loader.load(
      imageSrc,
      (texture) => {
        console.log("[ImageDistortion] \uC774\uBBF8\uC9C0 \uB85C\uB4DC \uC131\uACF5!", {
          width: texture.image.width,
          height: texture.image.height
        });
        textureRef.current = texture;
        setImageLoaded(true);
        if (sceneRef.current) {
          sceneRef.current.updateUniforms({
            u_texture: { value: texture }
          });
          sceneRef.current.render();
          console.log("[ImageDistortion] \uD14D\uC2A4\uCC98 \uC5C5\uB370\uC774\uD2B8 \uBC0F \uB80C\uB354\uB9C1 \uC644\uB8CC");
        }
      },
      (progress) => {
        console.log(
          "[ImageDistortion] \uC774\uBBF8\uC9C0 \uB85C\uB529 \uC911...",
          Math.round(progress.loaded / progress.total * 100) + "%"
        );
      },
      (error) => {
        console.error("[ImageDistortion] \uC774\uBBF8\uC9C0 \uB85C\uB4DC \uC2E4\uD328:", error);
        setImageLoaded(false);
      }
    );
    return () => {
      if (textureRef.current) {
        textureRef.current.dispose();
        textureRef.current = null;
      }
    };
  }, [imageSrc, isReady]);
  useEffect2(() => {
    if (!sceneRef.current || !isReady) return;
    const points = new Float32Array(SHADER_CONFIG.MAX_POINTS * 2);
    currentAreas.forEach((area, areaIndex) => {
      area.basePoints.forEach((point, pointIndex) => {
        const index = (areaIndex * 4 + pointIndex) * 2;
        points[index] = point.x;
        points[index + 1] = point.y;
      });
    });
    const dragVectors = new Float32Array(SHADER_CONFIG.MAX_DRAG_VECTORS * 2);
    currentAreas.forEach((area, index) => {
      const baseIndex = index * 2;
      dragVectors[baseIndex] = area.dragVector.x;
      dragVectors[baseIndex + 1] = area.dragVector.y;
    });
    const strengths = new Float32Array(SHADER_CONFIG.MAX_STRENGTHS);
    currentAreas.forEach((area, index) => {
      strengths[index] = area.distortionStrength;
    });
    sceneRef.current.updateUniforms({
      u_numAreas: { value: currentAreas.length },
      u_points: { value: points },
      u_dragVectors: { value: dragVectors },
      u_distortionStrengths: { value: strengths }
    });
    sceneRef.current.render();
  }, [currentAreas, isReady]);
  const animationCallback = useCallback((deltaTime) => {
    if (!isReady) return;
    setCurrentAreas((prevAreas) => {
      const updatedAreas = AnimationLoop.updateProgress(prevAreas, deltaTime);
      return AnimationLoop.updateAreaDragVectors(updatedAreas);
    });
  }, [isReady]);
  useAnimationFrame(animationCallback, isPlaying);
  return /* @__PURE__ */ jsx(
    "div",
    {
      ref: containerRef,
      style: {
        width: "100%",
        height: "100%",
        position: "relative",
        ...style
      },
      className,
      children: !imageLoaded && /* @__PURE__ */ jsx(
        "div",
        {
          style: {
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            background: "rgba(0, 0, 0, 0.7)",
            color: "white",
            padding: "20px",
            borderRadius: "8px",
            zIndex: 999
          },
          children: "\uC774\uBBF8\uC9C0 \uB85C\uB529 \uC911..."
        }
      )
    }
  );
};
export {
  ANIMATION_CONFIG,
  AnimationLoop,
  DEFAULT_AREA,
  ImageDistortion,
  SHADER_CONFIG,
  ShaderManager,
  ThreeScene,
  applyEasing,
  useAnimationFrame
};
//# sourceMappingURL=index.mjs.map