从一段城市视频，开始认识武汉。
最初的目标，是把清华 CMAB 建筑数据与 OpenStreetMap 地图结合起来，让武汉的城市结构变得可见。随着讨论推进，影片从 90 秒扩展到 3 分 30 秒：前 190 秒讲三镇、街区、工业和跨江交通，最后 20 秒留给武汉大学。
片头也从直接介绍两江交汇，改为先交代古城与商埠的来路。历史、地理和今天的生活，需要在一条叙事里接上。墨色、纸色和夜色提供不同观看气质；彩色草书“武漢”只用于城市标志，其余中文采用简体。
先问清楚，数据里究竟有什么。
CMAB v7 提供建筑轮廓与估计高度。这里的“3D”主要通过代码把二维轮廓向上拉伸，不能把它理解成已经拥有每栋建筑的精细模型、屋顶或立面纹理。城区预览使用选定范围内的 20,089 条建筑记录，并非武汉全市的完整实景三维模型。
武汉大学的数据单独核查：文理学部范围内有 356 条 CMAB 建筑记录，拆分后形成 360 个多边形体块。“记录数”和“多边形数”统计对象不同，不能混为覆盖率。OSM 补充道路、水域、校园边界与地标位置；完整东湖关系另行下载组装，保留岛屿等内环。
校园的高程来自 Mapzen Terrain Tiles，按项目资料标注 USGS SRTM 来源。高程采样到本地网格，湖面保持水平；这仍是区域栅格数据，不是校园测绘模型。林地取自 OSM 标签，柔和混入地形着色，避免零碎的悬浮几何色块。
从经纬度，到一座能被镜头观看的城市。
经纬度不能直接当作屏幕上的米制坐标。预处理先统一投影，再围绕城区和校园各自的中心转换为本地米制坐标，减少大数值带来的计算误差。河流多边形保留孔洞，道路转换为线，建筑轮廓按估计高度生成网格。
当前建筑高度在画面中作 1.8 倍视觉增强，便于广角镜头辨认体块；它不改变原始数据中的高度记录。阴影、环境遮蔽、雾和材质共同建立层次。老图书馆等校园地标的屋顶，依据真实轮廓与 OSM 颜色标签作着色示意，仍不等于精细建筑复原。
Three.js 负责三维场景，Canvas 负责片名、年代、标注与字幕。镜头位置和目标点由时间线驱动，缓动插值让镜头连续移动。成片画布固定为 1920×1080；网页预览可以降低三维渲染分辨率，照顾设备性能。
历史需要证据，也需要克制。
讲述覆盖三镇成形、1861 年汉口开埠、1924 年江汉关大楼落成、1890 年筹建汉阳铁厂、1954 年规划与 1957 年长江大桥，以及后续多中心城市结构。相关事实优先引用武汉市政府、规划部门、水务部门和学校的公开资料，文末列出链接。
现代建筑数据不能冒充某个历史年份的城市实景。历史段保留弱化的现状空间参照，并明确说明底图性质。没有依据的历史城界、工厂点位和装饰性圈线被撤去；大桥和江汉关的重点提示，也要等讲述到相应年代才出现。
完整看完，记下问题，再一起修。
早期版本在 00:30—01:40 过度靠近河面：讲的是三镇与街区，观众却看不到全貌。另一些辅助图形没有清楚含义，只增加了理解负担。图中保留同一讲述时段的真实开发记录：中文对比展示广角修正之后的标注调整，英文对比保留更早的局部构图。
审阅方法也随之改变：冻结一版，从片头连续看到片尾，阅读完整中英文文案，记录构图、叙事、地标、字幕、转场和播放器问题，然后集中修改。下一轮再完整复看，避免“发现一个就修一个”打断判断。
程序逐帧检查 6,300 个时间点的镜头与字幕约束；输出帧还要逐张解码，检查尺寸、缺帧与空白异常。完整播放和一秒一张的缩略图帮助检查节奏。这些检查互相补充，自动通过不代表历史内容和艺术效果已经得到证明。
让声音跟上画面，也给城市留下呼吸。
中英文共享同一条章节时间线，语言切换时字幕与旁白一起切换。旁白使用标准普通话男声与英式英语男声候选。根据试听反馈，语速再降低约 12%；时间紧的句子同步精简字幕，不用强行加速把话塞回去。
背景音乐由代码原创合成：以 72 BPM 的节奏、钢琴式音色、持续和声与轻脉冲，陪伴城市从古城、商埠进入工业与跨江发展。配乐在旁白期间降低音量，片尾逐渐收束。它没有使用参考影片的原声音乐。
功能同步、音量峰值和时长可以用程序检查；音色、停顿和纪录片式的舒展节奏，还需要实际试听。旁白的节奏修订与画面审阅分别记录，方便后续继续改进。
从一张好看的画面，到一个能用的播放器。
播放器要处理的不只是播放按钮：全屏后进度条和清晰度仍须可用，移动端要有足够大的触控区域，语言切换要保留观看位置，旁白和配乐也不能各走各的时间。
测试覆盖桌面浏览器、390×844 竖屏与 844×390 横屏视口。可见控件的触控区域至少 44px，窄屏提供独立可读字幕。视口模拟不等于已经验证所有 iOS、Android 实机行为。
文件分发采用腾讯云广州 COS。原生 1080p 母版再输出 720p 与 480p，使用适合浏览器的 MP4、H.264 与 AAC。文件名附带内容哈希，清单记录语言、主题、尺寸和地址；跨域读取与 Range 分段请求分别核对。旧 15 秒样片和 3 分 30 秒审阅版必须明确区分。
把完成和待完成，都写清楚。
目前可以查看完整章节预演、真实数据场景、双语字幕与旁白候选、原创配乐，以及播放器交互。历史段的全貌构图、地标提示时机和校园结尾已按审阅清单集中调整。
影片与本页一同发布在 city.dpinsight.world，高清文件由广州 COS 分发。接下来仍会继续打磨精细地标、校园屋顶与地形，并补充实体手机长测。文中开发画面保留其当时状态，不代表已经拥有所有建筑的精细模型。
Starting with a city film.
The project began by combining Tsinghua CMAB building data with OpenStreetMap to make Wuhan’s urban structure visible. The film grew from a 90-second idea to 3 minutes 30 seconds: 190 seconds for the city, followed by exactly 20 seconds for Wuhan University.
The opening now establishes the old cities and trading town before introducing the river confluence. Ink, paper and night palettes offer different viewing moods. Traditional characters appear in the colourful city logo; Chinese narrative text uses simplified characters.
First, find out what the data contains.
CMAB v7 supplies building footprints and estimated heights. Code extrudes those polygons into masses; this does not provide detailed roofs, façades or surveyed architectural meshes. The city preview contains 20,089 building records within a selected area, rather than a complete photorealistic model of Wuhan.
A separate campus audit found 356 CMAB building records inside the main arts-and-sciences campus. Multipart geometries produce 360 polygon masses. Records and polygons are different units. OSM supplies roads, water, campus boundaries and landmark positions. The complete East Lake relation is assembled with its inner rings.
Campus elevation is sampled from Mapzen Terrain Tiles, with USGS SRTM attribution. Lake surfaces are levelled. This regional raster is not a campus survey. OSM woodland tags are blended into the terrain instead of being displayed as distracting geometric patches.
From coordinates to a scene a camera can explore.
Longitude and latitude are projected into local metre coordinates around separate city and campus centres. Water polygons retain holes, roads become lines, and building footprints become extruded meshes. Local coordinates also reduce numerical precision problems.
Buildings use a 1.8× visual height scale to remain legible in wide shots; original height records are retained. Lighting, shadows, ambient occlusion, fog and materials create depth. Campus roof caps follow real footprints and OSM colour tags, while remaining schematic.
Three.js renders the scene; Canvas composes titles, dates, markers and subtitles. A timed camera path uses eased interpolation. The output canvas is native 1920×1080. Interactive preview quality can be reduced independently to suit the device.
History needs evidence and restraint.
The narrative follows the three towns, Hankou’s opening in 1861, Jianghan Customs House in 1924, the Hanyang Ironworks beginning in 1890, the 1954 plan and the Yangtze bridge opening in 1957, then later urban development. Public government, planning, water-authority and university sources support these facts.
Present-day building data cannot reconstruct a historical city by itself. Historical chapters explicitly use subdued present-day spatial context. Unsupported town boundaries, factory locations and decorative rings were removed. Bridge and Customs emphasis now follows the relevant narrative cue.
Watch the whole film, record issues, then revise.
An early version zoomed too far into the rivers between 00:30 and 01:40. The narration discussed towns and streets, but viewers lost the wider geography. Other abstract graphics had no clear explanatory role. The images below are actual development frames from the same narrative moment. The Chinese article compares a later cue revision; the English article retains the earlier cropped shot.
The review process changed: freeze a version, watch continuously from beginning to end, read both scripts, record issues, and revise them together. Then watch the complete revision again. Editing each issue immediately had interrupted the overall judgment.
Software checks camera and subtitle constraints at all 6,300 time points. Exported rasters are individually decoded and checked for dimensions, missing frames and blank images. Continuous playback and one-second contact sheets support human review. None of these checks alone proves historical accuracy or artistic quality.
Give the narration room to breathe.
Both languages share one chapter timeline. Subtitles and narration switch together. Stock Mandarin and British English male voices are review candidates. Listening feedback led to approximately 12% slower delivery. Dense sentences were shortened in both script and subtitles instead of speeding the voice back up.
The original score is synthesised in code: 72 BPM, piano-like tones, sustained harmony and gentle pulses accompany the urban story. Music ducks beneath narration and resolves at the ending. No soundtrack from the reference film is used.
Timing, peaks and synchronisation can be checked automatically. Voice character, pauses and documentary pacing still require listening. Pacing revisions and picture reviews are recorded separately for later improvement.
A usable player is part of the film.
Fullscreen must preserve seeking and quality controls. Mobile controls need usable touch targets. A language switch should preserve viewing position, and narration and music must follow the same clock.
Testing includes desktop browsers plus 390×844 portrait and 844×390 landscape viewport simulations. Visible controls have at least 44px touch targets, and narrow layouts show a separate readable caption. This is not a claim of complete physical iOS and Android device coverage.
Media delivery uses Tencent Cloud COS in Guangzhou. A native 1080p master is the source for 720p and 480p MP4 renditions using H.264 and AAC. Content hashes identify files, and a manifest records languages, themes, dimensions and URLs. CORS and Range requests are checked separately. The older 15-second sample must remain clearly distinguished from the 210-second review film.
Keep the status visible.
The project has a full chapter preview, source-backed scenes, bilingual subtitles and narration candidates, an original score and working player interactions. Review-driven revisions address historical framing, landmark cue timing and the campus ending.
The film and this journal are published together at city.dpinsight.world, with HD files delivered from Guangzhou COS. Detailed landmark architecture, further campus refinement and physical-device testing remain future work. Development images retain their original state and do not imply that every fine architectural model is complete.