--- title: 'Spatial Websites: 3D, AR und Environments im Browser' description: 'Spatial Websites von viSales: 3D-Elemente, AR und Environments direkt im Browser, ohne App. Die räumliche Ausbaustufe für eine bestehende B2B-Website.' slug: spatial-website date: '2025-12-31T21:22:52.000Z' author: Gerhard Schröder canonical: https://visales.de/spatial-website.html --- Leistung · Spatial Website # Spatial Websites: 3D, AR und Environments im Browser Die räumliche Ausbaustufe für B2B-Websites: vom 3D-Element bis zum betretbaren Environment, ohne App. Basis ist eine [Website mit KI-Sichtbarkeit](https://visales.de/website-ki-sichtbarkeit.html). Für Menschen · HEO ## Die andere Hälfte der Arbeit: Human Experience Optimization GEO sorgt dafür, dass Maschinen dich finden und korrekt wiedergeben. **HEO sorgt dafür, dass der Moment sitzt, wenn Menschen entscheiden.** E-Commerce optimiert Prozente über Millionen anonymer Sessions. B2B-Vertrieb funktioniert umgekehrt: **wenige Begegnungen, an denen viel hängt.** Das Fördergespräch eines Satellitenherstellers wie Astrofein. Der Termin, in dem eine Bohranlage erklärt werden muss, bevor jemand über Millionen entscheidet. Das Event, bei dem ein Entscheider zum ersten Mal versteht, was ein Produkt wirklich kann. Für solche Momente rechnet sich Aufwand pro Gespräch, der im One-to-many-Commerce nie rechnen würde. HEO heißt deshalb nicht „mehr Effekte“, sondern: die Zeit bis zum Verstehen verkürzen. Die Werkzeuge folgen dem Ziel: **Videos mit echten Menschen aus realen Projekten, interaktive Präsentationen, Grafik, 3D und Spatial** dort, wo räumliche Darstellung den Unterschied macht. Das kann 3D sein. Es muss aber nicht. → [Time to Understanding: die Studie mit der Ruhr-Universität](https://visales.de/time-to-understanding-ruhr-universitaet-studie.html) → [Fallbeispiel Astrofein](https://visales.de/astrofein.html) → [Interaktive Präsentationen](https://visales.de/interaktive-prasentationen.html) Ausbaustufe · Spatial Website ## Vom 3D-Element bis VR als Website: ohne App, in sieben Stufen Eine Spatial Website erweitert die bestehende Website um räumliche Inhalte: vom AR-Start aus einem Bild bis zum begehbaren Environment, das mehr ist als 3D oder AR: **VR als Website, zugänglich per Safari, ohne App-Installation.** Und nicht alles davon ist immer sinnvoll. 1 ### Bild zu Augmented Reality Sofort sichtbar, ohne Umbau der Website: Ein einzelnes Bild reicht, um ein 3D-Objekt direkt in AR zu starten. **Frei im Raum, maßstabsgetreu, ohne App-Installation.** ### Mehr zu Stufe 1 Nutzer öffnen das Objekt mit einem Klick oder einer Geste und sehen es frei im eigenen Raum. Technische Grundlage ist AR Quick Look von Apple auf Basis von USDZ-Dateien, optional ergänzt um einen webbasierten AR-Player für strukturierte Steuerung und Varianten-Anzeige. → [Wozu braucht man AR Quick Look?](https://visales.de/wozu-braucht-man-ar-quick-look-von-apple.html) → [Der webbasierte AR-Player](https://visales.de/ar-player-webbasierte-augmented-reality-jetzt-auch-vom-desktop-aus-moglich.html) → [Das USDZ-Format](https://visales.de/usdz.html) 2 ### Spatial Foto Mehr Tiefe ohne 3D-Modell: Räumlich aufgenommene Fotos erzeugen einen subtilen Tiefeneindruck, **vergleichbar mit einem 3D-Bilderrahmen, in den man hineinschaut.** ### Mehr zu Stufe 2 Mit neueren iPhones aufgenommene Spatial Photos lassen sich direkt in Websites integrieren. Die Darstellung ist geräteabhängig: 2D auf Desktop und Smartphone, Tiefeneffekt auf Spatial-Computing-Geräten. Seit visionOS 26 lassen sich bestehende 2D-Bilder zudem KI-gestützt in räumliche Fotos konvertieren, ohne neues Shooting. → [Spatial Video, VR180, 3D-Foto: die Begriffe erklärt](https://visales.de/was-ist-spatial-video-vr180-3d-foto-volumetrisches-video.html) 3 ### Spatial Video Bewegtbild mit Tiefe: Räumlich gedrehte Videos bringen reale Orte, Anlagen und Menschen mit Tiefenwirkung auf die Website. **Klassisch auf jedem Gerät, räumlich auf der Vision Pro.** ### Mehr zu Stufe 3 Spatial Video und VR180 zeigen, was Renderings nicht leisten: echte Umgebungen, echte Menschen, echte Abläufe. Auf klassischen Geräten läuft das Video flach, auf Spatial-Computing-Geräten entfaltet es Tiefe. Wie das in der Praxis aussieht, zeigt das immersive VR-Video für Carl Hamm. → [Fallbeispiel: VR180-Video für Carl Hamm](https://visales.de/vr-video_immersive_video_vr180_fallbeispiel-carl-hamm.html) → [Immersive Videos: VR180 & 360](https://visales.de/vr180-360videos.html) 4 ### 3D-Model-Element Räumliche Präsenz auch auf Smartphone und Tablet: 3D-Modelle erscheinen räumlich vor der Website, **direkt in Safari, ohne Spatial-Computing-Pflicht.** ### Mehr zu Stufe 4 Grundlage ist das neue Model-Element im HTML: USDZ für Apple-Geräte, GLB als Fallback für Android. Der Model-Player ist kein Ersatz für klassische Inhalte, sondern eine Erweiterung für ausgewählte Situationen, in denen räumliche Präsenz einen echten Unterschied macht. → [Kurzdemo: 3D-Modell vor der Website im Raum](https://www.youtube.com/watch?v=dhrUMZGwsZY) (Video, 48 Sek.) → [HowTo: 3D- und AR-Content im Browser einbinden](https://visales.de/howto-3d-ar-content-browser-einbinden.html) 5 ### CSS Spatial Nicht mehr nur ein Objekt, sondern die ganze Seite bekommt Tiefe: Elemente rücken vor die Fläche, Ebenen öffnen sich dahinter. **Ein Entwurf von zwei Apple-MitarbeiterInnen, die auch wichtige Rollen beim W3C innehaben. Noch kein verabschiedeter Standard.** ### Mehr zu Stufe 5 Bisher heißt räumlich im Browser: eine eigene 3D-Anwendung mit eigener Programmierung. CSS Spatial verlagert einen Teil davon ins Layout, Tiefe wird zu einer Eigenschaft im Stylesheet. Zwei Modi sind vorgesehen: einzelne Elemente heben sich aus der Seitenfläche, oder die Seite öffnet sich wie ein Fenster in einen Raum dahinter. Auf flachen Bildschirmen bleibt alles flach und lesbar. Geschrieben haben ihn Ada Rose Cannon, Co-Chair der Immersive-Web-Arbeitsgruppe des W3C, und Elika Etemad, die seit rund zwei Jahrzehnten an den zentralen CSS-Spezifikationen mitschreibt. Beide arbeiten bei Apple. Das Dokument selbst ist aber keines des W3C: es liegt im WebKit-Repository von Apple. Kein Browser hat den Entwurf bisher umgesetzt, andere Hersteller sind zur Stellungnahme eingeladen. Wir beobachten das, wie beim Model-Element: erst lesen, dann ausprobieren. → [CSS Spatial: Apples offener Web-Standard für Spatial Computing](https://visales.de/css-spatial-apple-webkit-standard-spatial-computing.html) 6 ### 3D- & AR-Konfigurator Konfigurieren statt zeigen: Aus einem 3D-Objekt wird ein interaktives Produktsystem. **Ein Konfigurator für Desktop, Smartphone, AR und Vision Pro.** ### Mehr zu Stufe 6 Der USDconfig-Player kombiniert OpenUSD (USDZ) und glTF (GLB), läuft standalone im Browser und wählt das Format automatisch je Endgerät. Varianten und Materialien werden einmal definiert und gelten für alle Ausgabekanäle, ohne App und ohne Plattformwechsel. Live ausprobieren: direkt unter dieser Übersicht. → [Fallbeispiel: AR-Produktkonfigurator für RENZ](https://visales.de/renz-augmented-reality-produktkonfigurator-fallbeispiel.html) → [Leistungsseite Produktkonfiguratoren](https://visales.de/produktkonfigurator.html) 7 ### Website-Environment Wenn Inhalte nicht mehr gelesen, sondern betreten werden: mehr als 3D oder AR, **VR als Website.** Details und Kundenbeispiele in der Box weiter unten. ### Mehr zu Stufe 7 Ein Environment-Raum (Spatial Backdrop) ist ausschließlich auf Spatial-Computing-Geräten verfügbar; auf Desktop, Tablet und Smartphone greifen automatisch die klassischen Inhalte. Keine 3D-Spielerei und kein Ersatz für die Website, sondern eine Ergänzung, wo räumliches Verständnis, Orientierung und Kontext entscheidend sind. → Zur Environment-Box mit den Erklärvideos Live testen ## Stufe 6 zum Anfassen: der USDconfig-Player Genau dieses Einbetten per iframe ist der Weg, wie räumliche Inhalte in bestehende Websites kommen: **hier live, aus einer einzigen USDZ-Masterdatei.** Auf dem iPhone geht es von hier direkt in AR. Live-Demo·läuft im iframe, wie auf einer Kundenseite·[Drehlix-Konfigurator mit Regeln öffnen](https://visales.de/drehlix-konfigurator.html) **Ohne App:** alles läuft im Browser, AR startet auf iPhone und iPad direkt aus der Seite **Eine Masterdatei:** OpenUSD/USDZ als Basis für Web, AR, Konfigurator und Vision Pro **Geräte-Logik:** Desktop und Android klassisch, iPhone in AR, Vision Pro räumlich. Dieselbe Seite **Kein Umbau:** räumliche Elemente ergänzen die bestehende Website, statt sie zu ersetzen → [Produktseite USDconfig](https://visales.de/usdconfig.html) → [Technik, Architektur & Doku](https://visales.de/usdconfig-demo.html) → [Spatial Websites im XR-Browser: was die CHI 2026 bestätigt](https://visales.de/spatial-website-im-xr-browser-was-forscher-der-chi-2026-bestatigen.html) → [Spatial Presentation](https://visales.de/spatial-presentation.html) Stufe 7 · Content auf offenem Standard ## Website-Environments: wenn Inhalte betreten werden Stufe 7 verlässt bewusst die klassische Seitenlogik. Statt Inhalte Abschnitt für Abschnitt zu konsumieren, bewegen sich Nutzer durch einen räumlichen Kontext: einen **Environment-Raum (Spatial Backdrop)**, der ausschließlich auf Spatial-Computing-Geräten ausgespielt wird. Auf Desktop, Tablet und Smartphone greifen automatisch die klassischen Inhalte. Damit ist Stufe 7 mehr als 3D oder AR: **VR als Website.** Spatial Backdrop ist dabei ein offener Web-Standard, kein geschlossenes System: viSales erzeugt darauf den Content, von der räumlichen USDZ-Umgebung bis zur Verknüpfung mit der bestehenden Website. Links: wie Spatial Backdrops aufgebaut sind und wann sich ein räumlicher Einstieg lohnt (und wann bewusst nicht). Rechts: Beispiele aus Kundenprojekten, unter anderem für den Energiekonzern EnBW. **Ein zentraler Unterschied zu früheren Ansätzen:** Je nach URL kann ein eigenes Environment geladen werden. So entstehen zusammenhängende räumliche Strukturen, vergleichbar mit einem Rundgang, jedoch vollständig webbasiert. Da das Browser-Fenster selbst räumlich im Environment schwebt, bleiben bestehende Web-Inhalte nutzbar, inklusive interaktiver Elemente wie Produktkonfiguratoren. Die Pflege läuft über Website-Logik und Datenstrukturen, nicht über ein paralleles VR-System. wenn Produkte, Systeme oder Räume **räumlich verstanden** werden müssen wenn klassische Seiten an ihre **erklärerischen Grenzen** stoßen wenn **Gespräche geführt** werden sollen, nicht Klickpfade wenn Inhalte bewusst **selektiv zugänglich** sein sollen Website-Environments sind kein Massenformat. **Sie sind ein Werkzeug für Situationen mit hoher Komplexität und hoher Aufmerksamkeit.** Genau die 1:1-Momente, um die es im HEO-Teil oben geht. → [Environments auf der Apple Vision Pro: Technik im Detail](https://visales.de/spatial-website_enviroments_apple_vision_pro_model_tag.html) → [Mosaic 2: der Spatial Web Browser für visionOS 26](https://visales.de/mosaic-2.html) → [Warum Apple dem Metaverse näher ist als Meta: OpenUSD erklärt](https://visales.de/apple-metaverse-openusd.html) → [Virtuelle Rundgänge](https://visales.de/virtuelle-rundgange.html) ## Erstes Gespräch zur Einordnung Du sprichst direkt mit Gerhard Schröder, Geschäftsführer von viSales. Kein Pitch. Kein Verkaufsdruck. Eine ehrliche Einordnung auf Augenhöhe. 30 Minuten·Kein Angebot·Keine Verpflichtung [Einordnungsgespräch buchen](https://visales.de/kontakt.html) In der Regel melden wir uns innerhalb eines Werktags zurück. Häufige Fragen zu Spatial Websites Spatial Website & HEO ### ### Was ist eine Spatial Website? Im engen Sinn: eine webbasierte 3D-Umgebung, die auf der Apple Vision Pro nativ im Raum dargestellt wird. Zugänglich per Safari, ohne App-Installation. Im weiteren Sinn: jede Website, die räumliche Inhalte einsetzt, von AR aus einem Bild bis zum Environment. → [Was Forscher der CHI 2026 bestätigen](https://visales.de/spatial-website-im-xr-browser-was-forscher-der-chi-2026-bestatigen.html) ### ### Was kostet eine Spatial Website? **Faustformel: zwischen 2.000 und 25.000 Euro**, je nachdem, auf welcher Ausbaustufe eingestiegen wird. Einstieg ab etwa 2.000 Euro (vorhandene 3D-Inhalte einbinden), mittlere Stufe 8.000 bis 15.000 Euro (Model-Element oder Konfigurator), komplexe Environments bis etwa 25.000 Euro. ### ### Funktioniert 3D im Browser wirklich ohne App? Ja. AR Quick Look startet aus einem Bild heraus, das Model-Element zeigt 3D-Modelle direkt auf der Seite, WebXR läuft komplett im Browser. Grundlage ist eine **OpenUSD/USDZ-Masterdatei**, die über alle Kanäle wiederverwendet wird: Web, AR, Konfigurator, Vision Pro. → [HowTo: 3D und AR im Browser einbinden](https://visales.de/howto-3d-ar-content-browser-einbinden.html) ### ### Was bringt Apple Spatial Computing im B2B? Auf der Vision Pro wird die Website zum Raum: Environments, räumliche Produktdarstellung, gemeinsames Betrachten im Gespräch. Relevant ist das für 1:1-Situationen mit hohem Auftragswert, vom Messetermin bis zum Fördergespräch. **Nicht als Effekt, sondern als gemeinsamer Bezugspunkt.** ### ### Was ist Spatial Commerce? Der Oberbegriff für Kaufprozesse mit räumlichen Inhalten: vom AR-Produkt im eigenen Raum bis zum begehbaren Showroom. Im B2C bedeutet das Skalierung über Millionen Nutzer. **Im B2B übersetzen wir es in die entscheidenden 1:1-Momente des Vertriebs.** ### ### Wofür steht HEO? Nicht High Earth Orbit? HEO steht bei uns für **Human Experience Optimization**: die Gestaltung der wenigen Begegnungen, an denen im B2B-Vertrieb alles hängt. Das Gegenstück zu GEO, das für die Maschinen optimiert. Mit High Earth Orbit hat das nichts zu tun. Auch wenn ein Teil unserer Aerospace-Kunden beide Bedeutungen kennt.