baekryang/responsive-image-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Debug: Add console logs for troubleshooting

Browse Source
This commit is contained in:
BaekRyang 2025-11-04 10:49:38 +09:00
parent ceab8f4332
commit d66c43f6f1
5 changed files with 36 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
dist/index.js vendored
View File

@ -329,15 +329,18 @@ var ImageDistortion = ({
}, [areas]); }, [areas]);
(0, import_react2.useEffect)(() => { (0, import_react2.useEffect)(() => {
if (!containerRef.current) return; if (!containerRef.current) return;
console.log("[ImageDistortion] \uCD08\uAE30\uD654 \uC2DC\uC791");
const scene = new ThreeScene(containerRef.current); const scene = new ThreeScene(containerRef.current);
sceneRef.current = scene; sceneRef.current = scene;
const vertPath = vertexShaderPath || "/shaders/distortion.vert.glsl"; const vertPath = vertexShaderPath || "/shaders/distortion.vert.glsl";
const fragPath = fragmentShaderPath || "/shaders/distortion.frag.glsl"; const fragPath = fragmentShaderPath || "/shaders/distortion.frag.glsl";
console.log("[ImageDistortion] \uC170\uC774\uB354 \uB85C\uB4DC \uC2DC\uB3C4:", { vertPath, fragPath });
shaderManagerRef.current.loadShaders(vertPath, fragPath).then(({ vertex, fragment }) => { shaderManagerRef.current.loadShaders(vertPath, fragPath).then(({ vertex, fragment }) => {
console.log("[ImageDistortion] \uC170\uC774\uB354 \uB85C\uB4DC \uC131\uACF5");
scene.setShaderMaterial(vertex, fragment); scene.setShaderMaterial(vertex, fragment);
setIsReady(true); setIsReady(true);
}).catch((error) => { }).catch((error) => {
console.error("\uC170\uC774\uB354 \uB85C\uB4DC \uC2E4\uD328:", error); console.error("[ImageDistortion] \uC170\uC774\uB354 \uB85C\uB4DC \uC2E4\uD328:", error);
}); });
return () => { return () => {
scene.dispose(); scene.dispose();
@ -347,11 +350,16 @@ var ImageDistortion = ({
}; };
}, [vertexShaderPath, fragmentShaderPath]); }, [vertexShaderPath, fragmentShaderPath]);
(0, import_react2.useEffect)(() => { (0, import_react2.useEffect)(() => {
if (!imageSrc || !isReady) return; if (!imageSrc || !isReady) {
console.log("[ImageDistortion] \uC774\uBBF8\uC9C0 \uB85C\uB4DC \uC2A4\uD0B5:", { imageSrc, isReady });
return;
}
console.log("[ImageDistortion] \uC774\uBBF8\uC9C0 \uB85C\uB4DC \uC2DC\uC791:", imageSrc);
const loader = new THREE2.TextureLoader(); const loader = new THREE2.TextureLoader();
loader.load( loader.load(
imageSrc, imageSrc,
(texture) => { (texture) => {
console.log("[ImageDistortion] \uC774\uBBF8\uC9C0 \uB85C\uB4DC \uC131\uACF5");
textureRef.current = texture; textureRef.current = texture;
if (sceneRef.current) { if (sceneRef.current) {
sceneRef.current.updateUniforms({ sceneRef.current.updateUniforms({
@ -362,7 +370,7 @@ var ImageDistortion = ({
}, },
void 0, void 0,
(error) => { (error) => {
console.error("\uC774\uBBF8\uC9C0 \uB85C\uB4DC \uC2E4\uD328:", error); console.error("[ImageDistortion] \uC774\uBBF8\uC9C0 \uB85C\uB4DC \uC2E4\uD328:", error);
} }
); );
return () => { return () => {

2
dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long

14
dist/index.mjs vendored
View File

@ -285,15 +285,18 @@ var ImageDistortion = ({
}, [areas]); }, [areas]);
useEffect2(() => { useEffect2(() => {
if (!containerRef.current) return; if (!containerRef.current) return;
console.log("[ImageDistortion] \uCD08\uAE30\uD654 \uC2DC\uC791");
const scene = new ThreeScene(containerRef.current); const scene = new ThreeScene(containerRef.current);
sceneRef.current = scene; sceneRef.current = scene;
const vertPath = vertexShaderPath || "/shaders/distortion.vert.glsl"; const vertPath = vertexShaderPath || "/shaders/distortion.vert.glsl";
const fragPath = fragmentShaderPath || "/shaders/distortion.frag.glsl"; const fragPath = fragmentShaderPath || "/shaders/distortion.frag.glsl";
console.log("[ImageDistortion] \uC170\uC774\uB354 \uB85C\uB4DC \uC2DC\uB3C4:", { vertPath, fragPath });
shaderManagerRef.current.loadShaders(vertPath, fragPath).then(({ vertex, fragment }) => { shaderManagerRef.current.loadShaders(vertPath, fragPath).then(({ vertex, fragment }) => {
console.log("[ImageDistortion] \uC170\uC774\uB354 \uB85C\uB4DC \uC131\uACF5");
scene.setShaderMaterial(vertex, fragment); scene.setShaderMaterial(vertex, fragment);
setIsReady(true); setIsReady(true);
}).catch((error) => { }).catch((error) => {
console.error("\uC170\uC774\uB354 \uB85C\uB4DC \uC2E4\uD328:", error); console.error("[ImageDistortion] \uC170\uC774\uB354 \uB85C\uB4DC \uC2E4\uD328:", error);
}); });
return () => { return () => {
scene.dispose(); scene.dispose();
@ -303,11 +306,16 @@ var ImageDistortion = ({
}; };
}, [vertexShaderPath, fragmentShaderPath]); }, [vertexShaderPath, fragmentShaderPath]);
useEffect2(() => { useEffect2(() => {
if (!imageSrc || !isReady) return; if (!imageSrc || !isReady) {
console.log("[ImageDistortion] \uC774\uBBF8\uC9C0 \uB85C\uB4DC \uC2A4\uD0B5:", { imageSrc, isReady });
return;
}
console.log("[ImageDistortion] \uC774\uBBF8\uC9C0 \uB85C\uB4DC \uC2DC\uC791:", imageSrc);
const loader = new THREE2.TextureLoader(); const loader = new THREE2.TextureLoader();
loader.load( loader.load(
imageSrc, imageSrc,
(texture) => { (texture) => {
console.log("[ImageDistortion] \uC774\uBBF8\uC9C0 \uB85C\uB4DC \uC131\uACF5");
textureRef.current = texture; textureRef.current = texture;
if (sceneRef.current) { if (sceneRef.current) {
sceneRef.current.updateUniforms({ sceneRef.current.updateUniforms({
@ -318,7 +326,7 @@ var ImageDistortion = ({
}, },
void 0, void 0,
(error) => { (error) => {
console.error("\uC774\uBBF8\uC9C0 \uB85C\uB4DC \uC2E4\uD328:", error); console.error("[ImageDistortion] \uC774\uBBF8\uC9C0 \uB85C\uB4DC \uC2E4\uD328:", error);
} }
); );
return () => { return () => {

2
dist/index.mjs.map vendored
View File

File diff suppressed because one or more lines are too long

15
src/components/ImageDistortion.tsx
View File

@ -57,6 +57,7 @@ export const ImageDistortion: React.FC<ImageDistortionProps> = ({
useEffect(() => { useEffect(() => {
if (!containerRef.current) return; if (!containerRef.current) return;
console.log('[ImageDistortion] 초기화 시작');
const scene = new ThreeScene(containerRef.current); const scene = new ThreeScene(containerRef.current);
sceneRef.current = scene; sceneRef.current = scene;
@ -64,14 +65,17 @@ export const ImageDistortion: React.FC<ImageDistortionProps> = ({
const vertPath = vertexShaderPath || '/shaders/distortion.vert.glsl'; const vertPath = vertexShaderPath || '/shaders/distortion.vert.glsl';
const fragPath = fragmentShaderPath || '/shaders/distortion.frag.glsl'; const fragPath = fragmentShaderPath || '/shaders/distortion.frag.glsl';
console.log('[ImageDistortion] 셰이더 로드 시도:', { vertPath, fragPath });
shaderManagerRef.current shaderManagerRef.current
.loadShaders(vertPath, fragPath) .loadShaders(vertPath, fragPath)
.then(({ vertex, fragment }) => { .then(({ vertex, fragment }) => {
console.log('[ImageDistortion] 셰이더 로드 성공');
scene.setShaderMaterial(vertex, fragment); scene.setShaderMaterial(vertex, fragment);
setIsReady(true); setIsReady(true);
}) })
.catch((error) => { .catch((error) => {
console.error('셰이더 로드 실패:', error); console.error('[ImageDistortion] 셰이더 로드 실패:', error);
}); });
return () => { return () => {
@ -84,12 +88,17 @@ export const ImageDistortion: React.FC<ImageDistortionProps> = ({
// 이미지 텍스처 로드 // 이미지 텍스처 로드
useEffect(() => { useEffect(() => {
if (!imageSrc || !isReady) return; if (!imageSrc || !isReady) {
console.log('[ImageDistortion] 이미지 로드 스킵:', { imageSrc, isReady });
return;
}
console.log('[ImageDistortion] 이미지 로드 시작:', imageSrc);
const loader = new THREE.TextureLoader(); const loader = new THREE.TextureLoader();
loader.load( loader.load(
imageSrc, imageSrc,
(texture) => { (texture) => {
console.log('[ImageDistortion] 이미지 로드 성공');
textureRef.current = texture; textureRef.current = texture;
if (sceneRef.current) { if (sceneRef.current) {
sceneRef.current.updateUniforms({ sceneRef.current.updateUniforms({
@ -100,7 +109,7 @@ export const ImageDistortion: React.FC<ImageDistortionProps> = ({
}, },
undefined, undefined,
(error) => { (error) => {
console.error('이미지 로드 실패:', error); console.error('[ImageDistortion] 이미지 로드 실패:', error);
} }
); );