Before there was a city在城市出现之前
AFTERTIDE began as an underwater experiment: a whale, manta rays, jellyfish and luminous shrimp moving among rocks, columns and suspended particles. The first question was how a body could feel alive in water. A tail cycle alone was not enough; acceleration, a pause in propulsion, a turn of the head and the delayed movement of a tentacle all mattered.
余潮最初是一个水下实验：鲸、蝠鲼、水母和发光的虾，穿行于岩石、石柱与悬浮颗粒之间。最先要解决的是，怎样让一个身体在水里显得有生命。循环摆尾还不够；加速、短暂滑行、头部的转向，以及触须迟一步的运动，都影响着这种感觉。
The early material work was also a lesson in restraint. Excessively strong normal perturbations made stone look noisy; higher-frequency detail flickered when seen from a distance. I used fixed camera views and before/after captures to separate actual surface improvements from brighter noise.
早期材质调试也是一次减法练习。过强的法线扰动让石头像噪点，高频细节又会在远景中碎闪。我用固定机位和前后对照，区分真正的表面改善与只是变亮的噪声。
The setting gradually shifted from a collection of ruins toward a human city reclaimed by the sea. Streets could become migration routes, abandoned transit could offer shelter, and rooms could become habitats. Early titles and teal-toned studies remain in the archive; the darker blue city and the name AFTERTIDE emerged through those revisions.
场景逐渐从遗迹的集合，转向一座被海水重新接管的人类城市：街道成为迁徙通道，废弃交通设施提供庇护，房间成为生境。档案里保留了早期片名与偏青色的研究；更深的蓝色城市，以及《余潮》这个名字，都是在这些修改中逐渐形成的。
A city you can move through让城市成为可以穿行的地方
The first city had a recognizable skyline but its buildings still felt like isolated objects. I organized later passes around a central waterway, station forecourts, public gardens and layered crossings. What matters is the space between structures: the routes a visitor, train or animal can actually take.
第一版城市已经有了天际线，但建筑仍像各自独立的物件。后续改造围绕中央水道、站前空间、公共花园与多层连接展开。重要的是结构之间的空间：观众、列车和生物，究竟可以从哪里经过。
Too many horizontal bridges flattened the arrival view. Diagonal and inward-running routes, different landing heights and a rotated entrance camera restored depth. The low suspension bridge was moved between the OCEAN building and the clock tower; its deck, cables and attachment points were treated as one connected structure.
过多横向桥梁把入口画面压平。斜向与向内延伸的路径、不同高度的落点，以及偏转后的入口视角，重新带回了纵深。低位吊桥最终接在 OCEAN 大楼与钟表塔之间，桥面、主索与锚点按同一组连接关系调整。
At a smaller scale, doors needed to face walkable routes and foundations needed to meet the sand. Train cars needed consistent sections and two bogies to follow a curve. The clock tower gained a readable illuminated face; NOVA, OCEAN, PALIMPSEST and TIDAL became part of the city’s visual memory, with the later signs mounted on building sides.
更小的尺度上，门口要朝向可通行的路径，地基要真正落在沙里。列车需要统一截面，并由前后两个转向架共同跟随曲线。钟塔补上可读的发光表盘；NOVA、OCEAN、PALIMPSEST 与 TIDAL 则成为城市的视觉记忆，后加的灯牌安装在建筑侧面。
From an image to a world that works从一张图，到真正运转的世界
I used two connected ways of building. With GPT / Codex, I translated design decisions into image prompts and Blender Python. Tripo reconstructed selected reference images as textured 3D objects. Blender then became the place to build exact structures, inspect generated geometry and join the two into usable assets.
我把两条制作路线接在一起：与 GPT / Codex 协作，将设计判断写成图像提示词或 Blender Python；用 Tripo 将选定参考图转成带材质的三维物件；再在 Blender 中搭建精确结构、检查生成网格，把两者合成为可用资产。
Prompt → reference image → Tripo
提示词 → 参考图 → Tripo 模型
Silhouette, surface character and PBR textures.
轮廓、表面特征与 PBR 材质。
GPT → Blender Python → geometry
GPT → Blender Python → 参数化几何
Dimensions, repeated structures and precise interfaces.
尺寸、重复结构与精确连接。
A building the roots could embrace让根冠真正抱住建筑
The root-wrapped building started with an edited reference. I wanted the architecture to remain dominant: low, mineral branches had to touch the structure, wrap the corner and leave the entrance open. The saved prompt below is the actual final image-edit instruction, applied to an earlier reference.
根冠楼从一张反复修改的参考图开始。建筑仍应占主导：低位的矿化枝干要接触结构、绕过转角，并给入口留出空间。下面保留的是最后一轮真实图像编辑提示词，它作用于上一版参考图。
Keep the roots to roughly the lower third. Grow sideways around the corner. Preserve the facade and the open doorway.
根冠高度控制在建筑下部约三分之一；枝条横向绕过转角；保持建筑立面与入口通畅。
Read the original image-edit prompt · English展开原始图像编辑提示词 · 英文
Use case: precise-object-edit.
Input image: the building and calcified-root integration render is the edit target.
Primary request: change ONLY the root system's scale and growth direction so it embraces the lower structural corner naturally and lets the building dominate. Preserve the building geometry, glass, doorway, lighting, camera, framing, gray studio setting and both material families.
Root change: shrink its overall vertical extent to approximately 35% of the building height. All organic growth must stay within the ground floor and next floor; upper facades remain completely unobstructed. Keep a substantial coarse basal mass connected into the foundation. Reconfigure six broad mineral branches so several curve laterally along the lowest horizontal frame bands and at least two curl around the rounded building corner onto the adjacent facade. Thick branches hug the structural surfaces with clear contact; a short branch may rise along the corner only to the second-floor band. Reduce upright antler-like fingers and redirect that material sideways. Keep the main doorway completely open, keep most lower glass visible and preserve large gaps between branches.
Retain pale gray-white calcite texture, rounded substantial branch sections, broad natural growth ridges and slight erosion. The root system must read as marine growth shaped by and attached to the building, rather than a freestanding tree pasted in front.
Avoid: changing the architecture, adding more floors or windows, root tips above the bottom third, fine vines, tiny twigs, glowing roots, metal plating, detached pieces, new objects, people, text or watermarks.
The source arrived as one connected mesh. GPT-assisted Blender scripts selected and removed the opaque window surfaces while protecting the roots, doorway and structural frame. New glass panes, floors, ceilings and small interior elements made the building readable through its windows. Four levels of light panels could then respond to the story.
源模型是一张连通网格。GPT 辅助编写的 Blender 脚本选择性移除不透明窗皮，同时保护根冠、门洞与结构框架；再补入玻璃片、楼板、顶板和少量室内构件，让窗后真正有空间。四层灯片随后才能参与叙事中的逐层亮起。
The city that began as code用代码搭起城市的骨架
Other geometry was built directly in Blender through GPT / Codex-authored Python. The early city generator lays out fourteen towers around an open waterway, builds floor slabs and window openings, then adds the civic rings, elevated structures and a continuous seabed. Explicit parameters make proportions and clearance adjustable together.
另一部分几何由 GPT / Codex 编写 Python，直接在 Blender 中构造。早期城市生成器围绕开阔水道布置十四座塔楼，建立楼板与窗洞，再加入公共圆环、高架结构和连续海床。尺寸与间距写成参数，比例和通行净空就可以一起调整。
# Towers frame a clear central water volume and a long flooded avenue.
for spec in [(-990,-340,390,400,1690,1),(1030,-570,440,470,2010,0),
(-930,-1510,420,470,2020,0),(980,-1740,400,440,1790,1),
(-1190,780,410,470,1210,0),(1260,700,370,410,1430,1),
(-470,-2660,370,400,2330,1),(370,-2850,340,430,2070,0),
(-1690,-2310,420,430,1850,0),(1630,-2460,450,440,2160,0),
(-1860,-940,380,440,1470,1),(1830,-900,400,510,1720,0),
(-1800,200,360,450,1850,0),(1870,320,390,420,1630,1)]:
tower(*spec)The same generator also exports a geometry manifest and the seabed height field. The browser uses this spatial information for ground contact and movement. This is an early foundation preserved in the archive; the final city adds later asset replacements, lighting, ecology and choreography.
同一个生成器还会导出几何清单与海床高度场，网页运行时据此处理接地和运动。这张图展示的是保留在档案中的早期底模；最终城市在它之上继续更换资产、加入灯光、生态和镜头调度。
One vessel, two kinds of making一艘逆帆，两种建模方式
The sailship made the division of work especially clear. An image-generation study established the upside-down silhouette and overlapping translucent sails. I then isolated the solid hull for Tripo. The curved membranes, their attachment points and the structural rigging were built separately through code and assembled in Blender.
逆帆把分工体现得更清楚：图像生成先确定倒悬轮廓和交叠的半透明帆面，再把实心船壳单独提取出来交给 Tripo。弯曲帆面、连接点与结构索具则由代码单独构建，并在 Blender 中装配。
Read the original hull-reference prompt · English展开船壳参考图的原始提示词 · 英文
Use case: precise-object-edit. Asset type: isolated hard-surface hull reference for Tripo 3D reconstruction.
Use the attached ship concept as the design reference. Extract and redesign ONLY the compact inverted ship HULL, with no sails or masts, no wires, no water, no city, no foam. A single isolated polished metallic futuristic boat hull on flat neutral medium-gray background, three-quarter view slightly from below so its downward-facing underside deck and side edge are visible. Horizontal long axis, pointed bow on right, rounded tapering stern on left, compact elegant boat-shaped crescent silhouette (length to width 3.5:1, shallow height). Closed continuous curved pearl titanium outer shell, charcoal inset grooves, subtly layered structural ribs around THREE small recessed circular mast mounting sockets underneath. Detailed clean bevels and organic flowing hard-surface silver ribs; tiny warm glass recessed portholes, not glowing lights. The hull keel is on TOP and deck is on BOTTOM because it is upside down. No vertical towers, no wings, no engine rockets, no transparent materials, no text. Neutral broad soft studio lighting, no cast shadow, entire isolated object visible with generous margin. Keep hull short and sculptural as in compact reference.
A textured starting form
带材质的形体起点
The compact sculptural hull and its source PBR textures.
紧凑的雕塑感船壳，以及源 PBR 纹理。
A connected, editable vessel
有结构、可编辑的船体
Five curved sails, hems, masts, tension fittings, rigging and detailed hull outfitting.
五片弯曲帆面、帆缘、桅杆、张力连接件、索具与船壳细部。
Blender produced an editable assembly and a complete GLB. Three.js supplied the continuous route, chapter lighting, sail response and wake. The result depends on those connections: the generated hull provides its surface identity, while authored geometry and behavior make it a vessel that belongs to the world.
Blender 输出可编辑装配与完整 GLB；Three.js 再负责连续航线、章节灯光、帆面响应与尾流。生成船壳提供表面特征，定制几何与行为则让它成为这个世界里能够航行的一艘船。
More retained asset studies更多保留的资产研究
Generation was followed by selection. Some facade studies did not meet the required proportions; a sea-fan candidate was rejected after close geometry inspection. Rails, glazing divisions, foundations and joints still needed precise local geometry.
生成之后仍然需要筛选。有些立面样件的比例不合适，一件海扇候选也在近景几何检查后被拒收。轨道、玻璃分格、基础与接头等位置，仍需要精确的本地几何。
Light needs a source. Water needs a trace.光要有来源，水要留下痕迹
The caustics initially read as a tiled net. Their regular spacing and sharp intersections made the seabed feel patterned rather than illuminated. Later work reshaped the optical field into smoother, irregular folds, using continuous motion instead of frame-by-frame random noise. Fine detail also had to soften with distance so it would not sparkle against the buildings.
焦散最初像一张平铺的网：规则间距和尖锐交点，让海床更像铺了纹样。后续把光学场调整为更圆润、不规则的折叠，通过连续变化驱动，而不是逐帧随机抖动。细节还要随距离收敛，避免在建筑边缘变成碎闪。
The underwater rays went through another correction. Broad cones looked like fog; isolated bright shafts looked like searchlights with no source. The revised approach ties narrower rays to the surface illumination, wave motion and sun direction. The entry region on the water and the light below must agree, while architecture interrupts the beam.
水下光束经历了另一轮纠正：太宽的锥体像雾，孤立的亮柱又像没有来源的探照灯。调整后的方向是，让更收束的射线与水面照明、波浪和太阳方向对应；入水位置与下方的光必须联系起来，建筑则应当遮住光路。
City light follows the same principle of contrast. Silence keeps a few scattered signals. Rewilded adds living light without washing out the whole city. Echoes restores selected room circuits, signs and transit lights in stages, including restrained flicker. Darkness between the lit areas makes the return visible.
城市灯光也依靠对比建立层次。寂静里保留零星信号，生态重占加入生物的光，避免把整城一起提亮；回响则分阶段恢复部分房间电路、标识与交通灯，并保留克制的闪烁。亮处之间的暗部，才让复苏真正被看见。
The sand gained a local memory of movement: displacement, suspended particles and settling. Vehicles and nearby bodies can disturb it, with ground contact and shadows checked together. This is a bounded 2.5D approximation for the artwork, not a full fluid simulation.
沙地增加了局部的运动记忆：位移、悬浮颗粒和重新沉降。车辆及近底生物可以扰动它，接地与阴影也需要一起检查。这是一套为作品服务的有界 2.5D 近似，并非完整流体模拟。
A shared current共享同一道水流
The sardine storm became one of the world’s main actors. Fish gather, open a passage around a larger body and return to the architecture. The important moment is not only the dense vortex: it is also the opening, the hesitation and the way the school closes again after a whale or departing train passes.
沙丁鱼风暴逐渐成为这个世界的主角之一。鱼群聚合，为更大的身体打开通路，然后回到建筑之间。重要的不只是密集旋涡，也包括开口、短暂迟疑，以及鲸或离站列车经过后重新合拢的过程。
Jellyfish use a contraction-and-recovery rhythm, with movement and light responding to the pulse. Their tentacles retain motion history instead of following as rigid ornaments. Manta rays glide and bank, while smaller residents and suspended matter add movement at other scales.
水母以收缩与恢复的节奏推进，运动和亮度随脉冲回应；触须保留运动历史，避免像僵硬饰物一样跟随。蝠鲼滑翔、侧倾，小型住客与悬浮物则在不同尺度上补充运动。
The later visible whale is a Tripo asset with a rig, custom materials and procedural motion. Its route was moved into the open central corridor after repeated problems between towers. Collision checks consider its body envelope rather than only a center point. That gives it room to turn and gives the viewer time to understand its size.
后期可见的鲸使用 Tripo 资产，结合骨架、自定义材质与程序化运动。它曾反复困在高楼之间，因此巡游路线调整到开阔的中央水道；碰撞检查也考虑身体包络，而不只是中心点。这样既给它留出转弯空间，也让观众有时间感受它的体量。
These interactions are selective and local. Neighbor searches are bounded with a spatial grid, shared calculations are reused, and repeated objects use instancing. The intention is a coherent ecological impression within a browser’s budget, rather than an exhaustive ocean simulation.
交互采用有选择的局部计算：用空间网格限制邻居搜索，复用共同计算，并通过实例化绘制重复个体。目标是在浏览器的预算内形成连贯的生态感，而非穷尽整个海洋的模拟。
A repair becomes a return从一次修复，到整座城市的回应
The story brings the animals, the returning humans and the city’s technology into one sequence. A visitor first meets the existing life, then sees a returning craft deliver energy and a maintenance rover restore a connection. Light and movement follow that small act: rooms respond, the old train rises, and fish make space for it.
故事把生物、归来的人类与城市技术串在同一条线上。观众先遇见已经生活在这里的生命，再看归航的潜航器交付能量、维护车修复连接。光与运动随后回应这件小事：房间亮起，旧日列车升起，鱼群为它让出空间。
Two competing camera systems had made the journey feel disjointed. The later passes brought the timing and shot transitions into a shared sequence, shortened the less-developed station passage and gave the relighting a sustained city-wide view. Nearby shots establish detail; wider views let the consequences of a repair register.
两套相互竞争的运镜系统曾让旅程显得割裂。后续把时序和镜头交接整合到共同序列中，缩短细节尚弱的车站段，并为整城复明安排持续的远景。近景建立细节，远景则让修复带来的变化得到充分展示。
A beautiful camera position is only half a shot. The route into it also has to work. Transitions around buildings were revised to reduce collision-driven corrections; the sailship is now viewed with the city behind it. Both outward and return transfers were lengthened so the camera could settle before the next event.
漂亮机位只完成了一半，抵达它的路径也必须成立。绕楼转场经过修改，以减少碰撞纠正造成的顿挫；帆船则增加了以城市为背景的视角。前往帆船与返回海面的转场都被拉长，让镜头在下一件事发生前有时间安定下来。
The climax follows the actual whale event: ascent, release, flight and re-entry. Surface effects were refined away from an opaque white burst toward the surrounding water’s color and scale. The aurora continues the luminous movement from the underwater world through the surface, keeping the ending connected to what came before.
高潮跟随鲸的真实事件推进：上浮、离水、腾空与回落。水面效果从过白的团块，逐渐向周围水体的颜色和尺度收敛。极光则把水下的发光运动延伸到海面之外，让结尾仍与来处相连。
Two pieces. One continuous arc.
两段音乐，一条连续的情绪线。
The 118-second film uses “Weightless Glow” 1 and 2, made with Suno. An eight-second crossfade at 00:46–00:54 sits inside the city’s 00:45–00:55 relighting view. The second piece then carries the train, whale, sailship and surface passage. The final 27 seconds retain consecutive source frames, preserving the breach and aurora in their actual order.
118 秒影片使用以 Suno 制作的《Weightless Glow》1、2。00:46–00:54 的八秒交叉淡化，安排在 00:45–00:55 的城市复明远景之内。第二段继续承接列车、鲸、帆船与出海；最后 27 秒保留连续源帧，让破水和极光保持实际发生的先后关系。
The work behind a smoother first turn第一次转身背后的工作
The costs became most obvious during entry and the first camera turn: new materials compiled, textures reached the GPU and previously unseen parts of the scene became visible at once. Preparing the relevant render resources before entry, sharing materials and geometry, and reducing repeated per-frame work became as important as adding detail.
开场和第一次转身最容易暴露开销：新材质编译、纹理上传到 GPU，原本看不见的场景又同时进入视野。进入前准备所需渲染资源、共享材质与几何、减少每帧重复计算，变得和增加细节同样重要。
The public web package consolidates script requests and uses versioned asset caching. Selected assets were reduced without changing their content. Smooth and Full quality modes give visitors a choice, while the loading screen reflects preparation before the world is revealed.
公开网页版本合并脚本请求，并使用带版本的资产缓存；部分资源在不改变内容的前提下减小体积。Smooth 与 Full 两种质量模式给观众选择，加载界面则在世界揭幕前呈现准备状态。
Some visible stutters were interface issues. The progress display could move backward as phases changed. At entry, a long loading label changed to a shorter action label after the overlay had already faded, making the UI jump. The handoff now prepares the final button state before revealing it.
一些肉眼可见的卡顿其实来自界面：加载阶段交接时，进度曾经倒退；遮罩已经淡出，按钮才从长的加载文案变成短的操作文案，又让 UI 跳了一下。现在交接会先准备最终按钮状态，再揭开遮罩。
One recorded desktop web check measured about 65 seconds to readiness on a cold load and 16 seconds with cached assets. A later public cold check was slower. Those observations depend on the device, connection and cache; heavy initial downloads and fish-school CPU work remain areas to improve. The 30 fps film is fixed-step engine output and is not evidence of real-time 30 fps playback.
一次桌面网页检查记录到冷加载约 65 秒、缓存后约 16 秒就绪，随后一次公开地址冷加载检查更慢。这些观察依赖设备、网络与缓存；首次下载量和鱼群 CPU 开销仍有优化空间。影片的 30 fps 来自引擎固定步长输出，不能作为实时运行达到 30 fps 的证明。
The useful question became: does this detail help the world feel connected—and can the experience afford it?
后来最有用的问题是：这处细节能让世界更连贯吗？体验又能否承担它的代价？
A living archive持续生长的创作档案
This retrospective brings together development notes, retained scene captures, asset records and the completed v35 film. Early images retain their original look and, in some cases, development UI. They are shown as stages of the work, not as interchangeable views of the final release. The film and cover use actual engine-rendered scenes; image-generation tools supported concepts and selected artwork elsewhere in the project.
这篇回顾汇集开发笔记、保留的场景截图、资产记录和已经完成的 v35 影片。早期图像保留原来的样貌，有些还带着开发界面；它们是创作阶段的记录，不是最终版本的其他机位。影片与封面使用实际引擎渲染画面；图像生成工具则用于概念研究及项目中的部分画面。
- Artwork / 创作
- Boyan Peng
- Tools / 工具
- Three.js · p5.js · Blender · Tripo · OpenAI image generation · OpenAI Codex · Web Audio API · Suno
- Music / 配乐
- “Weightless Glow” 1 & 2 — raphaelcc, generated with Suno.
- Whale / 鲸
- The current visible whale is Tripo-generated, with a rig, custom materials and procedural animation.当前可见的鲸由 Tripo 生成，结合骨架、自定义材质与程序化动画。
Humpback Whale (Swimming) — Connlan_Immure, CC BY 4.0. Used in the earlier whale system shown in the archive; the legacy asset remains in the project’s base/fallback pipeline.用于档案所示的早期鲸系统；旧资产仍保留在项目的基础／回退流程中。 - Water / 水体基础
- WebGL Water — Evan Wallace, © 2011, MIT. Includes adapted simulation and caustic techniques; original notices are retained.包含改编的模拟与焦散技术，保留原始许可声明。