Web 3D - WebGL, WebGPU und Frameworks kurz erklärt

In diesem Artikel möchten wir eine kurze Übersicht über WebGL und den Nachfolger WebGPU geben. Mit beiden Technologien lassen sich hardwarebeschleunigte 2D und 3D Echtzeit-Grafikanwendungen wie Spiele, Konfiguratoren, geografische Karten etc. im Browser realisieren. Hardwarebeschleunigung bedeutet hier die direkte Nutzung des Grafikprozessors (GPU). GPUs sind für die parallele Verarbeitung von großen Datenmengen ausgelegt. Sie verfügen über viele einfache Prozessoren (Shader-Einheiten), die gleichzeitig verschiedene Berechnungen durchführen können.

WebGL

WebGL ist eine von der Khronos Group entwickelte API für 2D- und 3D-Grafikrendering in Browsern.

• WebGL Version 1 - die ursprüngliche Version - wurde im März 2011 veröffentlicht und basiert auf OpenGL ES 2.0
• WebGL Version 2 - (Februar 2017) ist von OpenGL ES 3.0 abgeleitet. Alle aktuellen Browser unterstützen diese Version.

OpenGL ES (OpenGL for Embedded Systems) sind spezielle Versionen der OpenGL-Spezifikation, optimiert für den Einsatz in Mobilgeräten, Spielekonsolen und anderen eingebetteten Geräten.

WebGPU

WebGPU, eine leistungsstarke Grafikschnittstelle, wird die Nachfolge von WebGL antreten. Sie wurde speziell für die Nutzung im Web konzipiert ist und von den Schnittstellen Vulkan (Khronos), Metal (Apple) und Direct3D 12 (Microsoft) abgeleitet. Eine Übersicht der aktuellen Browserunterstützung ist auf caniuse abrufbar.

WebGPU bietet neben Geschwindigkeitsverbesserungen erstmals die Möglichkeit, Compute-Shader in Browsern auszuführen. Compute-Shader sind spezielle Programme, die auf Grafikprozessoren ausgeführt werden und zur Durchführung von allgemeinen Berechnungen verwendet werden, die nicht unbedingt mit der Grafikdarstellung zusammenhängen. Interessant für Anwendungen wie physikalische Simulationen, Bild- und Signalverarbeitung, maschinelles Lernen etc.

Frameworks

WebGL und WebGPU sind Low-Level-Grafik-APIs. Da diese komplex sind, werden oft Frameworks eingesetzt, die die Entwicklung vereinfachen und eine höhere Abstraktionsebene bieten, indem sie nützliche Funktionen und Tools bereitstellen.

Das sind unter anderem:

• Szenenmanagement: Eine hierarchische Datenstruktur, die die Beziehungen zwischen verschiedenen Objekten in einer Szene darstellt.
• Materialien und Texturen: Definition von Materialien und das Aufbringen von Texturen auf Objekte, um deren Aussehen zu gestalten. Dies kann von einfachen Farben bis hin zu komplexen Shadern reichen, die realistische Oberflächeneffekte simulieren.
• Beleuchtung: Frameworks bieten Mechanismen, um Lichtquellen zu definieren und zu steuern, wie diese Lichter mit den Objekten in der Szene interagieren, einschließlich der Berechnung von Schattenwurf und Lichtreflexionen.
• Kamera-Systeme: Erstellung und Verwaltung von Kameras, einschließlich Positionierung, Ausrichtung und Bewegung.
• Importer: Um die Verwendung von in externen Programmen erstellten 3D-Modellen und -Texturen zu erleichtern, bieten Frameworks Importer für verschiedene Dateiformate.

Zu den bekanntesten Frameworks auf dem Gebiet zählen Babylon.js und Three.js.

glTF Format

glTF (GL Transmission Format) auch als "JPEG of 3D" bezeichnet, ist ein offenes Dateiformat für die Übertragung und Speicherung von 3D-Modellen und Texturen. Es wird von der Khronos Group entwickelt und ist zu einem Standard für 3D-Inhalte im Web geworden.

Das Format kann in JSON/ASCII (.gltf) und Binärdateien (.glb) gespeichert werden und unterstützt Erweiterungen wie PBR für realistische Materialien und Beleuchtung sowie Draco-Kompression für effiziente Geometrie- und Textur-Komprimierung.

glTF-Blender-IO ist ein standardmäßig in Blender enthaltenes Addon, das das Importieren und Exportieren von 3D-Modellen in glTF ermöglicht. Es wird unter dem Dach von Khronos entwickelt und ist die umfangreichste Implementierung für das Arbeiten mit dem Format.

Beispiel

Hier zeigen wir ein WebGL-Minimalbeispiel mit Babylon.js. Einer Szene werden eine ArcRotate-Kamera, ein Punkt-Licht und Geometrie aus einer glTF-Datei hinzugefügt.

createScene = function () {
  // neue Szene erstellen
  const scene = new BABYLON.Scene(engine);

  // Wir erstellen eine ArcRotate-Kamera mit alpha, beta, radius. Ziel: Szenen-Mittelpunkt (0,0,0)
  const camera = new BABYLON.ArcRotateCamera("Camera", 0.9, 0.8, 1.8, BABYLON.Vector3.Zero(), scene);
  camera.wheelPrecision = 100; // Zoom-Sensitivität des Mausrades
  camera.minZ = 0.001; // Clipping Plane
  camera.attachControl(canvas); // Kamerasteuerung an das canvas-Element binden

  // Punkt-Lichtquelle mit Position erzeugen
  const light = new BABYLON.PointLight("light", new BABYLON.Vector3(0, 1, 0), scene);
  light.intensity = 4; // Intensivität der Lichtquelle

  // Die aus Blender exportierte glTF Geometrie laden
  const loader = new BABYLON.SceneLoader.Append("./", "logo.glb", scene);

  return scene;
};

const canvas = document.getElementById("renderCanvas"); // canvas-Element
const engine = new BABYLON.Engine(canvas); // Babylon.js
const scene = createScene(); // Szene erstellen - siehe oben

// RenderLoop: Zeichnet die Szene ständig neu.
engine.runRenderLoop(function () {
  scene.render();
});

// Passt die Ansicht an die Größe des canvas-Elements an
window.addEventListener("resize", function () {
  engine.resize();
});

Das war's auch schon! 🤓 Hier das fertige Beispiel.

In unserer Demo gibt es eine Skybox als Hintergrund, ein HDR-Environment zur zusätzlichen Beleuchtung, Schatten und einige Post-Effekte wie Tonemapping.

Natürlich haben wir hier nur an der Oberfläche gekratzt. Wenn ihr Fragen oder Anregungen zu diesem Beitrag habt, schreibt uns an: office@fatvalley.at !