FurnishView
LiveOverview
FurnishView is a browser-based room design and furniture visualisation tool built for in-store furniture consultations. A designer can log in, create a room from real-world dimensions, place furniture on a 2D top-down canvas, generate an orbitable Three.js 3D scene, compare two saved layouts side by side, and export a customer-ready design document.
The project was built for PUSL3122 HCI & Computer Graphics 2025-26. My role focused on the application architecture, 2D Canvas engine, Three.js rendering pipeline, and innovation features. The implementation uses strict MVC separation: models hold room/furniture/design state, views render DOM and bind UI events, controllers orchestrate business logic, graphics modules own all Canvas/WebGL rendering, and utilities handle storage, scaling, constants, and persistence.
This is deliberately a zero-build web app. There is no React, no Vite, no backend, and no external runtime dependency requirement. The app runs from index.html with local libraries, persists users/sessions/designs through localStorage, and demonstrates the graphics and HCI work directly in the browser.
The HCI side was not treated as decoration. The workflow includes formative think-aloud findings that changed the interface, plus summative testing with a SUS score of 78.75 and 100% task completion across the tested consultation tasks.
Architecture
Challenges & Solutions
The coursework needed to prove computer-graphics understanding, not just assemble a UI around a canvas library.
Built the 2D editor on the raw Canvas API with explicit real-world scaling, AABB hit detection, drag-offset handling, render-loop control, and boundary clamping.
A 3D room view can look flat or fail export if WebGL is treated as a quick visual add-on.
Used Three.js r160 with PerspectiveCamera, OrbitControls, ambient and directional lighting, MeshStandardMaterial, and preserveDrawingBuffer so shaded 3D renders can be exported reliably.
Furniture consultation software has to support decision-making in front of a customer, not just let a designer place objects.
Added side-by-side 3D design comparison, auto-arrange, room presets, PNG/PDF export, and a bill-of-materials handoff so the workflow ends in a usable customer artifact.
A coursework submission had to run offline and be easy for markers to inspect without npm, build tools, or network dependencies.
Kept the app as a zero-build ES module project with local Three.js, OrbitControls, and jsPDF assets so it can run from index.html or a simple static server.
Project Results
SUS Score
78.75
Good usability band after summative testing
Task Completion
100%
Across 5 post-implementation study tasks
Build Step
Zero
Runs from index.html with local dependencies
Architecture
MVC
Models, Views, Controllers, Graphics, and Utils
Features
- Rectangular and L-shaped room setup with real-world dimensions, wall colours, floor colours, and room presets
- Raw HTML5 Canvas 2D editor with drag-and-drop furniture placement, AABB hit detection, drag-offset handling, and boundary clamping
- Three.js r160 3D scene with PerspectiveCamera, OrbitControls, ambient and directional lighting, shadows, and MeshStandardMaterial shading
- 2D-to-3D coordinate mapping that converts metre-based furniture positions into WebGL world coordinates
- Undo, redo, delete, save shortcuts, toolbar actions, selected-item feedback, and toast notifications
- Side-by-side 3D design comparison using two independent WebGL renderers and OrbitControls instances
- Rule-based auto-arrange algorithm for seating, tables, and storage with spacing rules and wall-clearance constraints
- Full design CRUD with JSON serialization to localStorage and sample demo data
- Client-side role-based auth for designers and admins with persistent sessions
- Customer handoff exports through PNG capture and jsPDF-generated documents with 2D layout, 3D render, and bill of materials
- HCI workflow backed by formative think-aloud testing, summative SUS evaluation, Nielsen heuristics, and Norman design principles
