diff --git a/_works/2025-hinzer-calvin/01-resarch-area-analysis/README.md b/_works/2025-hinzer-calvin/01-resarch-area-analysis/README.md new file mode 100644 index 0000000..8311bbc --- /dev/null +++ b/_works/2025-hinzer-calvin/01-resarch-area-analysis/README.md @@ -0,0 +1,3 @@ +# Themenfeldanalyse + +Bitte legen Sie Ihre Concept Map zur Themenfeldanalyse hier als PDF ab. Die Datei sollte nicht größer als 2 Mbyte sein. \ No newline at end of file diff --git a/_works/2025-hinzer-calvin/02-titles-and-research-questions.md b/_works/2025-hinzer-calvin/02-titles-and-research-questions.md new file mode 100644 index 0000000..7bd8e65 --- /dev/null +++ b/_works/2025-hinzer-calvin/02-titles-and-research-questions.md @@ -0,0 +1,19 @@ +# Titel und Forschungsfrage + +Bitte notieren Sie mindestens 10 mögliche Titel der Arbeit und mindestens 5 mögliche Forschungsfragen/ Zielsetzungen in dieses Dokument. + + + +## Mögliche Projekttitel + +- Konzeption und Entwicklung einer Web Anwendung zur Darstellung eines 3-Dimensionalen Campusplans am Beispiel Gummersbach. +- Konzeption und Entwicklung einer Web Anwendung zur Darstellung eines 3-Dimensionalen Campusplans zur Orientierung und Information am Beispiel Gummersbach. +- Konzeption und Entwicklung einer Web Anwendung zur Darstellung eines 3-Dimensionalen Campusplans für den Standort Gummersbach. +- Konzeption und Entwicklung einer Web-Anwendung eines 3-Dimensionalen Campusplans am Standort Gummersbach +- Konzeption und Entwicklung einer webbasierten 3D-Visualisierung des Campus Gummersbach zur Information und Orientierung. +- Konzeption und Entwicklung eines 3-Dimensionalen Campusplans am Standort Gummersbach als Web-Anwendung. +- Konzeption und Entwicklung eines 3-Dimensionalen Campusplans im Web für den Standort Gummersbach. +- Konzeption und Umsetzung eines 3-Dimensionalen Campussplans am Beispiel Standort Gummersbach zur Orientierung und Information. +- Entwicklung und Konzeption eines interaktiven 3D-Campusplans als Web Anwendung für Information und Orientierung am Standort Gummersbach +- Konzeption und Entwicklung eines dreidimensionalen Lageplans als Web Anwendung für Information und Orientierung am Campus Gummersbach + diff --git a/_works/2025-hinzer-calvin/03-expose.md b/_works/2025-hinzer-calvin/03-expose.md new file mode 100644 index 0000000..7f1aed0 --- /dev/null +++ b/_works/2025-hinzer-calvin/03-expose.md @@ -0,0 +1,151 @@ + +# Praxis Projekt + +Konzeption und Entwicklung eines dreidimensionalen Lageplans als Web Anwendung für Information und Orientierung am Campus Gummersbach + +## Problemfeld und Kontext + + +Studierende im ersten Semester und welche die ein Auslandssemester absolvieren, fällt die Orientierung an Hochschulen und Universitäten nicht immer leicht. Der Campus Gummersbach der Technischen Hochschule Köln verfügt als solche über mehrere Gebäude und Räume, welche nicht immer eindeutig gekennzeichnet sind. +Ebenfalls gibt es keine zentrale Anlaufstelle die über sämtliche Verstaltungen außerhalb der Vorlesung informiert. + +Es existieren zwar Angebote, um Studenten die Orientierung am Campus zu erleichtern, diese sind aber meistens unzureichend oder nicht bekannt. Im Hochschul-Planungs-System (HoPS) [1] der TH Köln sind Informationen nur oberflächlich zu finden. In der 26-Seitigen Erstsemester Broschüre [2] ist nur eine Seite dem Campus gewidmet, wo dieser nur grob kategorisiert ist. Gebäudepläne sind oft veraltet und existieren verschiedenen Versionen. [3] + + +## Zielsetzung + + +Das Ziel ist es, den Campus Gummersbach, in digitaler Form darzustellen. Hierbei soll es Benutzern möglich sein, nach Räumen und Gebäudearten zu filtern. Das System soll dabei helfen den Campus besser kennen zu lernen. Neben den regulären Vorlesungen, sollen auch externe Veranstaltungen und Angebote dargestellt werden. Die Ziele werden folgendermaßen definiert: + +- **Orientierung** Den Campus besser kennen lernen +- **Information** Über Veranstaltungen, Räume, Gebäude informieren +- **Akzeptanz** Das System soll von den Studierenden angenommen werden +- **Immersion** Die Darstellung soll möglichst maßstabsgetreu sein + + +## Aufgabenstellung + + +1. Erstellung eines 3D Modells des Campus Gummersbach +2. Implementierung des 3D Modells in eine Webanwendung +3. Implementierung von Navigationslementen -> Filterfunktionen + + +## Lösungsansätze + + +Bestehende Lösungen von Drittanbietern +- https://www.mappedin.com/ +- https://www.resonai.com/ +- https://proximi.io/ +- https://www.mapspeople.com/ +- https://www.esri.com/en-us/arcgis/products/arcgis-ips/overview +- https://www.mazemap.com/ +- https://www.cisco.com/c/en/us/solutions/enterprise-networks/dna-spaces/index.html +- https://www.pointr.tech/ +- https://mapplic.com/wayfinding +- https://situm.com/en/ +- https://www.infsoft.com/de/produkte/infsoft-wayfinding/ + +## Chancen und Risiken + + +### Chancen + +Eine Gebäudeplan in digitaler Form würde zahlreiche Chancen für die Technische Hochschule öffnen. Eine interaktive Karte ermöglicht es Studieninteressierten und neuen Studierenden, sich digtial auf dem Campus zu orientieren und Gebäude, Einrichtungen und wichtige Orte kennenzulernen, bevor sie überhaupt vor Ort sind. Dies erleichtert den Einstieg und schafft von Anfang an ein Gefühl der Vertrautheit. + +Durch die Bereitstellung einer solchen Anwendung kann die Hochschule ihr Ansehen steigern und sich als innovative und zukunftsorientierte Institution präsentieren. + +Die Skalierbarkeit der Anwendung ist ein weiterer großer Vorteil. Zukünftig können weitere Funktionen, wie beispielsweise die Integration von Stundenplänen, Mensa-Speiseplänen oder weiteren Begeisterungsmermalen hinzugefügt werden. + +### Risiken + +Die Umsetzung eines digitalen Gebäudeplans kann auch mit einigen Risiken verbunden sein. Eine **unzureichende Abbildung** des Campus, beispielsweise durch einen verfälschten Maßstab oder mangelnde Detailtreue, kann die Studierene verwirren und das Benutzererlebnis beinflussen. + +Um den Campus in digitaler Form darzustellen, müssen anhand der vorhanden Gebäudeplane 3D-Modelle erstellt werden. Sollte sich bei der Erstellung herausstellen, dass die vorhandenen Ressourcen unzureichend sind, kann dies den **Zeitaufwand** stark erhöhen, da manuelle Abmessungen erforderlich wären. + +Traditionell werden Gebäude- oder Stadtpläne in einem größeren Format angezeigt, um eine bessere Übersicht zu garantieren. Eine große Herausforderung besteht darin den Campus in digitaler Form für einen **kleinen Bildschirm**, wie beispielsweise ein Smartphone, zu optimieren. + +Damit die Akzeptanz für die Anwendung gewährleistet ist, sollte das Design ansprechend und benutzerfreundlich sein. Ein **unattraktives Design** wirkt unprofessionell und schreckt potenzielle Nutzer ab. + +Da mit 3D grafiken gearbeitet wird, kann es zu **Performanceproblemen** kommen. Diese sollten minimiert werden, um ein flüssiges Benutzererlebnis zu gewährleisten. + + +## Ressourcen + + +Kooperationspartner +- Hochschule -> Architekturskizzen +- Studierende -> Feedback +- Katasterservice -> Grundstückabgrenzung, nur Flurpläne +- Bauaktenarchiv NRW +- [Bebauungpläne](https://www.gummersbach.de/de/hier-zu-hause/bauen-und-wohnen/bauleitplanung/liste-aller-bebauungsplaene/bp-226.html) +- [Gebäudeplan Campus Gummersbach](https://www.th-koeln.de/mam/downloads/geb%C3%A4udeplan.pdf) + +Technologien: +- Web -> Verfügbarkeit +- ThreeJS -> 3d Engine +- React -> Interaktivität +- Jotai, Zustand -> State Management +- TypeScript -> Typsicherheit +- Blender -> Modellierung +- OpenStreetMap -> Karteninformatioen +- OpenTopoMap -> Topografie + +## Motivation + + +- Verknüpfung der Vertiefungsmodule Web-Development und Visual Computing +- Als Student hatte ich selbst Probleme mich auf dem Campus zurechtzufinden +- Ausarbeitung des Entwicklingsprojekts + +![https://github.com/calvinhnzr/digital-campus](./img/inspo-gm.png) + +### Themen + +Welche Themen sind bei den folgenden Vertiefungsmodule relevant? + + +**Web-Development** +- Frontend mit React +- ThreeJS +- UX/UI Design + +
+ +**Visual Computing** + +| Pre Production | Production | Post Production | +|---|---|---| +| Blockout,
Concepting,
Previz,
Camera | Modelling,
Shading,
Texturing,
Environments,
Animation | Lighting,
Rendering | + + +## Setup, Abhängigkeiten und Meilensteine + + +- Architekturskizzen der Hochschule könnten die Umsetzung eines 3D Modells erleichtern + +## Arbeitsergebnis + + +Das System richtet sich primär an Studierende und Studieninteressierte der Technischen Hochschule Köln, Campus Gummersbach. Es soll die Orientierung auf dem Campus erleichtern und über Veranstaltungen, Räume und Gebäude informieren. Das System soll von den Studierenden angenommen werden und eine möglichst maßstabsgetreue Darstellung des Campus bieten. + +![Sketch](./img/sketch.png) + + +## Inspirationsquellen + +![https://spots.aksharbarot.com/](./img/inspo-spots.png) +![https://plateforme10-interactive-map.vercel.app/](./img/inspo-10.png) +![https://satoshi7190.github.io/Shinjuku-indoor-threejs-demo/](./img/inspo-tokyo.png) +![https://studio-carto-urban-project.netlify.app/](./img/inspo-studio.png) + + + +## Quellen + +- [1] HoPS | HochschulPlanungsSystem der TH Köln. (n.d.). HoPS | HochschulPlanungsSystem der TH Köln. Abgerufen am October 31, 2022, von https://fhpwww.gm.fh-koeln.de/hops/modules/roomequipment/room.php?room=0215 +- [2] TH Köln | Informationen für Erstsemester | Fakultät für Informatik und Ingenieurwissenschaften der TH Köln. Abgerufen am October 31, 2022, von https://www.th-koeln.de/mam/downloads/deutsch/hochschule/fakultaeten/informatik_und_ingenieurwissenschaften/erstsemesterbroschure_gesamt_august_2021.pdf +- [3] https://www.th-koeln.de/hochschule/standorte_3914.php + + diff --git a/_works/2025-hinzer-calvin/04-results/README.md b/_works/2025-hinzer-calvin/04-results/README.md new file mode 100644 index 0000000..7742390 --- /dev/null +++ b/_works/2025-hinzer-calvin/04-results/README.md @@ -0,0 +1,3 @@ +# Ergebnisse + +Bitte legen Sie Ihre Ergebnisse hier ab. Achten Sie bitte auf moderate Dateigrößen. Bitte legen Sie nur geschlossene Dokument, z.B. PDF statt *.doc ab. \ No newline at end of file diff --git a/_works/2025-hinzer-calvin/img/PP-Mindmap.png b/_works/2025-hinzer-calvin/img/PP-Mindmap.png new file mode 100644 index 0000000..ffc75e0 Binary files /dev/null and b/_works/2025-hinzer-calvin/img/PP-Mindmap.png differ diff --git a/_works/2025-hinzer-calvin/img/inspo-10.png b/_works/2025-hinzer-calvin/img/inspo-10.png new file mode 100644 index 0000000..175a948 Binary files /dev/null and b/_works/2025-hinzer-calvin/img/inspo-10.png differ diff --git a/_works/2025-hinzer-calvin/img/inspo-gm.png b/_works/2025-hinzer-calvin/img/inspo-gm.png new file mode 100644 index 0000000..cbd3d6b Binary files /dev/null and b/_works/2025-hinzer-calvin/img/inspo-gm.png differ diff --git a/_works/2025-hinzer-calvin/img/inspo-spots.png b/_works/2025-hinzer-calvin/img/inspo-spots.png new file mode 100644 index 0000000..11f9fbe Binary files /dev/null and b/_works/2025-hinzer-calvin/img/inspo-spots.png differ diff --git a/_works/2025-hinzer-calvin/img/inspo-studio.png b/_works/2025-hinzer-calvin/img/inspo-studio.png new file mode 100644 index 0000000..2ed4122 Binary files /dev/null and b/_works/2025-hinzer-calvin/img/inspo-studio.png differ diff --git a/_works/2025-hinzer-calvin/img/inspo-tokyo.png b/_works/2025-hinzer-calvin/img/inspo-tokyo.png new file mode 100644 index 0000000..302796e Binary files /dev/null and b/_works/2025-hinzer-calvin/img/inspo-tokyo.png differ diff --git a/_works/2025-hinzer-calvin/img/sketch.png b/_works/2025-hinzer-calvin/img/sketch.png new file mode 100644 index 0000000..8e4eb1c Binary files /dev/null and b/_works/2025-hinzer-calvin/img/sketch.png differ