CurtainsJS로 WebGL 효과를 만듭니다-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CurtainsJS로 WebGL 효과를 만듭니다

尊渡假赌尊渡假赌尊渡假赌

Apr 02, 2025 am 04:26 AM

CurtainsJS로 WebGL 효과를 만듭니다

이 튜토리얼은 WebGL 효과를 기존에 원활하게 통합하는 방법을 보여줍니다.<image></image> 그리고<video></video> 웹 페이지의 요소. 여러 리소스 가이 주제를 다루지만이 안내서는 표준 웹 페이지와 WebGL의 중요한 연결에 중점을 두어 프로세스를 단순화합니다. 동적 마우스 호버 효과가있는 대화식 이미지 슬라이더를 구축합니다.

슬라이더 및 복잡한 WebGL/GLSL 셰이더 세부 사항의 핵심 기능은 광범위하게 다루지 않습니다. 그러나 데모 코드에는 추가 학습을위한 의견과 링크가 포함되어 있습니다. Safari 또는 Internet Explorer와 호환되지 않는 WebGL2 및 GLSL 300을 사용하고 있습니다. 데모에는 Chrome 또는 Firefox를 사용하십시오. 생산 사용의 경우 curtains.renderer._isWebGL2 가 True (데모에 표시된대로) 일 때만 GLSL 100 및 300 셰이더 버전을 모두로드하십시오.

1 단계 : 웹 페이지를 구축하십시오

평소와 같이 HTML, CSS 및 JavaScript를 만듭니다. 이 예는 이미지 슬라이더이지만 원칙은 광범위하게 적용됩니다. 슬라이더 기능 :

전체 페이지 너비에 걸친 슬라이드.
모멘텀 기반 드래그 및 가장 가까운 슬라이드로 스냅.
슬라이드에 대한 애니메이션을 종료하고 입력하십시오.
대화식 호버 효과.

Greensock 애니메이션 플랫폼 (GSAP)은 애니메이션 및 드래그에 사용되며 드래그 상호 작용, 모멘텀 및 텍스트 라인 분할을위한 플러그인을 제공합니다. GSAP 슬라이더에 익숙하지 않은 경우 안내에 대한 데모 코드를 탐색하십시오. 이러한 DOM 요소는 WebGL 렌더링과 동기화됩니다.

2 단계 : CurtainsJS로 WebGL 렌더링

WebGL을 사용하여 이미지를 렌더링합니다. 여기에는 다음이 포함됩니다.

GLSL 셰이더에서 이미지를 텍스처로로드합니다.
이미지 용 WebGL 평면을 만들고 텍스처 적용.
DOM에 맞는 위치 및 스케일링 평면.

CurtainsJS는 스크롤 및 사용자 상호 작용 중에 DOM과 WebGL 요소 간의 동기화를 처리 하여이 프로세스를 단순화합니다. 필수 자바 스크립트는 다음과 같습니다.

 // 커튼 인스턴스를 만듭니다
const 커튼 = 새 커튼 ({컨테이너 : "캔버스", 자동 렌더 : false});
// GSAP 및 커튼의 단일 RAF
함수 renderscene () {
  Curtains.render ();
}
gsap.ticker.add (renderscene);
// 커튼 매개 변수
const params = {
  VertexShaderid : "Slider-Planes-VS",
  FragmentShaderid : "Slider-Planes-FS",
  유니폼 : {
    // ...
  }
};
// 각 슬라이드에 대한 평면을 만듭니다
const planeElements = document.querySelectorall ( ". 슬라이드");
planeElements.foreach ((Planeel, i) => {
  const plane = curtains.addplane (planeel, params);
  if (비행기) {
    plane.onready (function () {
      plane.htmlelement.closest ( ". 슬라이드"). classlist.add ( "로드");
    });
  }
});

updateProgress 기능은 WebGL 평면을 업데이트하려면 수정이 필요합니다.

 함수 updateProgress () {
  // 슬라이더를 업데이트합니다
  animation.progress (wrapval (this.x) / wrapwidth);
  // WebGL 평면을 업데이트합니다
  평면 .foreach (평면 => 평면 .upDatePosition ());
}

텍스처를 표시하려면 기본 정점 및 조각 셰이더가 필요합니다. 이것들은로드 할 수 있습니다