webgl application interaktives Stadtmodell Header stadtmarketing bocholt

Interaktives Stadtmodell Bocholt

  • web application
  • e-Learning
  • Public Relations
  • WebGL

Die Stadt Bocholt liegt im Westmünsterland und hat neben den rund 70.000 Einwohnern alles, was eine Stadt bieten sollte: Viele historische Bauten, den Aa See, eine belebte Innenstadt, die Bocholter Kirmes und vieles mehr. „Bocholt als Marke nach vorne bringen!“ Dies hat sich die Stadtmarketing Gesellschaft Bocholt mbH & Co. KG als Ziel gesetzt und so agiert die Gesellschaft als Organisator und Impulsgeber, Instrument und Ideengeber für den Gemeinschaftsgedanken der Stadt Bocholt. So entstand 2022 in Zusammenarbeit mit redPlant ein interaktives Stadtmodell.

800 Jahre Bocholt

Anlässlich des 800-jährigen Jubiläums der @Stadt.Bocholt wurde 2022 zwischen dem historischen Rathaus und der St. Georg Kirche ein Bronzekunstwerk der historischen Stadtansicht um 1822 des Künstlers Egbert Broerken enthüllt. Parallel hierzu entwickelten wir ein interaktives Stadtmodell, in dem Du zwischen der aktuellen und der historischen Stadtansicht wechseln und weiterführende Informationen zu verschiedenen Bauten der Stadt Bocholt erhältst.

Zum Stadtmodell

200 Jahre in die Vergangenheit

Die historische Ansicht der Stadt Bocholt um 1822 wurde im Bronzemodell detailgetreu nachgebildet. Das interaktive Stadtmodell fokussiert hierbei eher die aktuelle Stadtansicht und skizziert die historische Ansicht lediglich an, indem der Unterschied in der Dichte der Bebauung nachempfunden wurde, aber auf die detaillierte Nachbildung der Gebäude um 1822 vorerst verzichtet wurde. Eine tatsächliche Rekonstruktion der Gebäude um 1822 kann jedoch jederzeit nachgezogen werden.

webgl application interaktives Stadtmodell bocholt neu stadtmarketing bocholt webgl application interaktives Stadtmodell bocholt historisch stadtmarketing bocholt

Von Übersichtlich bis Detailreich

Neben der übersichtlichen Visualisierung des Stadtkerns von Bocholt, welchen Du aus der Vogelperspektive via Rotation, Zoom und Panning erkunden kannst, wurden wichtige Fokuspunkte in das Stadtmodell integriert, die Du über das Menü oder direkt in der 3D Szene ansteuern kannst. Diese Sehenswürdigkeiten werden detaillierter dargestellt und können aus nächster Nähe erkundet werden. Zusätzlich erhältst Du weitere Informationen zu den einzelnen Sehenswürdigkeiten. 

Historisches Rathaus

Das Historische Rathaus Bocholt ist eines der wichtigsten historischen Bauwerke und das Wahrzeichen der Stadt Bocholt

Liebfrauenkirche

Die römisch-katholische Pfarrkirche Liebfrauen ist ein denkmalgeschütztes Kirchengebäude in Bocholt.

St. Agnes Kapelle

Die St.-Agnes-Kapelle in Bocholt war die Konventskirche der Augustinerinnen und später evangelische Pfarrkirche.

Historische Ansicht

779 wurde der Ort „bohholz“ oder “buocholt“ in den Annalen des fränkischen Reiches der Regierung Karl d. Gr. erstmalig erwähnt.

Marktplatz

Der Platz vor dem Historischen Rathaus, „Markt“ genannt, hat zum Teil noch die alte Lesestein-Pflasterung (auf dem Feld aufgelesene Steine).

St. Georg Kirche

Die St.-Georg-Kirche ist die erste Pfarrkirche der Stadt. Sie ist sowohl aufgrund ihrer Größe als auch ihrer künstlerischen Durchbildung einer der bedeutendsten Kirchenbauten Westfalens.

Rathaus

Am Berliner Platz steht ein in den siebziger Jahren errichtetes modernes Rathaus mit Kulturzentrum und Theater, in dem die Verwaltung das kommunale Leben organisiert.

Eierfrau

Die Bronzefigur „Eierfrau“ der münsterländischen Künstlerin Gertrud Büscher-Eilert wurde am 30.11.1991 vom damaligen Bürgermeister Bernhard Demming feierlich enthüllt.

webgl application interaktives Stadtmodell QR Code verbunden stadtmarketing bocholt

