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
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
PhpStorm version Mac
Le dernier (2018.2.1) outil de développement intégré PHP professionnel
DVWA
Damn Vulnerable Web App (DVWA) est une application Web PHP/MySQL très vulnérable. Ses principaux objectifs sont d'aider les professionnels de la sécurité à tester leurs compétences et leurs outils dans un environnement juridique, d'aider les développeurs Web à mieux comprendre le processus de sécurisation des applications Web et d'aider les enseignants/étudiants à enseigner/apprendre dans un environnement de classe. Application Web sécurité. L'objectif de DVWA est de mettre en pratique certaines des vulnérabilités Web les plus courantes via une interface simple et directe, avec différents degrés de difficulté. Veuillez noter que ce logiciel
Listes Sec
SecLists est le compagnon ultime du testeur de sécurité. Il s'agit d'une collection de différents types de listes fréquemment utilisées lors des évaluations de sécurité, le tout en un seul endroit. SecLists contribue à rendre les tests de sécurité plus efficaces et productifs en fournissant facilement toutes les listes dont un testeur de sécurité pourrait avoir besoin. Les types de listes incluent les noms d'utilisateur, les mots de passe, les URL, les charges utiles floues, les modèles de données sensibles, les shells Web, etc. Le testeur peut simplement extraire ce référentiel sur une nouvelle machine de test et il aura accès à tous les types de listes dont il a besoin.
Navigateur d'examen sécurisé
Safe Exam Browser est un environnement de navigation sécurisé permettant de passer des examens en ligne en toute sécurité. Ce logiciel transforme n'importe quel ordinateur en poste de travail sécurisé. Il contrôle l'accès à n'importe quel utilitaire et empêche les étudiants d'utiliser des ressources non autorisées.
MinGW - GNU minimaliste pour Windows
Ce projet est en cours de migration vers osdn.net/projects/mingw, vous pouvez continuer à nous suivre là-bas. MinGW : un port Windows natif de GNU Compiler Collection (GCC), des bibliothèques d'importation et des fichiers d'en-tête librement distribuables pour la création d'applications Windows natives ; inclut des extensions du runtime MSVC pour prendre en charge la fonctionnalité C99. Tous les logiciels MinGW peuvent fonctionner sur les plates-formes Windows 64 bits.
