files/fr/web/api/webgl_api/tutorial/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

---
title: Tutoriel WebGL
slug: Web/API/WebGL_API/Tutorial
tags:
  - API WebGL
  - Tutoriel
  - Vue d'ensemble
  - WebGL
translation_of: Web/API/WebGL_API/Tutorial
---
<div>{{WebGLSidebar}}</div>

<div class="summary">
<p><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> permet au contenu web d'utiliser une API basée sur <a class="external" href="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 pour effectuer des rendus 3D dans un {{HTMLElement("canvas")}} HTML dans les navigateurs qui le supportent, sans avoir recours à des modules complémentaires. Les programmes WebGL sont constitués de code de contrôle rédigé en JavaScript, et de code d'effets spéciaux (code shader) qui est exécuté sur l'Unité de Traitement Graphique (GPU) d'un ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML et composés avec d'autres parties de la page ou du fond de la page.</p>
</div>

<p><span class="seoSummary">Ce tutoriel décrit comment utiliser l'élément <code>&lt;canvas&gt;</code> pour dessiner des graphiques WebGL, en commençant par les bases. Les exemples suivants devraient vous donner des idées de ce que vous pouvez faire avec WebGL et vont vous fournir des fragments de code qui pourraient vous aider à construire votre propre contenu.</span></p>

<h2 id="Avant_que_vous_ne_commenciez">Avant que vous ne commenciez</h2>

<p>L'utilisation de l'élément <code>&lt;canvas&gt;</code> n'est pas très difficile, mais vous avez besoin d'une compréhension de base de l'<a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> et du <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. L'élément <code>&lt;canvas&gt;</code> et WebGL ne sont pas supportés par certains anciens navigateurs, mais ils sont supportés dans les versions récentes de tous les principaux navigateurs. Pour dessiner des graphiques sur le canevas, on utilise un objet de contexte Javascript, qui crée des graphiques à la volée.</p>

<h2 id="Dans_ce_tutoriel">Dans ce tutoriel</h2>

<dl>
 <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Commencer_avec_WebGL">Commencer avec WebGL</a></dt>
 <dd>Comment mettre en place un contexte WebGL.</dd>
 <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL">Ajouter du contenu à WebGL</a></dt>
 <dd>Comment faire un rendu simple de figures planes avec WebGL.</dd>
 <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Ajouter_des_couleurs_avec_les_shaders">Ajouter des couleurs avec les nuanceurs</a></dt>
 <dd>Démontre comment ajouter de la couleur aux formes avec des nuanceurs.</dd>
 <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Animer_des_objets_avec_WebGL">Animer des objets avec WebGL</a></dt>
 <dd>Montre comment tourner et déplacer des objets pour créer des animations simples.</dd>
 <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Creer_des_objets_3D_avec_WebGL">Créer des objets 3D avec WebGL</a></dt>
 <dd>Montre comment créer et animer un objet 3D (dans ce cas, un cube).</dd>
 <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_WebGL">Utilisation des textures dans WebGL</a></dt>
 <dd>Démontrer comment appliquer des textures sur les faces d'un objet.</dd>
 <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Eclairage_en_WebGL"> Éclairage en WebGL</a></dt>
 <dd>Comment simuler des effets d'illumination dans votre contexte WebGL.</dd>
 <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Animation_de_textures_en_WebGL">Animation de textures en WebGL</a></dt>
 <dd>Montre comment animer des textures ; dans ce cas, en appliquant une vidéo Ogg sur les faces d'un cube en rotation.</dd>
</dl>