diff --git a/.workbuddy/memory/2026-10-21.md b/.workbuddy/memory/2026-10-21.md index 158f1b4..3fb8d66 100644 --- a/.workbuddy/memory/2026-10-21.md +++ b/.workbuddy/memory/2026-10-21.md @@ -528,3 +528,26 @@ base.css 还原成 CRLF,插入行要用同一行尾,否则变 MIXED。 真实排版没问题 —— 移动端必须用**宽度锁定的 iframe**(生成器那套)验,别据 window-size 结论判 bug。 shiroko 的窄屏块(≤900px)只有一条 `html[data-theme-style]`(0,1,1),但它没有任何 `[data-page-scope]` 块,所以不会被压住;深色块的 `--tb-page-image` 覆盖窄屏属预期(深色不用实景照)。 + +## 19:2x shiroko 单车/步枪「白色没抠」→ 白上白,只能全白转透明 + +**根因不是抠图参数**:素材是「白底 + 白车架」。采样确认车架涂装与背景白是同一个值 +(都在 `#f9f9f9`,差 0~3 级),颜色上完全分不开;四角 floodfill 只吃掉外圈, +轮圈内、车架三角、车筐、枪与车架之间的白整块留着 → 看着像没抠。 +量化:修复前**不透明像素里近白(>240) 占 50%**,全透明只有 43%。 + +试过三种程序化方案(都写了脚本): +1. 只按「近白厚度」区分白洞/白涂装(腐蚀测厚度)→ **失败**:轮辐间的扇形白楔宽 9~13px, + 与车架管 5~10px 重叠,阈值怎么调都会留下白色楔子(更难看)。 +2. 全白转透明(`min(r,g,b)≥238` 软过渡 + 饱和度>14 保留彩色)→ 采用。成果: + 不透明率 19.4%、近白 0.0%、29KB;轮辐/车架/车筐全成描边,粉色轮圈 + 蓝枪托 + 阴影仍在。 +3. 手绘 SVG 替换:未做(不如现成素材真实)。 + +**代价要记住**:车身填色一起没了,成品是**线稿风**,在 1512 整页里偏淡(远看像铅笔稿)。 +若用户要「实心车」,唯一正解是重出一张**绿幕/透明背景 + 车身用浅灰蓝等中间调**的素材 +(白车在浅场景里本来就发飘),已写进 docs/theme-shiroko-assets-spec.md 的「白上白」小节, +验收清单也加了「不透明像素近白占比应≈0」这条。 + +改动:`props/bike.webp`(397×259 画布不变,位置公式不用动)、css 里图片 `?v=20261020d→20261021a`、 +`StaticVersion 20261021c→20261021d`、两份 docs 同步。`go test ./internal/theme` 全绿。 +⚠️ 画布尺寸**不能裁**:裁完 `auto 259px` 的显示宽度变了,`left calc(50% - 612px)` 的锚点会跟着漂。 diff --git a/.workbuddy/memory/topics/theme.md b/.workbuddy/memory/topics/theme.md index d891ad1..1940d54 100644 --- a/.workbuddy/memory/topics/theme.md +++ b/.workbuddy/memory/topics/theme.md @@ -52,3 +52,9 @@ 删主题只需删文件:`build()` 读不到 css 会打 warning 并忽略,已选该主题的用户静默回退站点默认。 `static/images/shiroko-cutout.png` 也一并删除(2026-10-21):它从不进 embed,只是 docs 里的图生图参考图, 仓库不存这类大图。 +- ⚠️ **白上白素材无法用颜色分开**:白底 + 白主体(如自行车)时,车身与背景是同一个白 + (实测都 `#f9f9f9`),floodfill 只吃外圈,轮圈内/车架三角/车筐整块留下 = 看着"没抠干净"。 + 自检:`不透明像素里近白(>240) 占比`,正常应≈0(修复前 50%)。要么全部转透明(成品变线稿风), + 要么重出绿幕/透明背景素材。细节见 `docs/theme-shiroko-assets-spec.md` 的「白上白」。 +- ⚠️ 换 `props/*.webp` 时**不要裁画布**:`--tb-deco-size` 是 `auto 259px`,宽度按原图比例算, + 裁完锚点 `left calc(50% - 612px)` 会漂;四周透明边留着不影响观感。 diff --git a/docs/theme-shiroko-assets-spec.md b/docs/theme-shiroko-assets-spec.md index 3eb02c7..1d5871b 100644 --- a/docs/theme-shiroko-assets-spec.md +++ b/docs/theme-shiroko-assets-spec.md @@ -58,12 +58,20 @@ | 地面 | 轮子底线贴画布底部,下方留 12~16px 给接触阴影 | | 阴影 | 可以在图内自带一层椭圆软影(不透明度 15~20%,模糊 8~12px) | | 雾度 | RGB 压白 **26%**(比人物淡一档,它在人身后) | +| 背景 | **必须是纯色绿幕或透明**,不要白底(白色车架 + 白底 = 无法分离,见下方“白上白”) | 要点: - 侧视图即可,但不要画成“图标”——轮辐、脚踏、链条这些细节保留,否则缩到 259px 会变成一个圈。 - 枪要细长、冷色(灰蓝),**不要木色**(会像双管猎枪)。 +⚠️ **白上白(本项目踩过)**:白底 + 白车架时,车身涂装和背景是同一个白(实测都是 `#f9f9f9`, +差 0~3 级),颜色完全分不开;四角 floodfill 只能吃掉外圈,轮圈内、车架三角、车筐里的白会整块留下, +看上去就是「没抠干净」。此时的取舍只有两条: +1. 把这批白**全部**设为透明 —— 车身填色一起走,成品是**线稿风**(描边 + 粉色轮圈 + 蓝枪托仍在, + 轮辐、车架、车筐网格都清楚,现有的 `bike.webp` 就是这么做出来的,不透明率 19.4%、剩余近白 0%); +2. 重新出一张**绿幕/透明背景**的素材,车身用浅灰蓝等中间调(白车在浅色场景里本来就发飘)。 + ## 四、场景 `scene-desktop.webp` | 项 | 值 | @@ -113,5 +121,7 @@ left: calc(50% - 612px) bottom 20px; 1. **白边**:放大 300% 看轮廓,出现 1px 白色描边就是没抠干净。 2. **闭合区域**:手内侧、腿间、环心应能透出背景色。 3. **接地**:脚底/轮底离画布底边 ≤ 4px;有阴影时阴影在轮子内侧。 -4. **体积**:人 ≤40KB、车 ≤40KB、场景 ≤40KB(现在分别是 16 / 23 / 19 KB)。 +4. **体积**:人 ≤40KB、车 ≤40KB、场景 ≤40KB(现在分别是 15 / 29 / 19 KB)。 5. **深色模式**:所有图片在深色下都不显示,不用管。 +6. **白上白**:车这类「白底 + 白主体」的素材,验收要额外看「不透明像素里近白(>240)的占比」—— + 正常应接近 0;本项目修复前是 **50%**,说明一半的不透明区域其实是背景白。 diff --git a/docs/theme-shiroko.md b/docs/theme-shiroko.md index ef50288..735e345 100644 --- a/docs/theme-shiroko.md +++ b/docs/theme-shiroko.md @@ -75,7 +75,7 @@ available = default,sakura,shiroko | 文件 | 用途 | 尺寸 | 体积 | | --- | --- | --- | --- | | `chibi/window.webp` | **当前使用**:侧后方视角、双手背在身后望向箱内,压白 16% | 135×460 | 13KB | -| `props/bike.webp` | 自行车 + 步枪(镜像后车头朝右),压白 26%,自带接触阴影 | 397×259 | 22KB | +| `props/bike.webp` | 自行车 + 步枪(车头朝右),压白 26% 后**只剩描边**(车身白填色已去掉,见下),自带接触阴影 | 397×259 | 29KB | | `chibi/wave.webp` | 备用:正面挥手 | 324×620 | 27KB | | `chibi/cheer.webp` | 双手欢呼 | 354×620 | 27KB | | `chibi/think.webp` | 托腮 | 283×620 | 26KB | diff --git a/internal/conf/static.go b/internal/conf/static.go index f9823fb..b54c84e 100644 --- a/internal/conf/static.go +++ b/internal/conf/static.go @@ -10,7 +10,7 @@ var ( BuildCommit = "dev" // StaticVersion 静态资源缓存版本号:base.css 与主题 css 共用,改样式只改这一处。 - StaticVersion = "20261021c" + StaticVersion = "20261021d" ) // 文本审核通道取值([security] text_censor_source)。定义在 conf 侧, diff --git a/static/css/themes/shiroko.css b/static/css/themes/shiroko.css index f1ab31b..317c955 100644 --- a/static/css/themes/shiroko.css +++ b/static/css/themes/shiroko.css @@ -46,7 +46,7 @@ html[data-theme-style="shiroko"] { 其余 3 个槽位是"空气"(纯渐变):4 左窗光柱 / 5 地面光斑 / 6 底部轻压深。 */ --tb-deco: url("/static/images/themes/shiroko/chibi/window.webp?v=20261020d"), radial-gradient(ellipse at center, rgba(63, 96, 138, 0.18) 0%, rgba(63, 96, 138, 0) 72%), - url("/static/images/themes/shiroko/props/bike.webp?v=20261020d"), + url("/static/images/themes/shiroko/props/bike.webp?v=20261021a"), linear-gradient(112deg, rgba(255, 250, 236, 0.50) 0%, rgba(255, 250, 236, 0.22) 20%, rgba(255, 250, 236, 0) 44%), radial-gradient(ellipse 560px 170px at 28% 94%, rgba(255, 248, 228, 0.80) 0%, rgba(255, 248, 228, 0) 72%), linear-gradient(0deg, rgba(110, 128, 156, 0.10) 0%, rgba(110, 128, 156, 0) 24%), diff --git a/static/images/themes/shiroko/props/bike.webp b/static/images/themes/shiroko/props/bike.webp index fa11f1d..36fc7c8 100644 Binary files a/static/images/themes/shiroko/props/bike.webp and b/static/images/themes/shiroko/props/bike.webp differ