Over 'Augmented & Virtual Reality Nederland in 3D'
is een innovatieve, experimentele webapplicatie, gebouwd met
WebXR en Three.js,
waarmee je Nederland in 3D kunt verkennen via AR en VR.
Of je nu op je telefoon, tablet of met een VR-bril kijkt – je krijgt een bijzondere ervaring.
Zet je VR bril op en open deze website in de webbrowser. Zoek vervolgens een willekeurig adres in Nederland. Klik op de VR knop en vervolgens kun
je rondkijken in een 3D-omgeving van Nederland.
In eerste instantie kijk je vanuit een hoogte van ongeveer 300 meter. Wijs vervolgens met je linker- of rechtercontroller naar de grond en houd de voorste knop (squeeze knop)
ingedrukt om te teleporteren naar die locatie. Herhaal deze actie om jezelf te verplaasten in de VR wereld.
Let op dat de juiste 3D kaartlagen zijn ingeschakeld via het lagen-icoon (stapel vierkantjes).
Wanneer je naar een gebouw wijst met je controller en je houdt de squeeze knop ingedrukt, dan verschijnt een markering op het gebouw en zal informatie over het gebouw
getoond worden in de browser.
Telefoon of tablet
Open deze website in de browser.
Zoek vervolgens een willekeurig adres in Nederland. Klik vervolgens op de AR knop.
Met deze keuze beland je in Mixed Reality.
Als je je huidige locatie gebruikt, zorg er dan voor dat je toestemming geeft om je locatie en camera te gebruiken. Jouw apparaat zal nu de echte wereld via de
camera tonen, met daaroverheen de 3D modellen van gebouwen, bomen en rioleringen.
Let op: Augmented Reality (AR) werkt alleen op Android telefoons en tablets met Chrome of Edge browser. IOS apparaten ondersteunen nog geen AR via Safari. Je kunt echter de bèta Mozilla WebXR viewer
downloaden en installeren op jouw apparaat om AR te gebruiken op iOS. Volg vervolgens dezelfde stappen.
Ondersteuning Cesium tilesets versies 1.0, 1.1; zowel implicit als explicit tiling
Transparantie-optie voor basislagen om de ondergrond te kunnen bekijken.
Huidige locatie met oriëntatie-functionaliteit
Schaduwsimulatie
Gebouwen verbergen. Handig voor nieuwbouwprojecten op plekken waar momenteel gebouwen staan.
Dag- en nachtmodus
Diverse weersomstandigheden
Kleuren thema's. Met behulp van ColorMaps kunnen 3D-objecten verschillende kleuren krijgen.
Digital Twin
De 3D-componenten in deze applicatie zijn automatisch gegenereerd met behulp van open data. Deze datasets worden voortdurend verbeterd en ook deze webapplicatie is nog volop in ontwikkeling.
De 3D-gebouwen zijn gebaseerd op de 3DBAG-dataset van de TU Delft. De bomen zijn automatisch geplaatst op basis van de BGT-data. De luchtfoto is afkomstig van PDOK en heeft een resolutie van 8 cm per pixel. Het terreinmodel is gebaseerd op AHN3.
De applicatie bevat daarnaast een voorbeeldgebied in Rotterdam. De gemeente Rotterdam investeert sterk in de ontwikkeling van een 3D-stad (digital twin) en beschikt over een zeer gedetailleerd 3D-stadsmodel. Om die reden zijn de Rotterdamse datasets opgenomen als voorbeeld van een locatie met hoogwaardige 3D-gebouwen.
Deze site is ontwikkeld met open-source WebXR-libraries. Dat zijn softwarebibliotheken waarmee 3D-ervaringen in een webbrowser kunnen worden weergegeven. Hoewel moderne webbrowsers via WebGL of WebGPU toegang bieden tot de CPU en GPU van het apparaat zelf (zoals een laptop, smartphone of VR-bril), zijn er in de praktijk nog steeds beperkingen.
Webomgevingen hebben extra beveiligings- en abstractielagen, werken binnen sandbox-beperkingen en missen diverse optimalisaties die gespecialiseerde game-engines zoals Unity of Unreal Engine wel toepassen. Daardoor is het in een browser uitdagender om zeer gedetailleerde 3D-graphics, grote werelden en geavanceerde renderingtechnieken met dezelfde prestaties en beeldkwaliteit te leveren als in native applicaties.
Het voordeel van WebXR in de browser is dat het laagdrempelig en toegankelijk is voor iedereen. De uitdaging van deze site is dan ook: waar ligt de balans tussen kwaliteit en toegankelijkheid?
Veelgestelde Vragen
Ja, je kunt Cesium ION assets gebruiken in deze webapplicatie.
Klik op het lagen-icoon (stapel vierkantjes) en vervolgens op "Eigen 3D Tileset toevoegen".
Voer jouw Cesium token en het Asset ID in van jouw Cesium ION 3D tileset.
Een Digital Twin is een digitale representatie van een fysieke omgeving, zoals een stad of een gebouw.
Het stelt gebruikers in staat om de omgeving in 3D te verkennen en te analyseren, vaak met real-time gegevens
en interactieve functies.
Overheidsorganisaties en bedrijven kunnen een Digital Twin samenstellen op basis van open data en deze
eenvoudig beschikbaar stellen aan het publiek.
Een Digital Twin kan worden gebruikt voor verschillende doeleinden, zoals stedelijke planning, onderwijs, toerisme en het visualiseren van toekomstige ontwikkelingen.
Het Open Urban Platform is een initiatief van Future Insight dat een centrale catalogus biedt voor stedelijke data, waaronder 3D tilesets.
Deze catalogus maakt het gemakkelijk om beschikbare datasets en complete Digital Twins te ontdekken en te integreren in toepassingen zoals deze webapplicatie.
Je kunt direct vanuit deze webapplicatie bladeren door de catalogus van het Open Urban Platform en Digital Twins toevoegen aan jouw ervaring.
Voor meer informatie over het Open Urban Platform, bezoek de website: Open Urban Platform (clearly-hub).
3dcitytour.nl ondersteunt verschillende data types, waaronder 3D Tiles, XYZ, TMS, GEOJSON, WMTS en WMS kaartlagen. Het kan echter zijn dat bepaalde data types
niet ondersteund worden of niet goed werken in de applicatie.
3D Tiles is het meest gebruikte data type voor 3D objecten zoals gebouwen, bomen en rioleringen. XYZ en TMS worden vaak gebruikt voor 2D kaartlagen zoals luchtfoto's en topografische kaarten.
GEOJSON is een veelgebruikt formaat voor vector data, zoals punten, lijnen en polygonen (vormen).
WMTS en WMS zijn standaarden voor het serveren van kaartlagen via het web.
3dcitytour.nl is bedoeld voor het algemene publiek. 3dcitytour.nl is een laagdrempelige manier om steden en complete wijken in Nederland te verkennen
in een interactieve 3D omgeving.
De applicatie is niet per se gericht op professionals of experts maar juist op iedereen die nieuwsgierig is
naar de mogelijkheden van 3D visualisaties en digital twins.
Met de introductie van Digital Twins kunnen gebruikers op een toegankelijke manier verschillende omgevingen in Nederland verkennen.
De website wordt steeds stabieler maar een crash kan voorkomen.
Probeer de volgende stappen om het probleem op te lossen:
Ververs de webpagina (F5 of Ctrl+R)
Sluit andere tabbladen en applicaties om geheugen vrij te maken
Verhoog de "Tile Range (Max Geometric Error)" instelling in het instellingenmenu om minder objecten tegelijk te laden
Hoe lager je deze waarde instelt, hoe meer objecten er tegelijk geladen worden en hoe moeilijker het
is voor je apparaat om alles te verwerken. Als je de waarde op 0 zet, worden alle objecten geladen en getoond wat
mogelijk tot een crash leidt; zeker in VR. In VR kun je het schuifje gerust zo hoog mogelijk zetten. Mogelijk zie je vanuit de lucht dan tijdelijk
geen gebouwen maar als je inzoomt of je VR start dan zullen de gebouwen om je heen verschijnen.
Heb je de juiste kaartlagen aangezet? Klik op het lagen-icoon (stapel vierkantjes) en zorg dat de gewenste lagen zijn ingeschakeld.
Het ook kan zijn dat je te ver van de grond bent ingezoomd. Probeer dichterbij te zoomen.
Er is ook een instelling met de naam "Tile Range (Max. GE)". Met deze instelling kun je bepalen hoeveel objecten / detail je wilt laden. Deze instelling
is belangrijk voor prestaties; met name in Virtual Reality. Probeer deze instelling te verlagen als je geen objecten ziet.
Als je de waarde op 0 zet, worden alle objecten geladen en getoond wat
mogelijk tot een crash leidt; zeker in VR. Zet het schuifje gerust zo hoog mogelijk. Mogelijk zie je vanuit de lucht dan tijdelijk
geen gebouwen maar als je inzoomt of je VR start dan zullen de gebouwen om je heen verschijnen.
Ja, standaard ben je ingesteld als een reus (4 meter hoog) om een beter overzicht te krijgen van de omgeving.
Je kunt dit aanpassen door in het instellingenmenu de "Headset Height (m)" aan te passen naar een normale waarde,
bijvoorbeeld 1.7 meter.
Je kunt ook voor een hoge waarde kiezen als je een beter overzicht wilt hebben van de omgeving.
Ja, vanaf versie 5.7 is dat mogelijk. Klik op het lagen-icoon (stapel vierkantjes) en vervolgens op "Eigen kaartlaag toevoegen".
Voer de URL in van jouw 3D tileset of kies een kaartlaag uit de diverse catalogi. De applicatie ondersteunt Cesium tilesets (implicit/explicit | b3dm, glb, i3dm, cmpt).
Zorg ervoor dat de 3D tileset CORS (Cross-Origin Resource Sharing) ondersteunt, anders kan deze webapplicatie de tileset niet laden.
De URL moet verwijzen naar het tileset.json bestand van de 3D tileset.
Cross-Origin Resource Sharing (CORS) is een beveiligingsfunctie in webbrowsers die bepaalt of een webapplicatie bronnen (zoals 3D tilesets)
van een ander domein mag laden. De host moet expliciet toestemming geven door bepaalde HTTP-headers in te stellen. 3dtilesnederland.nl ondersteunt CORS
voor al haar 3D tilesets en daarom kunnen deze tilesets zonder problemen worden geladen in deze webapplicatie.
Het Open Urban Platform is een initiatief van Future Insight dat een centrale catalogus biedt voor stedelijke data, waaronder 3D tilesets.
Deze catalogus maakt het gemakkelijk om beschikbare datasets te ontdekken en te integreren in toepassingen zoals deze webapplicatie.
Je kunt direct vanuit deze webapplicatie bladeren door de catalogus van het Open Urban Platform en 3D tilesets toevoegen aan jouw ervaring.
PDOK (Publieke Dienstverlening Op de Kaart) is een initiatief van de Nederlandse overheid dat een centrale toegang biedt tot geografische data en diensten.
PDOK maakt het gemakkelijk om beschikbare datasets te ontdekken en te integreren in toepassingen zoals deze webapplicatie.
Je kunt direct vanuit deze webapplicatie bladeren door de catalogus van PDOK en 3D tilesets toevoegen aan jouw ervaring.
De software wijzigt regelmatig. Soms kan het voorkomen dat bepaalde functies niet goed werken op bepaalde VR-brillen.
Zorg ervoor dat je software up-to-date is.
Organisaties zoals gemeenten en provincies zijn bezig met het maken van 3D modellen van hun gebieden.
Deze 3D modellen worden steeds vaker als 3D tilesets gepubliceerd. In deze webapplicatie zijn enkele van deze 3D modellen toegevoegd.
Zo is Rotterdam toegevoegd vanwege de hoge kwaliteit van de 3D gebouwen. Nederlandse gemeenten zoals Breda, Zaanstad en Almere zijn
afkomstig van 3dtilesnederland.nl evenals de BGT bomen.
Ja, deze website werkt op moderne smartphones en tablets. Voor Augmented Reality (AR) heb je een Android apparaat nodig met Chrome of Edge browser.
IOS apparaten ondersteunen nog geen AR via Safari. Je kunt echter de bèta Mozilla WebXR viewer
downloaden en installeren op jouw apparaat om AR te gebruiken op iOS.
Augmented Reality (AR) werkt door de camera van je apparaat te gebruiken om de echte wereld te zien, de 3D modellen worden daar overheen gelegd.
Om AR te activeren moet je wel eerst op de knop 'Mijn Locatie' klikken. Dit geeft de webapplicatie toestemming om je locatie te gebruiken en de camera te activeren.
Je kunt ook een willekeurig adres opzoeken in Nederland en op de AR knop klikken. Dan krijg je een mixed reality ervaring op die locatie.
Texturen zijn afbeeldingen die op 3D objecten worden geplakt om ze er realistischer uit te laten zien.
In deze webapplicatie worden texturen gebruikt voor de gebouwen en bomen om ze visueel realistischer te maken.
Een Mesh is een soort 3D foto van een gebied. Je kunt jezelf verplaatsen in de 3D foto maar je kunt
de objecten niet aanklikken. Het is een efficiënte manier om grote gebieden in 3D weer te geven.
Deze applicatie biedt een Mesh aan om een indruk te krijgen van het onderwerp. 3dcitytour.nl is echter vooral gericht op het tonen
van 3D objecten zoals gebouwen, bomen en rioleringen.
Kleuren thema's en colorMaps worden gebruikt om de visuele weergave van 3D objecten aan te passen. Datasets zoals
3D gebouwen, 2D kaartlagen maar ook colorMaps kunnen door iedereen gemaakt worden en vervolgens toegevoegd worden als
laag aan deze webapplicatie.
Alle datasets kunnen, indien gewenst, aangeboden worden via het Open Urban Platform. Een voorbeeld kun je
hier vinden: ColorMap Template.
Een goed voorbeeld van een kleuren thema is de Energielabels ColorMap waarbij
gebouwen een kleur krijgen op basis van hun energielabel.
Ja, je kunt een Google Cardboard of een vergelijkbare eenvoudige VR-bril gebruiken.
Zorg ervoor dat je telefoon goed in de bril past en dat de lenzen schoon zijn voor de beste ervaring.
Klik in het menu op het icoon 'Cardboard' om de weergave aan te passen voor gebruik met een Google Cardboard.
Om je telefoonscherm optimaal te benutten, kun je de optie 'Volledig scherm' / 'Knoppen verbergen' in je browser inschakelen.
Niet alle browsers ondersteunen WebXR. Voor de beste ervaring wordt aanbevolen om Google Chrome of Microsoft Edge te gebruiken.
Safari op iOS ondersteunt momenteel geen AR via WebXR. Je kunt echter de bèta Mozilla WebXR viewer
downloaden en installeren op jouw apparaat om AR te gebruiken op iOS.
Om de prestaties te verbeteren, worden niet alle 3D objecten tegelijk geladen. In plaats daarvan worden alleen de objecten geladen die zich in de buurt van jouw huidige locatie bevinden.
Naarmate je dichterbij komt, worden meer objecten geladen. Dit helpt om de laadtijd te verkorten en zorgt voor een soepelere ervaring.
Je kunt de instelling "Tile Range (Max. GE)" in het instellingenmenu aanpassen om te bepalen hoeveel objecten er tegelijk geladen worden.
Hoe lager je deze waarde instelt (0 is alles), hoe meer objecten er geladen worden. Dit kan echter de prestaties negatief beïnvloeden, vooral in VR.
Ja, je kunt de zonpositie en intensiteit aanpassen via het instellingenmenu.
Hiermee kun je de lichtomstandigheden in de 3D omgeving veranderen om verschillende sferen te creëren.
Ja, er is een schaduwanalyse-functie beschikbaar in het instellingenmenu. Hiermee kun je de schaduwen in de 3D omgeving simuleren op basis van de positie van de zon.
Deze functie kan nuttig zijn voor het visualiseren van de impact van gebouwen op zonlicht en schaduw in stedelijke omgevingen.
De webapplicatie bevat een aantal 3D-objecten die verplaatst kunnen worden. Het is echter nog niet
mogelijk om zelf objecten toe te voegen. Bovendien wordt de nieuwe locatie van een object niet opgeslagen. De verplaatsing is dus tijdelijk en alleen zichtbaar voor jou.
De voorbereiding van deze functionaliteit is gedaan met het oog op toekomstige uitbreidingen waarbij gebruikers zelf objecten kunnen toevoegen en verplaatsen, en waarbij deze wijzigingen kunnen worden opgeslagen en gedeeld.
Ja, we gebruiken cookies en caching om de prestaties van de webapplicatie te verbeteren en om jouw voorkeuren te onthouden.
Cookies zijn kleine tekstbestanden die op jouw apparaat worden opgeslagen en die informatie bevatten over jouw gebruik van de site.
Caching slaat bepaalde gegevens tijdelijk op jouw apparaat op, zodat de site sneller kan laden bij volgende bezoeken.
Je kunt cookies en caching uitschakelen in jouw browserinstellingen, maar dit zal de functionaliteit van de site beïnvloeden.
In de instellingen van de webapplicatie is er een optie om caching in of uit te schakelen.
Caching helpt om eerder geladen 3D objecten op te slaan op jouw apparaat, zodat ze sneller kunnen worden weergegeven bij volgende bezoeken.
Schakel caching in voor een betere prestatie, vooral als je vaak dezelfde gebieden bezoekt.
Houdt er rekening mee dat caching opslagruimte op jouw apparaat gebruikt en dat het soms nodig kan zijn om de cache te wissen als je problemen ondervindt met verouderde gegevens.
Een aanbieder van een 3D tileset kan een nieuwe set ter beschikking hebben gesteld met vernieuwde data.
In dat geval moet je de cache wissen om de nieuwe data te kunnen zien.
Known Issues
Augmented Reality op de telefoon is niet schermvullend
Dit betreft een beperking van de WebXR implementatie in mobiele browsers.
Bronnen en softwarecomponenten
De voornaamste bronnen en componenten zijn:
Sogelink (voorheen Geodan)
Software om de 3D tiles te maken
3D Rotterdam
De 3D modellen van Rotterdam worden beschikbaar gesteld door de gemeente Rotterdam en specifiek
door het 3D Rotterdam team
www.3drotterdam.nl
PDOK
Open Data van de overheid, zoals luchtfoto's en BGT data
TU Delft
Stelt 3DBag data ter beschikking voor de 3D gebouwen
threejs
De JavaScript bibliotheek voor 3D graphics
NASA-AMMOS - 3DTilesRendererJS
De library om de 3D tiles in threejs te renderen in de browser
Mozilla WebXR
De WebXR API voor augmented en virtual reality ervaringen
tentone - geo-three
Een library voor het werken met geografische data in Three.js. Met deze library is
het terreinmodel tot stand gekomen.
Deze webapplicatie is een experiment en een proof of concept. Het is geen commercieel product en er wordt geen
garantie gegeven op de werking of beschikbaarheid van de site. Gebruik deze site op eigen risico. De
ontwikkelaar
is niet aansprakelijk voor eventuele schade die voortvloeit uit het gebruik van deze site.
Feedback en suggesties zijn welkom! Wil je zelf een bijdrage leveren? Heb je goede ideeën? Sponsoren? Jouw naam vermelden op deze site (of op de Grote Markt van Groningen)? Stuur een e-mail
naar info@3dcitytour.nl