web-sims

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Web sims

Web 模拟

Read

sims/README.md

first; it has the contract and every command.

请先阅读

sims/README.md

，其中包含约定规范与所有命令。

When to use this instead of Remotion

何时使用此方案而非Remotion

Hundreds of moving things with their own rules (agents, particles, crawlers).
A 3D object or machine the camera moves around or flies through.
Anything that is easier to write as a three.js or canvas page than as React.

Motion graphics with type, UI and timed reveals stay in Remotion (

src/

数百个拥有自身运行规则的运动对象（agents、粒子、爬取器）。
镜头环绕或飞掠的3D对象或机械。
任何用three.js或canvas页面实现比用React更简单的内容。

包含字体排版、UI和定时展示的动态图形仍使用Remotion实现（位于

src/

目录）。

Workflow

工作流程

Agree on the idea, the hero moment and the length with the user. Default format: 1080×1350 layout (4:5), 60 fps, 20–24 s.
Put every beat in a
```
timeline.json
```
next to the sim (chapters, the hero moment, camera keys). Sound scripts read the same file.
Start from the closest example:
```
crawlers
```
(agents on DOM text),
```
dossier
```
(the same plus screen-space overlays),
```
engine
```
(three.js object with cutaway, chapters, fly-through, exploded view, generated sound).
Simulate anything stateful once at load;
```
render(t)
```
only reads it.
Build:
```
node sims/build.mjs <name>
```
.
Review with stills at every beat:
```
node sims/capture.mjs <name> --stills 0,2,5,8,12,16,20 --cols 4 --out out/sims/<name>-review.png
```
. Open the sheet and check it like the review loop says: frame 0 strong, one focal point per frame, nothing blown out by bloom, text readable on a phone, labels never cover the subject. Fix and repeat.
Sound: a music track (
```
--music
```
, the sim gets
```
cfg.beats
```
and should hit the drop), a generated bed (
```
python3 sims/<name>/sound.py
```
like
```
sims/engine/sound.py
```
), or both mixed with ffmpeg first.

Capture:

node sims/capture.mjs <name> --size 1080x1350 --out out/sims/<name>.mp4

and look at a sheet of the final file before calling it done.

与用户确认创意、高光时刻和时长。默认格式：1080×1350分辨率（4:5比例）、60fps、时长20-24秒。
将所有关键节点（章节、高光时刻、镜头关键帧）存入模拟文件旁的
```
timeline.json
```
中。音效脚本也会读取该文件。
从最匹配的示例开始开发：
```
crawlers
```
（DOM文本上的agents）、
```
dossier
```
（在前者基础上增加屏幕空间叠加层）、
```
engine
```
（带剖面图、章节、飞掠镜头、爆炸视图、生成音效的three.js对象）。
所有有状态的模拟内容在页面加载时一次性计算完成；
```
render(t)
```
仅执行读取操作。
构建命令：
```
node sims/build.mjs <名称>
```
通过各关键节点的静帧进行评审：
```
node sims/capture.mjs <名称> --stills 0,2,5,8,12,16,20 --cols 4 --out out/sims/<名称>-review.png
```
。打开静帧拼图，按评审循环要求检查：首帧视觉冲击力强、每帧仅一个焦点、没有因Bloom效果过曝的内容、文字在手机上清晰可读、标签不会遮挡主体。修复问题后重复评审。
音效：可使用音乐轨道（通过
```
--music
```
参数传入，模拟程序会获取
```
cfg.beats
```
并需匹配Drop点）、生成的背景音（参考
```
sims/engine/sound.py
```
，运行
```
python3 sims/<名称>/sound.py
```
生成），或先通过ffmpeg将两者混合。
捕获视频：
```
node sims/capture.mjs <名称> --size 1080x1350 --out out/sims/<名称>.mp4
```
，完成前需查看最终文件的静帧拼图确认效果。

Lessons from the examples

示例经验总结

Bloom eats detail: keep emissive and additive layers under ~1.0 and raise them only for the one hero moment.
Glossy metal plus a low sun gives white streaks. Use roughness ≥ 0.45 and envMapIntensity ≈ 0.5 on big surfaces.
One hero object beats a crowd. If parts hide the subject, move them out of the way or fade them.
Chapters + a one-line caption per step + labels with real numbers make a simulation read as an explanation, not just eye candy.
A camera that flies through the object is worth more than ten orbits.

Bloom效果会损耗细节：将emissive层和additive层的数值保持在1.0左右，仅在高光时刻调高。
光滑金属搭配低角度阳光会产生白色条纹。大表面的roughness需≥0.45，envMapIntensity约为0.5。
单个核心主体优于一堆元素。如果有部件遮挡主体，将其移开或做淡出处理。
章节划分 + 每步一行说明 + 带真实数值的标签，能让模拟成为讲解内容，而非单纯的视觉装饰。
镜头穿过对象的效果远好于十次环绕旋转。