Creating WebGL Effects with CurtainsJS

This tutorial demonstrates how to seamlessly integrate WebGL effects into existing <image></image> and <video></video> elements on a webpage. While several resources address this topic, this guide simplifies the process, focusing on the crucial connection between standard web pages and WebGL. We'll build an interactive image slider with a dynamic mouse hover effect.

The core functionality of the slider and intricate WebGL/GLSL shader details won't be covered extensively. However, the demo code includes comments and links for further learning. Note that we're using WebGL2 and GLSL 300, which are not compatible with Safari or Internet Explorer. Use Chrome or Firefox for the demos. For production use, consider loading both GLSL 100 and 300 shader versions, using GLSL 300 only when curtains.renderer._isWebGL2 is true (as shown in the demo).

Step 1: Build Your Webpage

Create your HTML, CSS, and JavaScript as usual. Our example is an image slider, but the principles apply broadly. The slider features:

1. Slides spanning the full page width.
2. Momentum-based dragging and snapping to the nearest slide.
3. Exit and enter animations for slides.
4. An interactive hover effect.

GreenSock Animation Platform (GSAP) is used for animation and dragging, offering plugins for drag interactions, momentum, and text line splitting. If you're unfamiliar with GSAP sliders, explore the demo code for guidance. These DOM elements will be synchronized with our WebGL rendering.

Step 2: WebGL Rendering with CurtainsJS

We'll render images using WebGL. This involves:

1. Loading images as textures in a GLSL shader.
2. Creating WebGL planes for images and applying textures.
3. Positioning and scaling planes to match their DOM counterparts.

CurtainsJS simplifies this process by handling the synchronization between DOM and WebGL elements during scrolling and user interactions. Here's the essential JavaScript:

// Create a Curtains instance
const curtains = new Curtains({ container: "canvas", autoRender: false });
// Single rAF for GSAP and Curtains
function renderScene() {
  curtains.render();
}
gsap.ticker.add(renderScene);
// Curtains parameters
const params = {
  vertexShaderID: "slider-planes-vs",
  fragmentShaderID: "slider-planes-fs",
  uniforms: {
    // ...
  }
};
// Create planes for each slide
const planeElements = document.querySelectorAll(".slide");
planeElements.forEach((planeEl, i) => {
  const plane = curtains.addPlane(planeEl, params);
  if (plane) {
    plane.onReady(function() {
      plane.htmlElement.closest(".slide").classList.add("loaded");
    });
  }
});

The updateProgress function needs modification to update WebGL planes:

function updateProgress() {
  // Update slider
  animation.progress(wrapVal(this.x) / wrapWidth);
  // Update WebGL planes
  planes.forEach(plane => plane.updatePosition());
}

Basic vertex and fragment shaders are needed to display textures. These can be loaded via <script></script> tags or using backticks (as in the demo). The vertex shader positions planes, while the fragment shader processes pixels. Remember the shader variable prefixes: in, uniform, and out.

Step 3: Implementing WebGL Effects

Now, let's add effects. Our inspiration video features:

1. Color inversion.
2. A fisheye effect around the mouse.
3. Animated radius around the mouse.
4. Smooth radius animation.
5. Image translation based on mouse position.

Shaders lack memory between frames. To animate effects (like the radius), use JavaScript variables and pass them to each frame.

Modify shaders to invert colors outside the radius and create the fisheye effect. The focus here is the DOM-WebGL connection, so shader details are minimized, but comments are provided.

Finding pre-made WebGL shaders for websites is challenging. ShaderToy and VertexShaderArt offer impressive shaders, but not necessarily for typical website effects.

Step 4: Connecting JavaScript and Shaders

Add interactivity by passing uniforms to shaders and modifying them based on user interactions.

Declare uniforms in shaders:

// Vertex shader
uniform vec2 uMouse;

// Fragment shader
uniform float uRadius;
uniform vec2 uResolution;

Add uniform values to the Curtains parameters:

const params = {
  // ...
  uniforms: {
    mouse: { name: "uMouse", type: "2f", value: mouse },
    radius: { name: "uRadius", type: "1f", value: radius.val },
    resolution: { name: "uResolution", type: "2f", value: [innerWidth, innerHeight] }
  }
};

Create event listeners and animations:

const radius = { val: 0.1 };
const radiusAnim = gsap.from(radius, { val: 0, duration: 0.3, paused: true, onUpdate: updateRadius });
function updateRadius() {
  planes.forEach((plane, i) => { plane.uniforms.radius.value = radius.val; });
}
// ... (mouse event handling code)

Update updateProgress to keep WebGL mouse synced.

GSAP's callbacks (like onComplete) and frame-rate independence are advantageous.

Further Enhancements

Add effects like turbulence and displacement. Displacement involves moving pixels based on a gradient lightmap. Animate displacement power and intensity based on drag velocity. Curtains also offers a React version. Share your creations!

The above is the detailed content of Creating WebGL Effects with CurtainsJS. For more information, please follow other related articles on the PHP Chinese website!