Catégories
Astuces et Design

Création d'effets WebGL avec CurtainsJS

Cet article se concentre sur l'ajout d'effets WebGL à et éléments d'une page Web déjà «terminée». Bien qu'il existe quelques ressources utiles sur ce sujet (comme celles-ci), j'espère aider à simplifier ce sujet en distillant le processus en quelques étapes:

  • Créez une page Web comme vous le feriez normalement.
  • Rendez les éléments auxquels vous souhaitez ajouter des effets WebGL avec WebGL.
  • Créez (ou recherchez) les effets WebGL à utiliser.
  • Ajoutez des écouteurs d'événements pour connecter votre page aux effets WebGL.

Plus précisément, nous nous concentrerons sur la connexion entre les pages Web régulières et WebGL. Que va-t-on faire? Que diriez-vous d'un curseur d'image draggle avec un survol interactif de la souris!

Nous ne couvrirons pas les fonctionnalités de base du slider et n'entrerons pas très loin dans les détails techniques des shaders WebGL ou GLSL. Cependant, le code de démonstration contient de nombreux commentaires et des liens vers des ressources externes si vous souhaitez en savoir plus.

Nous utilisons la dernière version de WebGL (WebGL2) et GLSL (GLSL 300) qui ne fonctionnent actuellement ni dans Safari ni dans Internet Explorer. Alors, utilisez Firefox ou Chrome pour voir les démos. Si vous prévoyez d’utiliser l’un de ce que nous couvrons en production, vous devez charger les versions GLSL 100 et 300 des shaders et utiliser la version GLSL 300 uniquement si curtains.renderer._isWebGL2 est vrai. Je couvre cela dans la démo ci-dessus.

Tout d'abord, créez une page Web comme vous le feriez normalement

Vous savez, HTML et CSS et ainsi de suite. Dans ce cas, nous créons un curseur d'image, mais c'est juste pour la démonstration. Nous n'allons pas approfondir la manière de créer un curseur (Robin a un bon article à ce sujet). Mais voici ce que j'ai mis en place:

  1. Chaque diapositive est égale à la largeur totale de la page.
  2. Une fois qu'une diapositive a été déplacée, le curseur continue de glisser dans la direction du glissement et ralentit progressivement avec l'élan.
  3. L'élan place le curseur sur la diapositive la plus proche au point final.
  4. Chaque diapositive a une animation de sortie qui est déclenchée lorsque le glissement commence et une animation d'entrée qui est déclenchée lorsque le glissement s'arrête.
  5. Lors du survol du curseur, un effet de survol est appliqué de la même manière que cette vidéo.

Je suis un grand fan de la plate-forme d'animation GreenSock (GSAP). C'est particulièrement utile pour nous ici, car il fournit un plugin pour le glissement, un qui active l'élan lors du glissement et un pour diviser le texte par ligne. Si vous n'êtes pas à l'aise pour créer des curseurs avec GSAP, je vous recommande de passer un peu de temps à vous familiariser avec le code de la démo ci-dessus.

Encore une fois, c'est juste pour la démonstration, mais je voulais au moins décrire un peu le composant. Ce sont les éléments DOM avec lesquels nous garderons notre WebGL synchronisé.

Ensuite, utilisez WebGL pour rendre les pièces qui contiendront des effets WebGL

Nous devons maintenant rendre nos images en WebGL. Pour ce faire, nous devons:

  1. Chargez l'image en tant que texture dans un shader GLSL.
  2. Créez un plan WebGL pour l'image et appliquez correctement la texture de l'image au plan.
  3. Positionnez le plan là où se trouve la version DOM de l'image et mettez-le à l'échelle correctement.

La troisième étape est particulièrement non triviale en utilisant le WebGL pur car nous devons suivre la position des éléments DOM que nous voulons porter dans le monde WebGL tout en gardant les parties DOM et WebGL synchronisées pendant le défilement et les interactions de l'utilisateur.

Il existe en fait une bibliothèque qui nous aide à faire tout cela avec facilité: CurtainsJS! C'est la seule bibliothèque que j'ai trouvée qui crée facilement des versions WebGL d'images et de vidéos DOM et les synchronise sans trop d'autres fonctionnalités (mais j'aimerais avoir tort sur ce point, alors laissez un commentaire si vous en connaissez d'autres. qui font bien cela).

Avec Curtains, c'est tout le JavaScript que nous devons ajouter:

// Create a new curtains instance
const curtains = new Curtains({ container: "canvas", autoRender: false });
// Use a single rAF for both GSAP and Curtains
function renderScene() {
  curtains.render();
}
gsap.ticker.add(renderScene);
// Params passed to the curtains instance
const params = {
  vertexShaderID: "slider-planes-vs", // The vertex shader we want to use
  fragmentShaderID: "slider-planes-fs", // The fragment shader we want to use
  
 // Include any variables to update the WebGL state here
  uniforms: {
    // ...
  }
};
// Create a curtains plane for each slide
const planeElements = document.querySelectorAll(".slide");
planeElements.forEach((planeEl, i) => {
  const plane = curtains.addPlane(planeEl, params);
  // const plane = new Plane(curtains, planeEl, params); // v7 version
  // If our plane has been successfully created
  if(plane) {
    // onReady is called once our plane is ready and all its texture have been created
    plane.onReady(function() {
      // Add a "loaded" class to display the image container
      plane.htmlElement.closest(".slide").classList.add("loaded");
    });
  }
});

Nous devons également mettre à jour notre updateProgress fonction afin de mettre à jour nos avions WebGL.

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

Nous devons également ajouter un shader de sommets et de fragments très basique pour afficher la texture que nous chargeons. Nous pouvons le faire en les chargeant via

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *