fix(render): 修复场景光束透光与幽灵/复合怪物外发光黑边瑕疵，实现 1.13c 加色混合与图层解耦 #403

New Issue

troytt · 2026-09-24T01:11:26Z

troytt commented

2026-09-24 01:11:26 +00:00

1. 缺陷背景与现象

现象 1（大教堂窗户透光）：Act 4 混沌避难所（Level 108）等关卡中，大教堂窗户射向地面的倾斜光束（Token 11, 12，以及 R1~R5, 1R~4R 等）外缘呈现厚重的棕黑色实心色块/硬木板轮廓，遮盖了地表石板纹理。
现象 2（红色鬼魂边缘黑圈）：红色指魔 / 厄运骑士（Token FR）以及幽灵类怪物（怨灵 WR、电鬼 WW 等）身周带有刺眼的黑色椭圆硬边或暗圈。

2. 根因剖析（暴雪 1.13c Ground Truth）

美术资源绘制格式：暗黑 2 原版美术资源（DCC/DC6）是基于 256 色索引色黑底设计的，光晕衰减过渡到黑色背景（调色板索引非 0，但 RGB 极低）。
混合模式机制：
- 原版通过 COF 图层的 drawEffect = 3 以及 objects.txt / Missiles.txt 的 Trans = 7（定向光束）和 Trans = 1（能量孔）触发 加色半透明混合（Additive Blending：GL_SRC_ALPHA, GL_ONE）。在此模式下纯黑底色相加为 0（即全透明），亮部叠加形成通透强光。
- 原前端在资产打包期丢弃了 Trans 和 drawEffect 属性，并在怪物合成时使用 blit() 粗暴将实体躯干与发光层拍平。
- 渲染循环统一使用 blendMode: "normal"，使得暗部像素被赋予 Alpha = 1.0 并在屏幕上实心画出。

3. 重构实现方案

场景物件与光束（R1）：
- src/game/objects.ts：扩展 ObjectsRow 支持 blendMode，识别 1.13c 的 Trans = 7/1 与 COF drawEffect = 3 物件。
- src/scene/act-scene.ts：在物件深度绘制循环中，将光束等物件派发至 blendMode: "additive"。
- 内置 ADDITIVE_OBJECT_TOKENS 静态兼容映射，无需重新打包即可即时消除全图 136 个关卡的黑块。
怪物图层解耦与双通道加色绘制（R2）：
- src/game/monster-art.ts：纯加色幽灵怪（WR, WW）整帧标记为 blendMode: "additive"；复合发光怪物（如指魔 FR）根据 drawEffect 自动解耦为实体躯干 sheet 与发光魔翼 glowSheet，全 8 方向、448 帧保持严格 0 像素锚点漂移。
- src/scene/act-scene.ts：怪物渲染循环先以 Normal 绘制躯干，紧接着在原坐标以 Additive 叠加魔翼，内置 ADDITIVE_MONSTER_TOKENS 回退。
打包管线契约对齐（R3）：
- scripts/pack-act-assets.ts 与 scripts/pack-entity-assets.ts 持久化 trans、blendMode 与 glowClips。
- 补充校验契约 verify-packs.ts。

4. 验证与合并结论（R4）

测试通过：全库 npm run typecheck 0 错误；Vitest 74/74 测试全量通过；模拟调度断言 961,589 项无回归。
提交合并：在分支 feat/refactor-transparency（commit a8295c2）完成，已干净合并回 main（commit c2e4c5b），并推送至远端。

### 1. 缺陷背景与现象 - **现象 1（大教堂窗户透光）**：Act 4 混沌避难所（Level 108）等关卡中，大教堂窗户射向地面的倾斜光束（Token `11`, `12`，以及 `R1`~`R5`, `1R`~`4R` 等）外缘呈现厚重的棕黑色实心色块/硬木板轮廓，遮盖了地表石板纹理。 - **现象 2（红色鬼魂边缘黑圈）**：红色指魔 / 厄运骑士（Token `FR`）以及幽灵类怪物（怨灵 `WR`、电鬼 `WW` 等）身周带有刺眼的黑色椭圆硬边或暗圈。 ### 2. 根因剖析（暴雪 1.13c Ground Truth） 1. **美术资源绘制格式**：暗黑 2 原版美术资源（DCC/DC6）是基于 256 色索引色黑底设计的，光晕衰减过渡到黑色背景（调色板索引非 0，但 RGB 极低）。 2. **混合模式机制**： - 原版通过 COF 图层的 `drawEffect = 3` 以及 `objects.txt` / `Missiles.txt` 的 `Trans = 7`（定向光束）和 `Trans = 1`（能量孔）触发 **加色半透明混合（Additive Blending：`GL_SRC_ALPHA, GL_ONE`）**。在此模式下纯黑底色相加为 0（即全透明），亮部叠加形成通透强光。 - 原前端在资产打包期丢弃了 `Trans` 和 `drawEffect` 属性，并在怪物合成时使用 `blit()` 粗暴将实体躯干与发光层拍平。 - 渲染循环统一使用 `blendMode: "normal"`，使得暗部像素被赋予 `Alpha = 1.0` 并在屏幕上实心画出。 ### 3. 重构实现方案 1. **场景物件与光束（R1）**： - `src/game/objects.ts`：扩展 `ObjectsRow` 支持 `blendMode`，识别 1.13c 的 `Trans = 7/1` 与 COF `drawEffect = 3` 物件。 - `src/scene/act-scene.ts`：在物件深度绘制循环中，将光束等物件派发至 `blendMode: "additive"`。 - 内置 `ADDITIVE_OBJECT_TOKENS` 静态兼容映射，无需重新打包即可即时消除全图 136 个关卡的黑块。 2. **怪物图层解耦与双通道加色绘制（R2）**： - `src/game/monster-art.ts`：纯加色幽灵怪（`WR`, `WW`）整帧标记为 `blendMode: "additive"`；复合发光怪物（如指魔 `FR`）根据 `drawEffect` 自动解耦为实体躯干 `sheet` 与发光魔翼 `glowSheet`，全 8 方向、448 帧保持严格 0 像素锚点漂移。 - `src/scene/act-scene.ts`：怪物渲染循环先以 Normal 绘制躯干，紧接着在原坐标以 Additive 叠加魔翼，内置 `ADDITIVE_MONSTER_TOKENS` 回退。 3. **打包管线契约对齐（R3）**： - `scripts/pack-act-assets.ts` 与 `scripts/pack-entity-assets.ts` 持久化 `trans`、`blendMode` 与 `glowClips`。 - 补充校验契约 `verify-packs.ts`。 ### 4. 验证与合并结论（R4） - **测试通过**：全库 `npm run typecheck` 0 错误；Vitest 74/74 测试全量通过；模拟调度断言 961,589 项无回归。 - **提交合并**：在分支 `feat/refactor-transparency`（commit `a8295c2`）完成，已干净合并回 `main`（commit `c2e4c5b`），并推送至远端。

troytt closed this issue

2026-09-24 01:11:27 +00:00

Sign in to join this conversation.

No Label

No Milestone

No project

No Assignees

1 Participants

Notifications

Due Date

The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: troytt/diablo2-web#403