THREE.JS 렌더링 처리 영역 후 처리

Question

렌더링을 흐리게 처리해야하지만 전체가 아니라 단편 만 흐리게 처리해야합니다. 고정 된 "유리"모양이 흐를 것입니다 (WebGl 애니메이션을 통해 SVG 애니메이션 투명 모양). 문제는 지역 고정 효과입니다. 일부 작곡가 또는 context.readPixels + FastBlur.js가 적합할까요 아니면 CSS + 마스크일까요? 도와 줘서 고마워.

Answer 1

나는 그것을했다 : WebGl shader blur (Three.js 렌더링 패스) + 마스크 텍스처 (이미지 = 모양이 그려지는 추가 보이지 않는 캔버스 요소). SVG는 독립적 인 요소이지만 마스크 텍스처의 종류와 위치에 대한 정보를 제공하고 물론 모양을 표시합니다. 조금 미쳤지 만 작동하고 매우 빠릅니다.