WebAR Exhibitions

01 / WAR MEMORIAL OF KOREA

The Desk of Decision

War Memorial of Korea · Saal der Führungspersönlichkeiten des Koreakriegs

2025.08

The Desk of DecisionAusstellungseinblick · AR-Erlebnis vor Ort

Ich habe einen WebAR-Viewer entwickelt, der nach Erkennung eines Bildmarkers 3D-Modelle anzeigt. Das Video zeigt die Ausstellung, die QR-Anleitung und die AR-Anwendung auf einem Smartphone.

02 / GANGWON GAMYEONG

Gangwon Gamyeong

Städtisches Informationszentrum Wonju · AR/VR-Erlebnis

2025.01

Ich habe die AR/VR-Inhalte für das Diorama von Gangwon Gamyeong und die AR-Anwendung von Yeongjugwan entwickelt. Die Besucherfotos zeigen den Ablauf von der QR-Anleitung bis zur AR-Anwendung auf dem Smartphone. Die letzten beiden Fotos zeigen den Ort ohne und mit dem virtuellen Hasen.

AR-Anleitung und QR-Code auf einer Tafel am Teich von Gangwon Gamyeong — 01
**QR-Anleitung**
Das AR-Erlebnis über die Tafel vor Ort öffnen.

Auf die Mondskulptur gerichtetes Smartphone mit geöffneter Anwendung — 02
**Kamera ausrichten**
Das Smartphone zeigt den realen Ort.

AR-Ansicht auf dem Smartphone mit einer Hasenfigur auf der Mondskulptur — 03
**AR-Einblendung**
Eine Hasenfigur erscheint im Kamerabild.

Mondskulptur und Gebäude in Gangwon Gamyeong ohne AR-Inhalte — 04
**Realer Ort**
Der Ort ohne AR-Inhalte.

AR-Foto mit einem virtuellen Hasen auf der Mondskulptur in Gangwon Gamyeong — 05
**AR-Foto**
Derselbe Ort, fotografiert mit der AR-Figur.

Fotos vor Ort ·Pinkku, Naver Blog ↗14. Aug. 2025 · Zum Vergrößern auf ein Foto klicken.

03 / HAEGWAN 1897

Haegwan 1897

Food Culture Gallery Mokpo · AR-Guide

2025.05

Haegwan 1897WebAR vor Ort

Ich habe den 3D-Modellviewer für einen Web-AR-Guide entwickelt, der über Bildmarker aufgerufen wird.

AlvaAR / Three.js

Implementierung

Für meine WebAR-Projekte habe ich AlvaAR und 8th Wall eingesetzt. Dieses Beispiel zeigt, wie ich das Kamera-Tracking von AlvaAR mit Three.js verbunden habe.

Kamerabilder werden auf den Viewport zugeschnitten und als ImageData an AlvaAR übergeben. AlvaAR schätzt die Kamerapose. Rotation und Position werden aus der Matrix ausgelesen, die Achsrichtungen umgerechnet und das Ergebnis auf die Three.js-Kamera angewendet. — Der Viewer bereitet die Frames vor und rechnet die Posen um. AlvaAR schätzt Position und Ausrichtung der Kamera.

Frame preparation

Ich habe das Kamerabild unter Beibehaltung des Seitenverhältnisses an den Viewport angepasst und überstehende Bereiche mittig zugeschnitten. AlvaAR wurde mit derselben Auflösung wie die vorbereiteten Frames initialisiert.

Pose conversion

Aus der Pose-Matrix von AlvaAR habe ich Rotation und Position ausgelesen, die Achsrichtungen umgerechnet und Quaternion und Position der Three.js-Kamera aktualisiert. Die Aktualisierung erfolgte nur bei vorhandener Pose; erkannte Ebenen wurden getrennt von der Kamerapose gespeichert.

WEITERStudy