경계에서는 아무도 고르지 않은 기본값이 그림을 그린다 — 가장자리와 넘겨주는 지점에서 무엇이 읽히는지 정하고 잰다

three.js 로 만든 화면에 효과를 하나 얹었다고 하자. 화면 좌표로 구워 둔 노이즈 텍스처의 UV 를 조금씩 옮겨 구름이 흐르게 했더니 화면 한쪽 끝에 세로 줄무늬가 선다. 후처리 윤곽선(에지 검출)에서 "이 물체엔 선을 긋지 마라" 깃발을 줬는데 반투명 물체 가장자리에만 끊긴 검은 호가 꿈틀거린다. 3D 구름 메시에서 화면 전체를 덮는 하얀 워시로 페이드를 넘겨주는데, 넘겨주는 그 순간에만 뒤 장면이 비쳐 보인다. 셋 다 효과의 가운데는 멀쩡하다. 망가지는 곳은 늘 가장자리다.

경계의 결함은 어디서 오나

효과는 가운데를 기준으로 설계하지만, 경계에서는 아무도 고르지 않은 기본값이 대신 값을 정한다. 텍스처 좌표가 0~1 밖으로 나가면 래핑 기본값이, 반투명 가장자리에서는 배경과 섞인 알파가, 두 층이 교대하는 지점에서는 두 램프를 곱한 값이 그림을 그린다. 이 값들은 오류를 내지 않는다. 그래서 경계는 "어떤 값이 읽힐지"를 따로 정하고, 그 자리만 따로 재야 한다.

텍스처 UV 를 옮기면 왜 화면 끝에 줄무늬가 생기나

텍스처의 래핑 기본값은 ClampToEdgeWrapping 이다. 0~1 밖 좌표를 읽으면 가장자리 한 줄을 끝까지 늘여 돌려준다. 오프셋 없이 쓸 때는 바깥을 읽을 일이 없어 안 보이다가, 흐름·손떨림처럼 UV 를 옮기는 순간 그 한 줄이 화면 끝까지 늘어나 줄무늬가 된다. 굽는 시점에 wrapS·wrapT 를 RepeatWrapping 으로 둔다. 지금 오프셋을 안 쓰는 텍스처도 켜 두면 나중에 안 밟는다(바깥이 끊김 없이 이어지려면 노이즈 자체가 이음매 없는 타일이어야 한다).

반투명 물체 가장자리에서 윤곽선 깃발은 왜 안 듣나

에지 패스가 "선 긋지 마라" 깃발을 법선 버퍼의 한 칸에 실어 읽는다고 하자. 불투명한 속살에서는 깃발이 온전하지만, 반투명 가장자리에서는 알파가 낮아 깃발 값이 배경과 섞인 채 남는다. 검출 커널이 0.5픽셀 안의 네 자리만 읽으면 네 자리가 전부 그 섞인 띠에 들어, 문턱을 넘는 자리에만 선이 그어지고 끊긴 호가 된다. 가장자리가 화면 고정 노이즈 위를 지나가면 그 호가 꿈틀거린다. 처방은 깃발만 커널보다 넓게 읽어 불투명한 속살에 닿게 하는 것이다(우리는 4배, 약 2픽셀).

두 층이 페이드를 넘겨줄 때 왜 뒤가 비쳐 보이나

층 A(예: 3D 메시)가 사라지고 층 B(예: 화면 워시)가 나타나는 넘김을 각자의 램프로 만들면, 넘겨주는 지점의 덮임은 두 램프가 겹치는 모양에 맡겨진다. 구간이 조금만 어긋나도 한쪽이 먼저 빠지는 틈으로 뒤가 보인다. 각 층의 램프가 아니라 합성 가시도(최종 덮임)를 먼저 정한다. 가장 단순한 방법은 한쪽을 다른 쪽의 정확한 보수 1 - x 로 두는 것이다. 오디오 크로스페이드에서 두 트랙을 같은 꼴로 따로 줄이면 가운데에서 소리가 꺼지듯 들리는 것과 같은 결함이다.

경계를 점검하는 순서

1. 효과마다 "정의역 바깥"을 적는다: 텍스처 좌표 0~1 밖, 알파가 0~1 사이인 띠, 두 층이 교대하는 구간
2. 그 자리에서 무엇이 읽히는지 적는다: 래핑 모드, 섞인 깃발 값, 두 램프의 합 또는 곱
3. 기본값에 맡기지 말고 고른다: RepeatWrapping / 깃발은 커널보다 넓게 / 한쪽은 다른 쪽의 보수
4. 경계만 잘라 잰다: 가장자리 열의 밴딩, 가장자리 픽셀의 선 유무, 교대 지점의 덮임이 1 이거나 단조인지
5. 빠른 전환에서만 보이면 속도를 잠시 늦춰 재현한 뒤 되돌린다

웹 화면에도 같은 꼴이 있다. 이미지를 object-fit 으로 옮길 때 드러나는 빈 가장자리, 무한 스크롤 목록의 마지막 칸, 두 슬라이드가 겹쳐 사라지는 전환의 한가운데. 가운데는 디자이너가 본 화면이고, 경계는 아무도 본 적 없는 화면이다.

우리가 겪은 일

• 노이즈 UV 를 옮기자 화면 끝에 세로 줄무늬가 섰다. 수묵 3D 장면의 구름 흐름에서. 래핑을 RepeatWrapping 으로 바꾸자 화면에서 잰 밴딩(줄무늬) 지표가 0.658 에서 0.284 로 내려갔다.
• 반투명 구름 테두리에만 끊긴 검은 선이 꿈틀거렸다. 커널 네 자리가 모두 섞인 띠 안에 들어 깃발이 안 걸렸다. 깃발만 4배 넓게 읽자 사라졌다. 결함이 빠른 전환 중에만 보여서 속도표를 잠시 늦춰 재현했다.
• 구름 메시에서 화면 워시로 넘겨주는 순간 뒤가 비쳤다. 두 램프를 따로 짜고 곱해 쓴 것이 원인이었다. 넘겨주는 지점에서 합성 덮임이 단조인지 시험으로 재고, 한쪽을 다른 쪽의 보수로 바꿨다.

2026-09 기준, three.js r186.