diff --git a/src/components/ImageDistortion.tsx b/src/components/ImageDistortion.tsx index 57053a9..d3faab6 100644 --- a/src/components/ImageDistortion.tsx +++ b/src/components/ImageDistortion.tsx @@ -143,22 +143,27 @@ export const ImageDistortion: React.FC = ({ useEffect(() => { if (!sceneRef.current || !isReady) return; + // 현재 해상도 가져오기 + const resolution = sceneRef.current.getResolution(); + // 포인트 배열 생성 + // UI는 좌상단 (0,0), WebGL은 좌하단 (0,0)이므로 y 좌표를 반전 const points = new Float32Array(SHADER_CONFIG.MAX_POINTS * 2); currentAreas.forEach((area, areaIndex) => { area.basePoints.forEach((point, pointIndex) => { const index = (areaIndex * 4 + pointIndex) * 2; points[index] = point.x; - points[index + 1] = point.y; + points[index + 1] = 1.0 - point.y; // y 좌표 반전 }); }); // 드래그 벡터 배열 생성 + // dragVector도 y 좌표계를 맞춰야 하므로 y를 반전 const dragVectors = new Float32Array(SHADER_CONFIG.MAX_DRAG_VECTORS * 2); currentAreas.forEach((area, index) => { const baseIndex = index * 2; dragVectors[baseIndex] = area.dragVector.x; - dragVectors[baseIndex + 1] = area.dragVector.y; + dragVectors[baseIndex + 1] = -area.dragVector.y; // y 방향 반전 }); // 강도 배열 생성 diff --git a/src/engine/ThreeScene.ts b/src/engine/ThreeScene.ts index 3750c42..0eb7979 100644 --- a/src/engine/ThreeScene.ts +++ b/src/engine/ThreeScene.ts @@ -115,6 +115,16 @@ export class ThreeScene { this.renderer.render(this.scene, this.camera); } + /** + * 현재 해상도 가져오기 + */ + public getResolution(): { x: number; y: number } { + return { + x: this.uniforms.u_resolution.value.x, + y: this.uniforms.u_resolution.value.y, + }; + } + /** * 리소스 정리 */ diff --git a/src/shaders/distortion.frag.glsl b/src/shaders/distortion.frag.glsl index 9d8ff6f..20e6c31 100644 --- a/src/shaders/distortion.frag.glsl +++ b/src/shaders/distortion.frag.glsl @@ -1,8 +1,8 @@ uniform vec2 u_resolution; uniform sampler2D u_texture; -uniform vec2 u_points[32]; // 최대 8영역 × 4포인트 (정규화된 좌표) +uniform vec2 u_points[32]; // 최대 8영역 × 4포인트 (정규화된 좌표 0-1) uniform int u_numAreas; -uniform vec2 u_dragVectors[8]; // 정규화된 좌표 +uniform vec2 u_dragVectors[8]; // 드래그 벡터 (정규화된 좌표 0-1) uniform float u_distortionStrengths[8]; varying vec2 vUv; @@ -72,10 +72,9 @@ void main() { 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; + // dragVector는 정규화된 좌표(0-1)이므로 바로 사용 (Flutter와 동일한 결과) + vec2 distortion = u_dragVectors[i] * influence * u_distortionStrengths[i]; + texCoord += distortion; texCoord = clamp(texCoord, 0.0, 1.0); } found = true;