웹사이트에 WebGL 효과를 추가하는 방법에는 여러 가지가 있습니다. 그러나 반응성이 뛰어나고, 접근 가능하며, 모바일에서 쉽게 비활성화할 수 있는 방식으로 구축하는 것은 어렵습니다. WebGL에서 레이아웃을 모두 정의하고 싶은 경우가 있지만 경험상 대부분의 프로젝트에는 보다 유연한 접근 방식이 필요합니다. 예를 들어, 클라이언트는 기존 모바일 버전보다 더 축소된 버전을 선호할 수도 있고, 그 과정에서 WebGL 사용 요구 사항도 바뀔 수도 있습니다. 14islands 에서는 Progressive Enhancement에 접근 방식을 기반으로 하기로 결정하고 학습 내용을 r3f-scroll-rig 라는 라이브러리에 묶었습니다 . 이를 통해 시맨틱 마크업과 CSS를 사용하여 반응형 레이아웃을 만들고 WebGL로 쉽게 향상시킬 수 있습니다. 무엇을 배울 것인가 이 튜토리얼에서는 스크롤하는 동안 레이아웃에 동기화되는 WebGL(react-3-fibre) 항목을 사용하여 React 웹사이트를 확장하는 쉬운 방법을 보여줍니다. 우리는 오픈 소스 라이브러리 r3f-scroll-rig 를 사용할 것입니다 . 우리는: r3f-scroll-rig 라이브러리 추가 WebGL을 사용하여 렌더링할 DOM 이미지 향상 WebGL을 사용하여 렌더링할 DOM 텍스트 향상 레이아웃에 연결되고 스크롤 이벤트에 반응하는 3D 모델을 추가합니다. React-Three-Fiber 생태계의 렌즈 굴절 구성요소를 사용하여 더욱 멋져보세요. r3f-scroll-rig 라이브러리 추가 스크롤 리그 라이브러리는 대부분의 React 프론트엔드 프레임워크와 호환됩니다. 클라이언트 프로젝트에서는 주로 Next.js를 사용하지만 이 데모의 단순성을 위해 Create-React-App을 사용할 것입니다. 예를 들어 Gatsby.js 또는 Vite와도 호환됩니다. 고정된 캔버스에서 움직이는 WebGL 객체를 DOM 요소와 완벽하게 동기화하는 유일한 방법은 메인 스레드에서 스크롤에 애니메이션을 적용하는 것입니다. 이것은 뛰어난 Lenis 라이브러리 를 사용하여 SmoothScrollbar가 (접근 가능한 방식으로) 수행하는 작업입니다 . WebGL을 사용하여 렌더링할 이미지 향상 기본 사용 사례는 페이지에서 DOM 요소를 추적하고 스크롤 막대와 동기화되어 업데이트되는 동일한 크기와 위치로 Threejs 메시를 렌더링하는 것입니다. 구성요소 는 에 대한 터널 역할을 합니다 GlobalCanvas. 내부에 추가하는 모든 항목은 이 구성 요소가 마운트된 상태로 유지되는 동안 전역 캔버스에 렌더링됩니다. 또한 마운트 해제 시 캔버스에서 자동으로 제거됩니다. 이를 통해 WebGL 특정 코드를 해당 코드가 속한 UI 구성 요소 내에 묶을 수 있습니다. 이 사용 사례에서는 단일 DOM 참조의 크기를 추적하고 측정하는 구성 요소 도 사용합니다 . 이 구성 요소의 하위 요소는 DOM 요소 위에 배치되고 페이지를 스크롤하면 이동됩니다. 이제 이미지를 덮는 빨간색 WebGL 평면을 렌더링해야 합니다. ScrollScene스크롤 시 평면 이동을 처리하며 속성 scale은 DOM 요소의 정확한 크기와 일치합니다. 이 클래스는 HTML 이미지 중 하나만 보고 싶기 때문에 활성화되면 styles.hiddenWhenSmoothHTML 이미지를 숨깁니다 . SmoothScrollbar데모에서는 enabled스크롤바의 플래그를 전환하여 DOM/WebGL 콘텐츠 간을 전환합니다. ⚠️ 참고: HMR(Hot Module Reloading)은 UseCanvas. 해결 방법은 대신 하위 항목을 최상위 함수로 정의하는 것입니다(예를 들어 확장). 평면을 실제 이미지로 교체 이렇게 하려면 이미지를 Three.js 텍스처로 로드해야 합니다. 별도의 요청을 하는 대신 스크롤 리그에는 useImageAsTexture()브라우저가 이미 로드한 DOM의 이미지를 재사용할 수 있는 후크가 있습니다. srcset및 와 함께 반응형 이미지를 사용할 수도 있으며 sizes후크는 currentSrc. 기술적으로는 여전히 두 번째 요청을 하고 있지만 URL이 동일하기 때문에 브라우저는 캐시에서 직접 요청을 제공합니다. 이 이미지 로직을 라는 새 구성 요소로 래핑 하고 DOM 이미지에 전달해 보겠습니다. ref이 경우 이미 태그를 가리키고 있으므로 추적 ref과 동일하게 다시 사용할 수 있습니다 .ScrollScene 구성 WebGLImage요소는 텍스처를 로드하고 이를 DreiImage 의 매우 유용한 구성 요소 에 전달합니다 . 은 에서 전달된 의 일부로 올바른 값을 받습니다 .ImagescalepropsScrollScene scrollState에서 전달된 속성에는 추적 ScrollScene된 요소가 뷰포트를 통해 얼마나 멀리 이동했는지에 대한 유용한 정보가 포함되어 있습니다. 이 경우 애니메이션 프레임에서 이를 사용하여 셰이더 유니폼을 업데이트합니다. 후크 는 버벅거림을 방지하기 위해 메인 스레드에서 GPU로 이미지를 업로드하는 지원되는 경우 Threejs의 useImageAsTexture()를 사용합니다 .ImageBitmapLoader WebGL로 텍스트 향상 텍스트를 WebGL 텍스트로 바꾸는 것도 비슷한 방식으로 작동합니다. 다시 ScrollSceneDOM 요소의 위치와 크기를 일치시키기 위해 을 사용합니다. DreiText 의 구성요소를 사용하여 WebGL 텍스트를 렌더링 할 수 있습니다 . 우리는 HTML 텍스트의 계산된 스타일에서 WebGL 텍스트 크기, 문자 간격, 줄 높이 및 색상을 계산하는 도우미 구성 요소를 만들었습니다 . 이는 스크롤 리그의 핵심 부분이 아니기 때문에 별도의 가져오기 대상에서 사용할 수 있습니다 (그리고 정확히 일치하는 항목을 얻는 프로세스는 약간 까다롭습니다) . 이 데모에서는 Drei의 를 전달하여 텍스트를 흔들게 만들지만 이것은 어떤 사용자 정의 자료라도 될 수 있습니다. 작동 방식은 다음과 같습니다. WebGLTextpowerups MeshDistortMaterial 참고: 측정값을 정확하게 하려면 CSS에 사용된 글꼴과 정확히 일치하는 것이 중요합니다. ???? 구성 Text요소는 내부적으로 Troika 텍스트를 사용하며 woff현재는 해당 형식만 지원합니다. 두 개의 글꼴 파일을 로드하지 않으려면 CSS woff대신 을 사용하십시오 . woff2 SmoothScrollbar가 활성화되면 클래스는 styles.transparentColorWhenSmooth텍스트를 투명하게 설정합니다. 가시성을 숨기는 대신 투명한 색상을 사용하면 실제 DOM 텍스트를 여전히 배경에서 선택할 수 있다는 이점이 있습니다. 3D 형상 또는 모델 추가 UseCanvas또는 안에 무엇이든 추가할 수 있습니다 ScrollScene. 데모에서는 마지막 이미지에 대한 BoxGeometry를 만들고 이미지를 상자 양쪽의 텍스처로 사용합니다. useGLTF그러나 모델을 로드하고 ScrollScene 소품에 따라 크기를 조정하는 것과 같은 로더를 사용할 수도 있습니다 . 흔들리는 입력 애니메이션을 위한 스크롤 리그 및 React-spring의 스크롤 속도인 Drei의 'MeshWobbleMaterial'과 페어링하는 것이 얼마나 쉬운지 확인해 보세요 . ???? 뷰포트 기반 애니메이션을 시작하는 데 유용한 하위 항목으로 호출되는 반응형 소품을 전달합니다 .ScrollSceneinViewport 터치 장치를 다루는 방법 터치 장치의 경우 기본적으로 두 가지 옵션이 있습니다. 모든 스크롤 바운드 효과를 비활성화하거나 원래 DOM 콘텐츠로 효과적으로 돌아가거나, 사이트가 더욱 몰입도 높은 WebGL 환경인 경우 SmoothScrollbar에 하이재킹을 지시할 수도 있습니다. 터치 장치의 스크롤에. 터치 기기의 스크롤 하이재킹 기본적으로 활성화되어 있지 않으므로 기본 Lenis 스크롤 막대에 몇 가지 추가 설정이 필요합니다. 그 이유는 대부분의 사용자가 이러한 장치에서 기본 스크롤 경험을 기대하고 좋은 느낌을 주기가 어렵기 때문입니다. 데모에서는 두 가지 접근 방식을 모두 보여주는 방법으로 이 접근 방식을 사용하고 있습니다. syncTouch우리의 경험에 따르면 Lenis에서 옵션을 활성화하면 가장 좋은 느낌을 얻을 수 있습니다 . 속성 config 은 사용자 지정 구성을 기본 인스턴스에 직접 전달하는 방법입니다 Lenis. 모바일에서 스크롤 효과 비활성화 우리는 일반적으로 태블릿이나 스마트폰과 같은 터치 장치에서 WebGL 효과를 비활성화하는 것을 선택합니다. 왜냐하면 스크롤 경험을 좋게 만드는 것이 어렵기 때문입니다. 이전 섹션에서 DOM 콘텐츠를 숨기는 데 사용했던 클래스를 기억하시나요 styles.hiddenWhenSmooth? styles.transparentColorWhenSmoothSmoothScrollbar가 비활성화되면 자동으로 비활성화되어 DOM 요소가 표시됩니다. 또한 WebGL 메시의 렌더링도 비활성화하려고 합니다. hasSmoothScrollbar후크 에서 전역 상태에 액세스하여 이를 수행할 수 있습니다 useScrollRig(). 그리고 거기에 있습니다. enabled속성 을 뒤집으면 모든 DOM 및 WebGL 메시의 가시성이 전환되므로 둘 사이를 쉽게 전환할 수 있습니다. 대화형 전체 화면 배경 등과 같이 스크롤 바인딩되지 않은 WebGL 콘텐츠를 계속 유지할 수 있습니다. 스크롤 가능한 콘텐츠 뒤의 고정 캔버스에서는 잘 렌더링됩니다. 렌즈 굴절 스크롤 리그는 React Three Fiber 생태계와 100% 호환됩니다. Paul Henschel 이 만든 Lens 굴절 구성요소를 추가해 보겠습니다 . 렌더링 함수를 단일 하위 항목으로 에 전달하면 하위 항목을 렌더링할 위치를 제어할 수 있습니다 . 이를 통해 구성 요소의 모든 하위 항목을 래핑할 수 있습니다 . 렌즈 효과에는 콘텐츠를 혼합하기 위한 WebGL의 배경이 필요하므로 모든 캔버스 하위 항목 뒤에 렌더링되는 영구 구성 요소를 전달합니다 . R3F 생태계에 기여한 Poimandres 집단 에게 큰 감사를 드립니다 ! 최고의 WordPress 테마 마무리 우리는 접근성과 SEO가 최우선인 경우 이 접근 방식이 매우 유용하다는 것을 알았습니다. CSS를 사용하여 레이아웃을 정의함으로써 일부 개발자는 견고한 반응형 레이아웃을 구축하는 데 집중할 수 있고 다른 개발자는 동시에 WebGL 개선 사항에 집중할 수 있습니다.