01 / 시작점
후처리는 화면 위에 놓는 필터가 아니라, 읽기의 순서다.
Three.js가 만든 절차적 장면은 하나의 텍스처가 되어 다음 단계로 이동합니다. 원본을 떼어 보고, 밝은 부분의 번짐을 확인하고, 마지막으로 직접 쓴 GLSL이 경계에 개입합니다. 각 단계는 이전 단계의 결과를 받아 다음 질문을 엽니다.
“같은 장면, 다른 문법.
효과가 아니라 순서를 보세요.”
02 / 비교 스테이지
스펙트럼의 경계
아래 모드는 하나의 렌더 체인을 공유합니다. 버튼과 슬라이더는 눈속임이 아니라, 각 패스가 어떤 문장을 더하는지 확인하는 읽기 도구입니다.
스펙트럼의 경계: 같은 장면, 세 번의 읽기
읽을 결론마지막 셰이더가 장면을 더 “멋지게” 만드는 것이 아니라, 경계가 어디에서 생겼는지 보이게 합니다.
신호를 겹치기 전에
원본은 사라지지 않아야 한다.
첫 번째 모드에서는 후처리를 모두 끄고 광원과 재질이 만든 표면을 읽습니다. 두 번째 모드에서는 UnrealBloomPass가 밝은 부분의 주변을 확장합니다. 세 번째 모드에서만 사용자 셰이더가 들어와 RGB 샘플을 서로 다른 위치에서 읽고, 얇은 수직 리듬을 곱합니다.
브라우저를 떠날 때
만든 쪽이 정리한다.
페이지가 생성한 renderer, composer, pass, geometry, material은 페이지의 자원입니다. 화면 크기가 바뀌면 같은 체인의 크기만 갱신하고, pagehide에서는 애니메이션을 멈춘 뒤 GPU 자원을 순서대로 해제합니다. 정적 포스터는 이 수명주기와 무관하게 항상 읽을 수 있습니다.
06 / 가져갈 한 문장
효과는 끝에 오지만, 의미는 앞에서 준비된다.
Three.js의 장면 생성과 post-processing은 별개의 장식이 아닙니다. 원본 → 확산 → 해석이라는 순서를 DOM 설명과 조작 가능한 비교로 함께 보여 줄 때, 셰이더는 숨은 마법이 아니라 관찰 가능한 문법이 됩니다.