Maison > Article > interface Web > Introduction à WebGL : créer des applications graphiques 3D avec JavaScript

Introduction à WebGL : créer des applications graphiques 3D avec JavaScript

王林avant: 2023-08-30 18:29:131384parcourir

WebGL 简介：使用 JavaScript 构建 3D 图形应用程序

WebGL (Web Graphics Library) est une API JavaScript qui permet aux développeurs de créer et de restituer des graphiques 3D interactifs dans un navigateur Web. Il comble le fossé entre le langage de programmation JavaScript et le matériel graphique sous-jacent, permettant la création d'applications Web immersives et visuellement époustouflantes. Dans cet article, nous explorerons les bases de WebGL et montrerons comment créer une application graphique 3D simple à l'aide de JavaScript.

Bases de WebGL

WebGL est basé sur la norme OpenGL ES (Embedded Systems), largement utilisée dans l'industrie du jeu et d'autres applications gourmandes en graphiques. Il exploite la puissance du GPU (unité de traitement graphique) de votre ordinateur pour effectuer des tâches de rendu complexes, vous permettant de créer des graphiques 3D hautes performances dans un environnement de navigateur.

Pour commencer à utiliser WebGL, nous devons inclure le contexte WebGL dans un élément de canevas HTML. L'élément canvas agit comme un conteneur pour le rendu des graphiques. Voici un exemple de configuration d'un environnement WebGL de base.

Exemple

<!DOCTYPE html>
<html>
   <head>
      <title>WebGL Example</title>
      <style>
         body {
            margin: 0;
            overflow: hidden;
         }
         canvas {
            display: block;
         }
      </style>
   </head>
   <body>
      <canvas id="myCanvas"></canvas>
      <script>
         const canvas = document.getElementById("myCanvas");
         const gl = canvas.getContext("webgl");
         if (!gl) {
            alert("Unable to initialise WebGL. Your browser may not support it.");
         }
      </script>
   </body>
</html>

Instructions

Dans le code ci-dessus, nous créons d'abord un élément canvas avec l'identifiant "myCanvas". Nous utilisons ensuite JavaScript pour obtenir une référence à l'élément canvas et demandons le contexte WebGL en appelant la méthode getContext avec le paramètre "webgl". Si le navigateur prend en charge WebGL, la méthode getContext renverra un objet WebGLRenderingContext, que nous pourrons stocker dans la variable gl. Si WebGL n'est pas pris en charge, un message d'avertissement s'affiche.

Rendu des graphiques 3D

Une fois que nous avons le contexte WebGL, nous pouvons commencer à restituer des graphiques 3D sur le canevas. WebGL fonctionne en exécutant une série de programmes de shader OpenGL ES sur le GPU, qui effectuent les calculs nécessaires pour transformer et restituer les sommets et les pixels d'une scène 3D.

Un programme shader est un ensemble d'instructions qui s'exécutent sur le GPU. Il existe deux types de shaders dans WebGL : les vertex shaders et les fragment shaders. Les vertex shaders traitent chaque sommet d'un objet 3D, transformant sa position, sa couleur et d'autres propriétés. Les fragments shaders, quant à eux, déterminent la couleur de chaque pixel de la géométrie.

Pour restituer un objet 3D simple, nous devons définir sa géométrie et spécifier le programme de shader qui sera utilisé. L'exemple suivant montre comment restituer un cube rotatif à l'aide de WebGL.

Exemple

