Building an Images Gallery using PixiJS and WebGL

This tutorial demonstrates building an image gallery with PixiJS and WebGL, achieving a visually appealing cubic lens distortion effect. Let's explore the process:

WebGL, a JavaScript API for rendering 2D and 3D graphics, offers powerful capabilities but can be complex. Libraries like PixiJS simplify WebGL development. This tutorial leverages PixiJS to create a gallery inspired by a Dribbble design. While some JavaScript (ES6) knowledge is helpful, advanced WebGL or PixiJS expertise isn't required. Familiarity with fragment shaders (resources like "The Book of Shaders" are recommended) is beneficial.

Setup:

1. Include the PixiJS library in your HTML as a script.
2. Use a <canvas></canvas> element (or create one dynamically) for rendering.
3. Initialize a PixiJS application using new PIXI.Application(options).

A basic JavaScript boilerplate is provided to start:

// Get canvas view
const view = document.querySelector('.view');
let width, height, app;

// Set dimensions
function initDimensions() {
  width = window.innerWidth;
  height = window.innerHeight;
}

// Init the PixiJS Application
function initApp() {
  app = new PIXI.Application({ view });
  app.renderer.autoDensity = true;
  app.renderer.resize(width, height);
}

// Init everything
function init() {
  initDimensions();
  initApp();
}

// Initial call
init();

Running this code displays a black screen and a PixiJS version message in the console.

Creating the Grid Background:

A grid background enhances the distortion effect's visibility. This requires a fragment shader:

#ifdef GL_ES
precision mediump float;
#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);
  return isGridLine;
}

void main() {
  vec2 coord = gl_FragCoord.xy;
  vec3 color = vec3(0.0);
  color.b = isGridLine(coord) * 0.3;
  gl_FragColor = vec4(color, 1.0);
}

This shader is loaded, and a filter is applied to an empty sprite added to the stage:

// Load resources, then init the app
PIXI.Loader.shared.add(['shaders/backgroundFragment.glsl']).load(init);

// Init the gridded background
function initBackground() {
  background = new PIXI.Sprite();
  background.width = width;
  background.height = height;
  const backgroundFragmentShader = resources['shaders/backgroundFragment.glsl'].data;
  const backgroundFilter = new PIXI.Filter(undefined, backgroundFragmentShader);
  background.filters = [backgroundFilter];
  app.stage.addChild(background);
}

This reveals a gridded background.

Distortion Effect:

A cubic lens distortion effect is added using another shader based on a Shadertoy demo. This shader uses uniforms (uResolution, uPointerDown) passed from JavaScript:

// ... (shader code similar to the original, but potentially simplified or restructured for clarity) ...

JavaScript code updates these uniforms to control the effect's intensity:

// ... (JavaScript code to initialize and update uniforms) ...

Applying this filter to the stage creates the distortion.

Pointer Events and Animation:

The stage becomes interactive, listening for pointerdown, pointerup, pointerupoutside, and pointermove events. These events update uniforms (uPointerDown, uPointerDiff) to animate the distortion and implement drag-and-drop functionality. app.ticker.add() creates an animation loop to smoothly update the uniforms.

Random Masonry Grid Layout:

An algorithm generates a random masonry layout. This involves recursively splitting rectangles until a minimum size is reached. This layout is then used to position the images.

Drawing Rectangles:

Solid rectangles are drawn using PIXI.Graphics to visualize the layout before adding images. A container (PIXI.Container) holds these rectangles and the future images, simplifying movement.

Adding Images from Unsplash:

Empty sprites are created for each image. The loadTextureForImage function fetches an image from Unsplash based on sprite dimensions only when the sprite is within the viewport, using AbortController to cancel unnecessary requests. checkRectsAndImages manages loading and alpha transitions. A function rectIntersectsWithViewport determines viewport intersection.

Handling Viewport Resizing:

An event listener (window.addEventListener('resize', onResize)) and a debounced onResize function handle viewport size changes, cleaning up existing resources and reinitializing the application. The clean function stops the animation, removes event listeners, and aborts pending fetch requests.

This comprehensive approach results in a fully functional, responsive image gallery with a dynamic distortion effect. The code can be further optimized and extended with additional features.

The above is the detailed content of Building an Images Gallery using PixiJS and WebGL. For more information, please follow other related articles on the PHP Chinese website!