Han Zhang

Creative tech + Design research

Nullam mollis, turpis nec varius scelerisque, est est ornare enim, sit amet facilisis ante metus posuere sapien. Curabitur nec sapien molestie, facilisis lacus eget, egestas nunc. Vivamus mattis metus placerat vehicula ultricies. Vivamus nec nisi lacus. Ut id egestas sem, sit amet cursus turpis. Sed sed congue nulla. Phasellus rhoncus tempor volutpat. Suspendisse interdum varius ante non fringilla. In et ligula lectus.

Experience

User researcher
Senior analyst
Head of user research
Media design practices

Bilibili
Kantar
OutIn
ArtCenter

2022 - 2024
2024
2025
2025 - 2027

See my Resume here

The gaze panopticon

Can the gaze be turned into a collective power?

Year2024

Duration3 weeks

RoleConcept, Design, Development

TechnologiesThree.js, Socket.io, face-api.js

Join the gaze here
https://the-gaze-panopticon.onrender.com/audience.html
Try the feeling of being gazed
https://the-gaze-panopticon.onrender.com/index.html

#Interactive Installation
#WebGL
#Face Detection
#Real-time Systems

Overview

This interactive installation reimagines Foucault’s Panopticon through a radical reversal: the confined self transforms external surveillance into collective power. Audiences join via a shared web link (https://the-gaze-panopticon.onrender.com/audience.html) where real-time face detection tracks their attention. Each gaze is measured by duration and multiplied by the number of watchers, accumulating as tangible pressure on the confined self. As collective observation intensifies, the self channels this force to shatter the prison structure, taking us to a place where what was designed to control becomes the catalyst for liberation.

Experience Journey
One person (the Experiencer) navigates a 3D space where they're confined within a digital Panopticon alongside a representation of their "Self." Multiple Audience members watch through their screens, and their facial attention is tracked in real-time using computer vision.

As collective observation intensifies, pressure accumulates - the Panopticon structure begins to shake, the Self deforms under stress. When pressure reaches critical mass, the prison structure shatters, and the Self transforms into a luminous, free-floating form.

Design Goals

Create real-time networked interaction between 1 experiencer and multiple audience members
Use facial detection to quantify attention as measurable force
Visualize abstract concepts (pressure, surveillance) through 3D spatial experience
Build entirely web-based for accessibility—no app downloads required

Technical Architecture

Layer	Technology	Purpose
3D Graphics	Three.js	Scene rendering, animation
Real-time Communication	Socket.io	Client-server state sync
Face Detection	face-api.js	Facial tracking
Backend	Node.js + Render	Server & state management
3D Modeling	Blender	Asset creation

The system consists of three main components communicating via WebSockets:

Experiencer Client: First-person 3D view with PointerLockControls for WASD movement
Node.js Server: Manages game state, tracks active gazers, calculates pressure accumulation, broadcasts updates
Audience Clients: Third-person 3D view with OrbitControls + face detection interface

Development

Phase 1 - Basic 3D modeling I created the geometry of the basic object (Self) and the scene (Panopticon) in Blender, then using shape keys to define its deformation states. Three.js then controls these morph targets in real-time based on accumulated gaze pressure.

Interpolation: 0.0 (base shape) 1.0 (fully deformed)

function updateBlobMorph() {
if (!morphTargets || morphTargets.length === 0) return;

const normalizedPressure = Math.min(currentState.totalPressure / 100, 1.0);
morphTargets[0] = normalizedPressure;
}

Phase 2 - Loading the 3D Model & Implementing Shape Keys
With the Blender model exported as GLB, I needed to load it into Three.js and access the shape keys (called "morph targets" in Three.js). The challenge was to traverse the model's hierarchy, identify the correct meshes, and map pressure values to shape key influences in real-time.