WebGL

WebGL (Web Graphics Library) est une API JavaScript qui permet aux navigateurs d'afficher des graphiques 2D et 3D interactifs à l'aide du GPU de l'appareil, sans nécessiter aucun plugin ni extension. Construite sur OpenGL ES 2.0, WebGL fournit un accès bas niveau au rendu accéléré matériellement directement dans l'élément canvas du navigateur. Tous les principaux navigateurs — Chrome, Firefox, Safari et Edge — prennent en charge WebGL sur les plateformes de bureau comme mobiles. L'API gère la compilation des shaders, le placage de textures, les calculs d'éclairage et les transformations de géométrie, donnant aux développeurs un contrôle fin sur les visuels propulsés par le GPU sur le web.

Pour la publication numérique, WebGL est la technologie qui rend possibles des effets visuels 3D réalistes à l'intérieur d'une fenêtre de navigateur. Sans elle, les effets animés de tourne-page, les transitions de zoom fluides, le rendu d'ombres en temps réel et les autres interactions accélérées par le GPU nécessiteraient des applications natives de bureau ou mobiles, ou des plugins de navigateur dépassés comme Flash. WebGL permet aux éditeurs d'offrir des expériences de lecture visuellement riches et interactives via une simple URL — sans téléchargement, sans installation, sans la friction d'un magasin d'applications. Les lecteurs bénéficient d'une expérience premium sur n'importe quel appareil, et les éditeurs évitent le coût et la complexité de maintenir des applications spécifiques à chaque plateforme.

FlipLink utilise Three.js, une bibliothèque 3D populaire construite sur WebGL, pour propulser ses [animations de tourne-page](/glossary/page-flip-animation). Quand un lecteur tourne une page, WebGL affiche en temps réel sur le GPU la courbure de la page, la déformation du papier, la projection des ombres et les effets d'éclairage. Cela produit une [simulation de livre réaliste](/glossary/realistic-book-simulation) qui fonctionne de façon fluide à 60 images par seconde sur la plupart des appareils. FlipLink inclut aussi un rendu de repli automatique pour les appareils plus anciens où WebGL n'est pas disponible ou dispose d'une mémoire GPU limitée, garantissant que chaque lecteur puisse tout de même accéder au contenu. Les [paramètres d'expérience de page](/features/page-experience-and-layout) permettent aux éditeurs de choisir entre l'effet de tourne-page 3D complet et des transitions plus simples basées sur le CSS, selon leur audience et leur cas d'usage.

WebGL fonctionne via un pipeline de rendu qui s'exécute sur le GPU. Les développeurs écrivent des vertex shaders et des fragment shaders en GLSL (OpenGL Shading Language), que le navigateur compile et exécute sur le matériel graphique. Le vertex shader positionne la géométrie dans l'espace 3D, tandis que le fragment shader détermine la couleur de chaque pixel en fonction des textures, de l'éclairage et des propriétés des matériaux. Les concepts techniques clés incluent : - **Boucle de rendu** : un cycle d'animation continu (généralement à l'aide de `requestAnimationFrame`) qui redessine la scène à chaque image - **Programmes de shader** : de petits programmes GPU qui contrôlent le positionnement des sommets et la coloration des pixels - **Placage de textures** : application d'images 2D (comme les rendus de pages PDF) sur des surfaces 3D - **Tampon de profondeur** : détermination des objets qui apparaissent devant les autres dans l'espace 3D - **Anticrénelage** : lissage des bords dentelés sur la géométrie rendue pour des visuels plus nets WebGL 2.0, basé sur OpenGL ES 3.0, ajoute des fonctionnalités comme les textures 3D, le transform feedback et les cibles de rendu multiples. La plupart des navigateurs modernes prennent désormais en charge WebGL 2.0, et des bibliothèques comme Three.js masquent une grande partie de la complexité de bas niveau, permettant aux développeurs de se concentrer sur la composition de la scène plutôt que sur le code des shaders.

WebGL et l'API Canvas 2D du HTML5 affichent tous deux des graphiques dans le navigateur, mais ils servent des objectifs différents : | Aspect | WebGL | Canvas 2D | |---|---|---| | **Rendu** | 3D et 2D accélérés par le GPU | 2D uniquement, basé sur le CPU | | **Performance** | Gère des scènes complexes avec des milliers d'éléments à 60 ips | Ralentit avec de nombreux appels de dessin ou de grands canvas | | **Prise en charge 3D** | 3D complète avec shaders, éclairage et perspective | Pas de 3D native — tout est plat | | **Courbe d'apprentissage** | Raide — nécessite de comprendre les shaders et le pipeline GPU | Douce — commandes de dessin simples | | **Cas d'usage** | Flipbooks 3D, jeux, visualisation de données, simulations | Graphiques, animations simples, édition d'images | Pour la publication de flipbooks, Canvas 2D peut gérer des transitions basiques de glissement de page, mais ne peut pas produire les effets réalistes de courbure de page et d'ombres que les lecteurs associent aux livres physiques. WebGL rend possible ce niveau de fidélité visuelle au sein d'une page web standard.

WebGL est la technologie de navigateur qui transforme des pages PDF plates en une expérience de lecture interactive et tridimensionnelle — sans plugin, sans téléchargement et sans compromis sur la qualité visuelle.