<!DOCTYPE html>
<html>
   <head>
      <title>WebGL Example</title>
      <style>
         body {
            margin: 0;
            overflow: hidden;
         }
         canvas {
            display: block;
         }
      </style>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix.js"></script>
   </head>
   <body>
      <canvas id="myCanvas"></canvas>
      <script>
         const canvas = document.getElementById("myCanvas");
         const gl = canvas.getContext("webgl");
         if (!gl) {
            alert("Unable to initialise WebGL. Your browser may not support it.");
         }

         // Define the vertex shader
         const vertexShaderSource = `
         attribute vec3 aPosition;
         uniform mat4 uModelViewMatrix;
         uniform mat4 uProjectionMatrix;

         void main() {
            gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
         }
         `;

         // Define the fragment shader
         const fragmentShaderSource = `
         precision mediump float;

         void main() {
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
         }
         `;

         // Create the vertex shader
         const vertexShader = gl.createShader(gl.VERTEX_SHADER);
         gl.shaderSource(vertexShader, vertexShaderSource);
         gl.compileShader(vertexShader);

         // Create the fragment shader
         const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
         gl.shaderSource(fragmentShader, fragmentShaderSource);
         gl.compileShader(fragmentShader);

         // Create the shader program
         const shaderProgram = gl.createProgram();
         gl.attachShader(shaderProgram, vertexShader);
         gl.attachShader(shaderProgram, fragmentShader);
         gl.linkProgram(shaderProgram);
         gl.useProgram(shaderProgram);

         // Set up the geometry
         const positions = [
            -1.0, -1.0, -1.0,
            1.0, -1.0, -1.0,
            1.0, 1.0, -1.0,
            -1.0, 1.0, -1.0,
            -1.0, -1.0, 1.0,
            1.0, -1.0, 1.0,
            1.0, 1.0, 1.0,
            -1.0, 1.0, 1.0
         ];
         const vertexBuffer = gl.createBuffer();
         gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
         const positionAttributeLocation = gl.getAttribLocation(shaderProgram, "aPosition");
         gl.enableVertexAttribArray(positionAttributeLocation);
         gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

         // Set up the transformation matrices
         const modelViewMatrixLocation = gl.getUniformLocation(shaderProgram, "uModelViewMatrix");
         const projectionMatrixLocation = gl.getUniformLocation(shaderProgram, "uProjectionMatrix");
         const modelViewMatrix = mat4.create();
         const projectionMatrix = mat4.create();
         mat4.translate(modelViewMatrix, modelViewMatrix, [0.0, 0.0, -6.0]);
         mat4.perspective(projectionMatrix, Math.PI / 4, canvas.width / canvas.height, 0.1, 100.0);
         gl.uniformMatrix4fv(modelViewMatrixLocation, false, modelViewMatrix);
         gl.uniformMatrix4fv(projectionMatrixLocation, false, projectionMatrix);

         // Render the cube
         gl.drawArrays(gl.LINE_LOOP, 0, 4);
         gl.drawArrays(gl.LINE_LOOP, 4, 4);
         gl.drawArrays(gl.LINES, 0, 2);
         gl.drawArrays(gl.LINES, 2, 2);
         gl.drawArrays(gl.LINES, 4, 2);
         gl.drawArrays(gl.LINES, 6, 2);
      </script>
   </body>
</html>

Instructions

Le code ci-dessus démontre la structure de base d'un programme WebGL. Définissez d’abord le vertex shader et le fragment shader, qui contrôlent respectivement la position et la couleur de chaque sommet et pixel. Le shader est ensuite compilé et attaché au programme shader.

Ensuite, définissez la géométrie en créant un tableau de positions de sommets du cube. Créez un objet tampon de sommets (VBO) et remplissez-le avec des données de sommets. L'attribut de position est activé et configuré pour lire les données de sommet à partir d'un tampon.

Définissez des matrices de transformation (vue du modèle et projection) pour contrôler la position et la perspective des objets 3D. Ces matrices sont transmises au shader en utilisant des variables uniformes.

Enfin, rendez le cube en appelant la fonction gl.drawArrays avec les paramètres appropriés pour spécifier le mode de rendu (par exemple ligne ou boucle de ligne) et le nombre de sommets à dessiner.

Conclusion

WebGL est une API puissante qui apporte des graphiques 3D sur le Web. Il permet aux développeurs de créer des applications interactives visuellement époustouflantes et de les exécuter directement dans le navigateur. Dans cet article, nous avons présenté les bases de WebGL et démontré comment créer une application graphique 3D simple à l'aide de JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript html 循环对象 canvas 嵌入式系统 webgl

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Les 15 meilleurs scripts de calendrier JavaScript et de calendrier d'événements pour 2023Article suivant：Les 15 meilleurs scripts de calendrier JavaScript et de calendrier d'événements pour 2023

Articles Liés

Voir plus