Abstract

Der Schwerpunkt dieses Papers liegt auf dem derzeitigen wissenschaftlichen Stand der Integration von 3D-Webtechnologien zur Unterstützung von 3D-Design im Web. Moderne Technologien wie WebGL, Three.js und React Three Fiber ermöglichen die Entwicklung interaktiver, dreidimensionaler Inhalte direkt im Browser. Diese Fortschritte eröffnen vielseitige Anwendungsbereiche, von E-Commerce und E-Learning bis hin zu Datenvisualisierung und virtuellen Rekonstruktionen. Die Technologien bieten Chancen für immersive Nutzer*innenerlebnisse, innovative Geschäftsmodelle und die Verbesserung komplexer Datenvisualisierungen. Gleichzeitig stellen Performance-Herausforderungen, Datenschutzbedenken und Aspekte der Barrierefreiheit wesentliche Hürden dar. Dennoch wird sehr wahrscheinlich die 3D-Implementierung zukünftig von derzeit aufstrebenden IT-Technologien maßgeblich beeinflusst.

Einleitung

Ursprünglich war das Web-Design darauf ausgelegt, auf statischen Webseiten Informationen zu vermitteln. Diese frühen Webseiten bestanden aus einfachem Text, begleitet von Bildern und Links, die es den Nutzerinnen ermöglichten, durch das Internet zu navigieren. Doch mit der rasanten Entwicklung der Webtechnologien hat sich das Web von einem Informationsmedium zu einer dynamischen, interaktiven Plattform gewandelt, die weit über bloße Textdarstellung hinausgeht. Heute ist das Web ein unverzichtbares Werkzeug für soziale Interaktion, E-Commerce, Bildung und Unterhaltung – und es wächst weiterhin in Umfang und Komplexität. Eine der aufregendsten und vielversprechendsten Entwicklungen in diesem Zusammenhang ist die Integration von 3D-Grafiken in das Web. 3D-Technologien waren früher ausschließlich maßgeschneiderten Softwarelösungen oder spezialisierter Hardware vorbehalten, die für professionelle Anwendungen wie Computerspiele, Animationen oder Simulationen genutzt wurden. Doch in den letzten Jahren hat sich eine bemerkenswerte Veränderung vollzogen: 3D-Grafiken sind zunehmend zugänglich geworden und werden nun auch im Web integriert. Dies eröffnet völlig neue Möglichkeiten für interaktive Erlebnisse, die den Nutzerinnen eine immersive, visuelle und funktionale Dimension bieten. Das wäre mit herkömmlichen 2D-Webseiten nicht realisierbar (Potenziani et al., 2018).

Mit diesen neuen Möglichkeiten ist die 3D-Gestaltung im Web, speziell für den digitalen Marketingauftritt, zunehmend ein wichtiger Faktor. Immersive und interaktive Nutzer*innenerlebnisse können die Kundenbindung stärken, die Markenwahrnehmung verbessern und letztlich den Unternehmen ermöglichen, sich von Wettbewerbern abzuheben (Griffin, 2024).

Angesichts der wachsenden Bedeutung ist es entscheidend, die Herausforderungen und Chancen der Integration von 3D-Grafiken ins Web zu untersuchen. Einen Blick auf etablierte 3D-Webtechnologien zu werfen. Den Überblick zu schaffen, in welchen Anwendungsbereichen die 3D-Integration stattfindet und welche Trends die 3D-Integration zukünftig maßgeblich verändern werden. Diese Punkte stehen im Mittelpunkt dieses Papers. Das Paper wird sich daher anderen immersiven Technologien, wie z.B. AR/VR nicht widmen.

3D-Webtechnologien

WebGL, wie von der Khronos Group definiert, ist eine auf OpenGL ES 2.0 basierende API, die als Low-Level-Schnittstelle für hardwarebeschleunigte 3D-Grafikdarstellung im Browser dient (Dean & Jeff, 2024). Mit OpenGL ES 2.0 wird die Standard-API von OpenGL so adaptiert, dass auch Mobiltelefone und Tablets mit limitierten Arbeitsspeicher diese nutzen können (Evans et al., 2014). WebGL integriert sich nahtlos in das HTML-Canvas-Element und ermöglicht flexibles Echtzeit-Rendering. Entwickler*innen profitieren von einer unmittelbaren Rendering-Umgebung (Dean & Jeff, 2024). Der Standard wird daher primär in Zusammenhang mit 3D-Effekten, allerdings mit der Verwendung optimierter Arbeitsabläufe in der 2D-Version, verwendet (Hristov & Petkov, 2019). Allgemein richtet sich die 3D-Entwicklung mit WebGL an Nutzer*innen moderner Hardware und aktueller Browser sowie kreative Entwickler*innen. Trotz der komplexen Low-Level-API, die ursprünglichen erfahrenen Programmierer*innen vorbehalten war, soll 3D-Technologie für ein breites Publikum zugänglich werden (Parisi, 2012).

A.    Three.js (high-level API)

Eine weit verbreitete JavaScript-Bibliothek, die auf WebGL basiert und die Erstellung von 3D-Grafiken im Browser ohne Plugins ermöglicht (Almansoury et al., 2020; Danchilla, 2012; Panchal et al., 2022). Sie abstrahiert die komplexen, niedrigstufigen API-Aufrufe von WebGL und macht die Entwicklung von 3D-Inhalten dadurch einfacher und produktiver. Mit Three.js können Entwickler*innen Kameras, Objekte und Beleuchtungsmodelle leicht erstellen und verwenden (Danchilla, 2012). Die Bibliothek wird häufig für die Visualisierung von Daten, die Erstellung von 3D-Modellen und die Entwicklung von virtuellen Touren verwendet (Panchal et al., 2022; Yuniarti et al., 2015). Sie bietet eine hohe Flexibilität und kann auch in Kombination mit anderen Technologien wie WebXR für immersive VR-Erlebnisse genutzt werden (Baruah, 2021).

B.    React Three Fiber

Primär bezeichnet sich React-three-fiber als ein „React renderer for three.js.“ (Introduction – React Three Fiber, o. J.), da es die Funktionalität von Three.js in die React-Welt integriert (Introduction – React Three Fiber, o. J.). Die Bibliothek fungiert dabei als Schnittstelle zwischen React und der 3D-Grafik-Engine Three.js, indem es ermöglicht, 3D-Szenen und Animationen in der deklarativen Syntax von React zu beschreiben. Dies macht den Entwicklungsprozess intuitiver und verbessert die Wartbarkeit des Codes. React Three Fiber eignet sich besonders für Anwendungen wie interaktive Visualisierungen, Spiele oder AR/VR-Projekte, da es sowohl die Nutzung bestehender React-Werkzeuge erlaubt, als auch die Performance für grafikintensive Aufgaben optimiert​ (Crafting 3D Experiences with React Three Fiber, 2023; Ikechi, 2020; Mathews, 2021).

C.   Weitere Technologien

3D-Webtechnologien ermöglichen die Darstellung interaktiver, dreidimensionaler Inhalte direkt im Browser, ohne zusätzliche Software installieren zu müssen. Zu den zentralen Technologien gehören WebGL, sowie darauf aufbauende High-Level-Bibliotheken wie Three.js und React Three Fiber (bildet Brücke zu Three.js) für z.B. React, die die Entwicklung vereinfachen und erweitern. Im Folgenden wird besonders auf diese Technologien eingegangen, beginnend mit WebGL als fundamentale Basis.

Herausforderungen

Wie in der Einleitung dargestellt, war das Web ursprünglich auf reine Wissensvermittlung ausgelegt, mit einfachen Texten und Bildern – 3D spielte dabei keine Rolle. Mit der heutigen Integration von 3D-Technologien entstehen jedoch neue Herausforderungen, die die nachfolgenden Kernbereiche betreffen:

A.    Performance

Die Performance von 3D-Daten im Web wird durch die Größe und Komplexität der Modelle sowie durch die begrenzte Rechenleistung und Speicherkapazität von Webbrowsern beeinflusst. Auch die Begrenzungen von Systemressourcen und der Umgang mit unterschiedlichen Eingabemethoden stellen Probleme dar, die negativ auf die Effizienz einwirken können (Potenziani et al., 2018).

B.    Privacy

3D-Webumgebungen bedeuten für die Wahrung der Privatsphäre neue Herausforderungen, da oft in Echtzeit persönliche Daten gesammelt werden, etwa durch Sensoren und Bewegungstracking-Technologien, die für immersive Erlebnisse notwendig sind. Diese Technologien können unbeabsichtigt private Informationen preisgeben, was Bedenken hinsichtlich des Datenschutzes aufwirft (Vilk et al., 2015).

C.   Usability and Accessibility

Das Hauptproblem bei Web 3D-Anwendungen liegt darin, dass die Benutzer*inneninteraktion oft komplex ist und es schwierig sein kann, alle Nutzergruppen zu berücksichtigen. Anwendungen wie Second Life erfordern eine intuitive Steuerung in einer virtuellen Welt, aber die Nutzung herkömmlicher Eingabegeräte wie Maus und Tastatur macht dies oft kompliziert. Besonders für Menschen, die mit solchen 3D-Interfaces nicht vertraut sind, kann das eine große Hürde darstellen (Kelle & Crespo García, 2007).

Die Barrierefreiheit ist ebenfalls ein herausforderndes Thema. Viele Web 3D-Anwendungen setzen stark auf visuelle Elemente und Interaktionen, die für Menschen mit Behinderungen, insbesondere für Blinde oder Gehörlose, schwer zugänglich sind. Daher ist es wichtig, Plattformen so zu gestalten, dass sie für alle Benutzer*innen, unabhängig von ihren Fähigkeiten, gut nutzbar sind (Kelle & Crespo García, 2007).

Chancen

Trotz aller Herausforderungen eröffnet die Implementierung von 3D-Technologien im Web zahlreiche Möglichkeiten für verschiedene Anwendungen. Durch die Nutzung von Technologien wie WebGL und JavaScript können komplexe 3D-Umgebungen direkt in Webbrowsern dargestellt werden, ohne dass zusätzliche Software installiert werden muss. Diese Ansätze fördern die Interaktivität und Immersion, sei es in virtuellen Stadtmodellen für urbane Analysen, in digitalen Zwillingen zur Verwaltung von Infrastrukturen oder für Bildungszwecke durch interaktive Simulationen. Besonders im Geodatenbereich erlauben solche Plattformen eine effizientere Entscheidungsfindung, indem sie Echtzeit-Visualisierungen und datenreiche Analysen kombinieren (La Guardia et al., 2022).

Neben der Förderung visueller Anreize und Nutzer*inneninteraktivität können 3D-Features komplexe Datenansichten erleichtern, die über herkömmliche 2D-Darstellungen hinausgehen. Damit eröffnen sie neue Potenziale in Bereichen wie eLearning, eCommerce oder Datenvisualisierung (Bochicchio et al., 2011).

Insbesondere der Sektor eCommerce profitiert von der Technik, da Produkte realistischer präsentiert und Benutzer*innen dynamische Interaktionen ermöglicht werden können. Kund*innen können Produkte aus verschiedenen Blickwinkeln betrachten oder simulierte Anwendungen ausprobieren, was das Fehlen einer haptischen Erfahrung im Online-Shopping ausgleicht. Verbesserte Benutzer*innenerlebnisse bieten das Potential, die Kaufbereitschaft zu erhöhen (Moritz, 2010).

Abbildung 1 BMW-Konfigurator 3D-animiert (Konfigurator, o. J.)

Web-Anwendungsbereiche / 3D-Integration-Trends

A.    Anwendungsbereiche

Bei einer genauen Recherche fällt auf, dass die 3D-Implementierung in Form von Webanwendungen facettenreich ist. Dabei gibt es eine Vielzahl von Anwendungsfelder, die nachfolgend überblicksweise aufgelistet sind:

• Datenvisualisierungen – 3D spielt seit Langem eine wichtige Rolle in der Visualisierung und wird durch Technologien wie WebGL und X3DOM zunehmend auch im Web genutzt. Dies ermöglicht interaktive Darstellungen komplexer Daten, etwa in wissenschaftlichen Anwendungen. Im medizinischen Bereich erleichtert 3D die Visualisierung anatomischer Strukturen und medizinischer Daten in Echtzeit.

Abbildung 2 Webbasierte Datenvisualisierung mit 3D-Einsatz (3D Column with Stacking and Grouping Demo | Highcharts, o. J.)

• Multimedia Produktionen – In der Multimedia-Produktion wird 3D-Web-Design genutzt, um 3D-Inhalte zu erstellen und zu bearbeiten, die in verschiedenen digitalen Produktionen eingesetzt werden. Tools wie Sketchfab ermöglichen es, 3D-Modelle interaktiv im Web darzustellen, Änderungen in Echtzeit vorzunehmen und die Zusammenarbeit über Entfernungen hinweg zu erleichtern. Diese Technologien optimieren den gesamten Produktionsprozess, indem sie eine schnelle Visualisierung und Anpassung von 3D-Elementen ermöglichen, was besonders in der Animation und in der Entwicklung von Videospielen von Bedeutung ist.
• Online-Spiele – 3D-Web-Design hat zunehmend auch die Spielebranche erreicht. Während viele bekannte Online-Spiele wie World of Warcraft noch spezielle Clients benötigen, ermöglichen Technologien wie Unity und WebGL mittlerweile die Ausführung von 3D-Spielen direkt im Browser. Besonders das Free-to-Play-Modell und Open-Source-Initiativen fördern die Entwicklung von Browser-basierten 3D-Spielen. Die Fortschritte in Web-Technologien deuten darauf hin, dass 3D-Spiele im Browser in Zukunft eine größere kommerzielle Bedeutung erlangen könnten.
• E-Learning – Mit der wissenschaftlichen Betrachtung, welche Vorteile das Lernen in der VR-Welt bringt, wurde auch die Integration von 3D in webbasierten Lernprogrammen ein wichtiges Thema. Den bevorzugten Ansatz stellen in diesem Bereich 3D-Virtual Frameworks dar, bei denen 3D-Technologien in Kombination mit VR eingebaut werden. Diese ermöglichen immersive, interaktive Lernumgebungen, die Theorie und Praxis miteinander verbinden. Moderne Entwicklungen haben es zudem ermöglicht, dass diese 3D-Welten auch auf weniger leistungsstarken Computern zugänglich sind.
• Virtuelle Rekonstruktionen (geographisch/ geschichtlich) – In der Geografie werden 3D-Stadtmodelle, oft basierend auf OpenStreetMap-Daten und im CityGML-Format gespeichert, für die Darstellung von urbanen Räumen genutzt. Dies ermöglicht eine interaktive Visualisierung von Städten, die für verschiedene Anwendungen wie Krisenmanagement oder Schulungen verwendet werden. Ebenso wird 3D-Technologie in der Virtual Heritage (VH)-Darstellung eingesetzt, um kulturelle und historische Objekte digital zu rekonstruieren und online erlebbar zu machen. Moderne Web-Techniken, einschließlich WebGL, ermöglichen es, diese 3D-Modelle interaktiv darzustellen (Evans et al., 2014).

B.    Trends

Die primäre zukünftige Weiterentwicklung der 3D-Webintegration wird maßgeblich von derzeit aufstrebenden IT-Technologiethemen, wie der AI- und VR/AR-Entwicklung bestimmt.

Webbasierte 3D-Tools werden immer zugänglicher, sodass Nutzer*innen ohne spezialisierte Software und Hardware interaktive 3D-Erlebnisse genießen können. Fortschritte in Technologien wie WebGL, WebXR und WebGPU ermöglichen immersive Erlebnisse in Virtual- und Augmented-Reality. Gleichzeitig treiben leistungsfähigere Hardware und KI die Gestaltung realistischeren und benutzerfreundlicheren Interaktionen voran. Besonders in der E-Commerce- und Modebranche entstehen neue Geschäftsmodelle, die auf 3D-Darstellungen und realistischen Produktinteraktionen setzen, was das Einkaufserlebnis revolutionieren soll (Agha, 2023).

Abbildung 3 3D/VR-Produktvisualisierungen im Web (Holonext, 2021)

Parallel dazu wird an der Verbesserung des Echtzeit-Renderings, insbesondere durch End-Cloud-Kollaborations-Rendering-Frameworks gearbeitet. Diese kombinieren Web- und Server-basierte Frameworks, um die Lastenverteilung zu optimieren und die Echtzeit-Interaktivität zu steigern. Technologien wie Edge Computing senken Latenzen und Bandbreitenanforderungen. Durch den Einsatz von WebGPU und WebAssembly werden komplexe 3D-Szenen effizienter gerendert, was die Interaktivität und Immersion in Web 3D-Anwendungen weiter verbessert (Yu et al., 2023).

Kurz gesagt sind die Trends also:

• Webbasierte Fusion aus VR/AR mit 3D-Technologien
• AI – Generierung von 3D-Webobjekten
• Echtzeit-Rendering von 3D-Webobjekten

Resümee

Durch die technologischen Weiterentwicklungen im Web ist mittlerweile die 3D-Darstellung im Browser möglich geworden. Dieser Durchbruch brachte einen bedeutenden Fortschritt in der digitalen Entwicklung. Gleichzeitig stellen jedoch Herausforderungen wie die Performance komplexer Modelle, Datenschutzfragen sowie die Themen der Usability und Accessibility erhebliche Hürden dar. Die intuitive Bedienung von 3D-Anwendungen und der barrierefreie Zugang für alle Nutzergruppen bleiben zentrale Aufgaben. Dennoch eröffnen immersive und interaktive 3D-Technologien vielversprechende Potenziale in Bereichen wie E-Learning, E-Commerce und Datenvisualisierung. Mit weiteren Fortschritten in VR/AR, KI und Echtzeit-Rendering wird die Integration von 3D-Anwendungen im Web stetig voranschreiten und könnte neue Integrationsansätze schaffen.

Referenzen

[1]    3D column with stacking and grouping Demo | Highcharts. (o. J.). Abgerufen 26. Januar 2025, von https://www.highcharts.com/demo/highcharts/3d-column-stacking-grouping

[2]    Agha, A. (2023, Dezember 13). The Rise of the 3D Web: Why the Future is Now. Medium. https://asifagha.medium.com/the-rise-of-the-3d-web-why-the-future-is-now-fb7afe9b793c

[3]    Almansoury, F., Kpodjedo, S., & Boussaidi, G. E. (2020). Investigating Web3D topics on StackOverflow: A preliminary study of WebGL and Three.js. The 25th International Conference on 3D Web Technology, 1–2. https://doi.org/10.1145/3424616.3424726

[4]    Baruah, R. (2021). Entering VR Through WebXR. In R. Baruah, AR and VR Using the WebXR API (S. 171–215). Apress. https://doi.org/10.1007/978-1-4842-6318-1_6

[5]    Bochicchio, M. A., Longo, A., & Vaira, L. (2011). Extending Web applications with 3D features. 2011 13th IEEE International Symposium on Web Systems Evolution (WSE), 93–96. https://doi.org/10.1109/WSE.2011.6081825

[6]    Crafting 3D Experiences with React Three Fiber: Core Concepts and Scene Creation. (2023, Juni 13). DEV Community. https://dev.to/ruchita1010/crafting-3d-experiences-with-react-three-fiber-core-concepts-and-scene-creation-12l6

[7]    Danchilla, B. (2012). Three.js Framework. In B. Danchilla, Beginning WebGL for HTML5 (S. 173–203). Apress. https://doi.org/10.1007/978-1-4302-3997-0_7

[8]    Dean, J., & Jeff, G. (2024, September 18). WebGL Specification. https://registry.khronos.org/webgl/specs/latest/1.0/

[9]    Evans, A., Romeo, M., Bahrehmand, A., Agenjo, J., & Blat, J. (2014). 3D graphicson the web: A survey. Computers & Graphics, 41, 43–61. https://doi.org/10.1016/j.cag.2014.02.002

[10]  Griffin, J. (2024, Oktober 14). How 3D and Interactive Web Designs Are Redefining User Experience in 2024 | LinkedIn. https://www.linkedin.com/pulse/how-3d-interactive-web-designs-redefining-user-2024-james-griffin-fogae/

[11]  Hristov, P., & Petkov, E. (2019). Study of 3D Technologies for Web. Digital Presentation and Preservation of Cultural and Scientific Heritage, 9, 309–314. https://doi.org/10.55630/dipp.2019.9.32

[12]  Ikechi, F. (2020, November 9). A Dive Into React And Three.js Using react-three-fiber. Smashing Magazine. https://www.smashingmagazine.com/2020/11/threejs-react-three-fiber/

[13]  Introduction—React Three Fiber. (o. J.). Abgerufen 28. November 2024, von https://r3f.docs.pmnd.rs/getting-started/introduction

[14]  Kelle, S., & Crespo García, R. M. (2007). Usability and Acessibility in Web 3D. Usability and Acessibility in Web 3D. http://tuim.inf.puc-rio.br/interact2007/home.php

[15]  Konfigurator. (o. J.). Abgerufen 1. Dezember 2024, von https://configure.bmw.at/de_AT/configure/G60E/31FK/FKUSW,P0475,S0230,S02PA,S02VB,S02VC,S0302,S03DK,S03G3,S0428,S043G,S0494,S04T2,S04U9,S04UR,S04V1,S0548,S0552,S05AS,S05AV,S05DM,S0654,S06AE,S06AF,S06AK,S06C4,S06NX,S06PA,S0851,S0879,S08R3,S08R9,S08TF,S08WN,S09QV/SE000001?_gl=1*bxj4bk*_gcl_au*NjYzNjA0MzM2LjE3MzMwODg0MzQ.

[16]  La Guardia, M., Koeva, M., D’Ippolito, F., & Karam, S. (2022). 3D DATA INTEGRATION FOR WEB BASED OPEN SOURCE WebGL INTERACTIVE VISUALISATION. The International Archives of the Photogrammetry, Remote Sensing and Spatial Information Sciences, XLVIII-4/W4-2022, 89–94. https://doi.org/10.5194/isprs-archives-XLVIII-4-W4-2022-89-2022

[17]  Mathews, B. (2021, März 18). Building 3-D Web Experiences With react-three-fiber. Nearform Commerce – The Digital Product Experts. We Build the Modern Web. https://formidable-com-next-a6du91kut-formidable-labs.vercel.app/blog/2021/2021/react-three-fiber

[18]  Moritz, F. (2010). Potentials of 3D-Web-Applications in E-Commerce—Study about the Impact of 3D-Product-Presentations. 2010 IEEE/ACIS 9th International Conference on Computer and Information Science, 307–314. https://doi.org/10.1109/ICIS.2010.25

[19]  Panchal, S., Raval, P., Shetty, S., & Ambadekar, S. (2022). College 3D Model Rendering Using Three JS. 2022 5th International Conference on Advances in Science and Technology (ICAST), 142–147. https://doi.org/10.1109/ICAST55766.2022.10039553

[20]  Parisi, T. (2012). WebGL: Up and running (1st ed). O’Reilly.

[21]  Potenziani, M., Callieri, M., Dellepiane, M., & Scopigno, R. (2018). Publishing and Consuming 3D Content on the Web: A Survey. Foundations and Trends® in Computer Graphics and Vision, 10(4), 244–333. https://doi.org/10.1561/0600000083

[22]  Vilk, J., Molnar, D., Livshits, B., Ofek, E., Rossbach, C., Moshchuk, A., Wang, H. J., & Gal, R. (2015). SurroundWeb: Mitigating Privacy Concerns in a 3D Web Browser. 2015 IEEE Symposium on Security and Privacy, 431–446. https://doi.org/10.1109/SP.2015.33

[23]  Yu, G., Liu, C., Fang, T., Jia, J., Lin, E., He, Y., Fu, S., Wang, L., Wei, L., & Huang, Q. (2023). A survey of real-time rendering on Web3D application. Virtual Reality & Intelligent Hardware, 5(5), 379–394. https://doi.org/10.1016/j.vrih.2022.04.002

[24]  Yuniarti, A., Atminanto, A., Mardasatria, A., Hariadi, R. R., & Suciati, N. (2015). 3D ITS campus on the web: A WebGL implementation. 2015 International Conference on Information & Communication Technology and Systems (ICTS), 141–144. https://doi.org/10.1109/ICTS.2015.7379888

---

Beitragsbild (Screenshot) bezogen unter https://app.spline.design/file/10177a55-95cb-4f8a-8b14-6056e25674c5