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:131379Durchsuche
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!
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse