A whale, illuminated bridge and suspended train in the submerged city of AFTERTIDE

An interactive underwater world · 2026交互式水下世界 · 2026

Aftertide余潮

A city that keeps living.一座继续生长的城市。

Concept, world & interaction · Boyan Peng概念、世界与交互 · 彭博严Below the surface潜入水面之下

The world关于世界

What remains
when the city
belongs to the sea?
当城市属于海洋,
什么会留下?

AFTERTIDE imagines an urban world after the water has risen. Towers, bridges and railway lines remain, but the rhythms of daily life belong to other species.余潮想象了一座水位上升之后的城市。楼宇、桥梁和铁轨依旧存在,而日常生活的节律,已属于其他物种。

I wanted to make a place you could stay in: watch a school fold around a whale, drift beside a train, or leave a small wake of your own. Human presence returns through attention and care, within an ecosystem already in motion.我想创造一个可以停留的地方:看鱼群绕过鲸,漂到列车身旁,或留下自己的一小段水痕。人的回归从注视与照料开始,进入一个早已流动着的生态。

Form形式
Real-time 3D / browser experience实时 3D / 浏览器体验
Practice实践
Worldbuilding, creative coding, embodied interaction世界构建、创意编程、身体交互
Year年份
2026 · Ongoing持续创作中

Three acts, one continuous world三幕,一个连续的世界

A changing tide.随潮变化。

The camera stays with you as atmosphere, life and light change around it. Choose a chapter to glimpse its mood.镜头留在你身边,氛围、生命与光在周围转变。选择一幕,看看它的气息。

Echoes: retained in-engine scene from AFTERTIDE

Light returns as a conversation.光,以回应的方式归来。

Signals cross the suspended bridge, a train leaves its track, and colour passes through the living water. The city awakens without reclaiming it from its new inhabitants.信号穿过悬桥,列车离开轨道,色彩沿着活水传递。城市再次苏醒,却不把空间从新的居民手中夺回。

Retained in-engine film stills · the world continues to evolve.保留的引擎内影片画面 · 世界仍在持续迭代。

Twenty seconds below.水下二十秒。

00:20 / Film excerpt影片片段

City → train → whale & shoal → sailboat. October 2026 edit from retained v35 footage; the newer ecology and swimming studies appear below.城市 → 列车 → 鲸与鱼群 → 帆船。2026 年 10 月剪辑,取自保留的 v35 录制;后续生态与游动进展见下方。

Full film & journal完整影片与创作手记

Living water活水

A world made
of responses.
一个由回应
构成的世界。

The current is a shared language. A turn, a wingbeat or a passing body becomes a signal for everything nearby.水流是共同的语言。一次转向、一次振翅、一个经过的身体,都成为周围生命的信号。

Silver turns travel through the shoal.
Silver turns travel through the shoal.银鳞的转向波穿过鱼群。
8,000

fish in the desktop world桌面世界中的鱼

A gesture at the scale
of a whole school.
让一次转身,
成为整个鱼群的动作。

Silver flanks catch the light as a turn travels through the school. Dense ribbons open around a whale, a manta, or the swimmer, then slowly close behind them.转向在群体中传递,银色鱼侧接连接住光。密集的鱼带为鲸、manta 与游动者让出空间,再在它们身后缓缓合拢。

The sense of scale comes from collective movement, layered depth and intervals of darkness. Each encounter briefly changes the composition of the city.群体动作、前后景的层次与暗处的间隔共同构成尺度感。每一次相遇,都短暂改变城市的构图。

Ecology & motion studies生态与运动研究
Manta · a wingbeat leaves light in the water.
Manta · a wingbeat leaves light in the water.Manta · 振翅在水中留下光。

Power, recovery, glide.推进、回收、滑翔。

The manta patrols the open centre of the city. Its wing tips follow the body with a soft delay; particles stir around each beat, and a fading gradient follows its passage through Echoes.Manta 在城市中央的开阔水域巡游。翼尖稍稍滞后于身体,振翅带动周围粒子;在第三幕,它的经过留下渐隐的渐变流光。

Jellyfish · light held inside translucent tissue.
Jellyfish · light held inside translucent tissue.水母 · 光被包裹在半透明组织中。

Light has a body.让光拥有身体。

A translucent bell surrounds inner structures. Contraction sends a delayed pulse through canals and trailing filaments, giving the glow a rhythm that belongs to the animal.半透明伞体包裹内部结构。收缩把延迟的光脉冲送入管道与垂落的触丝,让发光拥有属于生物的节律。

