使用 WebGL 和 GitHub Copilot 构建复古 CRT 终端网站（Claude Opus 4.5）

Source: Dev.to

Introduction

在假期期间，我发现了 cool-retro-term，这是一款开源终端，能够模拟老式阴极射线管（CRT）显示器的外观。它的复古科幻氛围让我想起了《异形》和《辐射》宇宙，于是我想给我的个人网站也营造类似的感觉。

原项目使用 QML 和 C++ 编写，而这两种语言我并不熟悉。我好奇它是否可以通过 WebGL 或 Emscripten 移植到 Web 技术上。GitHub Copilot 建议走 WebGL 路线，因为它的技术挑战相对较少。

Approach

我有 Three.js 的使用经验，于是先让 Claude 在 Three.js 中实现静态 CRT 框架，暂时不考虑终端仿真。这为我提供了一个稳固的基础，同时避免了过于复杂的实现。

Adding Text

接下来，我指示 Claude 使用复古字体在 Three.js 场景中渲染硬编码文件中的基本文本。

Visual Effects

随后，我把原始 OpenGL 着色器中的视觉效果迁移到了 WebGL。效果包括：

• Bloom – 使亮区向周围像素扩散的辉光
• Brightness – 整体亮度控制
• Chroma Color – 颜色着色，以模拟磷光体特性
• RGB Shift – 轻微的颜色通道分离，模拟 CRT 的颜色错位
• Screen Curvature – 对图像进行扭曲，模拟弧形玻璃显示器
• Burn‑In – 模拟长时间显示静态图像导致的磷光体残影
• Flickering – 类似真实 CRT 显示器的细微亮度波动
• Glowing Line – 扫描光束在屏幕上移动的效果
• Horizontal Sync – 模拟水平同步问题导致的图像失真
• Jitter – 小幅随机移动，以模拟信号不稳定
• Rasterization – 可见的扫描线，CRT 的典型特征
• Static Noise – 动态噪点/颗粒

在此阶段，我遇到了视觉错误（例如屏幕反射位置不正确）。通过与 Claude 的反复试验，这些问题得到了解决，并且没有引入新的问题。

Terminal Emulation

框架和效果都正常后，我把硬编码文本替换为 Xterm.js 的输出。Xterm.js 是一种基于网页的终端前端，常用于 Visual Studio Code 等工具。我并不需要真实的后端终端，于是让 Claude 创建了一个支持基本命令（如 clear、ls、cd、cat）的简易仿真器。

Games

终端就绪后，我通过添加文字游戏来丰富体验：

• Pong
• Tetris
• Snake
• Minesweeper
• Space Invaders
• Arkanoid

大多数游戏在第一次尝试时就能完美运行，少数出现了轻微的视觉瑕疵，向 Claude 描述问题后很快得到修复。

Audio and Video Support

我还希望终端能够播放音频和视频文件，类似 ffplay 的功能。Claude 实现了一个 ffplay 命令，能够在渲染视频时应用前面创建的所有 CRT 效果。

Refactoring and Publishing

最后一步是将代码库拆分：

• Library code – WebGL 复古终端渲染器
• Application code – 终端仿真器和游戏

Claude 将项目重构为一个独立的 npm 模块用于渲染器，单次尝试即完成了整个任务。

Results and Cost

• 总实现时间：10–15 小时
• 若没有 LLM，工作可能需要数周时间。
• Copilot 使用量：约占每月 Business 令牌配额的 50%（$21/月），整个项目大约花费 $10.50。
• 成本节约和速度提升展示了 LLM 作为开发工具的强大威力，尤其是在像着色器编程这样不熟悉的技术领域。

Links

• Live demo:
• Source code: