Commencer Avec WebGL - Référence Web API | MDN

Home » Apprendre Webgl » Commencer Avec WebGL - Référence Web API | MDN

Maybe your like

  • Skip to main content
  • Skip to search

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

Commencer avec WebGL
  • Suivant
WebGL permet à un contenu web d'utiliser l'API basée sur OpenGL ES 2.0 pour effectuer un rendu 2D et 3D dans un canvas dans les navigateurs qui le supportent, sans utilisation d'un module complémentaire. Les programmes WebGL sont constitués de code de contrôle écrit en JavaScript, et le code d'ombrage (GLSL) est exécuté dans l'Unité de Traitement Graphique (GPU) de l'ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML, et composés d'autres parties de la page ou de l'arrière-plan de la page.

Cet article va vous donner une introduction aux bases de l'utilisation de WebGL. Il est supposé que vous avez déjà une compréhension des mathématiques impliquées dans les graphismes 3D, et cet article ne prétend pas vous enseigner les concepts des graphismes 3D par eux-mêmes.

Les exemples de code de ce tutoriel peuvent aussi être trouvés dans le webgl-examples GitHub repository.

Dans cet article

  • Préparation au rendu 3D
  • Voir aussi

Préparation au rendu 3D

La première chose dont vous avez besoin pour utiliser WebGL pour faire un rendu est un canvas. Le fragment d'HTML ci-dessous déclare un canvas dans lequel notre exemple se dessinera.

html<body> <canvas id="glCanvas" width="640" height="480"></canvas> </body>

Préparation du contexte WebGL

La fonction main() dans notre code JavaScript est appelée quand notre script est chargé. Son but est de créer le contexte WebGL et de commencer à rendre du contenu.

jsmain(); // // Début ici // function main() { const canvas = document.querySelector("#glCanvas"); // Initialisation du contexte WebGL const gl = canvas.getContext("webgl"); // Continuer seulement si WebGL est disponible et fonctionnel if (!gl) { alert( "Impossible d'initialiser WebGL. Votre navigateur ou votre machine peut ne pas le supporter.", ); return; } // Définir la couleur d'effacement comme étant le noir, complètement opaque gl.clearColor(0.0, 0.0, 0.0, 1.0); // Effacer le tampon de couleur avec la couleur d'effacement spécifiée gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); }

La première chose que nous faisons ici est d'obtenir une référence au canvas, en l'affectant à une variable dénommée canvas.

Une fois que nous avons le canvas, nous essayons de lui obtenir un WebGLRenderingContext, en appelant getContext et en lui passant la chaîne "webgl". Si le navigateur ne supporte pas WebGL, getContext retournera null, auquel cas nous afficherons un message pour l'utilisateur, et nous sortirons.

Si le contexte est initialisé avec succès, la variable gl sera notre référence à celui-ci. Dans ce cas, nous définissons la couleur d'effacement comme étant le noir, et nous effaçons le contexte avec cette couleur (redessin du canvas avec la couleur d'arrière-plan).

A ce stade, votre code est suffisant pour que le contexte WebGL puisse s'initialiser avec succès, et vous devriez vous retrouver avec une grande boîte noire et vide, prête à - et attendant de - recevoir du contenu.

Voir le code complet | Ouvrir cette démo dans une nouvelle page

Voir aussi

  • An introduction to WebGL : écrite par Luz Caballero, publiée sur dev.opera.com. Cet article traite de ce qu'est WebGL, explique comment WebGL fonctionne (incluant le concept de pipeline de rendu), et présente quelques bibliothèques WebGL.
  • WebGL Fundamentals
  • An intro to modern OpenGL : une série de bons articles sur OpenGL écrits par Joe Groff, fournissant une introduction claire à OpenGL, depuis son histoire jusqu'au concept important de pipeline de graphismes, qui comprend aussi quelques exemples montrant comment OpenGL fonctionne. Si vous n'avez aucune idée de ce qu'est OpenGL, c'est un bon endroit pour commencer.
  • Suivant

Help improve MDN

Cette page vous a-t-elle été utile ? Yes No Learn how to contribute

Cette page a été modifiée le 17 déc. 2024 par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content Filter sidebar
  1. WebGL : graphismes 2D et 3D pour le Web
  2. Guides
    1. WebGL constants
    2. Types WebGL
    3. WebGL model view projection
    4. WebGL best practices
    5. WebGL par l'exemple
    6. A basic 2D WebGL animation example
    7. Compressed texture formats
    8. Les données en WebGL
    9. Matrix math for the web
    10. Using WebGL extensions
  3. Tutoriel
    1. Tutoriel WebGL
    2. Commencer avec WebGL
    3. Ajouter du contenu à WebGL
    4. Ajouter des couleurs avec les nuanceurs
    5. Animer des objets avec WebGL
    6. Créer des objets 3D avec WebGL
    7. Utilisation des textures en WebGL
    8. Éclairage en WebGL
    9. Animation de textures en WebGL
  4. Interfaces
    1. WebGLRenderingContext
    2. WebGLBuffer
    3. WebGLFramebuffer
    4. WebGLRenderbuffer
    5. WebGLObject Expérimental
    6. WebGLProgram
    7. WebGLShader
    8. WebGLTexture
    9. WebGLUniformLocation
    10. WebGLActiveInfo
    11. WebGLShaderPrecisionFormat
    12. WebGLContextEvent
    13. WebGLQuery
    14. WebGLSampler
    15. WebGLSync
    16. WebGLTransformFeedback
    17. WebGLVertexArrayObject
    18. WebGL2RenderingContext
    19. WEBGL_compressed_texture_s3tc
    20. WEBGL_compressed_texture_s3tc_srgb
    21. WEBGL_compressed_texture_etc1
    22. WEBGL_compressed_texture_pvrtc
    23. WEBGL_debug_renderer_info
    24. WEBGL_debug_shaders
    25. WEBGL_depth_texture
    26. OES_element_index_uint
    27. EXT_frag_depth
    28. WEBGL_lose_context
    29. EXT_texture_filter_anisotropic
    30. EXT_sRGB
    31. OES_standard_derivatives
    32. OES_texture_float
    33. WEBGL_draw_buffers
    34. OES_texture_float_linear
    35. EXT_shader_texture_lod
    36. OES_texture_half_float
    37. OES_texture_half_float_linear
    38. WEBGL_color_buffer_float
    39. EXT_color_buffer_half_float
    40. OES_vertex_array_object
    41. ANGLE_instanced_arrays
    42. EXT_blend_minmax
    43. EXT_disjoint_timer_query
    44. OES_draw_buffers_indexed
  5. Évènements
    1. HTMLCanvasElement: webglcontextlost
    2. HTMLCanvasElement: webglcontextrestored
    3. HTMLCanvasElement: webglcontextcreationerror

Tag » Apprendre Webgl