Création d'effets Webgl avec Curtainsjs
Ce tutoriel montre comment intégrer de manière transparente les effets Webgl dans<image></image> et<video></video> Éléments sur une page Web. Alors que plusieurs ressources abordent ce sujet, ce guide simplifie le processus, en se concentrant sur la connexion cruciale entre les pages Web standard et WebGL. Nous allons construire un curseur d'image interactif avec un effet de survol de souris dynamique.
La fonctionnalité principale du curseur et des détails complexes WebGL / GLSL Shader ne seront pas largement couverts. Cependant, le code de démonstration comprend des commentaires et des liens pour plus d'apprentissage. Notez que nous utilisons WebGL2 et GLSL 300, qui ne sont pas compatibles avec Safari ou Internet Explorer. Utilisez Chrome ou Firefox pour les démos. Pour une utilisation en production, envisagez de charger les versions GLSL 100 et 300 Shader, en utilisant GLSL 300 uniquement lorsque curtains.renderer._isWebGL2 est vrai (comme indiqué dans la démo).
Étape 1: Créez votre page Web
Créez votre HTML, CSS et JavaScript comme d'habitude. Notre exemple est un curseur d'image, mais les principes s'appliquent largement. Les caractéristiques du curseur:
- Les diapositives couvrant la largeur de page complète.
- Le traînant et la claquement basés sur l'élan vers la diapositive la plus proche.
- Sortez et entrez des animations pour les diapositives.
- Un effet de volants interactifs.
La plate-forme d'animation Greensock (GSAP) est utilisée pour l'animation et la traînée, offrant des plugins pour les interactions de glisser, l'élan et le fractionnement de la ligne de texte. Si vous n'êtes pas familier avec les curseurs GSAP, explorez le code de démonstration pour obtenir des conseils. Ces éléments DOM seront synchronisés avec notre rendu Webgl.
Étape 2: Rendu Webgl avec Curtainsjs
Nous rendrons les images à l'aide de WebGL. Cela implique:
- Chargement des images sous forme de textures dans un shader GLSL.
- Création de plans WebGL pour les images et appliquant des textures.
- Positionnement et mise à l'échelle des plans pour correspondre à leurs homologues DOM.
CurtainsJs simplifie ce processus en gérant la synchronisation entre les éléments DOM et WebGL pendant le défilement et les interactions utilisateur. Voici le JavaScript essentiel:
// Créer une instance de rideaux
const Curtains = nouveaux rideaux ({conteneur: "canvas", autorender: false});
// RAF unique pour GSAP et rideaux
fonction RendersCene () {
Curtains.Render ();
}
GSAP.Ticker.Add (RendersCene);
// Paramètres de rideaux
const Params = {
vertexshaderid: "Slider-planes-vs",
FragmentShaderid: "Slider-Planes-fs",
uniformes: {
// ...
}
};
// Créer des plans pour chaque diapositive
const PlaneElements = document.QuerySelectorAll (". Slide");
planeelements.ForEach ((planeel, i) => {
const Plane = ridetains.addplane (planeel, params);
if (plan) {
plan.onready (function () {
plan.htmlelement.closest (". Slide"). classList.add ("chargé");
});
}
}); La fonction updateProgress a besoin de modifications pour mettre à jour les plans WebGL:
fonction updatedProgress () {
// Mettre à jour le curseur
Animation.Progress (wrapval (this.x) / wrapwidth);
// Mette à jour les avions Webgl
planes.ForEach (plan => plan.updatePosition ());
}Des vertex de base et des shaders de fragments sont nécessaires pour afficher les textures. Ceux-ci peuvent être chargés via
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1659
14
1416
52
1310
25
1258
29
1232
24
Fontes variables de polices Google
Apr 09, 2025 am 10:42 AM
Je vois que Google Fonts a déployé un nouveau design (tweet). Comparé à la dernière grande refonte, cela semble beaucoup plus itératif. Je peux à peine faire la différence
Comment créer un compte à rebours animé avec HTML, CSS et JavaScript
Apr 11, 2025 am 11:29 AM
Avez-vous déjà eu besoin d'un compte à rebours sur un projet? Pour quelque chose comme ça, il pourrait être naturel d'atteindre un plugin, mais c'est en fait beaucoup plus
Guide des attributs de données HTML
Apr 11, 2025 am 11:50 AM
Tout ce que vous avez toujours voulu savoir sur les attributs de données dans HTML, CSS et JavaScript.
Une preuve de concept pour rendre Sass plus rapidement
Apr 16, 2025 am 10:38 AM
Au début d'un nouveau projet, la compilation SASS se produit en un clin d'œil. Cela se sent bien, surtout quand il est associé à BrowSersync, qui recharge
Comment nous avons créé un site statique qui génère des modèles tartan dans SVG
Apr 09, 2025 am 11:29 AM
Le tartan est un chiffon à motifs qui est généralement associé à l'Écosse, en particulier leurs kilts à la mode. Sur tartanify.com, nous avons rassemblé plus de 5 000 tartan
Comment construire des composants Vue dans un thème WordPress
Apr 11, 2025 am 11:03 AM
La directive en ligne en ligne nous permet de construire des composants Vue riches en tant qu'amélioration progressive par rapport au balisage WordPress existant.
PHP est A-OK pour les modèles
Apr 11, 2025 am 11:04 AM
Les modèles PHP obtiennent souvent un mauvais rap pour faciliter le code inférieur - mais cela ne doit pas être le cas. Voyons comment les projets PHP peuvent appliquer un base
Programmation sass pour créer des combinaisons de couleurs accessibles
Apr 09, 2025 am 11:30 AM
Nous cherchons toujours à rendre le Web plus accessible. Le contraste des couleurs est juste des mathématiques, donc Sass peut aider à couvrir les cas de bord que les concepteurs auraient pu manquer.
