Webentwicklung: WebGL-Bibliotheken für ein interaktives 3D-Web
Die Bibliotheken Three.js und Babylon.js enthalten Werkzeuge, um dreidimensionale Szenen im Browser einfacher umzusetzen.
Um das Web dreidimensional erlebbar zu machen, braucht es moderne Browsertechniken. So beherrscht das svg
-Element Vektorgrafiken und mit dem canvas
-Element sind Pixelgrafiken umsetzbar. Außerdem erlaubt das canvas
-Element das Zeichnen von 3D-Grafiken. Solche nativen 3D-Elemente eröffnen weitere neue Möglichkeiten: Operationen wie Drehen, Zoomen und Verschieben erzeugen den Eindruck, dass Betrachter einer 3D-Szene tatsächlich damit interagieren können. Immersive User Experience fasst dieses Eintauchen in eine künstliche Welt zusammen.
Derzeitige Browsertechniken enthalten Elemente, die zusammengefügt die User Experience ausmachen: das Erzeugen von Elementen, deren Oberflächengestaltung, Interaktionsmöglichkeiten, Beleuchtung und Kameraführung. Die Techniken kommen vor allem bei Produktpräsentationen und im E-Commerce-Bereich zum Einsatz. Aber auch Browserspiele stützen sich auf diese Schnittstellen.
Die Web Graphics Library (WebGL) ist seit vielen Jahren fester Teil der Browserschnittstellen und die Basis für 3D-Objekte. Technische Grundlage einer 3D-Applikation im Browser ist das HTML-Canvas-Element, das die Zeichenfläche bildet. Es verfügt über unterschiedliche Kontexttypen: den 2D-Kontext für das Zeichnen zweidimensionaler Grafiken und mehrere 3D-Kontexte wie die JavaScript-APIs WebGL und WebGPU zum Rendern von 3D-Inhalten. WebGL basiert auf der Spezifikation OpenGL ES 2.0. Daher ist die Schnittstelle portabel und lässt sich auf viele verschiedene Geräte übertragen.
URL dieses Artikels:
https://www.heise.de/-9332560
Links in diesem Artikel:
[1] https://www.heise.de/ratgeber/Kirby-4-vs-WordPress-Was-das-flexible-CMS-besser-macht-9642526.html
[2] https://www.heise.de/hintergrund/Webentwicklung-Acht-Fullstack-Frameworks-im-Ueberblick-9622842.html
[3] https://www.heise.de/ratgeber/Webentwicklung-Neuronale-Netze-mit-JavaScript-im-Browser-trainieren-9594750.html
[4] https://www.heise.de/hintergrund/Programmieren-Elm-als-JavaScript-Alternative-in-der-Webentwicklung-9353915.html
[5] https://www.heise.de/hintergrund/Webentwicklung-WebGL-Bibliotheken-fuer-ein-interaktives-3D-Web-9332560.html
[6] https://www.heise.de/ratgeber/Webentwicklung-Kalender-in-eine-Website-integrieren-praktische-Moeglichkeiten-9311173.html
[7] https://www.heise.de/hintergrund/Webentwicklung-Fullstack-Anwendungen-mit-dem-Next-js-App-Router-9231420.html
[8] https://www.heise.de/hintergrund/Webentwicklung-Die-neue-Generation-JavaScript-Metaframeworks-9207984.html
[9] https://www.heise.de/ratgeber/WebAssembly-Flinkeren-Code-fuer-den-Browser-produzieren-9159159.html
[10] https://www.heise.de/ratgeber/Webentwicklung-Virtual-Reality-mit-WebXR-in-den-Browser-holen-9065192.html
Copyright © 2023 Heise Medien