Interactive Room Search Assistent HoRST (VueJS, PWA)

Showcase
, , , , , ,
1

What is this Project about?

HoRST is an interactive room-finding system that helps students and visitors locate offices, lecture halls or printers on the HdM university campus in Stuttgart, Germany.

Where does it come from?

HoRST exists since the year 2006 and was developed successive by students. The last version 2.0 existed over 10 years, and it had some major flaws like missing support for Safari and other browsers on IOS or MAC. Also the isometric SVG we had before was bad for performance and orientation.

2006:

HoRST 1.0
HoRST 1.01692×1243 125 KB

2011:

mobileHoRST
mobileHoRST690×910 46.1 KB

2014:

HoRST 2.0
HoRST 2.01920×1003 134 KB

Newer ideas did not make it past the point of going live. So I decided in 2022, when I heard about three.js the first time, that I want to make a prototype and test if it’s possible to make an interactive 3D application that is performant enough for the existing touchscreen terminals at our university. I had something similar like the Amnesty Saydnaya Prison Project in my mind (which is currently unavailable due to CORS issues btw. …)

Amnesty Prison Project
Amnesty Prison Project1920×950 77.4 KB

The prototype was a success, as it had great enough performance and interacting with the model was possible how I imagined it. The code base and maintainability was definitely not good though…
The issues we had were, that the 3D program I used before (ArchiCAD) had trouble to export objects with their object ID which is necessary to talk and react with the model. Furthermore, we did not use a framework and programmed plain JS, HTML and CSS, without any components. Bugs were hard to find, SCSS development took too much knowledge to avoid side effects in other elements. Still, we were only 2 students, and we were able to make it work in the given time.

HoRST Prototype
HoRST Prototype642×936 233 KB

So we started all over. With 3 students and more dedication to code quality.

How is the Application structured?

We decided to use VueJS with TypeScript and Pinia Stores for state management, which was necessary for all the interactions.

We decided to make the project more abstract, which was difficult in the beginning, but ended up being excellent, as the few bugs we had were relatively easy to locate and further features were easy to integrate.

Component Structure

Rendering Handlers and Management
Rendering Handlers and Management380×631 46.5 KB

What does this project bring to the table?

  • HoRST 3D is built to be a responsive PWA, tested on all common browser types, mobile and desktop. So it can be installed on the devices to reduce loading times.
  • It has a collapsible sidebar
  • It implements a light and dark mode.
  • It has i18n language support.
  • It uses an API connection, parses a JSON with the room and person data and gets that live data connected to the 3D objects by their ID. This ID is set in a 3D program like blender or Maya. Our objects need a hierarchy and proper naming of the collections/groups they are in, so we can parse them later on inside the GLTF loader.
  • With a raycaster we are able to click on objects that have an ID in the correct structure, so we know they are on the correct floor of the buildings. This shows a tooltip with some data for the room.
  • It has a terminal mode, which implements features to support an on screen keyboard, room sharing via QR code, an auto reload/reset after some time and securely reduced interaction possibilities for random users.
  • It has a search component that directs users to a searched room.
  • It has a custom and almost likely touch controls experience as in Google Maps.
  • It has clipping planes cutting each building walls at the height of the current floor level, even when some building has a higher or lower elevation for the main floor (EG) in the 3D object.
  • It has a 2D bird’s-eye mode which avoids a gimbal lock.
  • It uses smooth animation with Tween JS for a camera introduction and other movements.
  • It has points of interests like printers, toilets and whatsoever sorted into the floors and buildings by coordinates via JSON.
  • It has a development mode (only in dev environment visible) showing performance metrics and tools to figure out and load coordinates of those POIs and transform controls.

HoRST 3D - Desktop
HoRST 3D - Desktop1920×1002 97.1 KB

HoRST 3D - Tablet Search
HoRST 3D - Tablet Search1509×927 82.8 KB

HoRST 3D - Mobile PWA Install
HoRST 3D - Mobile PWA Install666×1328 79.2 KB

What did we do to improve performance?

  • We were able to reduce our .glb 3D file size from 9 MB to 2 MB with the help of DRACO compression.
  • We reduced the font and icon sizes.
  • We used a shader for the sky instead of a 360° image.
  • We use a performance dependent rendering and adapt the shadow map quality depending on the FPS of the device, which will be stored in a cookie.
  • We reduced the amount of updates when resizing.
  • We reduced the amount of updates for the labels/markers tracking their 3D object in the scene.
  • We use instantiation for the POI spheres that are shown underneath the markers for e.g. water tubs. We preconfigure the amount of the maximum spheres that we will need in a story for all POI types because adding spheres in runtime was causing small lags. The position of the not used spheres is set to be underneath the ground, meaning they are not visible and won’t be rendered.

Check it out at https://horst.hdm-stuttgart.de/.

Thanks @Mugen87 and the wonderful community, who helped us when we had questions or searched for ideas, which made this project succeed and go live before we leave our university :heart:

Hint: Can you find out what chord the grand piano plays? Its famous for an action movie… :nerd_face: If you haven’t watched them yet go grab some :popcorn: and watch, now!

4 Likes