Für immer verbunden ...

Das interaktive Stadtmodell kann über die Website der Stadt Bocholt sowie über einen in das Bronzemodell eingelassenen QR-Code aufgerufen werden. So kannst Du direkt am Bronzemodell durch Scannen des QR-Codes mit Deinem Smartphone oder Tablet das interaktive Stadtmodell aufrufen und beide Stadtmodelle miteinander vergleichen. Das interaktive Stadtmodell kann jederzeit um neue Fokuspunkte oder an Veränderungen angepasst werden.

webgl application interaktives Stadtmodell mobile verfuegbar stadtmarketing bocholt

... und immer verfügbar

Egal, ob beim Bummeln in der Bocholter City oder von Zuhause aus – das Responsive Web Design des interaktiven Stadtmodells ermöglicht Dir, die Anwendung auf nahezu jedem Gerät zu nutzen. Dabei passt sich das User Interface und die 3D Szene selbst auf kleinen Geräten perfekt an und bietet so eine einfache Bedienung, egal wann und wo Dir danach ist.

webgl application interaktives Stadtmodell rekonstruktion stadtmarketing bocholt

Rekonstruktion der Stadt Bocholt

Um das aktuelle sowie das historische Stadtmodell von Bocholt so originalgetreu wie möglich nachzubilden, wurde auf verschiedene Hilfsmittel zurückgegriffen. Neben Stadtplänen und Grundrissen für eine korrekte Platzierung und maßstabsgetreuen Modellierung der Gebäude nutzen wir auch Google Maps, um Unklarheiten und Lücken korrekt zu füllen. 

webgl application interaktives Stadtmodell StgGeorg Kirche rendering stadtmarketing bocholt

... und ihrer Gebäude

Für die detailgetreue Nachbildung der Fokuspunkte wurden die Sehenswürdigkeiten anhand von Fotomaterial der Gebäude und ihrer Umgebung als 3D Modell rekonstruiert und die entsprechenden Texturen der Fassaden und der Details erstellt, um das 3D Modell mit diesen auszustatten. 

Mit dem gewissen Etwas

Wer die Stadt Bocholt kennt, weiß wie grün und lebendig diese sich in natura gestaltet und so wollten wir diesen Aspekt im Stadtmodell auch nicht vernachlässigen. Neben den Gebäuden und Fokuspunkten wurde auch die Vegetation und der Fluss der Stadt Bocholt nachgebildet. Auch diese konnten wir dank unserer Hilfsmittel in das Gesamtbild integrieren.

Endless Animation

Für ein noch lebhafteres Gesamtbild der 3D Szene kamen zwei Shader zum Einsatz. So konnten randomisierte Wolken visualisiert werden, welche sich zur Echtzeit generieren und sich langsam um den Bocholter Stadtkern bewegen. Zudem wurde der Fluss, welcher den Stadtkern umschließt, dank Strömung und Reflexionen ebenfalls zum Leben erweckt.

Instancing

Um auch bei großen, mit Vegetation versehenen 3D Szenen eine gute Performance der Anwendung zu garantieren, nutzt diese GPU Instancing. So werden 3D Modelle, die mehrmals in der 3D Szene zur Verwendung kommen, nur einmal geladen und Kopien dieser verwendet. Das ist besonders sinnvoll für sich wiederholende Elemente wie beispielsweise den Bäumen.

webgl application interaktives Stadtmodell eierfrau LODs small stadtmarketing bocholt

Level of Detail

Damit die interaktive Anwendung auch auf älteren Geräten oder bei schlechterer Internetverbindung schnell lädt und performant läuft, haben wir besonderen Wert auf die Optimierung gelegt und setzten zur Visualisierung des Stadtmodells auf Level of Detail. Hierbei werden je nach Ladeperformance und Abstand zum 3D Modell verschiedene Detailgrade der 3D Modelle und Texturen geladen.

Feature

icon WebGL

WebGL

Die interaktive Anwendung wurde in WebGL umgesetzt und ist in gängigen Browsern verfügbar.

icon responsive

Responsive Design

Die interaktive Anwendung ist auf Smartphone, Tablet bis hin zum Desktop verfügbar.

icon performance

Performance

Um Drawcalls zu sparen, werden die Bäume instanziiert. Zusätzlich werden Level of Detail für die Gebäude verwendet.

icon webp

WebP Dateiformat

Für die Texturen wurde das WebP Dateiformat verwendet, um die Ladezeiten gering zu halten.