두 장면의 색 차이가 큰 부분과 작은 부분이 서로 다른 속도로 교체되는 전환Areas where the two scenes differ most in color swap at different speeds from areas where they match.
0.8초 동안 색이 비슷한 영역은 먼저, 색차가 큰 영역은 나중에 뒤 장면으로 바뀌며 power 5의 곡선으로 경계가 형성된다
두 장면의 색이 거의 같아 차이가 없거나, 노이즈가 많은 사진에서 반짝임이 생긴다
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 전체 지속 | 0.8s | 0.6~1.2s | 선형 |
| power | 5 | 2~8 | 클수록 차이 부분이 늦게 교체 |
| 진행 임계 | p | 0~1 | 진행률과 색거리 비교 |
| 혼합 | smoothstep | 경계 부드럽게 |
const u = { p: 0 };
tl.to(u, { p: 1, duration: 0.8, ease: 'none', onUpdate: () => {
// GLSL: m = smoothstep(0.0, 0.1, p * 1.1 - pow(dist(a,b), 5.0));
shader.set('progress', u.p);
} });그대로 붙여 넣는다Paste as is
<대상A>에서 <대상B>로 색 거리 디졸브를 만들어줘. 진행값 p를 0.8초 동안 0에서 1로 ease none으로 올리고, 픽셀마다 두 장면 색의 거리 d를 구해 mix 가중치를 smoothstep(0.0, 0.1, p*1.1 - pow(d, 5.0))로 계산하게 해. 진행값은 GSAP 상태 객체 하나에서 읽어 paused 타임라인에서 seek되게 해.
Build a color distance dissolve from <targetA> to <targetB>. Ramp progress p from 0 to 1 over 0.8 seconds with ease none. Per pixel, compute the color distance d between the two scenes and mix with smoothstep(0.0, 0.1, p*1.1 - pow(d, 5.0)). Read progress from one GSAP state object in a paused timeline that seeks.
<파일>에 color distance dissolve를 적용해. progress를 0에서 1로 0.8s ease none, 셰이더에서 m = smoothstep(0.0, 0.1, p*1.1 - pow(distance(a,b), 5.0)). 0.3초와 0.5초 캡처에서 색이 비슷한 영역이 먼저 B로 바뀌는지, 0.8초에 전면이 B인지 확인해.
Apply a color distance dissolve in <file>. Tween progress 0 to 1 over 0.8s with ease none and use m = smoothstep(0.0, 0.1, p*1.1 - pow(distance(a,b), 5.0)) in the shader. Capture at 0.3 and 0.5 seconds to confirm similar-color areas switch to B first, and at 0.8 seconds to confirm the whole frame is B.
HyperFrames · ReelForge · Scrolline
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo