Um das Potenzial von A-Frame und WebXR voll auszuschöpfen, können Plugins und Erweiterungen den entscheidenden Unterschied für deine Architekturvisualisierungen machen. In diesem Beitrag erfährst du mehr über die aus meiner Sicht 3 wichtigsten Bibliotheken für deine Visuals: Event-Set-Component, die Transparent Shader Komponente und die Billboard-Look Komponente. Und wie du damit deine Entwürfe in WebXR noch dynamischer und realistischer präsentieren kannst.
Plugins und Erweiterungen erweitern die Funktionalität von A-Frame erheblich und ermöglichen es dir, komplexe Szenarien mit weniger Aufwand zu erstellen.
Anstatt alle Features aufwendig manuell zu programmieren, kannst du dafür die frein verfügbaren Bibliotheken nutzen, um beeindruckende Interaktivität und realistische Effekte in deine Szene zu integrieren.
Die Bibliotheken bindest du am besten als Skripte entweder lokal oder über eine Web-URL, vor der Szene, in den <head> Bereich deines Projekts ein.
Die erste Bibliothek, die ich dir vorstellen möchte ist die Billboard-Look-Component. Sie ermöglicht es Objekten, sich immer zum Betrachter in der Szene auszurichten, egal aus welcher Perspektive der Benutzer die Szene betrachtet. Das ist besonders nützlich für Texte, Logos oder Hinweise, die unabhängig vom Betrachtungswinkel sichtbar und lesbar bleiben sollen.
Super praktisch, da man sich damit unter anderem auch das manuelle positionieren im Aframe-Code und somit Zeit sparen kann.
Besonders praktisch ist die Komponente für das Einbinden von Informationstafeln, Schriften oder jegliche 2D-Elemente, die sich immer zur Kamera, also zum Nutzer ausrichten sollen.
Dadurch erhöhst du die Lesbarkeit von Texten, musst dich nicht mehr um das manuelle Ausrichten von Rotation und Position kümmern und schaffst ein unkompliziertes Benutzererlebnis für Kunden oder Stakeholder.
Besser geht's nicht!
Um die Komponente zu nutzen, binde zunächst folgende Codezeile im <head> Bereich deines WebXR Projekts ein:
<script
src="https://github.com/blairmacintyre/aframe-look-at-billboard-component"
></script>
Als nächstes kannst du einfach deine planaren Elemente, wie Informationstafeln, Schriften oder Logos in der Szene mit dem attribut billboard versehen:
<a-plane billboard position="0 2 -3" width="2" height="1"
color="#7BC8A4">
<a-text value="Architektur in Aframe" color="black"
align="center"></a-text>
</a-plane>
Der Transparent-Video-Shader erlaubt es dir, Videos mit transparentem Hintergrund in die 3D-Szene nahtlos zu integrieren.
Das ist besonders nützlich, wenn du Animationen oder sprechende Personen in WebXR-Szene einfügen möchtest, ohne einen störenden Hintergrund des Videos sichtbar zu haben.
Videoinhalte mit transparenten Hintergrund können damit nahtlos in die virtuelle Umgebung eingebettet werden, um ein noch dynamischeres Erlebnis für deine Kunden zu schaffen.
So kannst du zum Beispiel ein sprechendes Porträt, mit KI animiert, in deine Szene einbinden und Informationen zum Architekturentwurf erzählen lassen:
Um die Komponente zu nutzen, binde zunächst folgende Codezeile im <head> Bereich deines WebXR Projekts ein:
<script
src="https://github.com/balataca/aframe-transparent-video-shader">
</script>
Dann solltest du das transparente Video, welches du einbinden möchtest, zunächst innerhalb des <asset> Tags vorab über 'src' zu laden. Vergesse nicht eine einzigartige id für das Video zu vergeben. Diese wird dann nachher im entity-Element eingesetzt.
Du benötigst 2 Dateiformate: HEVC wird von Safari unterstützt und lädt das Video auf Apple-Devices. Das Format '.webm' unterstützt Chrome und Firefox Browser und wird für Nutzer mit entsprechendem Browser angezeigt:
<a-assets>
<video
id="deinVideo"
crossorigin="anonymous"
playsinline
webkit-playsinline>
<!-- HEVC video for safari support -->
<source src="LinkzumAsset" type="video/mp4;codecs=hvc1">
<!-- WEBM video for chrome and firefox -->
<source src="LinkzumAsset" type="video/webm" />
</video>
</a-assets>
Im nächsten Schritt versiehst du nur noch die entity, welche das Video mit transparenten Hintergrund darstellen soll, im material-attribut mit dem 'shader: transparent-video;' und der 'src: #deinVideo' - also mit der id aus dem vorher geladenen Asset:
<a-entity
material="shader: transparent-video; alphaTest:0.5;
src: #deinVideo; transparent: true;"
geometry="primitive: plane;"
position="1 2 1"
>
</a-entity>
Das Event-Set-Component ist eines der nützlichsten Tools, weil du damit 3D-Objekte in A-Frame interaktiv machst. Mit dem Plugin kannst du ohne großen Aufwand deine Kunden auf Events wie Klicks, Mausbewegungen oder Hover-Effekte reagieren lassen. Du kannst so Animationen, Größenänderungen oder andere visuelle Reaktionen auf einfache Weise auslösen lassen.
Du kannst für die Interaktion entweder den Computermauszeiger oder einen separat angebunden Cursor in der Mitte des Sichtfelds innerhalb deiner Szene einbinden.
Diese Erweiterung ist besonders praktisch, um Interaktivität in Architekturvisualisierungen und Designprojekten ohne tiefere Programmierkenntnisse zu ermöglichen.
Um die Komponente zu nutzen, kopiere zunächst die folgende Codezeile im <head> Bereich deines WebXR Projekts ein:
<script
src="https://unpkg.com/aframe-event-set-component@4.2.1/dist/aframe-event-set-component.min.js">
</script>
Um mit Elementen innerhalb der WebXR Szene interagieren zu können, benötigst du einen Cursor. Dieser befindet sich innerhalb der Camera und dient dir als Mauszeiger, um Elemente zu hovern oder per Fuse-Animation anzuklicken.
Im Cursor setzt du dann noch: raycaster="objects: .clickable ". Mit dieser Funktion kannst du nun klickbar definierte Objekte anwählen lassen.
<a-camera position="0 1.6 0" >
<a-cursor
raycaster="objects: .clickable "
cursor="fuse: true; maxDistance: 800;"
></a-cursor>
</a-camera>
Nun kannst jedes beliebige Objekt in der Szene, wie etwa dieses <a-image> Element mit class="clickable" als anwählbar definieren.
Darunter kannst nun zum Beispiel per hover eine Opazitätsänderung herbeiführen und damit ein Bild in der WebXR Szene zu animieren.
<a-image
class="clickable"
event-set__enter="_event: mouseleave; opacity: 1;"
event-set__leave="_event: mouseenter; opacity: .5; delay:2000;"
></a-image>
Das Fazit
Die genannten A-Frame-Plugins und -Erweiterungen wie die Event-Set Komponente, die Transparent-Shader Komponente und die Billboard-Look-Komponente bieten eine Vielzahl von Möglichkeiten, deine 3D- und WebXR-Projekte noch interaktiver, dynamischer und realistischer zu gestalten.
Diese Bibliotheken kannst du nach diesem Post unkompliziert in deine Projekte einbinden, damit die Entwicklung vereinfachen und eindrucksvolle Architekturvisualisierungen und Designkonzepte mit minimalem Programmieraufwand zu erstellen.
Bring noch heute deine Architekturvisualisierungen auf ein neues Level und biete deinen Kunden damit ein beeindruckendes und immersives Erlebnis!
Viel Spaß und bis zum nächsten Mal!
