Assigned Department: The Digital Memory Conservatory
User Target: Resilience Design Students
This project was developed as part of the WebGL/C4D master's module (ECNI Master's Program). It is set in the world of ALTERA 2050, a post-capitalist society focused on sobriety, resource sharing, and the governance of the Commons.
The experience is designed as an interactive "citizen onboarding". The user takes on the role of a Resilience Design Student arriving for their first day of integration at the Digital Memory Conservatory. Their goal is to audit and optimize the conservatory's data flows, balancing servers to minimize the neighborhood's carbon footprint.
The user journey spans a multi-day progression (Day 1 & Day 2) split into two distinct gameplay phases:
- Exploration & Narrative (Real-Time 3D): Navigate the office environment in a First-Person view (FPS), interact with various NPCs (Gary, Thomas, Jia, John, Secretary) via a sequential dialogue system, and learn about post-growth issues.
- Simulation & Decision Making (Strategy Gameplay): Access a workstation terminal that runs a card-based resource game. Users must assign incoming Data Cards to server slots, decrypt encrypted files using energy cards, and maintain equilibrium across three core metrics: Stability, Population Well-being, and CO2 Emissions.
The project is located in:
nuxt/: The main interactive WebGL game built with Vue 3, Nuxt 4, and Three.js.
The client architecture cleanly decouples HTML/DOM overlay management from real-time WebGL rendering:
- Custom ECS (Entity Component System): The core 3D engine is powered by a custom-built ECS. Scene entities (player, NPCs, interactive desks) contain modular components (
MeshComponent,PhysicsComponent,InteractableComponent,ConversationComponent) updated in real time by dedicated systems. - Cinema 4D Asset Pipeline: Environmental spaces and assets are modeled and textured in Cinema 4D, exported in GLTF/GLB formats, and dynamically rendered, animated, and lit in Three.js.
- Strategy-Driven Onboarding: A strategy-patterned
OnBoardingManager(Day1Strategy,Day2Strategy) drives progression, ensuring player task completion (e.g., movement checks, dialogue triggers, data decryption) before advancing days or changing game modes. - Advanced Post-Processing: Built using Three.js
EffectComposerincorporatingUnrealBloomPass,OutputPass, and custom transition shaders. - Custom Material Shaders: Implements custom paper texture shaders (
map_paper_main.frag,map_paper_pars.frag) to give the UI terminal a distinct tactical, textured aesthetic. - Interactive Footstep & SFX Engine: Dynamically generates footsteps depending on surface movement, combined with immersive interface trigger sound effects.
Ensure you have Node.js (v18 or higher) installed.
- Navigate to the project directory:
cd nuxt - Install the project dependencies:
npm install
- Boot up the development server:
npm run dev
- Open your browser and navigate to
http://localhost:3000.
- Emmanuel Moulin — Developer
- Ethan Carollo — Developer
- Médéric Chapiseau — Designer