Heim > Artikel > Web-Frontend > Einführung in WebGL: Erstellen Sie 3D-Grafikanwendungen mit JavaScript

Einführung in WebGL: Erstellen Sie 3D-Grafikanwendungen mit JavaScript

王林nach vorne: 2023-08-30 18:29:131326Durchsuche

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

WebGL (Web Graphics Library) ist eine JavaScript-API, mit der Entwickler interaktive 3D-Grafiken in einem Webbrowser erstellen und rendern können. Es schließt die Lücke zwischen der Programmiersprache JavaScript und der zugrunde liegenden Grafikhardware und ermöglicht die Erstellung immersiver und visuell beeindruckender Webanwendungen. In diesem Artikel erkunden wir die Grundlagen von WebGL und zeigen, wie man mit JavaScript eine einfache 3D-Grafikanwendung erstellt.

WebGL-Grundlagen

WebGL basiert auf dem OpenGL ES-Standard (Embedded Systems), der in der Spielebranche und anderen grafikintensiven Anwendungen weit verbreitet ist. Es nutzt die Leistung der GPU (Grafikverarbeitungseinheit) Ihres Computers, um komplexe Rendering-Aufgaben auszuführen, sodass Sie leistungsstarke 3D-Grafiken in einer Browserumgebung erstellen können.

Um WebGL verwenden zu können, müssen wir den WebGL-Kontext in ein HTML-Canvas-Element einbinden. Das Canvas-Element fungiert als Container zum Rendern von Grafiken. Hier ist ein Beispiel für die Einrichtung einer grundlegenden WebGL-Umgebung.

Beispiel

<!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>

Anleitung

Im obigen Code erstellen wir zunächst ein Canvas-Element mit der ID „myCanvas“. Anschließend verwenden wir JavaScript, um einen Verweis auf das Canvas-Element abzurufen und fordern den WebGL-Kontext an, indem wir die Methode getContext mit dem Parameter „webgl“ aufrufen. Wenn der Browser WebGL unterstützt, gibt die getContext-Methode ein WebGLRenderingContext-Objekt zurück, das wir in der gl-Variablen speichern können. Wenn WebGL nicht unterstützt wird, wird eine Warnmeldung angezeigt.

Rendern Sie 3D-Grafiken

Sobald wir den WebGL-Kontext haben, können wir mit dem Rendern von 3D-Grafiken auf der Leinwand beginnen. WebGL führt eine Reihe von OpenGL ES-Shader-Programmen auf der GPU aus, die die notwendigen Berechnungen durchführen, um die Scheitelpunkte und Pixel einer 3D-Szene zu transformieren und zu rendern.

Ein Shader-Programm ist eine Reihe von Anweisungen, die auf der GPU ausgeführt werden. In WebGL gibt es zwei Arten von Shader: Vertex-Shader und Fragment-Shader. Vertex-Shader verarbeiten jeden Scheitelpunkt eines 3D-Objekts und transformieren dessen Position, Farbe und andere Eigenschaften. Fragment-Shader hingegen bestimmen die Farbe jedes Pixels innerhalb der Geometrie.

Um ein einfaches 3D-Objekt zu rendern, müssen wir seine Geometrie definieren und das zu verwendende Shader-Programm angeben. Das folgende Beispiel zeigt, wie ein rotierender Würfel mithilfe von WebGL gerendert wird.

Beispiel

<!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>

Anleitung

Der oben gezeigte Code demonstriert die Grundstruktur eines WebGL-Programms. Definieren Sie zunächst den Vertex-Shader und den Fragment-Shader, die die Position und Farbe jedes Vertex bzw. Pixels steuern. Anschließend wird der Shader kompiliert und an das Shader-Programm angehängt.

Als nächstes definieren Sie die Geometrie, indem Sie ein Array von Scheitelpunktpositionen des Würfels erstellen. Erstellen Sie ein Vertex-Pufferobjekt (VBO) und füllen Sie es mit Vertex-Daten. Das Positionsattribut ist aktiviert und konfiguriert, um Scheitelpunktdaten aus einem Puffer zu lesen.

Legen Sie Transformationsmatrizen (Modellansicht und Projektion) fest, um die Position und Perspektive von 3D-Objekten zu steuern. Diese Matrizen werden mithilfe einheitlicher Variablen an den Shader übergeben.

Zum Schluss rendern Sie den Würfel, indem Sie die gl.drawArrays-Funktion mit den entsprechenden Parametern aufrufen, um den Rendering-Modus (z. B. Linie oder Linienschleife) und die Anzahl der zu zeichnenden Eckpunkte anzugeben.

Fazit

WebGL ist eine leistungsstarke API, die 3D-Grafiken ins Web bringt. Es ermöglicht Entwicklern, visuell beeindruckende interaktive Anwendungen zu erstellen und diese direkt im Browser auszuführen. In diesem Artikel haben wir die Grundlagen von WebGL vorgestellt und gezeigt, wie man mit JavaScript eine einfache 3D-Grafikanwendung erstellt.

Das obige ist der detaillierte Inhalt vonEinführung in WebGL: Erstellen Sie 3D-Grafikanwendungen mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Die 15 besten JavaScript-Kalender- und Veranstaltungskalender-Skripte für 2023Nächster Artikel：Die 15 besten JavaScript-Kalender- und Veranstaltungskalender-Skripte für 2023

In Verbindung stehende Artikel

Mehr sehen