HSI

Playful 3D Map for Social Event Discovery

A gamified, browser-based 3D map where users control an avatar to explore real-world locations, join social events, and earn collectible coins and XP through a virtual reward system.

Main 3D map with the avatar in the centre and event markers around it

Initial situation

Discovering social events is often limited to scrolling through lists or browsing simple maps. Existing platforms such as glocals and Meetup are efficient for searching and filtering, but the interaction stays focused on browsing content rather than exploring the place where an event happens. This project explores a more playful alternative that combines a real-world map with gamification and interactive exploration. It builds on a previous IP5 project focused on a map-based relocation process, shifting the focus towards social interaction and event discovery.

Project goal

The goal of this project was to develop and evaluate a browser-based prototype that:

  • Enables 3D map and avatar interaction to explore real-world locations through an avatar
  • Supports the main social event features: discovering, viewing, joining, leaving, and creating events
  • Adds gamification and communication features that encourage exploration and engagement
  • Allows a prototype evaluation of usability, performance, and user perception

3D Map & Avatar

Stylised 3D map with the third-person avatar

A stylised real-world 3D map serves as the main interaction space. The user is represented by a full 3D avatar controlled with the WASD keys, with jumping and an elevated third-person camera, rather than by a simple location marker.

Event Discovery

Map with event markers and the category filter and nearby-event list

Events appear as markers at their real-world locations and can also be found through a category filter, a nearby-event list, or temporary notifications. This lets users switch between exploratory and goal-oriented discovery.

Event Creation

The Create Event form with its fields and coin cost

Users can host their own events through a creation form that validates the address, enforces a minimum participant count, and charges a coin fee. New events then appear on the map and in the event list like any other.

Solution developed and its benefits

The developed prototype turns social event discovery into a playful, map-centred experience. Users explore a real-world city through an avatar, encounter events at their actual locations, and are motivated by game-inspired mechanics, while the map stays the main interaction space with chat, progression, and event discovery arranged around it. Automated benchmarks additionally showed that static geometry scales well, while animated avatars are the main performance bottleneck, an insight that guides future work on supporting larger crowds.

Core features

  • Interactive 3D map with a stylised real-world environment and an avatar
  • Game-like navigation: WASD movement, jumping, point-and-click, and minimap teleportation
  • The full event lifecycle: discover, filter, inspect, join, leave, and create events
  • Gamification: collectible coins, levelling, a reward shop, and coupons
  • Proximity-based public chat and event notifications

Key benefits

  • Playful exploration that makes discovering events more engaging than a plain list
  • Real-world grounding, since events are shown where they actually take place
  • Combined 3D and 2D views that serve both explorers and goal-oriented users
  • A reward loop that adds visible progress without becoming a competitive game

Technologies

The prototype is a single-page web application built with Angular. The interactive map is rendered with MapLibre GL JS, while avatars, vehicles, weather, and other 3D objects are drawn with Three.js as custom WebGL layers. A lightweight REST backend (json-server on top of LowDB) stores players, events, coins, and rewards. Sample event data around Zurich is seeded from the public EventFrog API, and road-network routing is provided by the OSRM service. The interface is styled with Bootstrap.

Testimonial
«Very pleasant experience with the team. With great support from Kevin, the project looks to achieve the goal more than expected»
Byung Yun Cho

Key terms

  • GamificationThe use of game design elements such as coins, points, levels, and rewards in a non-game context to increase engagement.
  • 3D Map InteractionExploring a real-world map rendered with depth and perspective, where the map itself is the main interaction space rather than a background.
  • AvatarA 3D character that represents the user on the map and is moved through the environment.
  • Location-Based ExperienceAn application that links virtual content to real-world places instead of using location only as a search filter.
  • Coins & RewardsThe in-app currency and reward loop, earned through exploration and event participation and spent in the reward shop.
  • WASDThe keyboard scheme (the keys W, A, S, D) used to move the avatar, familiar from many video games.
  • MapLibre GL JSAn open-source library for rendering interactive vector maps in the browser.
  • Three.jsA JavaScript library for rendering 3D graphics with WebGL, used here for avatars and environmental objects.

Customer

SwissPlatz logo

SwissPlatz
Byung Yun Cho
Allée des Roseaux 1
1219 Châtelaine
SwissPlatz

Team

Sabria Karim

BT

Advisor
Prof. Dr. Kevin Gonyop Kim
Institute for Spatial Computing
and 3D Technologies, FHNW