webgl application interaktives Stadtmodell Header stadtmarketing bocholt


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

The city of Bocholt is located in the Westmünsterland and has, in addition to the approximately 70,000 inhabitants, everything that a city should offer: Many historic buildings, the Aa Lake, a lively city center, the Bocholt funfair and much more. "Advance Bocholt as a brand!" This is what the Stadtmarketing Gesellschaft Bocholt mbH & Co. KG has set as its goal, and so the company acts as an organizer and impulse generator, instrument and idea generator for Bocholt’s sense of community. Thus, an interactive city model was created in cooperation with redPlant in 2022.  

800 years of Bocholt

In 2022, in celebration of the 800th anniversary of @Stadt.Bocholt, a bronze artwork of the historical city view of1822 by the artist Egbert Broerken was unveiled between the historical city hall and the St. Georg church. Parallel to this, we developed an interactive city model, which allows you to switch between the current and the historical city view and get further information about different buildings of the city of Bocholt.    

Zum Stadtmodell


The historical view of the city of Bocholt from around 1822 was recreated in detail in the bronze model. The interactive city model focuses more on the current view of the city and merely hints at the historical view by recreating the difference in the density of development, but for the time being the detailed recreation of the buildings around 1822 has been omitted. However, an actual reconstruction of the buildings around 1822 can be added later at any time. 

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


In addition to the clear visualization of the city center of Bocholt, which you can explore from a bird's eye view via rotation, zoom and panning, important focal points have been integrated into the city model, which you can navigate to via the menu or directly in the 3D scene. These points of interest are displayed in more detail and can be explored up close. In addition, you will receive further information about the individual sights. 


The historic town hall of Bocholt is one of the most important historic buildings and the landmark of the city of Bocholt 


The Roman Catholic Liebfrauen parish church is listed as a cultural heritage building in Bocholt. 


St. Agnes Chapel in Bocholt was the convent church of the Augustinian nuns and later a Protestant parish church. 


In 779, the place "bohholz" or "buocholt" was mentioned for the first time in the annals of the Frankish Empire under the reign of Charles the Great. 


The square in front of the Historic Town Hall, called "Market", still has parts of the old Lesestein paving (stones picked up in the field). 


St. George's Church is the first parish church of the town. It is one of the most important church buildings in Westphalia, both because of its size and its artistic merit. 


At the Berliner Platz there is a modern town hall built in the seventies with a cultural center and a theater, where the administration organizes municipal life. 


The bronze figure "Egg Woman" by the Münsterland artist Gertrud Büscher-Eilert was ceremoniously unveiled on 30.11.1991 by then mayor Bernhard Demming. 

webgl application interaktives Stadtmodell QR Code verbunden stadtmarketing bocholt


The interactive city model can be accessed via the website of the city of Bocholt as well as via a QR code embedded in the bronze model. This allows you to call up the interactive city model directly at the bronze model by scanning the QR code with your smartphone or tablet and compare both city models. The interactive city model can be adapted to new focal points or changes at any time. 

webgl application interaktives Stadtmodell mobile verfuegbar stadtmarketing bocholt


No matter if you are strolling through the city of Bocholt or at home – the responsive web design of the interactive city model allows you to use the application on almost any device. The user interface and the 3D scene adapt perfectly even on small devices and offer an easy handling, no matter when and where you feel like it. 

webgl application interaktives Stadtmodell rekonstruktion stadtmarketing bocholt


In order to recreate the current as well as the historical city model of Bocholt as true to the original as possible, we relied on various tools. In addition to city plans and floor plans for correct placement and scale modeling of the buildings, we also use Google Maps to correctly fill in ambiguities and gaps.

webgl application interaktives Stadtmodell StgGeorg Kirche rendering stadtmarketing bocholt


For the detailed recreation of the focal points, the landmarks were reconstructed as a 3D model based on photographic material of the buildings and their surroundings, and the corresponding textures of the facades and the details were created and embedded into the 3D model.


Those who know the city of Bocholt know how green and lively it is in real life and we did not want to neglect this aspect in the city model. In addition to the buildings and focal points, the vegetation and the river of the city of Bocholt were also recreated. Thanks to our tools, we were able to integrate these into the overall image.


Two shaders were used to create an even more lively overall image of the 3D scene. This way, randomized clouds could be visualized, which are generated in real time and slowly move around the city center of Bocholt. In addition, the river that surrounds the city center was also brought to life with currents and reflections.


In order to guarantee a good performance of the application even for large 3D scenes with vegetation, we use GPU instancing. This way, 3D models that are used several times in the 3D scene are loaded only once and copies of them are used. This is especially useful for repetitive elements such as trees.

webgl application interaktives Stadtmodell eierfrau LODs small stadtmarketing bocholt


To ensure that the interactive application loads quickly and runs smoothly even on older devices or with a poor Internet connection, we placed special emphasis on optimization and used Level of Detail to visualize the city model. Depending on the loading performance and the distance to the 3D model, different levels of detail of the 3D models and textures are loaded. 


icon WebGL


The interactive application was implemented in [GlossaryItem id="60"] and is available in popular browsers.

icon responsive

Responsive Design

The interactive application is available on smartphone, tablet to desktop.

icon performance


To save drawcalls, the trees are instantiated. In addition, [GlossaryItem id="28"] is used for the buildings.

icon webp

WebP Dateiformat

For the textures the WebP file format was used to keep the loading times low.