通过 Emscripten 将自研 C 引擎移植到 Web 是一个很有收获的过程,前提是你需要处理好 64 位原生环境与 32 位 WebAssembly (WASM) 之间的差异。以下是我在移植过程中总结的关键经验: * **指针与结构体大小:** WASM 的 32 位架构会导致序列化原始指针时出现结构体布局不匹配的问题。请将烘焙数据(baking data)与运行时数据分离,以确保内存对齐的一致性。 * **在 32 位原生环境下调试:** 不要直接在浏览器中调试。使用带有 `AddressSanitizer` 的 32 位原生构建版本来捕捉内存损坏问题——在 WASM 中导致崩溃的错误通常可以在此处重现,并获得完整的调试器支持。 * **平台严苛性:** OpenGL ES (WebGL) 的容错性远低于 Direct3D。请确保顶点布局与着色器输入完全匹配,并注意帧缓冲区中 Y 坐标的翻转问题。 * **着色器移植:** 使用 `mix()` 代替 `lerp()`,并确保所有浮点数都明确标注(例如使用 `1.0` 而非 `1`)。 * **工具链:** 使用 `vcvars32` 直接从命令行构建 32 位原生二进制文件,无需复杂的解决方案文件。 * **Web 特性:** 如果音频库需要,请确保 Emscripten 导出了必要的运行时方法(如 `HEAPF32`)。 移植工作在很大程度上是为了修复那些仅在 64 位环境下“碰巧能运行”的代码。
该项目是在 Recurse Center 为期六周的驻留期间创作的,是一种用于设计程序化时钟的视觉化、基于节点的语言。用户可以在“织布机”(Loom)上通过连接代表向量、标量、字形和环境“栖息地”的节点来构建时钟。
该系统依赖于数学基元——利用基于时间的向量来表示小时、分钟和秒——并将其转化为圆形画布上的动态几何动画。编辑器使用 Svelte 5、TypeScript 和 p5.js 构建,特意摒弃了文字,转而采用手绘符号和印记,旨在创造一种抽象且直观的界面。
该工具的功能类似于编译器:一旦作品完成,“织布”(Weave)功能会将其渲染成一个独立的、自包含的 HTML 文件。这些导出的时钟完全基于程序生成,允许用户自定义节奏、主题和“呼吸”模式。通过操控“织布机”,设计者可以创造出独特且自定义的计时可视化效果,并完全在浏览器中运行。您可以访问 https://te-st.ing 体验该工具并导出您自己的时钟。