WebGL (Web Graphics Library, qu'on pourrait traduire en « bibliothèque de graphismes pour le Web ») est une API JavaScript permettant le rendu de graphismes en 2D ou 3D avec de hautes performances, sans avoir à utiliser de plugin. WebGL introduit une API qui est conforme de près à OpenGL ES 2.0 et qui peut être utilisée sur les éléments HTML <canvas>. Cette conformité permet à l'API de tirer parti de l'accélération matérielle graphique fournie par l'appareil.
WebGL est pris en charge par Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+, et Microsoft Edge build 10240+. Il est également nécessaire que le matériel de l'appareil utilisé prenne en charge ces fonctionnalités.
L'API WebGL 2 fournit la plupart des fonctionnalités de OpenGL ES 3.0. Elle est fournie via l'interface WebGL2RenderingContext.
L'élément <canvas> est également utilisé par l'API Canvas pour réaliser des graphismes en 2D sur des pages web.
WebGL 2 est une mise à jour majeure de WebGL et est fournie par l'interface WebGL2RenderingContext. Basée sur OpenGL ES 3.0, les nouvelles fonctionnalités incluent :
WebGLSampler),WebGLSync),WebGLQuery),WebGLTransformFeedback),Voir aussi le billet "WebGL 2 lands in Firefox" (en anglais) et webglsamples.org/WebGL2Samples pour plusieurs démos.
Guides et tutorielsDans la section qui suit, vous trouverez un ensemble de guide pour apprendre les concepts WebGL et de tutoriels pour des exercices guidés pas à pas et des exemples.
GuidesUn guide sur les variables, les tampons et autres types de données utilisées pour l'écriture de code WebGL.
Des conseils et suggestions pour vous aider à améliorer la qualité, la performance et la fiabilité de votre contenu WebGL.
Un guide sur l'utilisation des extensions WebGL.
Un guide pour commencer avec WebGL et découvrir les concepts principaux. Il s'agit d'un bon point de départ si vous n'avez jamais utilisé WebGL auparavant.
Cet exemple illustre une animation simple d'une forme avec une couleur. Cet article aborde l'adaptation aux facteurs de forme, une fonction pour construire des shaders à partir de plusieurs shaders, ainsi que les bases du dessin en WebGL.
Un ensemble d'exemples avec des explications concises qui montrent les concepts et possibilités offertes par WebGL. Les exemples sont triés selon le sujet et le niveau de difficulté. Cet article aborde le contexte de rendu WebGL, la programmation de shaders, les textures, la géométrie, les interactions avec l'utilisatrice ou l'utilisateur, etc.
Une explication détaillée sur les trois matrices principales généralement utilisées pour représenter une vue d'un objet 3D : les matrices de modèle, de vue et de projection.
Un guide expliquant la façon dont les matrices de transformation 3D fonctionnent et comment elles peuvent être utilisées sur le Web, pour les calculs WebGL ou les transformations CSS.
En plus du navigateur, il faut également que la carte graphique prenne en charge les fonctionnalités. Par exemple, la compression de texture S3 (S3TC) est uniquement disponible pour les tablettes basées sur Tegra. La plupart des navigateurs fournissent le contexte WebGL via webgl, mais les plus anciens utilisent experimental-webgl. WebGL 2 utilise quant à lui le nom de contexte webgl2.
Firefox fournit deux préférences pour contrôler les fonctionnalités de WebGL à des fins de tests :
webgl.min_capability_mode
Une propriété booléenne qui, lorsqu'elle vaut true, active un mode de compatibilité minimal. Dans ce mode, WebGL est configuré pour uniquement prendre en charge l'ensemble minimal de fonctionnalités requis par la spécification WebGL. Cela permet de s'assurer que le code WebGL fonctionnera sur n'importe quel appareil ou navigateur, quelles que soient ses capacités. Par défaut, elle vaut false.
webgl.disable_extensions
Une propriété booléenne qui, lorsqu'elle vaut true, désactive l'ensemble des extensions WebGL. Par défaut, elle vaut false.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4