The city answers城市的回应

Old structures.
New rhythms.
旧的结构,
新的节律。

A hanging bridge yields to the water. A pulse gathers at one building, crosses its sagging span, and is received at the other end. The first signal announces the connection; quieter, slower pulses keep it alive.悬桥顺着水流轻摆。脉冲在一端建筑聚集,穿过下垂的桥身,在另一端得到回应。第一次信号点亮连接,后续更缓、更轻的脉冲维持它的呼吸。

Nearby, a suspended train carries familiar details into an impossible setting. These traces of human infrastructure become part of the ocean’s choreography.不远处,悬浮列车把熟悉的细节带进陌生的环境。人类基础设施的遗迹,成为海洋运动的一部分。

Architecture & light建筑与灯光
A signal crosses the suspended bridge.
A signal crosses the suspended bridge.信号穿过悬桥。
The train returns as a quiet procession.
The train returns as a quiet procession.列车成为一道安静的游行。

Embodied exploration身体进入世界

You leave
a current, too.
你也留下
一道水流。

Enter first-person swimming and move with the same water as the creatures. A stroke gives you momentum; drag slows you down; between strokes, you drift.进入第一人称游动,与生物共享同一片水。划水带来推进,阻力让速度缓降,两次动作之间,身体继续漂移。

Ribbons and bubbles remain where the stroke happened. Turn back and find the small trace of your presence, still travelling with the current.水带与气泡留在动作发生的地方。回头望去,你留下的细小痕迹,仍然随流前行。

A stroke leaves ribbons and bubbles in world space. Earlier interface study.
A stroke leaves ribbons and bubbles in world space. Earlier interface study.划水在世界中留下水带与气泡。早期界面研究。
First-person swimming · the current bilingual interface.
First-person swimming · the current bilingual interface.第一人称游动 · 当前双语界面。

Choose Free explore, then Swimming in the live world. Keyboard and mouse remain available; optional hand control uses your camera after you enable it.进入实时世界,选择自由探索,再进入游动。键盘与鼠标始终可用;手势操作在你主动开启后使用摄像头。

Stroke划水

Open both hands.
Sweep outward.
双掌张开,
向外划动。

Steer转向

Hold one fist.
Guide your direction.
保持单拳,
控制朝向。

Brake制动

Close both hands.
Slow to a drift.
双手握拳,
减速至漂移。

Hand tracking runs locally in your browser. The portfolio page does not access your camera.手部追踪在浏览器本地运行。本作品介绍页不会调用摄像头。

Movement, input & water response运动、输入与水体反馈

Making the world世界如何成形

An image becomes
a living presence.
让一张图,
成为活的存在。

The work moves between visual direction, generated geometry and hand-built behaviour. Every asset has to belong to the same water.创作往返于视觉设定、生成几何与手工构建的行为之间。每个资产最终都要属于同一片水。

Visual direction · one of four matching reference views.
Visual direction · one of four matching reference views.视觉设定 · 四张一致的多角度参考之一。
Tripo reconstruction · the model before scene integration.
Tripo reconstruction · the model before scene integration.Tripo 重建 · 进入场景前的模型。

Direct. Generate. Refine.设定、生成、精修。

Working with GPT-6 Astra, I develop the silhouette and consistent multi-angle references. Tripo reconstructs the form; geometry and materials remain editable. Blender and Three.js bring the asset into the world with a deliberate scale, surface and movement.与 GPT-6 Astra 协作确定轮廓和一致的多角度参考,再用 Tripo 重建形体。几何与材质继续保持可编辑,通过 Blender 与 Three.js,把尺度、表面与运动逐一带入世界。

The asset workflow完整资产工作流

Spend detail where it is felt.把细节留给感知。

Shared current fields connect the ecology. Instancing and spatial queries preserve the scale of the shoal, while distant or hidden sand updates less often. Optimisation follows what the viewer can perceive.共享水流把生态联系起来。实例化与空间查询保留鱼群规模;远处或看不见的沙床降低更新频率。性能取舍围绕观众能感知的内容展开。

Performance & implementation性能与实现记录
A sailboat suspended above the city, with luminous trails in the water

Stay for a while在这里停留片刻

There is life
after the tide.
潮水之后,
生命继续。

Enter the world进入余潮