From e371321fd2260f5211d174df0ffe971a0ba1f197 Mon Sep 17 00:00:00 2001 From: BaekRyang Date: Tue, 4 Nov 2025 11:51:39 +0900 Subject: [PATCH] feat: Fix image distortion shader and improve loading state MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Fix distortion.frag.glsl to match Flutter original implementation - Update computeUV function with single Newton-Raphson iteration - Fix coordinate transformation (normalized to pixel) - Fix distortion application logic - Add break after first matching area (Flutter behavior) - Add image loading state management - Add imageLoaded state - Add loading progress callback - Add loading UI indicator - Improve error handling - Add comprehensive debug logging - ShaderManager: fetch status and shader lengths - ThreeScene: shader compilation check, render calls - ImageDistortion: lifecycle and loading status - Add test/debug shaders for troubleshooting - test.frag.glsl: Simple pass-through shader - debug.frag.glsl: Area visualization shader - Fix infinite loop bug in animationCallback - Use setState updater function to avoid dependency πŸ€– Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .claude/settings.local.json | 3 +- dist/debug.frag.glsl | 39 ++++++++++++ dist/distortion.frag.glsl | 97 +++++++++++++++--------------- dist/index.d.mts | 2 +- dist/index.d.ts | 2 +- dist/index.js | 65 ++++++++++++++++++-- dist/index.js.map | 2 +- dist/index.mjs | 65 ++++++++++++++++++-- dist/index.mjs.map | 2 +- dist/test.frag.glsl | 8 +++ src/components/ImageDistortion.tsx | 39 ++++++++++-- src/engine/AnimationLoop.ts | 2 +- src/engine/ShaderManager.ts | 16 ++++- src/engine/ThreeScene.ts | 23 ++++++- src/shaders/debug.frag.glsl | 39 ++++++++++++ src/shaders/distortion.frag.glsl | 97 +++++++++++++++--------------- src/shaders/test.frag.glsl | 8 +++ src/types/area.ts | 64 ++++++++++---------- src/types/shader.ts | 2 +- src/utils/easing.ts | 2 +- 20 files changed, 425 insertions(+), 152 deletions(-) create mode 100644 dist/debug.frag.glsl create mode 100644 dist/test.frag.glsl create mode 100644 src/shaders/debug.frag.glsl create mode 100644 src/shaders/test.frag.glsl diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 171f5a4..1ac4010 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -8,7 +8,8 @@ "Bash(tree:*)", "Bash(git add:*)", "Bash(git commit:*)", - "Bash(git push:*)" + "Bash(git push:*)", + "Bash(npm run dev:*)" ], "deny": [], "ask": [] diff --git a/dist/debug.frag.glsl b/dist/debug.frag.glsl new file mode 100644 index 0000000..e3dc4da --- /dev/null +++ b/dist/debug.frag.glsl @@ -0,0 +1,39 @@ +uniform vec2 u_resolution; +uniform sampler2D u_texture; +uniform vec2 u_points[32]; +uniform int u_numAreas; +uniform vec2 u_dragVectors[8]; +uniform float u_distortionStrengths[8]; + +varying vec2 vUv; + +void main() { + vec2 texCoord = vUv; + + // 디버그: μ˜μ—­ ν‘œμ‹œ + for (int i = 0; i < 8; i++) { + if (i >= u_numAreas) break; + + // 포인트λ₯Ό ν”½μ…€ μ’Œν‘œλ‘œ λ³€ν™˜ + vec2 p0 = u_points[i * 4 + 0] * u_resolution; + vec2 p1 = u_points[i * 4 + 1] * u_resolution; + vec2 p2 = u_points[i * 4 + 2] * u_resolution; + vec2 p3 = u_points[i * 4 + 3] * u_resolution; + + vec2 pixelCoord = vUv * u_resolution; + + // 경계 μƒμž 체크만 + vec2 minP = min(min(p0, p1), min(p2, p3)); + vec2 maxP = max(max(p0, p1), max(p2, p3)); + + // μ˜μ—­ μ•ˆμ— 있으면 λΉ¨κ°„μƒ‰μœΌλ‘œ ν‘œμ‹œ + if (pixelCoord.x >= minP.x && pixelCoord.x <= maxP.x && + pixelCoord.y >= minP.y && pixelCoord.y <= maxP.y) { + gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 빨간색 + return; + } + } + + // μ˜μ—­ 밖은 원본 이미지 + gl_FragColor = texture2D(u_texture, texCoord); +} \ No newline at end of file diff --git a/dist/distortion.frag.glsl b/dist/distortion.frag.glsl index f05b2e8..9d8ff6f 100644 --- a/dist/distortion.frag.glsl +++ b/dist/distortion.frag.glsl @@ -1,88 +1,87 @@ uniform vec2 u_resolution; uniform sampler2D u_texture; -uniform vec2 u_points[32]; // μ΅œλŒ€ 8μ˜μ—­ Γ— 4포인트 +uniform vec2 u_points[32]; // μ΅œλŒ€ 8μ˜μ—­ Γ— 4포인트 (μ •κ·œν™”λœ μ’Œν‘œ) uniform int u_numAreas; -uniform vec2 u_dragVectors[8]; +uniform vec2 u_dragVectors[8]; // μ •κ·œν™”λœ μ’Œν‘œ uniform float u_distortionStrengths[8]; varying vec2 vUv; -// μ‚¬κ°ν˜• λ‚΄λΆ€μ˜ ν¬μΈνŠΈμ— λŒ€ν•œ UV μ’Œν‘œ 계산 +// Flutter 원본 computeUV ν•¨μˆ˜ (μ •ν™•νžˆ λ™μΌν•˜κ²Œ λ³€ν™˜) vec2 computeUV(vec2 xy, vec2 p0, vec2 p1, vec2 p2, vec2 p3) { - // 경계 μƒμž 체크 vec2 minP = min(min(p0, p1), min(p2, p3)); vec2 maxP = max(max(p0, p1), max(p2, p3)); if (xy.x < minP.x || xy.x > maxP.x || xy.y < minP.y || xy.y > maxP.y) { - return vec2(-1.0, -1.0); + return vec2(-1.0, -1.0); // μ™ΈλΆ€ } - // 초기 μΆ”μ •κ°’ (μ •κ·œν™”λœ μ’Œν‘œ) vec2 rectSize = maxP - minP; - vec2 rectUV = (xy - minP) / rectSize; + if (rectSize.x == 0.0 || rectSize.y == 0.0) { + return vec2(-1.0, -1.0); // 좕퇴 + } + + vec2 rectMin = minP; + vec2 rectUV = (xy - rectMin) / rectSize; float u0 = rectUV.x; float v0 = rectUV.y; - // Newton-Raphson λ°˜λ³΅λ²•μœΌλ‘œ μ •ν™•ν•œ UV 계산 - for (int iter = 0; iter < 3; iter++) { - vec2 xy0 = mix(mix(p0, p1, u0), mix(p3, p2, u0), v0); - vec2 du_vec = mix(p1 - p0, p2 - p3, v0); - vec2 dv_vec = mix(p3 - p0, p2 - p1, u0); + // 1회 Newton-Raphson (Flutter 원본과 동일) + vec2 left = mix(p0, p1, u0); + vec2 right = mix(p3, p2, u0); + vec2 xy0 = mix(left, right, v0); - vec2 dxy = xy - xy0; - float det = du_vec.x * dv_vec.y - du_vec.y * dv_vec.x; + vec2 dxy = xy - xy0; - if (abs(det) < 1e-6) break; - - float du = (dv_vec.y * dxy.x - dv_vec.x * dxy.y) / det; - float dv = (-du_vec.y * dxy.x + du_vec.x * dxy.y) / det; + vec2 du_vec = mix(p1 - p0, p2 - p3, v0); + vec2 dv_vec = mix(p3 - p0, p2 - p1, u0); + float det = du_vec.x * dv_vec.y - du_vec.y * dv_vec.x; + if (abs(det) > 1e-6) { + float inv_det = 1.0 / det; + float du = (dv_vec.y * dxy.x - dv_vec.x * dxy.y) * inv_det; + float dv = (-du_vec.y * dxy.x + du_vec.x * dxy.y) * inv_det; u0 += du; v0 += dv; } - // ν¬μΈνŠΈκ°€ 내뢀에 μžˆλŠ”μ§€ 확인 - if (u0 >= 0.0 && u0 <= 1.0 && v0 >= 0.0 && v0 <= 1.0) { - return vec2(u0, v0); - } - - return vec2(-1.0, -1.0); + return vec2(u0, v0); } void main() { - vec2 uv = vUv; - vec2 pixelCoord = vUv * u_resolution; + vec2 xy = vUv * u_resolution; // ν”½μ…€ μ’Œν‘œ + vec2 texCoord = vUv; + bool found = false; - // λͺ¨λ“  μ˜μ—­μ˜ μ™œκ³‘ 적용 + // Flutter 원본과 동일: 첫 번째 λ§€μΉ­λ˜λŠ” μ˜μ—­λ§Œ 적용 for (int i = 0; i < 8; i++) { if (i >= u_numAreas) break; - int baseIndex = i * 4; - vec2 p0 = u_points[baseIndex + 0] * u_resolution; - vec2 p1 = u_points[baseIndex + 1] * u_resolution; - vec2 p2 = u_points[baseIndex + 2] * u_resolution; - vec2 p3 = u_points[baseIndex + 3] * u_resolution; + // ν¬μΈνŠΈλŠ” μ •κ·œν™”λœ μ’Œν‘œλ‘œ μ „λ‹¬λ°›μ•˜μœΌλ―€λ‘œ ν”½μ…€ μ’Œν‘œλ‘œ λ³€ν™˜ + vec2 p0 = u_points[i * 4 + 0] * u_resolution; + vec2 p1 = u_points[i * 4 + 1] * u_resolution; + vec2 p2 = u_points[i * 4 + 2] * u_resolution; + vec2 p3 = u_points[i * 4 + 3] * u_resolution; - vec2 areaUV = computeUV(pixelCoord, p0, p1, p2, p3); + vec2 uv_local = computeUV(xy, p0, p1, p2, p3); - if (areaUV.x >= 0.0) { - // 이 μ˜μ—­ 내뢀에 ν¬μΈνŠΈκ°€ 있음 - vec2 center = vec2(0.5, 0.5); - float distToCenter = length(areaUV - center); - float maxUvRadius = 0.707; // sqrt(0.5^2 + 0.5^2) + if (uv_local.x >= 0.0 && uv_local.x <= 1.0 && uv_local.y >= 0.0 && uv_local.y <= 1.0) { + vec2 uvCenter = vec2(0.5, 0.5); + float distToCenter = distance(uv_local, uvCenter); + float maxUvRadius = 0.5; // Flutter 원본과 동일 - // λΆ€λ“œλŸ¬μš΄ 감쇠 - float influence = 1.0 - smoothstep(0.0, maxUvRadius, distToCenter); - - // μ™œκ³‘ 적용 - vec2 distortion = (u_dragVectors[i] / u_resolution) * influence * u_distortionStrengths[i]; - uv += distortion; + if (distToCenter < maxUvRadius) { + float influence = 1.0 - smoothstep(0.0, maxUvRadius, distToCenter); + // dragVector도 μ •κ·œν™”λœ μ’Œν‘œμ΄λ―€λ‘œ ν”½μ…€λ‘œ λ³€ν™˜ + vec2 distortion = (u_dragVectors[i] * u_resolution) * influence * u_distortionStrengths[i]; + // texCoordλŠ” 이미 μ •κ·œν™”λœ μ’Œν‘œμ΄λ―€λ‘œ μ •κ·œν™”λœ μ™œκ³‘ 적용 + texCoord += distortion / u_resolution; + texCoord = clamp(texCoord, 0.0, 1.0); + } + found = true; + break; // Flutter μ›λ³Έμ²˜λŸΌ 첫 번째 μ˜μ—­λ§Œ 적용 } } - // ν…μŠ€μ²˜ μ™ΈλΆ€ μƒ˜ν”Œλ§ 방지λ₯Ό μœ„ν•œ ν΄λž¨ν•‘ - uv = clamp(uv, 0.0, 1.0); - - // ν…μŠ€μ²˜ μƒ˜ν”Œλ§ - gl_FragColor = texture2D(u_texture, uv); + gl_FragColor = texture2D(u_texture, texCoord); } \ No newline at end of file diff --git a/dist/index.d.mts b/dist/index.d.mts index ca95915..487732d 100644 --- a/dist/index.d.mts +++ b/dist/index.d.mts @@ -56,7 +56,7 @@ interface AreaBounds { * 셰이더 μœ λ‹ˆνΌ λ³€μˆ˜ νƒ€μž… */ interface ShaderUniforms { - [uniform: string]: THREE.IUniform; + [uniform: string]: THREE.IUniform; /** ν™”λ©΄ 해상도 */ u_resolution: THREE.IUniform; /** 이미지 ν…μŠ€μ²˜ */ diff --git a/dist/index.d.ts b/dist/index.d.ts index ca95915..487732d 100644 --- a/dist/index.d.ts +++ b/dist/index.d.ts @@ -56,7 +56,7 @@ interface AreaBounds { * 셰이더 μœ λ‹ˆνΌ λ³€μˆ˜ νƒ€μž… */ interface ShaderUniforms { - [uniform: string]: THREE.IUniform; + [uniform: string]: THREE.IUniform; /** ν™”λ©΄ 해상도 */ u_resolution: THREE.IUniform; /** 이미지 ν…μŠ€μ²˜ */ diff --git a/dist/index.js b/dist/index.js index f4017c5..72d08b5 100644 --- a/dist/index.js +++ b/dist/index.js @@ -91,17 +91,32 @@ var ThreeScene = class { * @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"); } /** * μœ λ‹ˆνΌ κ°’ μ—…λ°μ΄νŠΈ @@ -117,6 +132,7 @@ var ThreeScene = class { * 씬 λ Œλ”λ§ */ render() { + console.log("[ThreeScene] render() \uD638\uCD9C\uB428, mesh:", this.mesh); this.renderer.render(this.scene, this.camera); } /** @@ -148,25 +164,36 @@ var ShaderManager = class { * @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("\uC170\uC774\uB354 \uB85C\uB4DC \uC2E4\uD328:", 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"); } } @@ -323,6 +350,7 @@ var ImageDistortion = ({ const shaderManagerRef = (0, import_react2.useRef)(new ShaderManager()); const textureRef = (0, import_react2.useRef)(null); const [isReady, setIsReady] = (0, import_react2.useState)(false); + const [imageLoaded, setImageLoaded] = (0, import_react2.useState)(false); const [currentAreas, setCurrentAreas] = (0, import_react2.useState)(areas); (0, import_react2.useEffect)(() => { setCurrentAreas(areas); @@ -359,22 +387,34 @@ var ImageDistortion = ({ 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"); + 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"); } }, - void 0, + (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 () => { @@ -430,7 +470,24 @@ var ImageDistortion = ({ position: "relative", ...style }, - className + className, + children: !imageLoaded && /* @__PURE__ */ (0, import_jsx_runtime.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..." + } + ) } ); }; diff --git a/dist/index.js.map b/dist/index.js.map index b1251ac..2940dfc 100644 --- a/dist/index.js.map +++ b/dist/index.js.map @@ -1 +1 @@ -{"version":3,"sources":["../src/index.ts","../src/components/ImageDistortion.tsx","../src/engine/ThreeScene.ts","../src/engine/ShaderManager.ts","../src/utils/easing.ts","../src/engine/AnimationLoop.ts","../src/hooks/useAnimationFrame.ts","../src/utils/constants.ts"],"sourcesContent":["// 메인 μ»΄ν¬λ„ŒνŠΈ\nexport { ImageDistortion } from './components/ImageDistortion';\nexport type { ImageDistortionProps } from './components/ImageDistortion';\n\n// νƒ€μž… μ •μ˜\nexport type {\n Point,\n EasingFunction,\n DistortionMovement,\n DistortionArea,\n AreaBounds,\n ShaderUniforms,\n ShaderConfig,\n AnimationState,\n AnimationTicker,\n} from './types';\n\n// μœ ν‹Έλ¦¬ν‹° ν•¨μˆ˜\nexport { applyEasing } from './utils/easing';\nexport { SHADER_CONFIG, ANIMATION_CONFIG, DEFAULT_AREA } from './utils/constants';\n\n// 엔진 클래슀 (κ³ κΈ‰ μ‚¬μš©μžμš©)\nexport { ThreeScene } from './engine/ThreeScene';\nexport { ShaderManager } from './engine/ShaderManager';\nexport { AnimationLoop } from './engine/AnimationLoop';\n\n// ν›…\nexport { useAnimationFrame } from './hooks/useAnimationFrame';","import React, { useEffect, useRef, useState, useCallback } from 'react';\nimport * as THREE from 'three';\nimport { DistortionArea } from '../types';\nimport { ThreeScene } from '../engine/ThreeScene';\nimport { ShaderManager } from '../engine/ShaderManager';\nimport { AnimationLoop } from '../engine/AnimationLoop';\nimport { useAnimationFrame } from '../hooks/useAnimationFrame';\nimport { SHADER_CONFIG } from '../utils/constants';\n\n/**\n * ImageDistortion μ»΄ν¬λ„ŒνŠΈ Props\n */\nexport interface ImageDistortionProps {\n /** 이미지 μ†ŒμŠ€ URL */\n imageSrc: string;\n /** μ™œκ³‘ μ˜μ—­ λ°°μ—΄ */\n areas: DistortionArea[];\n /** λ²„ν…μŠ€ 셰이더 경둜 (선택사항) */\n vertexShaderPath?: string;\n /** ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더 경둜 (선택사항) */\n fragmentShaderPath?: string;\n /** μ• λ‹ˆλ©”μ΄μ…˜ μž¬μƒ μ—¬λΆ€ */\n isPlaying?: boolean;\n /** μ»¨ν…Œμ΄λ„ˆ μŠ€νƒ€μΌ */\n style?: React.CSSProperties;\n /** μ»¨ν…Œμ΄λ„ˆ 클래슀λͺ… */\n className?: string;\n}\n\n/**\n * GPU 가속 이미지 μ™œκ³‘ μ»΄ν¬λ„ŒνŠΈ\n * Three.js와 GLSL 셰이더λ₯Ό μ‚¬μš©ν•˜μ—¬ μ‹€μ‹œκ°„ 이미지 μ™œκ³‘ 효과λ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€.\n */\nexport const ImageDistortion: React.FC = ({\n imageSrc,\n areas,\n vertexShaderPath,\n fragmentShaderPath,\n isPlaying = true,\n style,\n className,\n}) => {\n const containerRef = useRef(null);\n const sceneRef = useRef(null);\n const shaderManagerRef = useRef(new ShaderManager());\n const textureRef = useRef(null);\n\n const [isReady, setIsReady] = useState(false);\n const [currentAreas, setCurrentAreas] = useState(areas);\n\n // μ˜μ—­ λ³€κ²½ μ‹œ μƒνƒœ μ—…λ°μ΄νŠΈ\n useEffect(() => {\n setCurrentAreas(areas);\n }, [areas]);\n\n // Three.js 씬 μ΄ˆκΈ°ν™”\n useEffect(() => {\n console.log('[ImageDistortion] useEffect μ‹€ν–‰, containerRef.current:', containerRef.current);\n\n if (!containerRef.current) {\n console.warn('[ImageDistortion] containerRef.currentκ°€ nullμž…λ‹ˆλ‹€. μ»΄ν¬λ„ŒνŠΈκ°€ μ œλŒ€λ‘œ λ§ˆμš΄νŠΈλ˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€.');\n return;\n }\n\n console.log('[ImageDistortion] μ΄ˆκΈ°ν™” μ‹œμž‘');\n const scene = new ThreeScene(containerRef.current);\n sceneRef.current = scene;\n\n // 셰이더 λ‘œλ“œ\n const vertPath = vertexShaderPath || '/shaders/distortion.vert.glsl';\n const fragPath = fragmentShaderPath || '/shaders/distortion.frag.glsl';\n\n console.log('[ImageDistortion] 셰이더 λ‘œλ“œ μ‹œλ„:', { vertPath, fragPath });\n\n shaderManagerRef.current\n .loadShaders(vertPath, fragPath)\n .then(({ vertex, fragment }) => {\n console.log('[ImageDistortion] 셰이더 λ‘œλ“œ 성곡');\n scene.setShaderMaterial(vertex, fragment);\n setIsReady(true);\n })\n .catch((error) => {\n console.error('[ImageDistortion] 셰이더 λ‘œλ“œ μ‹€νŒ¨:', error);\n });\n\n return () => {\n scene.dispose();\n if (textureRef.current) {\n textureRef.current.dispose();\n }\n };\n }, [vertexShaderPath, fragmentShaderPath]);\n\n // 이미지 ν…μŠ€μ²˜ λ‘œλ“œ\n useEffect(() => {\n if (!imageSrc || !isReady) {\n console.log('[ImageDistortion] 이미지 λ‘œλ“œ μŠ€ν‚΅:', { imageSrc, isReady });\n return;\n }\n\n console.log('[ImageDistortion] 이미지 λ‘œλ“œ μ‹œμž‘:', imageSrc);\n const loader = new THREE.TextureLoader();\n loader.load(\n imageSrc,\n (texture) => {\n console.log('[ImageDistortion] 이미지 λ‘œλ“œ 성곡');\n textureRef.current = texture;\n if (sceneRef.current) {\n sceneRef.current.updateUniforms({\n u_texture: { value: texture },\n });\n sceneRef.current.render();\n }\n },\n undefined,\n (error) => {\n console.error('[ImageDistortion] 이미지 λ‘œλ“œ μ‹€νŒ¨:', error);\n }\n );\n\n return () => {\n if (textureRef.current) {\n textureRef.current.dispose();\n textureRef.current = null;\n }\n };\n }, [imageSrc, isReady]);\n\n // 셰이더 μœ λ‹ˆνΌ μ—…λ°μ΄νŠΈ\n useEffect(() => {\n if (!sceneRef.current || !isReady) return;\n\n // 포인트 λ°°μ—΄ 생성\n const points = new Float32Array(SHADER_CONFIG.MAX_POINTS * 2);\n currentAreas.forEach((area, areaIndex) => {\n area.basePoints.forEach((point, pointIndex) => {\n const index = (areaIndex * 4 + pointIndex) * 2;\n points[index] = point.x;\n points[index + 1] = point.y;\n });\n });\n\n // λ“œλž˜κ·Έ 벑터 λ°°μ—΄ 생성\n const dragVectors = new Float32Array(SHADER_CONFIG.MAX_DRAG_VECTORS * 2);\n currentAreas.forEach((area, index) => {\n const baseIndex = index * 2;\n dragVectors[baseIndex] = area.dragVector.x;\n dragVectors[baseIndex + 1] = area.dragVector.y;\n });\n\n // 강도 λ°°μ—΄ 생성\n const strengths = new Float32Array(SHADER_CONFIG.MAX_STRENGTHS);\n currentAreas.forEach((area, index) => {\n strengths[index] = area.distortionStrength;\n });\n\n sceneRef.current.updateUniforms({\n u_numAreas: { value: currentAreas.length },\n u_points: { value: points },\n u_dragVectors: { value: dragVectors },\n u_distortionStrengths: { value: strengths },\n });\n\n sceneRef.current.render();\n }, [currentAreas, isReady]);\n\n // μ• λ‹ˆλ©”μ΄μ…˜ 루프\n const animationCallback = useCallback((deltaTime: number) => {\n if (!isReady) return;\n\n setCurrentAreas((prevAreas) => {\n // 진행도 μ—…λ°μ΄νŠΈ\n const updatedAreas = AnimationLoop.updateProgress(prevAreas, deltaTime);\n // λ“œλž˜κ·Έ 벑터 μ—…λ°μ΄νŠΈ\n return AnimationLoop.updateAreaDragVectors(updatedAreas);\n });\n }, [isReady]);\n\n useAnimationFrame(animationCallback, isPlaying);\n\n return (\n \n );\n};","import * as THREE from 'three';\nimport { ShaderUniforms } from '@/types';\n\n/**\n * Three.js 씬 관리 클래슀\n */\nexport class ThreeScene {\n private scene: THREE.Scene;\n private camera: THREE.OrthographicCamera;\n private renderer: THREE.WebGLRenderer;\n private mesh: THREE.Mesh | null = null;\n private uniforms: ShaderUniforms;\n\n constructor(private container: HTMLElement) {\n // 씬 생성\n this.scene = new THREE.Scene();\n\n // 2D용 직ꡐ 카메라 μ„€μ •\n this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);\n\n // λ Œλ”λŸ¬ μ„€μ •\n this.renderer = new THREE.WebGLRenderer({\n antialias: true,\n alpha: false,\n });\n this.renderer.setPixelRatio(window.devicePixelRatio);\n this.container.appendChild(this.renderer.domElement);\n\n // μœ λ‹ˆνΌ μ΄ˆκΈ°ν™”\n this.uniforms = {\n u_resolution: { value: new THREE.Vector2() },\n u_texture: { value: null },\n u_points: { value: new Float32Array(64) }, // 32포인트 Γ— 2(x,y)\n u_numAreas: { value: 0 },\n u_dragVectors: { value: new Float32Array(16) }, // 8벑터 Γ— 2(x,y)\n u_distortionStrengths: { value: new Float32Array(8) },\n };\n\n this.handleResize();\n window.addEventListener('resize', this.handleResize);\n }\n\n /**\n * μœˆλ„μš° λ¦¬μ‚¬μ΄μ¦ˆ ν•Έλ“€λŸ¬\n */\n private handleResize = () => {\n const width = this.container.clientWidth;\n const height = this.container.clientHeight;\n\n this.renderer.setSize(width, height);\n this.uniforms.u_resolution.value.set(width, height);\n\n if (this.mesh) {\n this.render();\n }\n };\n\n /**\n * 셰이더 머티리얼 μ„€μ •\n * @param vertexShader λ²„ν…μŠ€ 셰이더 μ†ŒμŠ€\n * @param fragmentShader ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더 μ†ŒμŠ€\n */\n public setShaderMaterial(vertexShader: string, fragmentShader: string) {\n const geometry = new THREE.PlaneGeometry(2, 2);\n const material = new THREE.ShaderMaterial({\n uniforms: this.uniforms,\n vertexShader,\n fragmentShader,\n });\n\n if (this.mesh) {\n this.scene.remove(this.mesh);\n }\n\n this.mesh = new THREE.Mesh(geometry, material);\n this.scene.add(this.mesh);\n }\n\n /**\n * μœ λ‹ˆνΌ κ°’ μ—…λ°μ΄νŠΈ\n * @param updates μ—…λ°μ΄νŠΈν•  μœ λ‹ˆνΌ κ°’λ“€\n */\n public updateUniforms(updates: Partial) {\n Object.keys(updates).forEach((key) => {\n const uniformKey = key as keyof ShaderUniforms;\n this.uniforms[uniformKey].value = updates[uniformKey]!.value;\n });\n }\n\n /**\n * 씬 λ Œλ”λ§\n */\n public render() {\n this.renderer.render(this.scene, this.camera);\n }\n\n /**\n * λ¦¬μ†ŒμŠ€ 정리\n */\n public dispose() {\n window.removeEventListener('resize', this.handleResize);\n this.renderer.dispose();\n if (this.mesh) {\n this.mesh.geometry.dispose();\n (this.mesh.material as THREE.Material).dispose();\n }\n if (this.container.contains(this.renderer.domElement)) {\n this.container.removeChild(this.renderer.domElement);\n }\n }\n}","/**\n * 셰이더 파일 λ‘œλ”© 및 관리 클래슀\n */\nexport class ShaderManager {\n private vertexShaderSource: string | null = null;\n private fragmentShaderSource: string | null = null;\n\n /**\n * 셰이더 νŒŒμΌλ“€μ„ λΉ„λ™κΈ°λ‘œ λ‘œλ“œ\n * @param vertexPath λ²„ν…μŠ€ 셰이더 파일 경둜\n * @param fragmentPath ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더 파일 경둜\n * @returns λ‘œλ“œλœ 셰이더 μ†ŒμŠ€ μ½”λ“œ\n */\n public async loadShaders(\n vertexPath: string,\n fragmentPath: string\n ): Promise<{ vertex: string; fragment: string }> {\n try {\n const [vertexResponse, fragmentResponse] = await Promise.all([\n fetch(vertexPath),\n fetch(fragmentPath),\n ]);\n\n if (!vertexResponse.ok) {\n throw new Error(`λ²„ν…μŠ€ 셰이더 λ‘œλ“œ μ‹€νŒ¨: ${vertexResponse.statusText}`);\n }\n if (!fragmentResponse.ok) {\n throw new Error(`ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더 λ‘œλ“œ μ‹€νŒ¨: ${fragmentResponse.statusText}`);\n }\n\n this.vertexShaderSource = await vertexResponse.text();\n this.fragmentShaderSource = await fragmentResponse.text();\n\n return {\n vertex: this.vertexShaderSource,\n fragment: this.fragmentShaderSource,\n };\n } catch (error) {\n console.error('셰이더 λ‘œλ“œ μ‹€νŒ¨:', error);\n throw new Error('셰이더 λ‘œλ”©μ— μ‹€νŒ¨ν–ˆμŠ΅λ‹ˆλ‹€');\n }\n }\n\n /**\n * λ²„ν…μŠ€ 셰이더 μ†ŒμŠ€ μ½”λ“œ λ°˜ν™˜\n */\n public getVertexShader(): string {\n if (!this.vertexShaderSource) {\n throw new Error('λ²„ν…μŠ€ 셰이더가 λ‘œλ“œλ˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€');\n }\n return this.vertexShaderSource;\n }\n\n /**\n * ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더 μ†ŒμŠ€ μ½”λ“œ λ°˜ν™˜\n */\n public getFragmentShader(): string {\n if (!this.fragmentShaderSource) {\n throw new Error('ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더가 λ‘œλ“œλ˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€');\n }\n return this.fragmentShaderSource;\n }\n}","import { EasingFunction } from '../types';\n\ntype EasingFunc = (t: number) => number;\n\n/**\n * 이징 ν•¨μˆ˜ κ΅¬ν˜„ 맡\n */\nconst easingFunctions: Record = {\n linear: (t) => t,\n\n easeIn: (t) => t * t,\n easeOut: (t) => t * (2 - t),\n easeInOut: (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),\n\n easeInQuad: (t) => t * t,\n easeOutQuad: (t) => t * (2 - t),\n};\n\n/**\n * 진행도에 이징 ν•¨μˆ˜λ₯Ό 적용\n * @param progress 진행도 (0.0 - 1.0)\n * @param easingType μ μš©ν•  이징 ν•¨μˆ˜ νƒ€μž…\n * @returns 이징이 적용된 진행도 (0.0 - 1.0)\n */\nexport const applyEasing = (\n progress: number,\n easingType: EasingFunction\n): number => {\n const clampedProgress = Math.max(0, Math.min(1, progress));\n return easingFunctions[easingType](clampedProgress);\n};","import { DistortionArea, Point } from '../types';\nimport { applyEasing } from '../utils/easing';\n\n/**\n * μ• λ‹ˆλ©”μ΄μ…˜ 루프 관리 클래슀\n */\nexport class AnimationLoop {\n /**\n * μ˜μ—­λ“€μ˜ λ“œλž˜κ·Έ 벑터λ₯Ό ν˜„μž¬ 진행도에 따라 μ—…λ°μ΄νŠΈ\n * @param areas μ™œκ³‘ μ˜μ—­ λ°°μ—΄\n * @returns μ—…λ°μ΄νŠΈλœ μ˜μ—­ λ°°μ—΄\n */\n public static updateAreaDragVectors(\n areas: DistortionArea[]\n ): DistortionArea[] {\n return areas.map((area) => {\n const { progress, movement } = area;\n\n // 이징 적용\n const easedProgress = applyEasing(progress, movement.easing);\n\n // 벑터 κ°„ 보간\n let dragVector: Point;\n\n if (easedProgress < 0.5) {\n // 0.0 -> 0.5: 0μ—μ„œ vectorA둜 보간\n const t = easedProgress * 2;\n dragVector = {\n x: movement.vectorA.x * t,\n y: movement.vectorA.y * t,\n };\n } else {\n // 0.5 -> 1.0: vectorAμ—μ„œ 0으둜 보간\n const t = (easedProgress - 0.5) * 2;\n dragVector = {\n x: movement.vectorA.x * (1 - t),\n y: movement.vectorA.y * (1 - t),\n };\n }\n\n return {\n ...area,\n dragVector,\n };\n });\n }\n\n /**\n * λͺ¨λ“  μ˜μ—­μ˜ 진행도λ₯Ό 델타 νƒ€μž„λ§ŒνΌ μ—…λ°μ΄νŠΈ\n * @param areas μ™œκ³‘ μ˜μ—­ λ°°μ—΄\n * @param deltaTime 델타 νƒ€μž„ (초)\n * @returns μ—…λ°μ΄νŠΈλœ μ˜μ—­ λ°°μ—΄\n */\n public static updateProgress(\n areas: DistortionArea[],\n deltaTime: number\n ): DistortionArea[] {\n return areas.map((area) => {\n let newProgress = area.progress + deltaTime / area.movement.duration;\n newProgress %= 1.0; // 루프\n\n return {\n ...area,\n progress: newProgress,\n };\n });\n }\n}","import { useEffect, useRef } from 'react';\n\n/**\n * requestAnimationFrame을 μ‚¬μš©ν•œ μ• λ‹ˆλ©”μ΄μ…˜ 루프 ν›…\n * @param callback 맀 ν”„λ ˆμž„λ§ˆλ‹€ 호좜될 콜백 (deltaTime을 인자둜 λ°›μŒ)\n * @param isPlaying μ• λ‹ˆλ©”μ΄μ…˜ μž¬μƒ μ—¬λΆ€\n */\nexport const useAnimationFrame = (\n callback: (deltaTime: number) => void,\n isPlaying: boolean = true\n) => {\n const requestRef = useRef(undefined);\n const previousTimeRef = useRef(undefined);\n\n useEffect(() => {\n if (!isPlaying) return;\n\n const animate = (time: number) => {\n if (previousTimeRef.current !== undefined) {\n const deltaTime = (time - previousTimeRef.current) / 1000; // λ°€λ¦¬μ΄ˆλ₯Ό 초둜 λ³€ν™˜\n callback(deltaTime);\n }\n previousTimeRef.current = time;\n requestRef.current = requestAnimationFrame(animate);\n };\n\n requestRef.current = requestAnimationFrame(animate);\n\n return () => {\n if (requestRef.current) {\n cancelAnimationFrame(requestRef.current);\n }\n };\n }, [callback, isPlaying]);\n};","/**\n * 셰이더 κ΄€λ ¨ μ„€μ •\n */\nexport const SHADER_CONFIG = {\n /** μ΅œλŒ€ μ˜μ—­ 개수 */\n MAX_AREAS: 8,\n /** μ΅œλŒ€ 포인트 개수 (8μ˜μ—­ Γ— 4포인트) */\n MAX_POINTS: 32,\n /** μ΅œλŒ€ λ“œλž˜κ·Έ 벑터 개수 */\n MAX_DRAG_VECTORS: 8,\n /** μ΅œλŒ€ 강도 λ°°μ—΄ 크기 */\n MAX_STRENGTHS: 8,\n} as const;\n\n/**\n * μ• λ‹ˆλ©”μ΄μ…˜ κ΄€λ ¨ μ„€μ •\n */\nexport const ANIMATION_CONFIG = {\n /** λͺ©ν‘œ FPS */\n TARGET_FPS: 60,\n /** 델타 νƒ€μž„ (μ•½ 16.67ms) */\n DELTA_TIME: 1 / 60,\n} as const;\n\n/**\n * κΈ°λ³Έ μ˜μ—­ μ„€μ •κ°’\n */\nexport const DEFAULT_AREA = {\n /** κΈ°λ³Έ μ™œκ³‘ 강도 */\n DISTORTION_STRENGTH: 0.5,\n /** κΈ°λ³Έ μ• λ‹ˆλ©”μ΄μ…˜ 지속 μ‹œκ°„ (초) */\n DURATION: 2.0,\n /** κΈ°λ³Έ 이징 ν•¨μˆ˜ */\n EASING: 'easeInOut' as const,\n /** κΈ°λ³Έ 벑터 A */\n VECTOR_A: { x: 0.1, y: 0.1 },\n /** κΈ°λ³Έ 벑터 B */\n VECTOR_B: { x: -0.1, y: -0.1 },\n} as const;"],"mappings":"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","names":["import_react","THREE"]} \ No newline at end of file +{"version":3,"sources":["../src/index.ts","../src/components/ImageDistortion.tsx","../src/engine/ThreeScene.ts","../src/engine/ShaderManager.ts","../src/utils/easing.ts","../src/engine/AnimationLoop.ts","../src/hooks/useAnimationFrame.ts","../src/utils/constants.ts"],"sourcesContent":["// 메인 μ»΄ν¬λ„ŒνŠΈ\nexport { ImageDistortion } from './components/ImageDistortion';\nexport type { ImageDistortionProps } from './components/ImageDistortion';\n\n// νƒ€μž… μ •μ˜\nexport type {\n Point,\n EasingFunction,\n DistortionMovement,\n DistortionArea,\n AreaBounds,\n ShaderUniforms,\n ShaderConfig,\n AnimationState,\n AnimationTicker,\n} from './types';\n\n// μœ ν‹Έλ¦¬ν‹° ν•¨μˆ˜\nexport { applyEasing } from './utils/easing';\nexport { SHADER_CONFIG, ANIMATION_CONFIG, DEFAULT_AREA } from './utils/constants';\n\n// 엔진 클래슀 (κ³ κΈ‰ μ‚¬μš©μžμš©)\nexport { ThreeScene } from './engine/ThreeScene';\nexport { ShaderManager } from './engine/ShaderManager';\nexport { AnimationLoop } from './engine/AnimationLoop';\n\n// ν›…\nexport { useAnimationFrame } from './hooks/useAnimationFrame';","import React, { useEffect, useRef, useState, useCallback } from 'react';\nimport * as THREE from 'three';\nimport { type DistortionArea } from '../types';\nimport { ThreeScene } from '../engine/ThreeScene';\nimport { ShaderManager } from '../engine/ShaderManager';\nimport { AnimationLoop } from '../engine/AnimationLoop';\nimport { useAnimationFrame } from '../hooks/useAnimationFrame';\nimport { SHADER_CONFIG } from '../utils/constants';\n\n/**\n * ImageDistortion μ»΄ν¬λ„ŒνŠΈ Props\n */\nexport interface ImageDistortionProps {\n /** 이미지 μ†ŒμŠ€ URL */\n imageSrc: string;\n /** μ™œκ³‘ μ˜μ—­ λ°°μ—΄ */\n areas: DistortionArea[];\n /** λ²„ν…μŠ€ 셰이더 경둜 (선택사항) */\n vertexShaderPath?: string;\n /** ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더 경둜 (선택사항) */\n fragmentShaderPath?: string;\n /** μ• λ‹ˆλ©”μ΄μ…˜ μž¬μƒ μ—¬λΆ€ */\n isPlaying?: boolean;\n /** μ»¨ν…Œμ΄λ„ˆ μŠ€νƒ€μΌ */\n style?: React.CSSProperties;\n /** μ»¨ν…Œμ΄λ„ˆ 클래슀λͺ… */\n className?: string;\n}\n\n/**\n * GPU 가속 이미지 μ™œκ³‘ μ»΄ν¬λ„ŒνŠΈ\n * Three.js와 GLSL 셰이더λ₯Ό μ‚¬μš©ν•˜μ—¬ μ‹€μ‹œκ°„ 이미지 μ™œκ³‘ 효과λ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€.\n */\nexport const ImageDistortion: React.FC = ({\n imageSrc,\n areas,\n vertexShaderPath,\n fragmentShaderPath,\n isPlaying = true,\n style,\n className,\n}) => {\n const containerRef = useRef(null);\n const sceneRef = useRef(null);\n const shaderManagerRef = useRef(new ShaderManager());\n const textureRef = useRef(null);\n\n const [isReady, setIsReady] = useState(false);\n const [imageLoaded, setImageLoaded] = useState(false);\n const [currentAreas, setCurrentAreas] = useState(areas);\n\n // μ˜μ—­ λ³€κ²½ μ‹œ μƒνƒœ μ—…λ°μ΄νŠΈ\n useEffect(() => {\n setCurrentAreas(areas);\n }, [areas]);\n\n // Three.js 씬 μ΄ˆκΈ°ν™”\n useEffect(() => {\n console.log('[ImageDistortion] useEffect μ‹€ν–‰, containerRef.current:', containerRef.current);\n\n if (!containerRef.current) {\n console.warn('[ImageDistortion] containerRef.currentκ°€ nullμž…λ‹ˆλ‹€. μ»΄ν¬λ„ŒνŠΈκ°€ μ œλŒ€λ‘œ λ§ˆμš΄νŠΈλ˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€.');\n return;\n }\n\n console.log('[ImageDistortion] μ΄ˆκΈ°ν™” μ‹œμž‘');\n const scene = new ThreeScene(containerRef.current);\n sceneRef.current = scene;\n\n // 셰이더 λ‘œλ“œ\n const vertPath = vertexShaderPath || '/shaders/distortion.vert.glsl';\n const fragPath = fragmentShaderPath || '/shaders/distortion.frag.glsl';\n\n console.log('[ImageDistortion] 셰이더 λ‘œλ“œ μ‹œλ„:', { vertPath, fragPath });\n\n shaderManagerRef.current\n .loadShaders(vertPath, fragPath)\n .then(({ vertex, fragment }) => {\n console.log('[ImageDistortion] 셰이더 λ‘œλ“œ 성곡');\n scene.setShaderMaterial(vertex, fragment);\n setIsReady(true);\n })\n .catch((error) => {\n console.error('[ImageDistortion] 셰이더 λ‘œλ“œ μ‹€νŒ¨:', error);\n });\n\n return () => {\n scene.dispose();\n if (textureRef.current) {\n textureRef.current.dispose();\n }\n };\n }, [vertexShaderPath, fragmentShaderPath]);\n\n // 이미지 ν…μŠ€μ²˜ λ‘œλ“œ\n useEffect(() => {\n if (!imageSrc || !isReady) {\n console.log('[ImageDistortion] 이미지 λ‘œλ“œ μŠ€ν‚΅:', { imageSrc, isReady });\n return;\n }\n\n console.log('[ImageDistortion] 이미지 λ‘œλ“œ μ‹œμž‘:', imageSrc);\n setImageLoaded(false);\n\n const loader = new THREE.TextureLoader();\n loader.load(\n imageSrc,\n (texture) => {\n console.log('[ImageDistortion] 이미지 λ‘œλ“œ 성곡!', {\n width: texture.image.width,\n height: texture.image.height\n });\n textureRef.current = texture;\n setImageLoaded(true);\n if (sceneRef.current) {\n sceneRef.current.updateUniforms({\n u_texture: { value: texture },\n });\n sceneRef.current.render();\n console.log('[ImageDistortion] ν…μŠ€μ²˜ μ—…λ°μ΄νŠΈ 및 λ Œλ”λ§ μ™„λ£Œ');\n }\n },\n (progress) => {\n console.log('[ImageDistortion] 이미지 λ‘œλ”© 쀑...',\n Math.round((progress.loaded / progress.total) * 100) + '%'\n );\n },\n (error) => {\n console.error('[ImageDistortion] 이미지 λ‘œλ“œ μ‹€νŒ¨:', error);\n setImageLoaded(false);\n }\n );\n\n return () => {\n if (textureRef.current) {\n textureRef.current.dispose();\n textureRef.current = null;\n }\n };\n }, [imageSrc, isReady]);\n\n // 셰이더 μœ λ‹ˆνΌ μ—…λ°μ΄νŠΈ\n useEffect(() => {\n if (!sceneRef.current || !isReady) return;\n\n // 포인트 λ°°μ—΄ 생성\n const points = new Float32Array(SHADER_CONFIG.MAX_POINTS * 2);\n currentAreas.forEach((area, areaIndex) => {\n area.basePoints.forEach((point, pointIndex) => {\n const index = (areaIndex * 4 + pointIndex) * 2;\n points[index] = point.x;\n points[index + 1] = point.y;\n });\n });\n\n // λ“œλž˜κ·Έ 벑터 λ°°μ—΄ 생성\n const dragVectors = new Float32Array(SHADER_CONFIG.MAX_DRAG_VECTORS * 2);\n currentAreas.forEach((area, index) => {\n const baseIndex = index * 2;\n dragVectors[baseIndex] = area.dragVector.x;\n dragVectors[baseIndex + 1] = area.dragVector.y;\n });\n\n // 강도 λ°°μ—΄ 생성\n const strengths = new Float32Array(SHADER_CONFIG.MAX_STRENGTHS);\n currentAreas.forEach((area, index) => {\n strengths[index] = area.distortionStrength;\n });\n\n sceneRef.current.updateUniforms({\n u_numAreas: { value: currentAreas.length },\n u_points: { value: points },\n u_dragVectors: { value: dragVectors },\n u_distortionStrengths: { value: strengths },\n });\n\n sceneRef.current.render();\n }, [currentAreas, isReady]);\n\n // μ• λ‹ˆλ©”μ΄μ…˜ 루프\n const animationCallback = useCallback((deltaTime: number) => {\n if (!isReady) return;\n\n setCurrentAreas((prevAreas) => {\n // 진행도 μ—…λ°μ΄νŠΈ\n const updatedAreas = AnimationLoop.updateProgress(prevAreas, deltaTime);\n // λ“œλž˜κ·Έ 벑터 μ—…λ°μ΄νŠΈ\n return AnimationLoop.updateAreaDragVectors(updatedAreas);\n });\n }, [isReady]);\n\n useAnimationFrame(animationCallback, isPlaying);\n\n return (\n \n {!imageLoaded && (\n \n 이미지 λ‘œλ”© 쀑...\n \n )}\n \n );\n};","import * as THREE from 'three';\nimport type { ShaderUniforms } from '../types';\n\n/**\n * Three.js 씬 관리 클래슀\n */\nexport class ThreeScene {\n private scene: THREE.Scene;\n private camera: THREE.OrthographicCamera;\n private renderer: THREE.WebGLRenderer;\n private mesh: THREE.Mesh | null = null;\n private uniforms: ShaderUniforms;\n\n constructor(private container: HTMLElement) {\n // 씬 생성\n this.scene = new THREE.Scene();\n\n // 2D용 직ꡐ 카메라 μ„€μ •\n this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);\n\n // λ Œλ”λŸ¬ μ„€μ •\n this.renderer = new THREE.WebGLRenderer({\n antialias: true,\n alpha: false,\n });\n this.renderer.setPixelRatio(window.devicePixelRatio);\n this.container.appendChild(this.renderer.domElement);\n\n // μœ λ‹ˆνΌ μ΄ˆκΈ°ν™”\n this.uniforms = {\n u_resolution: { value: new THREE.Vector2() },\n u_texture: { value: null },\n u_points: { value: new Float32Array(64) }, // 32포인트 Γ— 2(x,y)\n u_numAreas: { value: 0 },\n u_dragVectors: { value: new Float32Array(16) }, // 8벑터 Γ— 2(x,y)\n u_distortionStrengths: { value: new Float32Array(8) },\n };\n\n this.handleResize();\n window.addEventListener('resize', this.handleResize);\n }\n\n /**\n * μœˆλ„μš° λ¦¬μ‚¬μ΄μ¦ˆ ν•Έλ“€λŸ¬\n */\n private handleResize = () => {\n const width = this.container.clientWidth;\n const height = this.container.clientHeight;\n\n this.renderer.setSize(width, height);\n this.uniforms.u_resolution.value.set(width, height);\n\n if (this.mesh) {\n this.render();\n }\n };\n\n /**\n * 셰이더 머티리얼 μ„€μ •\n * @param vertexShader λ²„ν…μŠ€ 셰이더 μ†ŒμŠ€\n * @param fragmentShader ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더 μ†ŒμŠ€\n */\n public setShaderMaterial(vertexShader: string, fragmentShader: string) {\n console.log('[ThreeScene] setShaderMaterial 호좜됨');\n console.log('[ThreeScene] vertexShader 길이:', vertexShader.length);\n console.log('[ThreeScene] fragmentShader 길이:', fragmentShader.length);\n\n const geometry = new THREE.PlaneGeometry(2, 2);\n const material = new THREE.ShaderMaterial({\n uniforms: this.uniforms,\n vertexShader,\n fragmentShader,\n });\n\n console.log('[ThreeScene] ShaderMaterial 생성됨');\n\n // 셰이더 컴파일 μ—λŸ¬ 확인\n const renderer = this.renderer;\n const testScene = new THREE.Scene();\n const testMesh = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), material);\n testScene.add(testMesh);\n\n try {\n renderer.compile(testScene, this.camera);\n console.log('[ThreeScene] 셰이더 컴파일 성곡!');\n } catch (e) {\n console.error('[ThreeScene] 셰이더 컴파일 μ—λŸ¬:', e);\n }\n\n if (this.mesh) {\n this.scene.remove(this.mesh);\n }\n\n this.mesh = new THREE.Mesh(geometry, material);\n this.scene.add(this.mesh);\n console.log('[ThreeScene] meshλ₯Ό 씬에 좔가함');\n }\n\n /**\n * μœ λ‹ˆνΌ κ°’ μ—…λ°μ΄νŠΈ\n * @param updates μ—…λ°μ΄νŠΈν•  μœ λ‹ˆνΌ κ°’λ“€\n */\n public updateUniforms(updates: Partial) {\n Object.keys(updates).forEach((key) => {\n const uniformKey = key as keyof ShaderUniforms;\n this.uniforms[uniformKey].value = updates[uniformKey]!.value;\n });\n }\n\n /**\n * 씬 λ Œλ”λ§\n */\n public render() {\n console.log('[ThreeScene] render() 호좜됨, mesh:', this.mesh);\n this.renderer.render(this.scene, this.camera);\n }\n\n /**\n * λ¦¬μ†ŒμŠ€ 정리\n */\n public dispose() {\n window.removeEventListener('resize', this.handleResize);\n this.renderer.dispose();\n if (this.mesh) {\n this.mesh.geometry.dispose();\n (this.mesh.material as THREE.Material).dispose();\n }\n if (this.container.contains(this.renderer.domElement)) {\n this.container.removeChild(this.renderer.domElement);\n }\n }\n}","/**\n * 셰이더 파일 λ‘œλ”© 및 관리 클래슀\n */\nexport class ShaderManager {\n private vertexShaderSource: string | null = null;\n private fragmentShaderSource: string | null = null;\n\n /**\n * 셰이더 νŒŒμΌλ“€μ„ λΉ„λ™κΈ°λ‘œ λ‘œλ“œ\n * @param vertexPath λ²„ν…μŠ€ 셰이더 파일 경둜\n * @param fragmentPath ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더 파일 경둜\n * @returns λ‘œλ“œλœ 셰이더 μ†ŒμŠ€ μ½”λ“œ\n */\n public async loadShaders(\n vertexPath: string,\n fragmentPath: string\n ): Promise<{ vertex: string; fragment: string }> {\n console.log('[ShaderManager] loadShaders μ‹œμž‘:', { vertexPath, fragmentPath });\n\n try {\n console.log('[ShaderManager] fetch μ‹œμž‘...');\n const [vertexResponse, fragmentResponse] = await Promise.all([\n fetch(vertexPath),\n fetch(fragmentPath),\n ]);\n\n console.log('[ShaderManager] fetch μ™„λ£Œ:', {\n vertexStatus: vertexResponse.status,\n fragmentStatus: fragmentResponse.status\n });\n\n if (!vertexResponse.ok) {\n throw new Error(`λ²„ν…μŠ€ 셰이더 λ‘œλ“œ μ‹€νŒ¨: ${vertexResponse.statusText}`);\n }\n if (!fragmentResponse.ok) {\n throw new Error(`ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더 λ‘œλ“œ μ‹€νŒ¨: ${fragmentResponse.statusText}`);\n }\n\n console.log('[ShaderManager] text() λ³€ν™˜ μ‹œμž‘...');\n this.vertexShaderSource = await vertexResponse.text();\n this.fragmentShaderSource = await fragmentResponse.text();\n\n console.log('[ShaderManager] 셰이더 λ‘œλ“œ μ™„λ£Œ!', {\n vertexLength: this.vertexShaderSource.length,\n fragmentLength: this.fragmentShaderSource.length\n });\n\n return {\n vertex: this.vertexShaderSource,\n fragment: this.fragmentShaderSource,\n };\n } catch (error) {\n console.error('[ShaderManager] 셰이더 λ‘œλ“œ μ‹€νŒ¨:', error);\n throw new Error('셰이더 λ‘œλ”©μ— μ‹€νŒ¨ν–ˆμŠ΅λ‹ˆλ‹€');\n }\n }\n\n /**\n * λ²„ν…μŠ€ 셰이더 μ†ŒμŠ€ μ½”λ“œ λ°˜ν™˜\n */\n public getVertexShader(): string {\n if (!this.vertexShaderSource) {\n throw new Error('λ²„ν…μŠ€ 셰이더가 λ‘œλ“œλ˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€');\n }\n return this.vertexShaderSource;\n }\n\n /**\n * ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더 μ†ŒμŠ€ μ½”λ“œ λ°˜ν™˜\n */\n public getFragmentShader(): string {\n if (!this.fragmentShaderSource) {\n throw new Error('ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더가 λ‘œλ“œλ˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€');\n }\n return this.fragmentShaderSource;\n }\n}","import { type EasingFunction } from '../types';\n\ntype EasingFunc = (t: number) => number;\n\n/**\n * 이징 ν•¨μˆ˜ κ΅¬ν˜„ 맡\n */\nconst easingFunctions: Record = {\n linear: (t) => t,\n\n easeIn: (t) => t * t,\n easeOut: (t) => t * (2 - t),\n easeInOut: (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),\n\n easeInQuad: (t) => t * t,\n easeOutQuad: (t) => t * (2 - t),\n};\n\n/**\n * 진행도에 이징 ν•¨μˆ˜λ₯Ό 적용\n * @param progress 진행도 (0.0 - 1.0)\n * @param easingType μ μš©ν•  이징 ν•¨μˆ˜ νƒ€μž…\n * @returns 이징이 적용된 진행도 (0.0 - 1.0)\n */\nexport const applyEasing = (\n progress: number,\n easingType: EasingFunction\n): number => {\n const clampedProgress = Math.max(0, Math.min(1, progress));\n return easingFunctions[easingType](clampedProgress);\n};","import { applyEasing } from '../utils/easing';\nimport type {DistortionArea, Point} from \"../types\";\n\n/**\n * μ• λ‹ˆλ©”μ΄μ…˜ 루프 관리 클래슀\n */\nexport class AnimationLoop {\n /**\n * μ˜μ—­λ“€μ˜ λ“œλž˜κ·Έ 벑터λ₯Ό ν˜„μž¬ 진행도에 따라 μ—…λ°μ΄νŠΈ\n * @param areas μ™œκ³‘ μ˜μ—­ λ°°μ—΄\n * @returns μ—…λ°μ΄νŠΈλœ μ˜μ—­ λ°°μ—΄\n */\n public static updateAreaDragVectors(\n areas: DistortionArea[]\n ): DistortionArea[] {\n return areas.map((area) => {\n const { progress, movement } = area;\n\n // 이징 적용\n const easedProgress = applyEasing(progress, movement.easing);\n\n // 벑터 κ°„ 보간\n let dragVector: Point;\n\n if (easedProgress < 0.5) {\n // 0.0 -> 0.5: 0μ—μ„œ vectorA둜 보간\n const t = easedProgress * 2;\n dragVector = {\n x: movement.vectorA.x * t,\n y: movement.vectorA.y * t,\n };\n } else {\n // 0.5 -> 1.0: vectorAμ—μ„œ 0으둜 보간\n const t = (easedProgress - 0.5) * 2;\n dragVector = {\n x: movement.vectorA.x * (1 - t),\n y: movement.vectorA.y * (1 - t),\n };\n }\n\n return {\n ...area,\n dragVector,\n };\n });\n }\n\n /**\n * λͺ¨λ“  μ˜μ—­μ˜ 진행도λ₯Ό 델타 νƒ€μž„λ§ŒνΌ μ—…λ°μ΄νŠΈ\n * @param areas μ™œκ³‘ μ˜μ—­ λ°°μ—΄\n * @param deltaTime 델타 νƒ€μž„ (초)\n * @returns μ—…λ°μ΄νŠΈλœ μ˜μ—­ λ°°μ—΄\n */\n public static updateProgress(\n areas: DistortionArea[],\n deltaTime: number\n ): DistortionArea[] {\n return areas.map((area) => {\n let newProgress = area.progress + deltaTime / area.movement.duration;\n newProgress %= 1.0; // 루프\n\n return {\n ...area,\n progress: newProgress,\n };\n });\n }\n}","import { useEffect, useRef } from 'react';\n\n/**\n * requestAnimationFrame을 μ‚¬μš©ν•œ μ• λ‹ˆλ©”μ΄μ…˜ 루프 ν›…\n * @param callback 맀 ν”„λ ˆμž„λ§ˆλ‹€ 호좜될 콜백 (deltaTime을 인자둜 λ°›μŒ)\n * @param isPlaying μ• λ‹ˆλ©”μ΄μ…˜ μž¬μƒ μ—¬λΆ€\n */\nexport const useAnimationFrame = (\n callback: (deltaTime: number) => void,\n isPlaying: boolean = true\n) => {\n const requestRef = useRef(undefined);\n const previousTimeRef = useRef(undefined);\n\n useEffect(() => {\n if (!isPlaying) return;\n\n const animate = (time: number) => {\n if (previousTimeRef.current !== undefined) {\n const deltaTime = (time - previousTimeRef.current) / 1000; // λ°€λ¦¬μ΄ˆλ₯Ό 초둜 λ³€ν™˜\n callback(deltaTime);\n }\n previousTimeRef.current = time;\n requestRef.current = requestAnimationFrame(animate);\n };\n\n requestRef.current = requestAnimationFrame(animate);\n\n return () => {\n if (requestRef.current) {\n cancelAnimationFrame(requestRef.current);\n }\n };\n }, [callback, isPlaying]);\n};","/**\n * 셰이더 κ΄€λ ¨ μ„€μ •\n */\nexport const SHADER_CONFIG = {\n /** μ΅œλŒ€ μ˜μ—­ 개수 */\n MAX_AREAS: 8,\n /** μ΅œλŒ€ 포인트 개수 (8μ˜μ—­ Γ— 4포인트) */\n MAX_POINTS: 32,\n /** μ΅œλŒ€ λ“œλž˜κ·Έ 벑터 개수 */\n MAX_DRAG_VECTORS: 8,\n /** μ΅œλŒ€ 강도 λ°°μ—΄ 크기 */\n MAX_STRENGTHS: 8,\n} as const;\n\n/**\n * μ• λ‹ˆλ©”μ΄μ…˜ κ΄€λ ¨ μ„€μ •\n */\nexport const ANIMATION_CONFIG = {\n /** λͺ©ν‘œ FPS */\n TARGET_FPS: 60,\n /** 델타 νƒ€μž„ (μ•½ 16.67ms) */\n DELTA_TIME: 1 / 60,\n} as const;\n\n/**\n * κΈ°λ³Έ μ˜μ—­ μ„€μ •κ°’\n */\nexport const DEFAULT_AREA = {\n /** κΈ°λ³Έ μ™œκ³‘ 강도 */\n DISTORTION_STRENGTH: 0.5,\n /** κΈ°λ³Έ μ• λ‹ˆλ©”μ΄μ…˜ 지속 μ‹œκ°„ (초) */\n DURATION: 2.0,\n /** κΈ°λ³Έ 이징 ν•¨μˆ˜ */\n EASING: 'easeInOut' as const,\n /** κΈ°λ³Έ 벑터 A */\n VECTOR_A: { x: 0.1, y: 0.1 },\n /** κΈ°λ³Έ 벑터 B */\n VECTOR_B: { x: -0.1, y: -0.1 },\n} as const;"],"mappings":"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","names":["import_react","THREE"]} \ No newline at end of file diff --git a/dist/index.mjs b/dist/index.mjs index 0027381..a101070 100644 --- a/dist/index.mjs +++ b/dist/index.mjs @@ -47,17 +47,32 @@ var ThreeScene = class { * @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"); } /** * μœ λ‹ˆνΌ κ°’ μ—…λ°μ΄νŠΈ @@ -73,6 +88,7 @@ var ThreeScene = class { * 씬 λ Œλ”λ§ */ render() { + console.log("[ThreeScene] render() \uD638\uCD9C\uB428, mesh:", this.mesh); this.renderer.render(this.scene, this.camera); } /** @@ -104,25 +120,36 @@ var ShaderManager = class { * @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("\uC170\uC774\uB354 \uB85C\uB4DC \uC2E4\uD328:", 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"); } } @@ -279,6 +306,7 @@ var ImageDistortion = ({ 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); @@ -315,22 +343,34 @@ var ImageDistortion = ({ 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"); + 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"); } }, - void 0, + (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 () => { @@ -386,7 +426,24 @@ var ImageDistortion = ({ position: "relative", ...style }, - className + 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..." + } + ) } ); }; diff --git a/dist/index.mjs.map b/dist/index.mjs.map index 10aef13..03918ca 100644 --- a/dist/index.mjs.map +++ b/dist/index.mjs.map @@ -1 +1 @@ -{"version":3,"sources":["../src/components/ImageDistortion.tsx","../src/engine/ThreeScene.ts","../src/engine/ShaderManager.ts","../src/utils/easing.ts","../src/engine/AnimationLoop.ts","../src/hooks/useAnimationFrame.ts","../src/utils/constants.ts"],"sourcesContent":["import React, { useEffect, useRef, useState, useCallback } from 'react';\nimport * as THREE from 'three';\nimport { DistortionArea } from '../types';\nimport { ThreeScene } from '../engine/ThreeScene';\nimport { ShaderManager } from '../engine/ShaderManager';\nimport { AnimationLoop } from '../engine/AnimationLoop';\nimport { useAnimationFrame } from '../hooks/useAnimationFrame';\nimport { SHADER_CONFIG } from '../utils/constants';\n\n/**\n * ImageDistortion μ»΄ν¬λ„ŒνŠΈ Props\n */\nexport interface ImageDistortionProps {\n /** 이미지 μ†ŒμŠ€ URL */\n imageSrc: string;\n /** μ™œκ³‘ μ˜μ—­ λ°°μ—΄ */\n areas: DistortionArea[];\n /** λ²„ν…μŠ€ 셰이더 경둜 (선택사항) */\n vertexShaderPath?: string;\n /** ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더 경둜 (선택사항) */\n fragmentShaderPath?: string;\n /** μ• λ‹ˆλ©”μ΄μ…˜ μž¬μƒ μ—¬λΆ€ */\n isPlaying?: boolean;\n /** μ»¨ν…Œμ΄λ„ˆ μŠ€νƒ€μΌ */\n style?: React.CSSProperties;\n /** μ»¨ν…Œμ΄λ„ˆ 클래슀λͺ… */\n className?: string;\n}\n\n/**\n * GPU 가속 이미지 μ™œκ³‘ μ»΄ν¬λ„ŒνŠΈ\n * Three.js와 GLSL 셰이더λ₯Ό μ‚¬μš©ν•˜μ—¬ μ‹€μ‹œκ°„ 이미지 μ™œκ³‘ 효과λ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€.\n */\nexport const ImageDistortion: React.FC = ({\n imageSrc,\n areas,\n vertexShaderPath,\n fragmentShaderPath,\n isPlaying = true,\n style,\n className,\n}) => {\n const containerRef = useRef(null);\n const sceneRef = useRef(null);\n const shaderManagerRef = useRef(new ShaderManager());\n const textureRef = useRef(null);\n\n const [isReady, setIsReady] = useState(false);\n const [currentAreas, setCurrentAreas] = useState(areas);\n\n // μ˜μ—­ λ³€κ²½ μ‹œ μƒνƒœ μ—…λ°μ΄νŠΈ\n useEffect(() => {\n setCurrentAreas(areas);\n }, [areas]);\n\n // Three.js 씬 μ΄ˆκΈ°ν™”\n useEffect(() => {\n console.log('[ImageDistortion] useEffect μ‹€ν–‰, containerRef.current:', containerRef.current);\n\n if (!containerRef.current) {\n console.warn('[ImageDistortion] containerRef.currentκ°€ nullμž…λ‹ˆλ‹€. μ»΄ν¬λ„ŒνŠΈκ°€ μ œλŒ€λ‘œ λ§ˆμš΄νŠΈλ˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€.');\n return;\n }\n\n console.log('[ImageDistortion] μ΄ˆκΈ°ν™” μ‹œμž‘');\n const scene = new ThreeScene(containerRef.current);\n sceneRef.current = scene;\n\n // 셰이더 λ‘œλ“œ\n const vertPath = vertexShaderPath || '/shaders/distortion.vert.glsl';\n const fragPath = fragmentShaderPath || '/shaders/distortion.frag.glsl';\n\n console.log('[ImageDistortion] 셰이더 λ‘œλ“œ μ‹œλ„:', { vertPath, fragPath });\n\n shaderManagerRef.current\n .loadShaders(vertPath, fragPath)\n .then(({ vertex, fragment }) => {\n console.log('[ImageDistortion] 셰이더 λ‘œλ“œ 성곡');\n scene.setShaderMaterial(vertex, fragment);\n setIsReady(true);\n })\n .catch((error) => {\n console.error('[ImageDistortion] 셰이더 λ‘œλ“œ μ‹€νŒ¨:', error);\n });\n\n return () => {\n scene.dispose();\n if (textureRef.current) {\n textureRef.current.dispose();\n }\n };\n }, [vertexShaderPath, fragmentShaderPath]);\n\n // 이미지 ν…μŠ€μ²˜ λ‘œλ“œ\n useEffect(() => {\n if (!imageSrc || !isReady) {\n console.log('[ImageDistortion] 이미지 λ‘œλ“œ μŠ€ν‚΅:', { imageSrc, isReady });\n return;\n }\n\n console.log('[ImageDistortion] 이미지 λ‘œλ“œ μ‹œμž‘:', imageSrc);\n const loader = new THREE.TextureLoader();\n loader.load(\n imageSrc,\n (texture) => {\n console.log('[ImageDistortion] 이미지 λ‘œλ“œ 성곡');\n textureRef.current = texture;\n if (sceneRef.current) {\n sceneRef.current.updateUniforms({\n u_texture: { value: texture },\n });\n sceneRef.current.render();\n }\n },\n undefined,\n (error) => {\n console.error('[ImageDistortion] 이미지 λ‘œλ“œ μ‹€νŒ¨:', error);\n }\n );\n\n return () => {\n if (textureRef.current) {\n textureRef.current.dispose();\n textureRef.current = null;\n }\n };\n }, [imageSrc, isReady]);\n\n // 셰이더 μœ λ‹ˆνΌ μ—…λ°μ΄νŠΈ\n useEffect(() => {\n if (!sceneRef.current || !isReady) return;\n\n // 포인트 λ°°μ—΄ 생성\n const points = new Float32Array(SHADER_CONFIG.MAX_POINTS * 2);\n currentAreas.forEach((area, areaIndex) => {\n area.basePoints.forEach((point, pointIndex) => {\n const index = (areaIndex * 4 + pointIndex) * 2;\n points[index] = point.x;\n points[index + 1] = point.y;\n });\n });\n\n // λ“œλž˜κ·Έ 벑터 λ°°μ—΄ 생성\n const dragVectors = new Float32Array(SHADER_CONFIG.MAX_DRAG_VECTORS * 2);\n currentAreas.forEach((area, index) => {\n const baseIndex = index * 2;\n dragVectors[baseIndex] = area.dragVector.x;\n dragVectors[baseIndex + 1] = area.dragVector.y;\n });\n\n // 강도 λ°°μ—΄ 생성\n const strengths = new Float32Array(SHADER_CONFIG.MAX_STRENGTHS);\n currentAreas.forEach((area, index) => {\n strengths[index] = area.distortionStrength;\n });\n\n sceneRef.current.updateUniforms({\n u_numAreas: { value: currentAreas.length },\n u_points: { value: points },\n u_dragVectors: { value: dragVectors },\n u_distortionStrengths: { value: strengths },\n });\n\n sceneRef.current.render();\n }, [currentAreas, isReady]);\n\n // μ• λ‹ˆλ©”μ΄μ…˜ 루프\n const animationCallback = useCallback((deltaTime: number) => {\n if (!isReady) return;\n\n setCurrentAreas((prevAreas) => {\n // 진행도 μ—…λ°μ΄νŠΈ\n const updatedAreas = AnimationLoop.updateProgress(prevAreas, deltaTime);\n // λ“œλž˜κ·Έ 벑터 μ—…λ°μ΄νŠΈ\n return AnimationLoop.updateAreaDragVectors(updatedAreas);\n });\n }, [isReady]);\n\n useAnimationFrame(animationCallback, isPlaying);\n\n return (\n \n );\n};","import * as THREE from 'three';\nimport { ShaderUniforms } from '@/types';\n\n/**\n * Three.js 씬 관리 클래슀\n */\nexport class ThreeScene {\n private scene: THREE.Scene;\n private camera: THREE.OrthographicCamera;\n private renderer: THREE.WebGLRenderer;\n private mesh: THREE.Mesh | null = null;\n private uniforms: ShaderUniforms;\n\n constructor(private container: HTMLElement) {\n // 씬 생성\n this.scene = new THREE.Scene();\n\n // 2D용 직ꡐ 카메라 μ„€μ •\n this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);\n\n // λ Œλ”λŸ¬ μ„€μ •\n this.renderer = new THREE.WebGLRenderer({\n antialias: true,\n alpha: false,\n });\n this.renderer.setPixelRatio(window.devicePixelRatio);\n this.container.appendChild(this.renderer.domElement);\n\n // μœ λ‹ˆνΌ μ΄ˆκΈ°ν™”\n this.uniforms = {\n u_resolution: { value: new THREE.Vector2() },\n u_texture: { value: null },\n u_points: { value: new Float32Array(64) }, // 32포인트 Γ— 2(x,y)\n u_numAreas: { value: 0 },\n u_dragVectors: { value: new Float32Array(16) }, // 8벑터 Γ— 2(x,y)\n u_distortionStrengths: { value: new Float32Array(8) },\n };\n\n this.handleResize();\n window.addEventListener('resize', this.handleResize);\n }\n\n /**\n * μœˆλ„μš° λ¦¬μ‚¬μ΄μ¦ˆ ν•Έλ“€λŸ¬\n */\n private handleResize = () => {\n const width = this.container.clientWidth;\n const height = this.container.clientHeight;\n\n this.renderer.setSize(width, height);\n this.uniforms.u_resolution.value.set(width, height);\n\n if (this.mesh) {\n this.render();\n }\n };\n\n /**\n * 셰이더 머티리얼 μ„€μ •\n * @param vertexShader λ²„ν…μŠ€ 셰이더 μ†ŒμŠ€\n * @param fragmentShader ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더 μ†ŒμŠ€\n */\n public setShaderMaterial(vertexShader: string, fragmentShader: string) {\n const geometry = new THREE.PlaneGeometry(2, 2);\n const material = new THREE.ShaderMaterial({\n uniforms: this.uniforms,\n vertexShader,\n fragmentShader,\n });\n\n if (this.mesh) {\n this.scene.remove(this.mesh);\n }\n\n this.mesh = new THREE.Mesh(geometry, material);\n this.scene.add(this.mesh);\n }\n\n /**\n * μœ λ‹ˆνΌ κ°’ μ—…λ°μ΄νŠΈ\n * @param updates μ—…λ°μ΄νŠΈν•  μœ λ‹ˆνΌ κ°’λ“€\n */\n public updateUniforms(updates: Partial) {\n Object.keys(updates).forEach((key) => {\n const uniformKey = key as keyof ShaderUniforms;\n this.uniforms[uniformKey].value = updates[uniformKey]!.value;\n });\n }\n\n /**\n * 씬 λ Œλ”λ§\n */\n public render() {\n this.renderer.render(this.scene, this.camera);\n }\n\n /**\n * λ¦¬μ†ŒμŠ€ 정리\n */\n public dispose() {\n window.removeEventListener('resize', this.handleResize);\n this.renderer.dispose();\n if (this.mesh) {\n this.mesh.geometry.dispose();\n (this.mesh.material as THREE.Material).dispose();\n }\n if (this.container.contains(this.renderer.domElement)) {\n this.container.removeChild(this.renderer.domElement);\n }\n }\n}","/**\n * 셰이더 파일 λ‘œλ”© 및 관리 클래슀\n */\nexport class ShaderManager {\n private vertexShaderSource: string | null = null;\n private fragmentShaderSource: string | null = null;\n\n /**\n * 셰이더 νŒŒμΌλ“€μ„ λΉ„λ™κΈ°λ‘œ λ‘œλ“œ\n * @param vertexPath λ²„ν…μŠ€ 셰이더 파일 경둜\n * @param fragmentPath ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더 파일 경둜\n * @returns λ‘œλ“œλœ 셰이더 μ†ŒμŠ€ μ½”λ“œ\n */\n public async loadShaders(\n vertexPath: string,\n fragmentPath: string\n ): Promise<{ vertex: string; fragment: string }> {\n try {\n const [vertexResponse, fragmentResponse] = await Promise.all([\n fetch(vertexPath),\n fetch(fragmentPath),\n ]);\n\n if (!vertexResponse.ok) {\n throw new Error(`λ²„ν…μŠ€ 셰이더 λ‘œλ“œ μ‹€νŒ¨: ${vertexResponse.statusText}`);\n }\n if (!fragmentResponse.ok) {\n throw new Error(`ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더 λ‘œλ“œ μ‹€νŒ¨: ${fragmentResponse.statusText}`);\n }\n\n this.vertexShaderSource = await vertexResponse.text();\n this.fragmentShaderSource = await fragmentResponse.text();\n\n return {\n vertex: this.vertexShaderSource,\n fragment: this.fragmentShaderSource,\n };\n } catch (error) {\n console.error('셰이더 λ‘œλ“œ μ‹€νŒ¨:', error);\n throw new Error('셰이더 λ‘œλ”©μ— μ‹€νŒ¨ν–ˆμŠ΅λ‹ˆλ‹€');\n }\n }\n\n /**\n * λ²„ν…μŠ€ 셰이더 μ†ŒμŠ€ μ½”λ“œ λ°˜ν™˜\n */\n public getVertexShader(): string {\n if (!this.vertexShaderSource) {\n throw new Error('λ²„ν…μŠ€ 셰이더가 λ‘œλ“œλ˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€');\n }\n return this.vertexShaderSource;\n }\n\n /**\n * ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더 μ†ŒμŠ€ μ½”λ“œ λ°˜ν™˜\n */\n public getFragmentShader(): string {\n if (!this.fragmentShaderSource) {\n throw new Error('ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더가 λ‘œλ“œλ˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€');\n }\n return this.fragmentShaderSource;\n }\n}","import { EasingFunction } from '../types';\n\ntype EasingFunc = (t: number) => number;\n\n/**\n * 이징 ν•¨μˆ˜ κ΅¬ν˜„ 맡\n */\nconst easingFunctions: Record = {\n linear: (t) => t,\n\n easeIn: (t) => t * t,\n easeOut: (t) => t * (2 - t),\n easeInOut: (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),\n\n easeInQuad: (t) => t * t,\n easeOutQuad: (t) => t * (2 - t),\n};\n\n/**\n * 진행도에 이징 ν•¨μˆ˜λ₯Ό 적용\n * @param progress 진행도 (0.0 - 1.0)\n * @param easingType μ μš©ν•  이징 ν•¨μˆ˜ νƒ€μž…\n * @returns 이징이 적용된 진행도 (0.0 - 1.0)\n */\nexport const applyEasing = (\n progress: number,\n easingType: EasingFunction\n): number => {\n const clampedProgress = Math.max(0, Math.min(1, progress));\n return easingFunctions[easingType](clampedProgress);\n};","import { DistortionArea, Point } from '../types';\nimport { applyEasing } from '../utils/easing';\n\n/**\n * μ• λ‹ˆλ©”μ΄μ…˜ 루프 관리 클래슀\n */\nexport class AnimationLoop {\n /**\n * μ˜μ—­λ“€μ˜ λ“œλž˜κ·Έ 벑터λ₯Ό ν˜„μž¬ 진행도에 따라 μ—…λ°μ΄νŠΈ\n * @param areas μ™œκ³‘ μ˜μ—­ λ°°μ—΄\n * @returns μ—…λ°μ΄νŠΈλœ μ˜μ—­ λ°°μ—΄\n */\n public static updateAreaDragVectors(\n areas: DistortionArea[]\n ): DistortionArea[] {\n return areas.map((area) => {\n const { progress, movement } = area;\n\n // 이징 적용\n const easedProgress = applyEasing(progress, movement.easing);\n\n // 벑터 κ°„ 보간\n let dragVector: Point;\n\n if (easedProgress < 0.5) {\n // 0.0 -> 0.5: 0μ—μ„œ vectorA둜 보간\n const t = easedProgress * 2;\n dragVector = {\n x: movement.vectorA.x * t,\n y: movement.vectorA.y * t,\n };\n } else {\n // 0.5 -> 1.0: vectorAμ—μ„œ 0으둜 보간\n const t = (easedProgress - 0.5) * 2;\n dragVector = {\n x: movement.vectorA.x * (1 - t),\n y: movement.vectorA.y * (1 - t),\n };\n }\n\n return {\n ...area,\n dragVector,\n };\n });\n }\n\n /**\n * λͺ¨λ“  μ˜μ—­μ˜ 진행도λ₯Ό 델타 νƒ€μž„λ§ŒνΌ μ—…λ°μ΄νŠΈ\n * @param areas μ™œκ³‘ μ˜μ—­ λ°°μ—΄\n * @param deltaTime 델타 νƒ€μž„ (초)\n * @returns μ—…λ°μ΄νŠΈλœ μ˜μ—­ λ°°μ—΄\n */\n public static updateProgress(\n areas: DistortionArea[],\n deltaTime: number\n ): DistortionArea[] {\n return areas.map((area) => {\n let newProgress = area.progress + deltaTime / area.movement.duration;\n newProgress %= 1.0; // 루프\n\n return {\n ...area,\n progress: newProgress,\n };\n });\n }\n}","import { useEffect, useRef } from 'react';\n\n/**\n * requestAnimationFrame을 μ‚¬μš©ν•œ μ• λ‹ˆλ©”μ΄μ…˜ 루프 ν›…\n * @param callback 맀 ν”„λ ˆμž„λ§ˆλ‹€ 호좜될 콜백 (deltaTime을 인자둜 λ°›μŒ)\n * @param isPlaying μ• λ‹ˆλ©”μ΄μ…˜ μž¬μƒ μ—¬λΆ€\n */\nexport const useAnimationFrame = (\n callback: (deltaTime: number) => void,\n isPlaying: boolean = true\n) => {\n const requestRef = useRef(undefined);\n const previousTimeRef = useRef(undefined);\n\n useEffect(() => {\n if (!isPlaying) return;\n\n const animate = (time: number) => {\n if (previousTimeRef.current !== undefined) {\n const deltaTime = (time - previousTimeRef.current) / 1000; // λ°€λ¦¬μ΄ˆλ₯Ό 초둜 λ³€ν™˜\n callback(deltaTime);\n }\n previousTimeRef.current = time;\n requestRef.current = requestAnimationFrame(animate);\n };\n\n requestRef.current = requestAnimationFrame(animate);\n\n return () => {\n if (requestRef.current) {\n cancelAnimationFrame(requestRef.current);\n }\n };\n }, [callback, isPlaying]);\n};","/**\n * 셰이더 κ΄€λ ¨ μ„€μ •\n */\nexport const SHADER_CONFIG = {\n /** μ΅œλŒ€ μ˜μ—­ 개수 */\n MAX_AREAS: 8,\n /** μ΅œλŒ€ 포인트 개수 (8μ˜μ—­ Γ— 4포인트) */\n MAX_POINTS: 32,\n /** μ΅œλŒ€ λ“œλž˜κ·Έ 벑터 개수 */\n MAX_DRAG_VECTORS: 8,\n /** μ΅œλŒ€ 강도 λ°°μ—΄ 크기 */\n MAX_STRENGTHS: 8,\n} as const;\n\n/**\n * μ• λ‹ˆλ©”μ΄μ…˜ κ΄€λ ¨ μ„€μ •\n */\nexport const ANIMATION_CONFIG = {\n /** λͺ©ν‘œ FPS */\n TARGET_FPS: 60,\n /** 델타 νƒ€μž„ (μ•½ 16.67ms) */\n DELTA_TIME: 1 / 60,\n} as const;\n\n/**\n * κΈ°λ³Έ μ˜μ—­ μ„€μ •κ°’\n */\nexport const DEFAULT_AREA = {\n /** κΈ°λ³Έ μ™œκ³‘ 강도 */\n DISTORTION_STRENGTH: 0.5,\n /** κΈ°λ³Έ μ• λ‹ˆλ©”μ΄μ…˜ 지속 μ‹œκ°„ (초) */\n DURATION: 2.0,\n /** κΈ°λ³Έ 이징 ν•¨μˆ˜ */\n EASING: 'easeInOut' as const,\n /** κΈ°λ³Έ 벑터 A */\n VECTOR_A: { x: 0.1, y: 0.1 },\n /** κΈ°λ³Έ 벑터 B */\n VECTOR_B: { x: -0.1, y: -0.1 },\n} as const;"],"mappings":"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","names":["useEffect","useRef","THREE","useRef","useEffect"]} \ No newline at end of file +{"version":3,"sources":["../src/components/ImageDistortion.tsx","../src/engine/ThreeScene.ts","../src/engine/ShaderManager.ts","../src/utils/easing.ts","../src/engine/AnimationLoop.ts","../src/hooks/useAnimationFrame.ts","../src/utils/constants.ts"],"sourcesContent":["import React, { useEffect, useRef, useState, useCallback } from 'react';\nimport * as THREE from 'three';\nimport { type DistortionArea } from '../types';\nimport { ThreeScene } from '../engine/ThreeScene';\nimport { ShaderManager } from '../engine/ShaderManager';\nimport { AnimationLoop } from '../engine/AnimationLoop';\nimport { useAnimationFrame } from '../hooks/useAnimationFrame';\nimport { SHADER_CONFIG } from '../utils/constants';\n\n/**\n * ImageDistortion μ»΄ν¬λ„ŒνŠΈ Props\n */\nexport interface ImageDistortionProps {\n /** 이미지 μ†ŒμŠ€ URL */\n imageSrc: string;\n /** μ™œκ³‘ μ˜μ—­ λ°°μ—΄ */\n areas: DistortionArea[];\n /** λ²„ν…μŠ€ 셰이더 경둜 (선택사항) */\n vertexShaderPath?: string;\n /** ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더 경둜 (선택사항) */\n fragmentShaderPath?: string;\n /** μ• λ‹ˆλ©”μ΄μ…˜ μž¬μƒ μ—¬λΆ€ */\n isPlaying?: boolean;\n /** μ»¨ν…Œμ΄λ„ˆ μŠ€νƒ€μΌ */\n style?: React.CSSProperties;\n /** μ»¨ν…Œμ΄λ„ˆ 클래슀λͺ… */\n className?: string;\n}\n\n/**\n * GPU 가속 이미지 μ™œκ³‘ μ»΄ν¬λ„ŒνŠΈ\n * Three.js와 GLSL 셰이더λ₯Ό μ‚¬μš©ν•˜μ—¬ μ‹€μ‹œκ°„ 이미지 μ™œκ³‘ 효과λ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€.\n */\nexport const ImageDistortion: React.FC = ({\n imageSrc,\n areas,\n vertexShaderPath,\n fragmentShaderPath,\n isPlaying = true,\n style,\n className,\n}) => {\n const containerRef = useRef(null);\n const sceneRef = useRef(null);\n const shaderManagerRef = useRef(new ShaderManager());\n const textureRef = useRef(null);\n\n const [isReady, setIsReady] = useState(false);\n const [imageLoaded, setImageLoaded] = useState(false);\n const [currentAreas, setCurrentAreas] = useState(areas);\n\n // μ˜μ—­ λ³€κ²½ μ‹œ μƒνƒœ μ—…λ°μ΄νŠΈ\n useEffect(() => {\n setCurrentAreas(areas);\n }, [areas]);\n\n // Three.js 씬 μ΄ˆκΈ°ν™”\n useEffect(() => {\n console.log('[ImageDistortion] useEffect μ‹€ν–‰, containerRef.current:', containerRef.current);\n\n if (!containerRef.current) {\n console.warn('[ImageDistortion] containerRef.currentκ°€ nullμž…λ‹ˆλ‹€. μ»΄ν¬λ„ŒνŠΈκ°€ μ œλŒ€λ‘œ λ§ˆμš΄νŠΈλ˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€.');\n return;\n }\n\n console.log('[ImageDistortion] μ΄ˆκΈ°ν™” μ‹œμž‘');\n const scene = new ThreeScene(containerRef.current);\n sceneRef.current = scene;\n\n // 셰이더 λ‘œλ“œ\n const vertPath = vertexShaderPath || '/shaders/distortion.vert.glsl';\n const fragPath = fragmentShaderPath || '/shaders/distortion.frag.glsl';\n\n console.log('[ImageDistortion] 셰이더 λ‘œλ“œ μ‹œλ„:', { vertPath, fragPath });\n\n shaderManagerRef.current\n .loadShaders(vertPath, fragPath)\n .then(({ vertex, fragment }) => {\n console.log('[ImageDistortion] 셰이더 λ‘œλ“œ 성곡');\n scene.setShaderMaterial(vertex, fragment);\n setIsReady(true);\n })\n .catch((error) => {\n console.error('[ImageDistortion] 셰이더 λ‘œλ“œ μ‹€νŒ¨:', error);\n });\n\n return () => {\n scene.dispose();\n if (textureRef.current) {\n textureRef.current.dispose();\n }\n };\n }, [vertexShaderPath, fragmentShaderPath]);\n\n // 이미지 ν…μŠ€μ²˜ λ‘œλ“œ\n useEffect(() => {\n if (!imageSrc || !isReady) {\n console.log('[ImageDistortion] 이미지 λ‘œλ“œ μŠ€ν‚΅:', { imageSrc, isReady });\n return;\n }\n\n console.log('[ImageDistortion] 이미지 λ‘œλ“œ μ‹œμž‘:', imageSrc);\n setImageLoaded(false);\n\n const loader = new THREE.TextureLoader();\n loader.load(\n imageSrc,\n (texture) => {\n console.log('[ImageDistortion] 이미지 λ‘œλ“œ 성곡!', {\n width: texture.image.width,\n height: texture.image.height\n });\n textureRef.current = texture;\n setImageLoaded(true);\n if (sceneRef.current) {\n sceneRef.current.updateUniforms({\n u_texture: { value: texture },\n });\n sceneRef.current.render();\n console.log('[ImageDistortion] ν…μŠ€μ²˜ μ—…λ°μ΄νŠΈ 및 λ Œλ”λ§ μ™„λ£Œ');\n }\n },\n (progress) => {\n console.log('[ImageDistortion] 이미지 λ‘œλ”© 쀑...',\n Math.round((progress.loaded / progress.total) * 100) + '%'\n );\n },\n (error) => {\n console.error('[ImageDistortion] 이미지 λ‘œλ“œ μ‹€νŒ¨:', error);\n setImageLoaded(false);\n }\n );\n\n return () => {\n if (textureRef.current) {\n textureRef.current.dispose();\n textureRef.current = null;\n }\n };\n }, [imageSrc, isReady]);\n\n // 셰이더 μœ λ‹ˆνΌ μ—…λ°μ΄νŠΈ\n useEffect(() => {\n if (!sceneRef.current || !isReady) return;\n\n // 포인트 λ°°μ—΄ 생성\n const points = new Float32Array(SHADER_CONFIG.MAX_POINTS * 2);\n currentAreas.forEach((area, areaIndex) => {\n area.basePoints.forEach((point, pointIndex) => {\n const index = (areaIndex * 4 + pointIndex) * 2;\n points[index] = point.x;\n points[index + 1] = point.y;\n });\n });\n\n // λ“œλž˜κ·Έ 벑터 λ°°μ—΄ 생성\n const dragVectors = new Float32Array(SHADER_CONFIG.MAX_DRAG_VECTORS * 2);\n currentAreas.forEach((area, index) => {\n const baseIndex = index * 2;\n dragVectors[baseIndex] = area.dragVector.x;\n dragVectors[baseIndex + 1] = area.dragVector.y;\n });\n\n // 강도 λ°°μ—΄ 생성\n const strengths = new Float32Array(SHADER_CONFIG.MAX_STRENGTHS);\n currentAreas.forEach((area, index) => {\n strengths[index] = area.distortionStrength;\n });\n\n sceneRef.current.updateUniforms({\n u_numAreas: { value: currentAreas.length },\n u_points: { value: points },\n u_dragVectors: { value: dragVectors },\n u_distortionStrengths: { value: strengths },\n });\n\n sceneRef.current.render();\n }, [currentAreas, isReady]);\n\n // μ• λ‹ˆλ©”μ΄μ…˜ 루프\n const animationCallback = useCallback((deltaTime: number) => {\n if (!isReady) return;\n\n setCurrentAreas((prevAreas) => {\n // 진행도 μ—…λ°μ΄νŠΈ\n const updatedAreas = AnimationLoop.updateProgress(prevAreas, deltaTime);\n // λ“œλž˜κ·Έ 벑터 μ—…λ°μ΄νŠΈ\n return AnimationLoop.updateAreaDragVectors(updatedAreas);\n });\n }, [isReady]);\n\n useAnimationFrame(animationCallback, isPlaying);\n\n return (\n \n {!imageLoaded && (\n \n 이미지 λ‘œλ”© 쀑...\n \n )}\n \n );\n};","import * as THREE from 'three';\nimport type { ShaderUniforms } from '../types';\n\n/**\n * Three.js 씬 관리 클래슀\n */\nexport class ThreeScene {\n private scene: THREE.Scene;\n private camera: THREE.OrthographicCamera;\n private renderer: THREE.WebGLRenderer;\n private mesh: THREE.Mesh | null = null;\n private uniforms: ShaderUniforms;\n\n constructor(private container: HTMLElement) {\n // 씬 생성\n this.scene = new THREE.Scene();\n\n // 2D용 직ꡐ 카메라 μ„€μ •\n this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);\n\n // λ Œλ”λŸ¬ μ„€μ •\n this.renderer = new THREE.WebGLRenderer({\n antialias: true,\n alpha: false,\n });\n this.renderer.setPixelRatio(window.devicePixelRatio);\n this.container.appendChild(this.renderer.domElement);\n\n // μœ λ‹ˆνΌ μ΄ˆκΈ°ν™”\n this.uniforms = {\n u_resolution: { value: new THREE.Vector2() },\n u_texture: { value: null },\n u_points: { value: new Float32Array(64) }, // 32포인트 Γ— 2(x,y)\n u_numAreas: { value: 0 },\n u_dragVectors: { value: new Float32Array(16) }, // 8벑터 Γ— 2(x,y)\n u_distortionStrengths: { value: new Float32Array(8) },\n };\n\n this.handleResize();\n window.addEventListener('resize', this.handleResize);\n }\n\n /**\n * μœˆλ„μš° λ¦¬μ‚¬μ΄μ¦ˆ ν•Έλ“€λŸ¬\n */\n private handleResize = () => {\n const width = this.container.clientWidth;\n const height = this.container.clientHeight;\n\n this.renderer.setSize(width, height);\n this.uniforms.u_resolution.value.set(width, height);\n\n if (this.mesh) {\n this.render();\n }\n };\n\n /**\n * 셰이더 머티리얼 μ„€μ •\n * @param vertexShader λ²„ν…μŠ€ 셰이더 μ†ŒμŠ€\n * @param fragmentShader ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더 μ†ŒμŠ€\n */\n public setShaderMaterial(vertexShader: string, fragmentShader: string) {\n console.log('[ThreeScene] setShaderMaterial 호좜됨');\n console.log('[ThreeScene] vertexShader 길이:', vertexShader.length);\n console.log('[ThreeScene] fragmentShader 길이:', fragmentShader.length);\n\n const geometry = new THREE.PlaneGeometry(2, 2);\n const material = new THREE.ShaderMaterial({\n uniforms: this.uniforms,\n vertexShader,\n fragmentShader,\n });\n\n console.log('[ThreeScene] ShaderMaterial 생성됨');\n\n // 셰이더 컴파일 μ—λŸ¬ 확인\n const renderer = this.renderer;\n const testScene = new THREE.Scene();\n const testMesh = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), material);\n testScene.add(testMesh);\n\n try {\n renderer.compile(testScene, this.camera);\n console.log('[ThreeScene] 셰이더 컴파일 성곡!');\n } catch (e) {\n console.error('[ThreeScene] 셰이더 컴파일 μ—λŸ¬:', e);\n }\n\n if (this.mesh) {\n this.scene.remove(this.mesh);\n }\n\n this.mesh = new THREE.Mesh(geometry, material);\n this.scene.add(this.mesh);\n console.log('[ThreeScene] meshλ₯Ό 씬에 좔가함');\n }\n\n /**\n * μœ λ‹ˆνΌ κ°’ μ—…λ°μ΄νŠΈ\n * @param updates μ—…λ°μ΄νŠΈν•  μœ λ‹ˆνΌ κ°’λ“€\n */\n public updateUniforms(updates: Partial) {\n Object.keys(updates).forEach((key) => {\n const uniformKey = key as keyof ShaderUniforms;\n this.uniforms[uniformKey].value = updates[uniformKey]!.value;\n });\n }\n\n /**\n * 씬 λ Œλ”λ§\n */\n public render() {\n console.log('[ThreeScene] render() 호좜됨, mesh:', this.mesh);\n this.renderer.render(this.scene, this.camera);\n }\n\n /**\n * λ¦¬μ†ŒμŠ€ 정리\n */\n public dispose() {\n window.removeEventListener('resize', this.handleResize);\n this.renderer.dispose();\n if (this.mesh) {\n this.mesh.geometry.dispose();\n (this.mesh.material as THREE.Material).dispose();\n }\n if (this.container.contains(this.renderer.domElement)) {\n this.container.removeChild(this.renderer.domElement);\n }\n }\n}","/**\n * 셰이더 파일 λ‘œλ”© 및 관리 클래슀\n */\nexport class ShaderManager {\n private vertexShaderSource: string | null = null;\n private fragmentShaderSource: string | null = null;\n\n /**\n * 셰이더 νŒŒμΌλ“€μ„ λΉ„λ™κΈ°λ‘œ λ‘œλ“œ\n * @param vertexPath λ²„ν…μŠ€ 셰이더 파일 경둜\n * @param fragmentPath ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더 파일 경둜\n * @returns λ‘œλ“œλœ 셰이더 μ†ŒμŠ€ μ½”λ“œ\n */\n public async loadShaders(\n vertexPath: string,\n fragmentPath: string\n ): Promise<{ vertex: string; fragment: string }> {\n console.log('[ShaderManager] loadShaders μ‹œμž‘:', { vertexPath, fragmentPath });\n\n try {\n console.log('[ShaderManager] fetch μ‹œμž‘...');\n const [vertexResponse, fragmentResponse] = await Promise.all([\n fetch(vertexPath),\n fetch(fragmentPath),\n ]);\n\n console.log('[ShaderManager] fetch μ™„λ£Œ:', {\n vertexStatus: vertexResponse.status,\n fragmentStatus: fragmentResponse.status\n });\n\n if (!vertexResponse.ok) {\n throw new Error(`λ²„ν…μŠ€ 셰이더 λ‘œλ“œ μ‹€νŒ¨: ${vertexResponse.statusText}`);\n }\n if (!fragmentResponse.ok) {\n throw new Error(`ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더 λ‘œλ“œ μ‹€νŒ¨: ${fragmentResponse.statusText}`);\n }\n\n console.log('[ShaderManager] text() λ³€ν™˜ μ‹œμž‘...');\n this.vertexShaderSource = await vertexResponse.text();\n this.fragmentShaderSource = await fragmentResponse.text();\n\n console.log('[ShaderManager] 셰이더 λ‘œλ“œ μ™„λ£Œ!', {\n vertexLength: this.vertexShaderSource.length,\n fragmentLength: this.fragmentShaderSource.length\n });\n\n return {\n vertex: this.vertexShaderSource,\n fragment: this.fragmentShaderSource,\n };\n } catch (error) {\n console.error('[ShaderManager] 셰이더 λ‘œλ“œ μ‹€νŒ¨:', error);\n throw new Error('셰이더 λ‘œλ”©μ— μ‹€νŒ¨ν–ˆμŠ΅λ‹ˆλ‹€');\n }\n }\n\n /**\n * λ²„ν…μŠ€ 셰이더 μ†ŒμŠ€ μ½”λ“œ λ°˜ν™˜\n */\n public getVertexShader(): string {\n if (!this.vertexShaderSource) {\n throw new Error('λ²„ν…μŠ€ 셰이더가 λ‘œλ“œλ˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€');\n }\n return this.vertexShaderSource;\n }\n\n /**\n * ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더 μ†ŒμŠ€ μ½”λ“œ λ°˜ν™˜\n */\n public getFragmentShader(): string {\n if (!this.fragmentShaderSource) {\n throw new Error('ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더가 λ‘œλ“œλ˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€');\n }\n return this.fragmentShaderSource;\n }\n}","import { type EasingFunction } from '../types';\n\ntype EasingFunc = (t: number) => number;\n\n/**\n * 이징 ν•¨μˆ˜ κ΅¬ν˜„ 맡\n */\nconst easingFunctions: Record = {\n linear: (t) => t,\n\n easeIn: (t) => t * t,\n easeOut: (t) => t * (2 - t),\n easeInOut: (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),\n\n easeInQuad: (t) => t * t,\n easeOutQuad: (t) => t * (2 - t),\n};\n\n/**\n * 진행도에 이징 ν•¨μˆ˜λ₯Ό 적용\n * @param progress 진행도 (0.0 - 1.0)\n * @param easingType μ μš©ν•  이징 ν•¨μˆ˜ νƒ€μž…\n * @returns 이징이 적용된 진행도 (0.0 - 1.0)\n */\nexport const applyEasing = (\n progress: number,\n easingType: EasingFunction\n): number => {\n const clampedProgress = Math.max(0, Math.min(1, progress));\n return easingFunctions[easingType](clampedProgress);\n};","import { applyEasing } from '../utils/easing';\nimport type {DistortionArea, Point} from \"../types\";\n\n/**\n * μ• λ‹ˆλ©”μ΄μ…˜ 루프 관리 클래슀\n */\nexport class AnimationLoop {\n /**\n * μ˜μ—­λ“€μ˜ λ“œλž˜κ·Έ 벑터λ₯Ό ν˜„μž¬ 진행도에 따라 μ—…λ°μ΄νŠΈ\n * @param areas μ™œκ³‘ μ˜μ—­ λ°°μ—΄\n * @returns μ—…λ°μ΄νŠΈλœ μ˜μ—­ λ°°μ—΄\n */\n public static updateAreaDragVectors(\n areas: DistortionArea[]\n ): DistortionArea[] {\n return areas.map((area) => {\n const { progress, movement } = area;\n\n // 이징 적용\n const easedProgress = applyEasing(progress, movement.easing);\n\n // 벑터 κ°„ 보간\n let dragVector: Point;\n\n if (easedProgress < 0.5) {\n // 0.0 -> 0.5: 0μ—μ„œ vectorA둜 보간\n const t = easedProgress * 2;\n dragVector = {\n x: movement.vectorA.x * t,\n y: movement.vectorA.y * t,\n };\n } else {\n // 0.5 -> 1.0: vectorAμ—μ„œ 0으둜 보간\n const t = (easedProgress - 0.5) * 2;\n dragVector = {\n x: movement.vectorA.x * (1 - t),\n y: movement.vectorA.y * (1 - t),\n };\n }\n\n return {\n ...area,\n dragVector,\n };\n });\n }\n\n /**\n * λͺ¨λ“  μ˜μ—­μ˜ 진행도λ₯Ό 델타 νƒ€μž„λ§ŒνΌ μ—…λ°μ΄νŠΈ\n * @param areas μ™œκ³‘ μ˜μ—­ λ°°μ—΄\n * @param deltaTime 델타 νƒ€μž„ (초)\n * @returns μ—…λ°μ΄νŠΈλœ μ˜μ—­ λ°°μ—΄\n */\n public static updateProgress(\n areas: DistortionArea[],\n deltaTime: number\n ): DistortionArea[] {\n return areas.map((area) => {\n let newProgress = area.progress + deltaTime / area.movement.duration;\n newProgress %= 1.0; // 루프\n\n return {\n ...area,\n progress: newProgress,\n };\n });\n }\n}","import { useEffect, useRef } from 'react';\n\n/**\n * requestAnimationFrame을 μ‚¬μš©ν•œ μ• λ‹ˆλ©”μ΄μ…˜ 루프 ν›…\n * @param callback 맀 ν”„λ ˆμž„λ§ˆλ‹€ 호좜될 콜백 (deltaTime을 인자둜 λ°›μŒ)\n * @param isPlaying μ• λ‹ˆλ©”μ΄μ…˜ μž¬μƒ μ—¬λΆ€\n */\nexport const useAnimationFrame = (\n callback: (deltaTime: number) => void,\n isPlaying: boolean = true\n) => {\n const requestRef = useRef(undefined);\n const previousTimeRef = useRef(undefined);\n\n useEffect(() => {\n if (!isPlaying) return;\n\n const animate = (time: number) => {\n if (previousTimeRef.current !== undefined) {\n const deltaTime = (time - previousTimeRef.current) / 1000; // λ°€λ¦¬μ΄ˆλ₯Ό 초둜 λ³€ν™˜\n callback(deltaTime);\n }\n previousTimeRef.current = time;\n requestRef.current = requestAnimationFrame(animate);\n };\n\n requestRef.current = requestAnimationFrame(animate);\n\n return () => {\n if (requestRef.current) {\n cancelAnimationFrame(requestRef.current);\n }\n };\n }, [callback, isPlaying]);\n};","/**\n * 셰이더 κ΄€λ ¨ μ„€μ •\n */\nexport const SHADER_CONFIG = {\n /** μ΅œλŒ€ μ˜μ—­ 개수 */\n MAX_AREAS: 8,\n /** μ΅œλŒ€ 포인트 개수 (8μ˜μ—­ Γ— 4포인트) */\n MAX_POINTS: 32,\n /** μ΅œλŒ€ λ“œλž˜κ·Έ 벑터 개수 */\n MAX_DRAG_VECTORS: 8,\n /** μ΅œλŒ€ 강도 λ°°μ—΄ 크기 */\n MAX_STRENGTHS: 8,\n} as const;\n\n/**\n * μ• λ‹ˆλ©”μ΄μ…˜ κ΄€λ ¨ μ„€μ •\n */\nexport const ANIMATION_CONFIG = {\n /** λͺ©ν‘œ FPS */\n TARGET_FPS: 60,\n /** 델타 νƒ€μž„ (μ•½ 16.67ms) */\n DELTA_TIME: 1 / 60,\n} as const;\n\n/**\n * κΈ°λ³Έ μ˜μ—­ μ„€μ •κ°’\n */\nexport const DEFAULT_AREA = {\n /** κΈ°λ³Έ μ™œκ³‘ 강도 */\n DISTORTION_STRENGTH: 0.5,\n /** κΈ°λ³Έ μ• λ‹ˆλ©”μ΄μ…˜ 지속 μ‹œκ°„ (초) */\n DURATION: 2.0,\n /** κΈ°λ³Έ 이징 ν•¨μˆ˜ */\n EASING: 'easeInOut' as const,\n /** κΈ°λ³Έ 벑터 A */\n VECTOR_A: { x: 0.1, y: 0.1 },\n /** κΈ°λ³Έ 벑터 B */\n VECTOR_B: { x: -0.1, y: -0.1 },\n} as const;"],"mappings":"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","names":["useEffect","useRef","THREE","useRef","useEffect"]} \ No newline at end of file diff --git a/dist/test.frag.glsl b/dist/test.frag.glsl new file mode 100644 index 0000000..df52920 --- /dev/null +++ b/dist/test.frag.glsl @@ -0,0 +1,8 @@ +uniform sampler2D u_texture; +varying vec2 vUv; + +void main() { + // κ°„λ‹¨ν•œ ν…ŒμŠ€νŠΈ: ν…μŠ€μ²˜λ₯Ό κ·ΈλŒ€λ‘œ ν‘œμ‹œ (μ™œκ³‘ μ—†μŒ) + vec4 color = texture2D(u_texture, vUv); + gl_FragColor = color; +} \ No newline at end of file diff --git a/src/components/ImageDistortion.tsx b/src/components/ImageDistortion.tsx index 0c4340e..57053a9 100644 --- a/src/components/ImageDistortion.tsx +++ b/src/components/ImageDistortion.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef, useState, useCallback } from 'react'; import * as THREE from 'three'; -import { DistortionArea } from '../types'; +import { type DistortionArea } from '../types'; import { ThreeScene } from '../engine/ThreeScene'; import { ShaderManager } from '../engine/ShaderManager'; import { AnimationLoop } from '../engine/AnimationLoop'; @@ -46,6 +46,7 @@ export const ImageDistortion: React.FC = ({ const textureRef = useRef(null); const [isReady, setIsReady] = useState(false); + const [imageLoaded, setImageLoaded] = useState(false); const [currentAreas, setCurrentAreas] = useState(areas); // μ˜μ—­ λ³€κ²½ μ‹œ μƒνƒœ μ—…λ°μ΄νŠΈ @@ -99,22 +100,34 @@ export const ImageDistortion: React.FC = ({ } console.log('[ImageDistortion] 이미지 λ‘œλ“œ μ‹œμž‘:', imageSrc); + setImageLoaded(false); + const loader = new THREE.TextureLoader(); loader.load( imageSrc, (texture) => { - console.log('[ImageDistortion] 이미지 λ‘œλ“œ 성곡'); + console.log('[ImageDistortion] 이미지 λ‘œλ“œ 성곡!', { + 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] ν…μŠ€μ²˜ μ—…λ°μ΄νŠΈ 및 λ Œλ”λ§ μ™„λ£Œ'); } }, - undefined, + (progress) => { + console.log('[ImageDistortion] 이미지 λ‘œλ”© 쀑...', + Math.round((progress.loaded / progress.total) * 100) + '%' + ); + }, (error) => { console.error('[ImageDistortion] 이미지 λ‘œλ“œ μ‹€νŒ¨:', error); + setImageLoaded(false); } ); @@ -188,6 +201,24 @@ export const ImageDistortion: React.FC = ({ ...style, }} className={className} - /> + > + {!imageLoaded && ( +
+ 이미지 λ‘œλ”© 쀑... +
+ )} + ); }; \ No newline at end of file diff --git a/src/engine/AnimationLoop.ts b/src/engine/AnimationLoop.ts index 7586a32..c700eb7 100644 --- a/src/engine/AnimationLoop.ts +++ b/src/engine/AnimationLoop.ts @@ -1,5 +1,5 @@ -import { DistortionArea, Point } from '../types'; import { applyEasing } from '../utils/easing'; +import type {DistortionArea, Point} from "../types"; /** * μ• λ‹ˆλ©”μ΄μ…˜ 루프 관리 클래슀 diff --git a/src/engine/ShaderManager.ts b/src/engine/ShaderManager.ts index 480faf7..c897091 100644 --- a/src/engine/ShaderManager.ts +++ b/src/engine/ShaderManager.ts @@ -15,12 +15,20 @@ export class ShaderManager { vertexPath: string, fragmentPath: string ): Promise<{ vertex: string; fragment: string }> { + console.log('[ShaderManager] loadShaders μ‹œμž‘:', { vertexPath, fragmentPath }); + try { + console.log('[ShaderManager] fetch μ‹œμž‘...'); const [vertexResponse, fragmentResponse] = await Promise.all([ fetch(vertexPath), fetch(fragmentPath), ]); + console.log('[ShaderManager] fetch μ™„λ£Œ:', { + vertexStatus: vertexResponse.status, + fragmentStatus: fragmentResponse.status + }); + if (!vertexResponse.ok) { throw new Error(`λ²„ν…μŠ€ 셰이더 λ‘œλ“œ μ‹€νŒ¨: ${vertexResponse.statusText}`); } @@ -28,15 +36,21 @@ export class ShaderManager { throw new Error(`ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더 λ‘œλ“œ μ‹€νŒ¨: ${fragmentResponse.statusText}`); } + console.log('[ShaderManager] text() λ³€ν™˜ μ‹œμž‘...'); this.vertexShaderSource = await vertexResponse.text(); this.fragmentShaderSource = await fragmentResponse.text(); + console.log('[ShaderManager] 셰이더 λ‘œλ“œ μ™„λ£Œ!', { + vertexLength: this.vertexShaderSource.length, + fragmentLength: this.fragmentShaderSource.length + }); + return { vertex: this.vertexShaderSource, fragment: this.fragmentShaderSource, }; } catch (error) { - console.error('셰이더 λ‘œλ“œ μ‹€νŒ¨:', error); + console.error('[ShaderManager] 셰이더 λ‘œλ“œ μ‹€νŒ¨:', error); throw new Error('셰이더 λ‘œλ”©μ— μ‹€νŒ¨ν–ˆμŠ΅λ‹ˆλ‹€'); } } diff --git a/src/engine/ThreeScene.ts b/src/engine/ThreeScene.ts index 3407ef8..3750c42 100644 --- a/src/engine/ThreeScene.ts +++ b/src/engine/ThreeScene.ts @@ -1,5 +1,5 @@ import * as THREE from 'three'; -import { ShaderUniforms } from '@/types'; +import type { ShaderUniforms } from '../types'; /** * Three.js 씬 관리 클래슀 @@ -61,6 +61,10 @@ export class ThreeScene { * @param fragmentShader ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더 μ†ŒμŠ€ */ public setShaderMaterial(vertexShader: string, fragmentShader: string) { + console.log('[ThreeScene] setShaderMaterial 호좜됨'); + console.log('[ThreeScene] vertexShader 길이:', vertexShader.length); + console.log('[ThreeScene] fragmentShader 길이:', fragmentShader.length); + const geometry = new THREE.PlaneGeometry(2, 2); const material = new THREE.ShaderMaterial({ uniforms: this.uniforms, @@ -68,12 +72,28 @@ export class ThreeScene { fragmentShader, }); + console.log('[ThreeScene] ShaderMaterial 생성됨'); + + // 셰이더 컴파일 μ—λŸ¬ 확인 + 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] 셰이더 컴파일 성곡!'); + } catch (e) { + console.error('[ThreeScene] 셰이더 컴파일 μ—λŸ¬:', 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λ₯Ό 씬에 좔가함'); } /** @@ -91,6 +111,7 @@ export class ThreeScene { * 씬 λ Œλ”λ§ */ public render() { + console.log('[ThreeScene] render() 호좜됨, mesh:', this.mesh); this.renderer.render(this.scene, this.camera); } diff --git a/src/shaders/debug.frag.glsl b/src/shaders/debug.frag.glsl new file mode 100644 index 0000000..e3dc4da --- /dev/null +++ b/src/shaders/debug.frag.glsl @@ -0,0 +1,39 @@ +uniform vec2 u_resolution; +uniform sampler2D u_texture; +uniform vec2 u_points[32]; +uniform int u_numAreas; +uniform vec2 u_dragVectors[8]; +uniform float u_distortionStrengths[8]; + +varying vec2 vUv; + +void main() { + vec2 texCoord = vUv; + + // 디버그: μ˜μ—­ ν‘œμ‹œ + for (int i = 0; i < 8; i++) { + if (i >= u_numAreas) break; + + // 포인트λ₯Ό ν”½μ…€ μ’Œν‘œλ‘œ λ³€ν™˜ + vec2 p0 = u_points[i * 4 + 0] * u_resolution; + vec2 p1 = u_points[i * 4 + 1] * u_resolution; + vec2 p2 = u_points[i * 4 + 2] * u_resolution; + vec2 p3 = u_points[i * 4 + 3] * u_resolution; + + vec2 pixelCoord = vUv * u_resolution; + + // 경계 μƒμž 체크만 + vec2 minP = min(min(p0, p1), min(p2, p3)); + vec2 maxP = max(max(p0, p1), max(p2, p3)); + + // μ˜μ—­ μ•ˆμ— 있으면 λΉ¨κ°„μƒ‰μœΌλ‘œ ν‘œμ‹œ + if (pixelCoord.x >= minP.x && pixelCoord.x <= maxP.x && + pixelCoord.y >= minP.y && pixelCoord.y <= maxP.y) { + gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 빨간색 + return; + } + } + + // μ˜μ—­ 밖은 원본 이미지 + gl_FragColor = texture2D(u_texture, texCoord); +} \ No newline at end of file diff --git a/src/shaders/distortion.frag.glsl b/src/shaders/distortion.frag.glsl index f05b2e8..9d8ff6f 100644 --- a/src/shaders/distortion.frag.glsl +++ b/src/shaders/distortion.frag.glsl @@ -1,88 +1,87 @@ uniform vec2 u_resolution; uniform sampler2D u_texture; -uniform vec2 u_points[32]; // μ΅œλŒ€ 8μ˜μ—­ Γ— 4포인트 +uniform vec2 u_points[32]; // μ΅œλŒ€ 8μ˜μ—­ Γ— 4포인트 (μ •κ·œν™”λœ μ’Œν‘œ) uniform int u_numAreas; -uniform vec2 u_dragVectors[8]; +uniform vec2 u_dragVectors[8]; // μ •κ·œν™”λœ μ’Œν‘œ uniform float u_distortionStrengths[8]; varying vec2 vUv; -// μ‚¬κ°ν˜• λ‚΄λΆ€μ˜ ν¬μΈνŠΈμ— λŒ€ν•œ UV μ’Œν‘œ 계산 +// Flutter 원본 computeUV ν•¨μˆ˜ (μ •ν™•νžˆ λ™μΌν•˜κ²Œ λ³€ν™˜) vec2 computeUV(vec2 xy, vec2 p0, vec2 p1, vec2 p2, vec2 p3) { - // 경계 μƒμž 체크 vec2 minP = min(min(p0, p1), min(p2, p3)); vec2 maxP = max(max(p0, p1), max(p2, p3)); if (xy.x < minP.x || xy.x > maxP.x || xy.y < minP.y || xy.y > maxP.y) { - return vec2(-1.0, -1.0); + return vec2(-1.0, -1.0); // μ™ΈλΆ€ } - // 초기 μΆ”μ •κ°’ (μ •κ·œν™”λœ μ’Œν‘œ) vec2 rectSize = maxP - minP; - vec2 rectUV = (xy - minP) / rectSize; + if (rectSize.x == 0.0 || rectSize.y == 0.0) { + return vec2(-1.0, -1.0); // 좕퇴 + } + + vec2 rectMin = minP; + vec2 rectUV = (xy - rectMin) / rectSize; float u0 = rectUV.x; float v0 = rectUV.y; - // Newton-Raphson λ°˜λ³΅λ²•μœΌλ‘œ μ •ν™•ν•œ UV 계산 - for (int iter = 0; iter < 3; iter++) { - vec2 xy0 = mix(mix(p0, p1, u0), mix(p3, p2, u0), v0); - vec2 du_vec = mix(p1 - p0, p2 - p3, v0); - vec2 dv_vec = mix(p3 - p0, p2 - p1, u0); + // 1회 Newton-Raphson (Flutter 원본과 동일) + vec2 left = mix(p0, p1, u0); + vec2 right = mix(p3, p2, u0); + vec2 xy0 = mix(left, right, v0); - vec2 dxy = xy - xy0; - float det = du_vec.x * dv_vec.y - du_vec.y * dv_vec.x; + vec2 dxy = xy - xy0; - if (abs(det) < 1e-6) break; - - float du = (dv_vec.y * dxy.x - dv_vec.x * dxy.y) / det; - float dv = (-du_vec.y * dxy.x + du_vec.x * dxy.y) / det; + vec2 du_vec = mix(p1 - p0, p2 - p3, v0); + vec2 dv_vec = mix(p3 - p0, p2 - p1, u0); + float det = du_vec.x * dv_vec.y - du_vec.y * dv_vec.x; + if (abs(det) > 1e-6) { + float inv_det = 1.0 / det; + float du = (dv_vec.y * dxy.x - dv_vec.x * dxy.y) * inv_det; + float dv = (-du_vec.y * dxy.x + du_vec.x * dxy.y) * inv_det; u0 += du; v0 += dv; } - // ν¬μΈνŠΈκ°€ 내뢀에 μžˆλŠ”μ§€ 확인 - if (u0 >= 0.0 && u0 <= 1.0 && v0 >= 0.0 && v0 <= 1.0) { - return vec2(u0, v0); - } - - return vec2(-1.0, -1.0); + return vec2(u0, v0); } void main() { - vec2 uv = vUv; - vec2 pixelCoord = vUv * u_resolution; + vec2 xy = vUv * u_resolution; // ν”½μ…€ μ’Œν‘œ + vec2 texCoord = vUv; + bool found = false; - // λͺ¨λ“  μ˜μ—­μ˜ μ™œκ³‘ 적용 + // Flutter 원본과 동일: 첫 번째 λ§€μΉ­λ˜λŠ” μ˜μ—­λ§Œ 적용 for (int i = 0; i < 8; i++) { if (i >= u_numAreas) break; - int baseIndex = i * 4; - vec2 p0 = u_points[baseIndex + 0] * u_resolution; - vec2 p1 = u_points[baseIndex + 1] * u_resolution; - vec2 p2 = u_points[baseIndex + 2] * u_resolution; - vec2 p3 = u_points[baseIndex + 3] * u_resolution; + // ν¬μΈνŠΈλŠ” μ •κ·œν™”λœ μ’Œν‘œλ‘œ μ „λ‹¬λ°›μ•˜μœΌλ―€λ‘œ ν”½μ…€ μ’Œν‘œλ‘œ λ³€ν™˜ + vec2 p0 = u_points[i * 4 + 0] * u_resolution; + vec2 p1 = u_points[i * 4 + 1] * u_resolution; + vec2 p2 = u_points[i * 4 + 2] * u_resolution; + vec2 p3 = u_points[i * 4 + 3] * u_resolution; - vec2 areaUV = computeUV(pixelCoord, p0, p1, p2, p3); + vec2 uv_local = computeUV(xy, p0, p1, p2, p3); - if (areaUV.x >= 0.0) { - // 이 μ˜μ—­ 내뢀에 ν¬μΈνŠΈκ°€ 있음 - vec2 center = vec2(0.5, 0.5); - float distToCenter = length(areaUV - center); - float maxUvRadius = 0.707; // sqrt(0.5^2 + 0.5^2) + if (uv_local.x >= 0.0 && uv_local.x <= 1.0 && uv_local.y >= 0.0 && uv_local.y <= 1.0) { + vec2 uvCenter = vec2(0.5, 0.5); + float distToCenter = distance(uv_local, uvCenter); + float maxUvRadius = 0.5; // Flutter 원본과 동일 - // λΆ€λ“œλŸ¬μš΄ 감쇠 - float influence = 1.0 - smoothstep(0.0, maxUvRadius, distToCenter); - - // μ™œκ³‘ 적용 - vec2 distortion = (u_dragVectors[i] / u_resolution) * influence * u_distortionStrengths[i]; - uv += distortion; + if (distToCenter < maxUvRadius) { + float influence = 1.0 - smoothstep(0.0, maxUvRadius, distToCenter); + // dragVector도 μ •κ·œν™”λœ μ’Œν‘œμ΄λ―€λ‘œ ν”½μ…€λ‘œ λ³€ν™˜ + vec2 distortion = (u_dragVectors[i] * u_resolution) * influence * u_distortionStrengths[i]; + // texCoordλŠ” 이미 μ •κ·œν™”λœ μ’Œν‘œμ΄λ―€λ‘œ μ •κ·œν™”λœ μ™œκ³‘ 적용 + texCoord += distortion / u_resolution; + texCoord = clamp(texCoord, 0.0, 1.0); + } + found = true; + break; // Flutter μ›λ³Έμ²˜λŸΌ 첫 번째 μ˜μ—­λ§Œ 적용 } } - // ν…μŠ€μ²˜ μ™ΈλΆ€ μƒ˜ν”Œλ§ 방지λ₯Ό μœ„ν•œ ν΄λž¨ν•‘ - uv = clamp(uv, 0.0, 1.0); - - // ν…μŠ€μ²˜ μƒ˜ν”Œλ§ - gl_FragColor = texture2D(u_texture, uv); + gl_FragColor = texture2D(u_texture, texCoord); } \ No newline at end of file diff --git a/src/shaders/test.frag.glsl b/src/shaders/test.frag.glsl new file mode 100644 index 0000000..df52920 --- /dev/null +++ b/src/shaders/test.frag.glsl @@ -0,0 +1,8 @@ +uniform sampler2D u_texture; +varying vec2 vUv; + +void main() { + // κ°„λ‹¨ν•œ ν…ŒμŠ€νŠΈ: ν…μŠ€μ²˜λ₯Ό κ·ΈλŒ€λ‘œ ν‘œμ‹œ (μ™œκ³‘ μ—†μŒ) + vec4 color = texture2D(u_texture, vUv); + gl_FragColor = color; +} \ No newline at end of file diff --git a/src/types/area.ts b/src/types/area.ts index cc3e9ef..cd9402d 100644 --- a/src/types/area.ts +++ b/src/types/area.ts @@ -2,59 +2,59 @@ * μ •κ·œν™”λœ μ’Œν‘œκ³„μ˜ 2D 포인트 (0.0 - 1.0) */ export interface Point { - x: number; - y: number; + x: number; + y: number; } /** * μ• λ‹ˆλ©”μ΄μ…˜ 이징 ν•¨μˆ˜ νƒ€μž… */ export type EasingFunction = - | 'linear' - | 'easeIn' - | 'easeOut' - | 'easeInOut' - | 'easeInQuad' - | 'easeOutQuad'; + | 'linear' + | 'easeIn' + | 'easeOut' + | 'easeInOut' + | 'easeInQuad' + | 'easeOutQuad'; /** * μ™œκ³‘ μ• λ‹ˆλ©”μ΄μ…˜ μ›€μ§μž„ μ„€μ • */ export interface DistortionMovement { - /** μ™œκ³‘ μ‹œμž‘ 벑터 */ - vectorA: Point; - /** μ™œκ³‘ μ’…λ£Œ 벑터 */ - vectorB: Point; - /** μ• λ‹ˆλ©”μ΄μ…˜ 지속 μ‹œκ°„ (초) */ - duration: number; - /** μ μš©ν•  이징 ν•¨μˆ˜ */ - easing: EasingFunction; + /** μ™œκ³‘ μ‹œμž‘ 벑터 */ + vectorA: Point; + /** μ™œκ³‘ μ’…λ£Œ 벑터 */ + vectorB: Point; + /** μ• λ‹ˆλ©”μ΄μ…˜ 지속 μ‹œκ°„ (초) */ + duration: number; + /** μ μš©ν•  이징 ν•¨μˆ˜ */ + easing: EasingFunction; } /** * μ‚¬κ°ν˜• ν¬μΈνŠΈμ™€ μ• λ‹ˆλ©”μ΄μ…˜ 섀정을 ν¬ν•¨ν•˜λŠ” μ™œκ³‘ μ˜μ—­ */ export 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; + /** 고유 μ‹λ³„μž */ + 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; } /** * μ˜μ—­ 좩돌 감지λ₯Ό μœ„ν•œ 경계 μƒμž */ export interface AreaBounds { - minX: number; - minY: number; - maxX: number; - maxY: number; + minX: number; + minY: number; + maxX: number; + maxY: number; } \ No newline at end of file diff --git a/src/types/shader.ts b/src/types/shader.ts index ac3922b..daf97f0 100644 --- a/src/types/shader.ts +++ b/src/types/shader.ts @@ -4,7 +4,7 @@ import * as THREE from 'three'; * 셰이더 μœ λ‹ˆνΌ λ³€μˆ˜ νƒ€μž… */ export interface ShaderUniforms { - [uniform: string]: THREE.IUniform; + [uniform: string]: THREE.IUniform; /** ν™”λ©΄ 해상도 */ u_resolution: THREE.IUniform; /** 이미지 ν…μŠ€μ²˜ */ diff --git a/src/utils/easing.ts b/src/utils/easing.ts index c770a6f..905084f 100644 --- a/src/utils/easing.ts +++ b/src/utils/easing.ts @@ -1,4 +1,4 @@ -import { EasingFunction } from '../types'; +import { type EasingFunction } from '../types'; type EasingFunc = (t: number) => number;