From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/api/webgl_api/index.html | 303 ++++++++++++++++++++++++++++++++++ 1 file changed, 303 insertions(+) create mode 100644 files/fr/web/api/webgl_api/index.html (limited to 'files/fr/web/api/webgl_api/index.html') diff --git a/files/fr/web/api/webgl_api/index.html b/files/fr/web/api/webgl_api/index.html new file mode 100644 index 0000000000..27bb717381 --- /dev/null +++ b/files/fr/web/api/webgl_api/index.html @@ -0,0 +1,303 @@ +--- +title: 'L''API WebGL : graphismes 2D et 3D pour le web' +slug: Web/API/WebGL_API +tags: + - 3D + - API WebGL + - Avancé + - Graphiques + - Graphiques 3D + - Media + - Vue d'ensemble + - WebGL +translation_of: Web/API/WebGL_API +--- +
{{WebGLSidebar}}
+ +
+

WebGL (Bibliothèque de Graphismes Web) est une API JavaScript pour l'affichage de graphismes 2D et 3D dans n'importe quel navigateur web compatible sans utilisation de modules complémentaires. WebGl réalise cela en introduisant une API qui se conforme de façon très proche à OpenGL ES 2.0 et qui peut être utilisée dans les éléments canvas d'HTML5.

+
+ +

Le support pour WebGL est présent dans Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ and Internet Explorer 11+ ; toutefois, l'appareil de l'utilisateur doit aussi avoir le matériel qui supporte ces fonctionnalités.

+ +

L'élément {{HTMLElement("canvas")}} est aussi utilisé par Canvas 2D pour faire des graphismes 2D sur les pages web.

+ +

Référence

+ +

Interfaces standard

+ +
+ +
+ +

Extensions

+ +
+ +
+ +

Evènements

+ + + +

Constantes et types

+ + + +

WebGL 2

+ +

WebGL 2 est une mise à jour majeure de WebGL, qui est fournie à travers l'interface {{domxref("WebGL2RenderingContext")}}. Elle est basée sur OpenGL ES 3.0, et ses nouvelles fonctionnalités comprennent :

+ + + +

Voir aussi le post de blog "WebGL 2 lands in Firefox" et webglsamples.org/WebGL2Samples pour quelques démos.

+ +

Guides et tutoriels

+ +

Ci-dessous, vous pourrez trouver divers guides pour vous aider à apprendre les concepts WebGL, et des tutoriels qui proposent des leçons et des exemples pas-à-pas.

+ +

Guides

+ +
+
Données en WebGL
+
Un guide pour les variables, les tampons et autres types de données utilisés lors de l'écriture de code WebGL.
+
Meilleures pratiques WebGL
+
Des indications et des suggestions pour vous aider à améliore la qualité, les performances et la fiabilité de votre contenu WebGL.
+
Utilisation des extensions
+
Un guide pour l'utilisation des extensions WebGL.
+
+ +

Tutoriels

+ +
+
Tutoriel WebGL
+
Un guide pour les débutants sur les concepts essentiels de WebGL. Un bon endroit pour démarrer si vous n'avez pas d'expérience antérieure de WebGL.
+
+ +

Exemples

+ +
+
Un exemple de base d'animation WebGL 2D
+
Cet exemple montre l'animation simple d'une forme monochrome. Les sujets abordés sont l'adaptation aux différences de ratio d'aspect, une fonction pour construire des programmes de shader à partir d'ensembles de plusieurs shaders, et les bases du dessin dans WebGL.
+
+ +

Tutoriels avancés

+ +
+
Projection de vue de modèle WebGL
+
Une explication détaillée des trois matrices de base qui sont typiquement utilisées pour représenter une vue d'un objet 3D : les matrices de modèle, de vue et de projection.
+
Mathématiques matricielles pour le web
+
Un guide utile sur le fonctionnement des matrices de transformation 3D, qui peut être utilisé sur le web - à la fois pour les calculs WebGL et dans les transformations CSS3.
+
+ +

Ressources

+ + + +

Bibliothèques

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL')}}{{Spec2('WebGL')}}Définition. Basée sur OpenGL ES 2.0
{{SpecName('WebGL2')}}{{Spec2('WebGL2')}}Construite au-dessus de WebGL 1. Basée sur OpenGL ES 3.0.
{{SpecName('OpenGL ES 2.0')}}{{Spec2('OpenGL ES 2.0')}} 
{{SpecName('OpenGL ES 3.0')}}{{Spec2('OpenGL ES 3.0')}} 
+ +

Compatibilité des navigateurs

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Support de base9{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}11125.1
WebGL 256{{CompatNo}}{{CompatGeckoDesktop("51")}}{{CompatNo}}43{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChrome pour AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support de base25{{CompatVersionUnknown}}4{{CompatNo}}128.1
WebGL 2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Notes de compatibilité

+ +

En plus du navigateur, la GPU elle-même doit également prendre en charge la fonctionnalité. Ainsi, par exemple, S3 Texture Compression (S3TC) n'est disponible que sur les tablettes à base de Tegra. La plupart des navigateurs rendent le contexte WebGL disponible via le nom de contexte webgl, mais les plus anciens ont aussi besoin d'experimental-webgl. De plus, le prochain WebGL 2 sera entièrement rétrocompatible et comprendra le nom de contexte webgl2.

+ +

Notes Gecko

+ +

Débogage et test WebGL

+ +

À partir de Gecko 10.0 {{geckoRelease("10.0")}}, deux préférences sont disponibles pour vous permettre de contrôler les fonctionnalités de WebGL à des fins de test :

+ +
+
webgl.min_capability_mode
+
Propriété booléenne qui, lorsqu'elle est true, active un mode de possibilités minimales. Dans ce mode, WebGL est configuré pour prendre en charge uniquement le jeu de fonctionnalités minimal et les fonctionnalités requises par la spécification WebGL. Cela vous permet de vous assurer que votre code WebGL fonctionnera sur n'importe quel appareil ou navigateur, indépendamment de leurs possibilités. Elle est false par défaut.
+
webgl.disable_extensions
+
Propriété booléenne qui, lorsqu'elle est true, désactive toutes les extensions WebGL. Elle est false par défaut.
+
+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf