효과Effects / 3D·깊이3D & Depth / Nº 576

구면화Spherize

Spherize

구면화

576

렌더 추가 예정CLIP COMING구면화Spherize정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 576. 구면화 · Spherize · power2.inOut

평면 이미지가 구면에 감긴 듯 가운데가 튀어나오며 움직인다A flat image bulges in the middle as if wrapped around a sphere.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

평면이 입체 표면으로 바뀌는 순간의 놀라움을 준다. 화면이 물체가 되는 전환에 쓴다Delivers the surprise of a flat surface turning into a solid. Useful for screen-to-object transitions.

언제 쓰나Use whenUSE WHEN

이미지가 지구본이나 구슬로 변하는 전환을 만들 때
평면 화면에 볼록한 렌즈 같은 강조를 줄 때

Transition an image into a globe or marble.
Add a convex lens emphasis to a flat screen.

과용 주의AvoidAVOID

강도 85% 초과 금지
이미지 해상도가 낮으면 쓰지 않는다(픽셀 깨짐)

분류TagsTAGS

3D·깊이3D & Depth 전환Transition 주목 끌기Attention 숏폼Short-form 설명 영상Explainer video 제품 시연Product demo 난이도 고급Advancedwebgl

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

900ms 동안 구면화 강도가 0에서 70%로 올라가며 이미지가 부풀듯 둥글어진다. 가장자리 왜곡은 부드럽다

과용 · 나쁜 사례OVERUSE

강도를 100%로 올려 가장자리가 무한히 늘어나 이미지가 읽히지 않고, 픽셀이 깨진다

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	900ms	600~1200ms
강도	0→70%	40~85%	UV 보간 비율
이징	power2.inOut	power2~power3
배경	어두운 단색		가장자리 밖은 투명

GSAP

const u = { s: 0 };
tl.to(u, { s: 0.7, duration: 0.9, ease: 'power2.inOut', onUpdate: () => mat.uniforms.uStrength.value = u.s }, 0.3);
// GLSL: vec2 q = uv*2.-1.; float r = length(q); vec2 sph = q * (1. - mix(0., (1.-sqrt(max(1.-r*r,0.))), uStrength)); uv2 = sph*.5+.5;

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 이미지에 구면화를 WebGL로 넣어줘. 0.3초부터 0.9초 동안 strength를 0에서 0.7로 power2.inOut으로 올리고, 가운데가 볼록하게 튀어나온 구면 매핑으로 UV를 왜곡해. 가장자리 밖은 투명, 배경은 어두운 단색.

Add spherize to the image in <target> in WebGL. From 0.3 seconds raise strength from 0 to 0.7 over 0.9 seconds with power2.inOut, distorting UVs with a spherical mapping that bulges the center. Outside the edge is transparent over a dark flat background.

Codex

<파일>에 spherize 셰이더를 추가해. uStrength 0→0.7, 0.9s, ease power2.inOut, 시작 0.3초. 0.3초, 0.75초, 1.2초를 캡처해 강도가 올라갈수록 중앙이 확대되고 가장자리가 압축되는지, 이미지가 읽히는 정도를 유지하는지 확인해.

Add a spherize shader to <file>: uStrength 0 to 0.7, 0.9s, ease power2.inOut, start 0.3s. Capture at 0.3s, 0.75s and 1.2s and verify the center enlarges and the edges compress as strength rises while the image stays readable.