Pixijs 및 WebGL을 사용하여 이미지 갤러리 구축

이 튜토리얼은 Pixijs 및 WebGL이있는 이미지 갤러리를 구축하여 시각적으로 매력적인 입방 렌즈 왜곡 효과를 달성하는 것을 보여줍니다. 과정을 탐색합시다.

2D 및 3D 그래픽 렌더링을위한 JavaScript API 인 WebGL은 강력한 기능을 제공하지만 복잡 할 수 있습니다. Pixijs와 같은 라이브러리는 WebGL 개발을 단순화합니다. 이 튜토리얼은 pixijs를 활용하여 드리브블 디자인에서 영감을 얻은 갤러리를 만듭니다. 일부 JavaScript (ES6) 지식은 도움이되지만 고급 WebGL 또는 Pixijs 전문 지식은 필요하지 않습니다. Fragment Shaders ( "The Book of Shaders"와 같은 리소스가 권장됨)에 대한 친숙 함이 유리합니다.

설정:

1. HTML에 스크립트로 pixijs 라이브러리를 포함하십시오.
2. a<canvas></canvas> 렌더링을 위해 요소 (또는 동적으로 하나를 생성).
3. new PIXI.Application(options) 사용하여 pixijs 응용 프로그램을 초기화하십시오.

기본 JavaScript 보일러 플레이트가 제공됩니다.

 // 캔버스보기를 얻습니다
const view = document.querySelector ( '. view');
너비, 높이, 앱;

// 치수를 설정합니다
함수 initDimensions () {
  너비 = Window.innerWidth;
  높이 = Window.innerHeight;
}

// pixijs 응용 프로그램을 시작합니다
함수 initapp () {
  app = new pixi.application ({view});
  app.renderer.autodensity = true;
  app.renderer.resize (너비, 높이);
}

// 모든 것을 시작하십시오
함수 init () {
  initDimensions ();
  initapp ();
}

// 초기 호출
init ();

이 코드를 실행하면 콘솔에 검은 색 화면과 pixijs 버전 메시지가 표시됩니다.

그리드 배경 만들기 :

그리드 배경은 왜곡 효과의 가시성을 향상시킵니다. 이것은 조각 셰이더가 필요합니다.

 #ifdef gl_es
정밀 메이트 럼프 플로트;
#endif

float isgridline (vec2 coord) {
  vec2 pixelspergrid = vec2 (50.0, 50.0);
  VEC2 GRIDCOORDS = FRACT (COORD / PIXELSPERGRID);
  vec2 gridpixelcoords = gridcoords * pixelspergrid;
  vec2 gridline = step (gridpixelcoords, vec2 (1.0));
  float isgridline = max (gridline.x, gridline.y);
  isgridline의 반환;
}

void main () {
  vec2 coord = gl_fragcoord.xy;
  vec3 color = vec3 (0.0);
  color.b = isgridline (coord) * 0.3;
  GL_FRAGCOLOR = VEC4 (색, 1.0);
}

이 셰이더가로드되고 필터가 무대에 추가 된 빈 스프라이트에 적용됩니다.

 // 자원을로드 한 다음 앱을 시작하십시오
pixi.loader.shared.add ([ '쉐이더/배경 프레이트 .glsl']. load (init);

// 그리드 배경을 시작합니다
함수 initbackground () {
  배경 = new pixi.sprite ();
  background.width = 너비;
  배경. 헤이트 = 높이;
  Const BackgroundFragmentShader = Resources [ '셰이더/BackgroundFragment.glsl']. 데이터;
  const backgroundfilter = new pixi.filter (정의되지 않은, backgroundFragmentShader);
  background.filters = [backgroundFilter];
  app.stage.addchild (배경);
}

이것은 그리드 배경을 보여줍니다.

왜곡 효과 :

입방 렌즈 왜곡 효과는 Shadertoy 데모를 기반으로 다른 셰이더를 사용하여 추가됩니다. 이 셰이더는 JavaScript에서 통과 된 유니폼 ( uResolution , uPointerDown )을 사용합니다.

 // ... (셰이더 코드는 원본과 유사하지만 명확성을 위해 단순화되거나 재구성되었습니다) ...

JavaScript 코드는이 유니폼을 업데이트하여 효과의 강도를 제어합니다.

 // ... (유니폼을 초기화하고 업데이트하는 JavaScript 코드) ...

이 필터를 무대에 적용하면 왜곡이 생성됩니다.

포인터 이벤트 및 애니메이션 :

무대는 대화식으로, pointerdown , pointerup , pointerupoutside 및 pointermove 이벤트를 듣습니다. 이 이벤트는 변형을 애니메이션하고 드래그 앤 드롭 기능을 구현하기 위해 유니폼 ( uPointerDown , uPointerDiff )을 업데이트합니다. app.ticker.add() 유니폼을 부드럽게 업데이트하기 위해 애니메이션 루프를 만듭니다.

임의의 벽돌 그리드 레이아웃 :

알고리즘은 임의의 벽돌 레이아웃을 생성합니다. 여기에는 최소 크기에 도달 할 때까지 사각형을 재귀 적으로 분할하는 것이 포함됩니다. 이 레이아웃은 이미지를 배치하는 데 사용됩니다.

드로잉 사각형 :

단단한 사각형은 PIXI.Graphics 사용하여 그려져 이미지를 추가하기 전에 레이아웃을 시각화합니다. 컨테이너 ( PIXI.Container )는 이러한 직사각형과 미래의 이미지를 보유하여 움직임을 단순화합니다.

unsplash에서 이미지 추가 :

빈 스프라이트는 각 이미지마다 생성됩니다. loadTextureForImage 함수는 스프라이트가 뷰포트 내에있을 때만 스프라이트 치수를 기반으로 Unsplash에서 이미지를 가져오고 AbortController 사용하여 불필요한 요청을 취소합니다. checkRectsAndImages 로딩 및 알파 전환을 관리합니다. 함수 rectIntersectsWithViewport viewport 교차로를 결정합니다.

뷰포트 크기 조정 처리 :

이벤트 리스너 onResize window.addEventListener('resize', onResize) clean 기능은 애니메이션을 중지하고 이벤트 리스너를 제거하며 보류중인 페치 요청을 중단합니다.

이 포괄적 인 접근 방식은 동적 왜곡 효과를 가진 완전히 기능적이고 반응 형 이미지 갤러리를 초래합니다. 추가 기능으로 코드를 추가로 최적화하고 확장 할 수 있습니다.

위 내용은 Pixijs 및 WebGL을 사용하여 이미지 갤러리 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!