dsh-shadertoy-skin 0.2.3 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,306 +1,312 @@
1
- # dsh-shadertoy-skin
2
-
3
- [![CI](https://github.com/zdjmrq/dsh-shadertoy-skin/actions/workflows/ci.yml/badge.svg)](https://github.com/zdjmrq/dsh-shadertoy-skin/actions/workflows/ci.yml)
4
- [![npm](https://img.shields.io/npm/v/dsh-shadertoy-skin)](https://www.npmjs.com/package/dsh-shadertoy-skin)
5
- [![license: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
6
-
7
- **给 DeepSeek Harness 套一层实时 ShaderToy 背景皮肤。** 一个零运行时依赖的 WebGL2 小播放器 + 背景库 + 玻璃界面,把聊天界面变成「浮在着色器上」的皮肤。
8
-
9
- Realtime [ShaderToy](https://www.shadertoy.com/) background skin for DeepSeek Harness (desktop & web): a zero-runtime-dependency WebGL2 player, a background library, and a translucent glass shell.
10
-
11
- > **推荐去 [www.shadertoy.com](https://www.shadertoy.com/) 逛逛** —— 插件自带的 5 个预设只是开胃菜。ShaderToy 上有几万个社区作品(搜 `background`、`seascape`、`raymarching` 这类关键词,或在 Browse 里按分类翻),挑喜欢的装进「背景库」、按自己的口味调亮度 / 速度 / 代码,就是一张专属桌面。
12
- > **改好了欢迎分享**:截图、参数、改进思路都可以提到 [Issues](https://github.com/zdjmrq/dsh-shadertoy-skin/issues),或者直接 PR(作品代码要看原作者的许可证,默认 CC BY-NC-SA 3.0:署名、非商业、同样方式共享;本仓库自写代码是 MIT,两个第三方预设按各自许可证收录)。
13
- > **欢迎 issue 和 PR**:装不上、画面不对、想要新功能 → 开 [Issue](https://github.com/zdjmrq/dsh-shadertoy-skin/issues)(附截图和 `$DSH_HOME/shader-skin.json` 里对应条目更好排查);bug 修复、文档修正、自写预设 → 直接提 [PR](https://github.com/zdjmrq/dsh-shadertoy-skin/pulls)。
14
- >
15
- > **Recommended: browse [shadertoy.com](https://www.shadertoy.com/)** — import any piece into the background library, tune it to your taste, and feel free to share screenshots, settings or improvements via Issues / PRs.
16
-
17
- https://github.com/user-attachments/assets/c8801ca1-e96e-4bfe-83bc-6e99b5551cf4
18
-
19
- *演示 1 · 像素马里奥:静态画 + 一首歌 —— 音乐「只播一次」,放完画面常驻*
20
-
21
- https://github.com/user-attachments/assets/001acdf6-90e2-4b2c-85fc-e9d076678597
22
-
23
- *演示 2 · [Seascape](https://www.shadertoy.com/view/Ms2SD1)(© TDM,CC BY-NC-SA 3.0)的个人修改版:摄像机抬到近地轨道,只留海面 —— 已作为内置预设「海面(Seascape)」随插件提供*
24
-
25
- ![马里奥像素画背景](https://raw.githubusercontent.com/zdjmrq/dsh-shadertoy-skin/main/docs/verify/readme-mario.jpg)
26
- ![代码页:查看 / 修改 / 保存并运行当前作品的着色器](https://raw.githubusercontent.com/zdjmrq/dsh-shadertoy-skin/main/docs/verify/readme-code.jpg)
27
-
28
- > 视频与截图里的 ShaderToy 作品版权归原作者:像素马里奥「Mario」(© Inigo Quilez)、Seascape(© Alexander Alekseev aka TDM),两者均以 **CC BY-NC-SA 3.0** 收录为内置预设(非 MIT,见文末许可证)。**视频与截图仅作效果展示**,插件自写代码仍是 MIT。
29
-
30
- ## 名字 / 包名(认准这两个)
31
-
32
- | 是什么 | 值 |
33
- |---|---|
34
- | **npm 包名**(`dsh plugin add` / 插件市场里填的就是它) | `dsh-shadertoy-skin` |
35
- | **GitHub 仓库** | `zdjmrq/dsh-shadertoy-skin` → https://github.com/zdjmrq/dsh-shadertoy-skin |
36
-
37
- npm 包名**没有 scope、也不带作者用户名**:不是 `@zdjmrq/dsh-shadertoy-skin`,装的时候写 `dsh-shadertoy-skin` 就对。`zdjmrq` 只出现在 GitHub 地址里。
38
-
39
- ```sh
40
- npm view dsh-shadertoy-skin version # 确认 npm 上真实存在的版本
41
- ```
42
-
43
- ## 从 ShaderToy 装一个作品
44
-
45
- 插件自带 5 个预设(3 个自写 MIT + 2 个第三方 CC BY-NC-SA 3.0,见文末许可证),但真正好玩的是把你喜欢的 ShaderToy 作品装进来。**三种做法,任选一种:**
46
-
47
- > **推荐一试**:[`shadertoy.com/view/4dfXWj`](https://www.shadertoy.com/view/4dfXWj) —— 装进来效果挺带感,导入方式见下面任意一种。
48
- > 这只是个起点:**大家完全可以根据自己的喜好随便挑别的作品,也可以自己写着色器**(写好了走同样的导入流程)。ShaderToy 作品的许可证由原作者决定(默认 CC BY-NC-SA 3.0):装在本机自己玩没问题;想提交进仓库或随包分发,先确认许可证允许,并带上署名与相同许可证(本仓库的两个第三方预设就是这么收录的)。
49
-
50
- ### 1. 粘贴代码(最稳,不用抓网页)
51
-
52
- 1. 打开作品页 `https://www.shadertoy.com/view/xxxxxxxx`,右上角 **Shader** 页签;
53
- 2. 全选 `Image` 页签里的代码(如果作品用了 `Common`,把 Common 里的函数一起复制到开头;用了 Buffer 的作品暂不支持);
54
- 3. 回到插件设置页 → **背景库** → 「粘贴 ShaderToy 代码」→ 填名字 → 粘进 `Image 代码` → **加入背景库**;
55
- 4. 列表里点 **使用** 即可,参数会即时生效。
56
-
57
- 带声音的作品(代码里有 `mainSound`)把声音代码粘进 `Sound 代码`,切到它时会出声。声音签名支持这四种:
58
-
59
- ```glsl
60
- vec2 mainSound(float time) // 立体声
61
- float mainSound(float time) // 单声道(自动复制到左右)
62
- vec2 mainSound(int samp, float time) // 带采样序号
63
- float mainSound(int samp, float time) // 单声道 + 采样序号
64
- ```
65
-
66
- 如果出声被浏览器拦住,点一下界面任意位置即可解锁(面板音量那一行也会提示)。
67
-
68
- ### 2. 让 AI 帮你装(一条指令,把网址填进去就行)
69
-
70
- 复制下面这段,把第一行的网址换成你要的作品链接,发给 DeepSeek Harness(或任何能操作文件的 AI):
71
-
72
- ```text
73
- 帮我给 DeepSeek Harness 装一个 ShaderToy 背景皮肤。
74
-
75
- 插件:dsh-shadertoy-skin(npm 包名就是 dsh-shadertoy-skin,GitHub: https://github.com/zdjmrq/dsh-shadertoy-skin)
76
- 如果还没装:桌面版走「插件 → 添加插件 → 填 dsh-shadertoy-skin → 装完完全退出并重启客户端」;命令行用 dsh plugin --profile desktop add dsh-shadertoy-skin。
77
-
78
- 要装的作品链接:<把你复制的 https://www.shadertoy.com/view/xxxxxxxx 粘在这里>
79
-
80
- 做法:
81
- 1. 打开上面的链接,拿到 Image pass 的 GLSL(若用了 Common,把 Common 的函数一起带上),以及可选的 mainSound。
82
- 2. 打开插件设置页(左栏「Shader 背景」)→ 背景库 → 「粘贴 ShaderToy 代码」:名字用作品名,Image 粘主代码,Sound 可空。
83
- 3. 导入后把它设为当前背景,确认背景真的渲染出来(不是黑屏、不是编译报错);若报编译错误,按错误行号修好再试。
84
- 4. 如果页面抓不到代码(反爬/需要登录/只给 WebGL 不给源码),直接让我手动复制粘贴,不要猜代码。
85
- 5. 该作品的许可由原作者决定(ShaderToy 默认 CC BY-NC-SA 3.0):只装在本机,不要提交进 git、不要随包发布。
86
-
87
- 装好后告诉我:装的是哪个作品、是否带声音、需不需要我调亮度/玻璃。
88
- ```
89
-
90
- > AI 抓不到 ShaderToy 页面时(它经常挡爬虫),就走上面第 1 种的「手动粘贴」——一样能装好,而且不会有许可证问题。
91
-
92
- ### 3. 从本地目录导入(批量最方便)
93
-
94
- 把 `ShaderToy 导出的 JSON`、或直接是 `.glsl` / `.txt` 的代码文件放进:
95
-
96
- ```
97
- $DSH_HOME/shader-skin/presets/ (Windows 默认 C:\Users\<你>\.dsh\shader-skin\presets\)
98
- ```
99
-
100
- 设置页 → 背景库 → 「从本地目录导入」→ 点 **导入**。这个目录不进包、不进 git。
101
-
102
- ## 参数与默认值
103
-
104
- 默认值集中在 [`native-dist/defaults.json`](native-dist/defaults.json),面板读它来渲染选项与「恢复默认」,Host 用它做兜底——**改一个文件就能改默认值**。
105
-
106
- | 参数 | 默认 | 可选 | 说明 |
107
- |---|---|---|---|
108
- | `enabled` | `true` | 开/关 | 关掉只移除背景层,设置页仍在 |
109
- | `glass` | `60` (%) | 20–95 | 玻璃不透明度:界面压住背景的程度。越高文字越清晰、背景越淡;越低背景越透亮 |
110
- | `brightness` | `100` (%) | 30–180 | 背景亮度(着色器输出乘数)。黄昏、夜景类作品看着太暗就调高 |
111
- | `panels` | `opaque` | opaque / half / clear | 卡片、代码块、弹层、**聊天输入框**、编辑器表面的底色:不透明 / 半透明 / 透明。想让背景从框里透出来就调它 |
112
- | `blur` | `0` px | 0–12 | 只在 > 0 时启用 CSS `filter` |
113
- | `scale` | `1`× | 0.25 / 0.35 / 0.4 / 0.5 / 0.6 / 0.75 / 1 / 1.25 / 1.5 / 1.75 / 2 | 渲染分辨率倍率(DPR 上限 1.5)。下拉里**直接写实际分辨率**,例如 `1280 × 810(1×)`、`320 × 203(0.25×)`,窗口变大后这些数字会跟着刷新;显卡弱/想省电选 0.25–0.5×,追求锐利选 1.5–2× |
114
- | `fps` | `30` | 15 / 20 / 30 / 60 | 渲染帧率上限;聊天时 30 足够 |
115
- | `speed` | `1`× | 0–2 | 时间轴倍速 |
116
- | `loop` / `loopSeconds` | `false` / `20` s | 开/关 · 5–120 s | **画面循环**:有的作品播一次就不动了,打开后每个周期把 `iTime` 归零重播(只重置画面,不影响声音)。带淡入淡出的作品(如马里奥)每轮会重新淡入,这是作品本身的效果 |
117
- | `audioMode` / `audioSeconds` | `loop` / `60` s | loop / once · 10–600 s | **音乐播放方式**:ShaderToy 的曲子是有长度的(播完就静音),所以 `loop` = 每到「音乐时长」就把音乐时间轴归零重放(接缝有 40 ms 淡入淡出);`once` = 放完「音乐时长」就停、**画面继续常驻**(马里奥这种静态图 + 一首歌正合适) |
118
- | `volume` / `muted` | `60` / `false` | 0–100 / 开/关 | 带 `mainSound` 的作品默认出声;浏览器可能拦截自动播放,点一下界面任意位置即可解锁 |
119
-
120
- > 两个滑块的分工:**玻璃不透明度**控制「界面压暗多少」,**背景亮度**控制「画面本身多亮」。前者影响可读性,后者只影响画面。背景看着黑,先加亮度;文字看着花,再加玻璃。
121
-
122
- ## 状态
123
-
124
- 渲染器、插件骨架、设置页、背景库、音频都已完成,剩下的是增强项:
125
-
126
- - [x] WebGL2 ShaderToy 兼容运行时:`mainImage` / 旧式 `void main` / GLSL ES 3.00 + ES 1.00 回落 / uniform 自动补齐 / 行号可读的编译错误
127
- - [x] 零依赖单文件播放器,`/shader-skin/player.html` 由 Host 半从磁盘实读(改代码刷新即可,无需重启)
128
- - [x] Host 半:静态路由 + `$DSH_HOME/shader-skin.json` 原子状态存取 + `$DSH_HOME/shader-skin/presets/` 本地预设目录
129
- - [x] Client 半:把播放器挂成 body 首子节点、转发 iMouse / 主题 / 可见性,全部资源走 `ctx.effect` 清理
130
- - [x] 玻璃壳:外壳表面(AppFrame / 侧栏 / 页面容器)全透明,**暗色滤镜只由播放器画一层**(`tintMix`),不再靠多层半透明 token 叠出来(叠 N 层会把背景压到几乎全黑,旧版就栽在这)
131
- - [x] 设置页:**左栏一行「Shader 背景」→ 主区域整页**(不是弹窗),带页头、参数 / 背景库 / 代码三个页签
132
- - [x] **参数**:启用、作品切换、玻璃不透明度、背景亮度、卡片透明度、模糊、分辨率、帧率、速度、**画面循环**、**音乐只播一次**、音量/静音、本背景恢复默认
133
- - [x] **音乐只播一次**:放完设定时长就停,画面继续常驻(适合马里奥这种静态图 + 一首歌);`loop` 则是按「音乐时长」把音乐时间轴归零重放,有限长度的曲子也能一直循环
134
- - [x] **画面循环**:有些作品播一次就停住,可设周期把 `iTime` 归零重播(只重置画面)
135
- - [x] 设置页配色改用 **DSH 品牌蓝**(亮色 `#3568dc` / 暗色 `#7aaaff`),小字号数值也清楚
136
- - [x] **背景库**:内置 + 我的背景列表、切换、改名、删除;粘贴代码导入、文件导入(ShaderToy JSON / GLSL)、从 `$DSH_HOME/shader-skin/presets/` 导入
137
- - [x] **随包 5 个预设**:自写的「极光 / 流体色带 / 脉冲」(MIT)+ 第三方「海面(Seascape)」「马里奥」(CC BY-NC-SA 3.0,署名/非商业/相同方式共享,背景库和下拉里带 `CC BY-NC-SA` 标)
138
- - [x] **代码页**:查看当前运行作品的 Image / Sound 源码,直接改 → **保存并运行**(内置作品会自动另存为「我的副本」,原件不动;编辑器里 Ctrl/⌘+S 同样保存)
139
- - [x] **iMouse 只在「按住左键 + 从空白处开始拖动」时驱动**:点按钮、拖滚动条、选中/复制回复文字都不会再带动背景;松手发一次释放(`iMouse.z < 0`)
140
- - [x] **卡片透明度三档**(不透明 / 半透明 / 透明):控制卡片、代码块、弹层、输入框、聊天输入栏的底色,让背景能透进这些「框」里
141
- - [x] **AI 回复里的「白块」也跟着透**:改动文件头、交付物卡片、markdown 代码块、行内代码、消息气泡原本直接读静态中性色(亮色下是不透明白),现在跟 `panels` 同档 alpha —— 亮色主题下不会再出现「别的卡片都透、就这几块死白」
142
- - [x] **每背景独立参数**(`overrides`)
143
- - [x] **`mainSound` 音频**:4096 采样块 → `readPixels` → WebAudio 前瞻调度 + Gain/限幅,音量与静音实时生效
144
- - [x] **音频签名全兼容**:ShaderToy 音频 pass 的四种写法都接受 —— `vec2`/`float` 返回值 × `(float time)`/`(int samp, float time)` 参数(单声道自动复制到左右;`samp` 传绝对采样序号)
145
- - [x] **参数真正落盘**:`brightness` / `panels` 之前被 Host 的状态白名单漏掉(PUT 成功但字段被丢,重启就回默认),已修好并加了回归测试
146
- - [x] **自动解锁音频**:被浏览器 autoplay 策略拦下时,点一下界面任意位置就恢复出声(面板里也有「开声音」按钮)
147
- - [x] 深浅色主题适配(设置页与玻璃都跟随 DSH;亮色主题滤镜走向白色)
148
- - [x] **启动自愈**:桌面端 client 插件行与服务是并发激活的,首次启动时 `theme`/`slots` 可能还没就绪(旧版因此「重启后要手动关开一次插件」)。现在服务现取 + 启动后 10 秒内多次自检(背景层缺失就重建、token 被重置就重设、播放器没 `ready` 就重发 init、侧栏没注册上就补注册),**装好重启即生效**
149
- - [ ] 多 pass(Buffer A–D)、音频可视化回馈、兼容性静态体检
150
-
151
- ## 要求
152
-
153
- - DeepSeek Harness **0.2.x**(桌面版或 `dsh web`)
154
- - 支持 **WebGL2** 的显卡/驱动(Electron 走 ANGLE,绝大多数机器可用)
155
-
156
- ## 安装
157
-
158
- **桌面版(推荐)**:侧栏「插件」→「添加插件」→ 填 `dsh-shadertoy-skin` → 安装 → **完全退出并重启客户端**(首次安装需要,页面刷新不够)。
159
-
160
- **命令行**
161
-
162
- ```sh
163
- dsh plugin --profile desktop add dsh-shadertoy-skin
164
- # 或直接从 GitHub 装:
165
- dsh plugin --profile desktop add github:zdjmrq/dsh-shadertoy-skin#main
166
- ```
167
-
168
- **Web 版(`dsh web`)**:把 `--profile desktop` 换成 `--profile web`,装完重启 `dsh web` 再刷新页面:
169
-
170
- ```sh
171
- dsh plugin --profile web add dsh-shadertoy-skin
172
- ```
173
-
174
- 安装后左侧栏会多一行 **「Shader 背景」**,点开在主区域就是整页设置(参数 / 背景库);默认背景是「极光」。升级到新版看下面「[更新](#更新)」。
175
-
176
- **开发期的安全阀**:如果界面出现卡死等异常,新建一个空文件 `$DSH_HOME/shader-skin.safe` 再刷新页面——客户端会跳过侧边栏入口与整页设置(只保留背景层),界面立刻可用;删掉该文件再重启即恢复。
177
-
178
- ## 更新
179
-
180
- 先确认 npm 上的最新版本(也可以在 DSH 侧栏「插件」里看已安装版本):
181
-
182
- ```sh
183
- npm view dsh-shadertoy-skin version
184
- ```
185
-
186
- ### 桌面版(DeepSeek Harness 客户端)
187
-
188
- 1. **完全退出客户端**(关窗口不算,要退出进程;插件命令会锁 profile);
189
- 2. 任意终端执行(`@latest` 才会跨小版本升级):
190
-
191
- ```sh
192
- dsh plugin --profile desktop add dsh-shadertoy-skin@latest
193
- ```
194
-
195
- 3. 重新打开客户端 —— 左栏「Shader 背景」和整页设置就是新版。
196
-
197
- > 不习惯命令行:侧栏「插件」→「已安装」→ 卸载 `dsh-shadertoy-skin` → 再「添加插件」填一次包名 → **完全退出并重启**。DSH 插件管理器对第三方插件只提供卸载 / 安装,没有「更新」按钮。
198
- >
199
- > 本地背景库、参数、代码页改过的作品都在 `$DSH_HOME/shader-skin.json`,重装/升级**不会丢**。
200
-
201
- ### Web 版(`dsh web`)
202
-
203
- `dsh web` 用的是 **`web` profile**(等价于 `dsh --profile web`),和桌面版的 `desktop` profile 是**两套独立依赖**,更新命令也不同:
204
-
205
- ```sh
206
- dsh plugin --profile web add dsh-shadertoy-skin@latest
207
- ```
208
-
209
- 然后在跑 `dsh web` 的终端里 `Ctrl+C` 停掉、重新 `dsh web`,再刷新浏览器页面(Web 版的 client 插件在页面加载时注入,**重启服务 + 刷新页面**才完整生效)。
210
-
211
- | 你用的 | profile | 更新命令 |
212
- |---|---|---|
213
- | 桌面客户端 | `desktop` | `dsh plugin --profile desktop add dsh-shadertoy-skin@latest` |
214
- | `dsh web` | `web` | `dsh plugin --profile web add dsh-shadertoy-skin@latest` |
215
-
216
- 两个 profile 别弄混:桌面客户端只读 `~/.dsh/profiles/desktop`,`dsh web` 只读 `~/.dsh/profiles/web`;给桌面装的插件 Web 版不会自动有,反之亦然。
217
-
218
- ### 只改了前端资源?
219
-
220
- `player.html` / `panel.html` / `defaults.json` 由 Host 半**按请求读盘(no-cache)**,手动改这些文件后刷新页面即可;但 `index.js` / `client.js`(Host 半 / Client 半)的改动必须重启对应进程:桌面 = 退出重开客户端,Web = 重启 `dsh web` 并刷新页面。
221
-
222
- ## 改代码 / 微调作品
223
-
224
- 设置页第三个页签 **「代码」** 显示的就是**当前正在跑**的那份源码:
225
-
226
- | 你想做的事 | 怎么做 |
227
- |---|---|
228
- | 看看它怎么写的 | 切到「代码」,Image(和可选 Sound)源码直接可读,顶部显示作品名与行数/字符数 |
229
- | 改几行立刻看效果 | 改完点 **「保存并运行」**(或 Ctrl/⌘+S):保存状态 → 播放器重新编译 → 画面即时更新;编译错误会显示在按钮下方(带行号) |
230
- | 改坏了想还原 | 点 **「放弃修改」**,重新读取当前已保存的版本(想彻底恢复默认就去「参数 → 本背景恢复默认」,或从「背景库」重新导入) |
231
- | 内置作品能改吗 | 能改,但内置文件是只读的:保存时会自动另存为 **「<原名>(我的副本)」** 并切过去运行,内置原件不动 |
232
- | 代码框太小/太大 | 两个代码框(Image / Sound)下面都有一条**拖动把手**,上下拖动即可改高度(把手指到把手上按 ↑/↓ 也行);调整后的高度会记住(下次打开还是这个高度) |
233
-
234
- > 注意:ShaderToy 的 WebGL2 着色器语言是 ESSL 3.00,**不支持 `precise` 限定符**(那是 GLSL 4.0 / ESSL 3.20 的东西,ShaderToy 的 Vulkan 后端才有)。需要「共享晶格点必须同哈希」这类修复时,用**整数哈希**(`uint` + 位混合)代替 `precise`——效果是确定的,也不会被驱动 FMA 收缩影响。
235
-
236
- ![代码页](https://raw.githubusercontent.com/zdjmrq/dsh-shadertoy-skin/main/docs/verify/page-code.png)
237
-
238
- ## 预设与许可证(重要)
239
-
240
- 随包预设分两类(完整清单见 [`THIRD-PARTY-NOTICES.md`](THIRD-PARTY-NOTICES.md)):
241
-
242
- | 预设 | 来源 | 许可证 |
243
- |---|---|---|
244
- | `极光` / `流体色带` / `脉冲(带音乐)` | 本项目自写 | **MIT**(可商用、随便改) |
245
- | `海面(Seascape)` | [Seascape](https://www.shadertoy.com/view/Ms2SD1),© Alexander Alekseev aka TDM | **CC BY-NC-SA 3.0**(非 MIT) |
246
- | `马里奥(带音乐)` | [Mario](https://www.shadertoy.com/user/iq),© Inigo Quilez | **CC BY-NC-SA 3.0**(非 MIT) |
247
-
248
- 两个第三方作品是**按上游许可证收录的**(上游允许再分发),所以:
249
-
250
- - **署名**:保留作者与许可证声明(文件头、`presets/index.json`、背景库里的红色 `CC BY-NC-SA` 标记);
251
- - **非商业**:这两个 shader 不能用于商业用途。要把这个插件用于商业产品,请先删掉 `native-dist/presets/seascape.glsl`、`mario.glsl`、`mario-sound.glsl`(或只保留自写预设);
252
- - **相同方式共享**:改过的版本再分发时仍要留在 CC BY-NC-SA 3.0 下。设置页「代码」里另存的「我的副本」同样受这个约束。
253
-
254
- 其余从 ShaderToy 导入的作品(默认 CC BY-NC-SA 3.0,作者可另行声明)**只存在本机** `$DSH_HOME/shader-skin.json`,不会上传,也不会进包;想把自己的修改提交进仓库/随包分发,先确认许可证允许,并带上署名与相同的许可证。
255
-
256
- ## 开发
257
-
258
- ```sh
259
- npm run dev # http://127.0.0.1:8730/player.html?preset=aurora
260
- npm run check # 包结构 / 许可卫生 / npm pack 内容检查(无依赖)
261
- npm run test:host # Host 半路由 + 状态 v2 + 本地预设列表
262
- npm run test:renderer # 真浏览器 WebGL2 渲染 + 设置页冒烟(需 playwright)
263
- npm run test:audio # mainSound → readPixels → WebAudio 真实出声验证(需 playwright)
264
- ```
265
-
266
- Windows 上已装 Edge 可以跳过浏览器下载:`PLAYWRIGHT_CHANNEL=msedge npm run test:renderer`。
267
-
268
- 开发服务器同时挂了本地预设目录(只读),可以直接预览你导出的作品、不用先导入:
269
-
270
- ```
271
- http://127.0.0.1:8730/player.html?preset=local/<file>.glsl
272
- ```
273
-
274
- 改 `native-dist/player.html`、`native-dist/panel.html`、`native-dist/defaults.json` 或 `native-dist/presets/*.glsl` → 刷新页面即生效(Host 半读盘、no-cache);**插件壳(`index.js` / `client.js`)改动要重启客户端**。开发时优先改 `native-dist/*`,`client.js` 的改动请集中在一次做完再重启验证。
275
-
276
- 调试玻璃/亮度:`player.html` 支持 `?dim=`(0–2)、`?tint=`(十六进制)`&tintMix=`(0–1)直接看滤镜效果,例如 `?preset=seascape&dim=1.2&tint=090c10&tintMix=0.4`。
277
-
278
- 架构与决策记录在 [`docs/00-决策与方案复核.md`](docs/00-决策与方案复核.md),渲染器说明在 [`docs/renderer-notes.md`](docs/renderer-notes.md),发布流程在 [`docs/PUBLISHING.md`](docs/PUBLISHING.md)。
279
-
280
- ## 目录
281
-
282
- ```
283
- index.js Host 半:/shader-skin 路由 + 状态文件 + 本地预设目录 + safe-mode
284
- client.js Client 半:背景 iframe + 玻璃 token + 设置页注册 + 事件转发
285
- cordis.patch.yml bundle patch(插入 shadertoy-skin 行)
286
- native-dist/
287
- player.html 零依赖 WebGL2 播放器(渲染 + 滤镜 + mainSound 音频)
288
- panel.html 设置页(参数 / 背景库 / 代码,深浅色自适应)
289
- defaults.json 全部默认参数(改这里就改默认值)
290
- presets/*.glsl 随包预设:3 个自写 MIT + 2 个第三方 CC BY-NC-SA 3.0(`seascape` / `mario`)
291
- presets/dev/ 测试夹具(不进 npm 包)
292
- locale/ icon.svg 插件管理器展示资源
293
- tools/ 开发服务器 / 包检查 / 渲染冒烟 / 音频冒烟 / 实机检查
294
- THIRD-PARTY-NOTICES.md 第三方作品的作者 / 来源 / 许可证清单
295
- .github/workflows/ CI + npm 发布(OIDC trusted publishing)
296
- ```
297
-
298
- ## 参与(issue / PR 都欢迎)
299
-
300
- - **报问题**:直接[开 Issue](https://github.com/zdjmrq/dsh-shadertoy-skin/issues)。附上 DSH 版本、系统/显卡、截图,以及 `$DSH_HOME/shader-skin.json` 里对应预设的条目(贴之前先删掉不想公开的内容);播放器自己的诊断行也能帮大忙。
301
- - **提改进**:bug 修复、文档修正、新的自写预设都欢迎 [PR](https://github.com/zdjmrq/dsh-shadertoy-skin/pulls)。自写预设请标 MIT;第三方作品要带作者与许可证(参考 [`THIRD-PARTY-NOTICES.md`](THIRD-PARTY-NOTICES.md))。
302
- - **分享你的背景**:装了什么作品、参数怎么调的,开 Issue 贴截图就行;想把它做成内置预设,先确认原作者的许可证允许再分发。
303
-
304
- ## License
305
-
306
- [MIT](LICENSE) 适用于插件代码与三个自写预设。**随包的两个第三方作品(`seascape` / `mario`)不是 MIT**,它们按上游的 [CC BY-NC-SA 3.0](https://creativecommons.org/licenses/by-nc-sa/3.0/) 收录,署名见文件头与 [`THIRD-PARTY-NOTICES.md`](THIRD-PARTY-NOTICES.md)。
1
+ # dsh-shadertoy-skin
2
+
3
+ [![CI](https://github.com/zdjmrq/dsh-shadertoy-skin/actions/workflows/ci.yml/badge.svg)](https://github.com/zdjmrq/dsh-shadertoy-skin/actions/workflows/ci.yml)
4
+ [![npm](https://img.shields.io/npm/v/dsh-shadertoy-skin)](https://www.npmjs.com/package/dsh-shadertoy-skin)
5
+ [![license: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
6
+
7
+ **给 DeepSeek Harness 套一层实时 ShaderToy 背景皮肤。** 一个零运行时依赖的 WebGL2 小播放器 + 背景库 + 玻璃界面,把聊天界面变成「浮在着色器上」的皮肤。
8
+
9
+ Realtime [ShaderToy](https://www.shadertoy.com/) background skin for DeepSeek Harness (desktop & web): a zero-runtime-dependency WebGL2 player, a background library, and a translucent glass shell.
10
+
11
+ > **推荐去 [www.shadertoy.com](https://www.shadertoy.com/) 逛逛** —— 插件自带的 5 个预设只是开胃菜。ShaderToy 上有几万个社区作品(搜 `background`、`seascape`、`raymarching` 这类关键词,或在 Browse 里按分类翻),挑喜欢的装进「背景库」、按自己的口味调亮度 / 速度 / 代码,就是一张专属桌面。
12
+ > **改好了欢迎分享**:截图、参数、改进思路都可以提到 [Issues](https://github.com/zdjmrq/dsh-shadertoy-skin/issues),或者直接 PR(作品代码要看原作者的许可证,默认 CC BY-NC-SA 3.0:署名、非商业、同样方式共享;本仓库自写代码是 MIT,两个第三方预设按各自许可证收录)。
13
+ > **欢迎 issue 和 PR**:装不上、画面不对、想要新功能 → 开 [Issue](https://github.com/zdjmrq/dsh-shadertoy-skin/issues)(附截图和 `$DSH_HOME/shader-skin.json` 里对应条目更好排查);bug 修复、文档修正、自写预设 → 直接提 [PR](https://github.com/zdjmrq/dsh-shadertoy-skin/pulls)。
14
+ > **欢迎分享你发现的 / 自己改过的 ShaderToy 作品**:作品链接、截图、调好的参数都行,开 [Issue](https://github.com/zdjmrq/dsh-shadertoy-skin/issues) 贴出来大家就能直接用;想让它进内置预设就提 PR(先确认原作者的许可证允许再分发)。
15
+ >
16
+ > **Recommended: browse [shadertoy.com](https://www.shadertoy.com/)** — import any piece into the background library, tune it to your taste, and feel free to share screenshots, settings or improvements via Issues / PRs.
17
+
18
+ https://github.com/user-attachments/assets/c8801ca1-e96e-4bfe-83bc-6e99b5551cf4
19
+
20
+ *演示 1 · 像素马里奥:静态画 + 一首歌 —— 音乐「只播一次」,放完画面常驻*
21
+
22
+ https://github.com/user-attachments/assets/001acdf6-90e2-4b2c-85fc-e9d076678597
23
+
24
+ *演示 2 · [Seascape](https://www.shadertoy.com/view/Ms2SD1)(© TDM,CC BY-NC-SA 3.0)的个人修改版:摄像机抬到近地轨道,只留海面 —— 已作为内置预设「海面(Seascape)」随插件提供*
25
+
26
+ ![马里奥像素画背景](https://raw.githubusercontent.com/zdjmrq/dsh-shadertoy-skin/main/docs/verify/readme-mario.jpg)
27
+ ![代码页:查看 / 修改 / 保存并运行当前作品的着色器](https://raw.githubusercontent.com/zdjmrq/dsh-shadertoy-skin/main/docs/verify/readme-code.jpg)
28
+
29
+ > 视频与截图里的 ShaderToy 作品版权归原作者:像素马里奥「Mario」(© Inigo Quilez)、Seascape(© Alexander Alekseev aka TDM),两者均以 **CC BY-NC-SA 3.0** 收录为内置预设(非 MIT,见文末许可证)。**视频与截图仅作效果展示**,插件自写代码仍是 MIT。
30
+
31
+ ## 名字 / 包名(认准这两个)
32
+
33
+ | 是什么 | 值 |
34
+ |---|---|
35
+ | **npm 包名**(`dsh plugin add` / 插件市场里填的就是它) | `dsh-shadertoy-skin` |
36
+ | **GitHub 仓库** | `zdjmrq/dsh-shadertoy-skin` → https://github.com/zdjmrq/dsh-shadertoy-skin |
37
+
38
+ npm 包名**没有 scope、也不带作者用户名**:不是 `@zdjmrq/dsh-shadertoy-skin`,装的时候写 `dsh-shadertoy-skin` 就对。`zdjmrq` 只出现在 GitHub 地址里。
39
+
40
+ ```sh
41
+ npm view dsh-shadertoy-skin version # 确认 npm 上真实存在的版本
42
+ ```
43
+
44
+ ## 从 ShaderToy 装一个作品
45
+
46
+ 插件自带 5 个预设(3 个自写 MIT + 2 个第三方 CC BY-NC-SA 3.0,见文末许可证),但真正好玩的是把你喜欢的 ShaderToy 作品装进来。**三种做法,任选一种:**
47
+
48
+ > **推荐一试**:[`shadertoy.com/view/4dfXWj`](https://www.shadertoy.com/view/4dfXWj) —— 装进来效果挺带感,导入方式见下面任意一种。
49
+ > 这只是个起点:**大家完全可以根据自己的喜好随便挑别的作品,也可以自己写着色器**(写好了走同样的导入流程)。ShaderToy 作品的许可证由原作者决定(默认 CC BY-NC-SA 3.0):装在本机自己玩没问题;想提交进仓库或随包分发,先确认许可证允许,并带上署名与相同许可证(本仓库的两个第三方预设就是这么收录的)。
50
+
51
+ ### 1. 粘贴代码(最稳,不用抓网页)
52
+
53
+ 1. 打开作品页 `https://www.shadertoy.com/view/xxxxxxxx`,右上角 **Shader** 页签;
54
+ 2. 全选 `Image` 页签里的代码(如果作品用了 `Common`,把 Common 里的函数一起复制到开头;用了 Buffer 的作品暂不支持);
55
+ 3. 回到插件设置页 → **背景库** → 「粘贴 ShaderToy 代码」→ 填名字 → 粘进 `Image 代码` → **加入背景库**;
56
+ 4. 列表里点 **使用** 即可,参数会即时生效。
57
+
58
+ 带声音的作品(代码里有 `mainSound`)把声音代码粘进 `Sound 代码`,切到它时会出声。声音签名支持这四种:
59
+
60
+ ```glsl
61
+ vec2 mainSound(float time) // 立体声
62
+ float mainSound(float time) // 单声道(自动复制到左右)
63
+ vec2 mainSound(int samp, float time) // 带采样序号
64
+ float mainSound(int samp, float time) // 单声道 + 采样序号
65
+ ```
66
+
67
+ 如果出声被浏览器拦住,点一下界面任意位置即可解锁(面板音量那一行也会提示)。
68
+
69
+ ### 2. 让 AI 帮你装(一条指令,把网址填进去就行)
70
+
71
+ 复制下面这段,把第一行的网址换成你要的作品链接,发给 DeepSeek Harness(或任何能操作文件的 AI):
72
+
73
+ ```text
74
+ 帮我给 DeepSeek Harness 装一个 ShaderToy 背景皮肤。
75
+
76
+ 插件:dsh-shadertoy-skin(npm 包名就是 dsh-shadertoy-skin,GitHub: https://github.com/zdjmrq/dsh-shadertoy-skin)
77
+ 如果还没装:桌面版走「插件 → 添加插件 → 填 dsh-shadertoy-skin → 装完完全退出并重启客户端」;命令行用 dsh plugin --profile desktop add dsh-shadertoy-skin。
78
+
79
+ 要装的作品链接:<把你复制的 https://www.shadertoy.com/view/xxxxxxxx 粘在这里>
80
+
81
+ 做法:
82
+ 1. 打开上面的链接,拿到 Image pass 的 GLSL(若用了 Common,把 Common 的函数一起带上),以及可选的 mainSound。
83
+ 2. 打开插件设置页(左栏「Shader 背景」)→ 背景库 → 「粘贴 ShaderToy 代码」:名字用作品名,Image 粘主代码,Sound 可空。
84
+ 3. 导入后把它设为当前背景,确认背景真的渲染出来(不是黑屏、不是编译报错);若报编译错误,按错误行号修好再试。
85
+ 4. 如果页面抓不到代码(反爬/需要登录/只给 WebGL 不给源码),直接让我手动复制粘贴,不要猜代码。
86
+ 5. 该作品的许可由原作者决定(ShaderToy 默认 CC BY-NC-SA 3.0):只装在本机,不要提交进 git、不要随包发布。
87
+
88
+ 装好后告诉我:装的是哪个作品、是否带声音、需不需要我调亮度/玻璃。
89
+ ```
90
+
91
+ > AI 抓不到 ShaderToy 页面时(它经常挡爬虫),就走上面第 1 种的「手动粘贴」——一样能装好,而且不会有许可证问题。
92
+
93
+ ### 3. 从本地目录导入(批量最方便)
94
+
95
+ 把 `ShaderToy 导出的 JSON`、或直接是 `.glsl` / `.txt` 的代码文件放进:
96
+
97
+ ```
98
+ $DSH_HOME/shader-skin/presets/ (Windows 默认 C:\Users\<你>\.dsh\shader-skin\presets\)
99
+ ```
100
+
101
+ 设置页 → 背景库 → 「从本地目录导入」→ 点 **导入**。这个目录不进包、不进 git。
102
+
103
+ ## 参数与默认值
104
+
105
+ 设置页按「背景与外观 / 渲染与性能 / 画面播放 / 声音」分组,宽窗口双栏、窄窗口单栏,深浅色主题均提供独立的可读表面。点页头「预览背景」可临时收起设置查看实际背景,按 Esc 返回;不增加第二个渲染器。没有 Sound 代码的作品会禁用声音控件。页签、下拉选择均支持键盘操作,保存与导入状态在三个页签共用的位置显示。
106
+
107
+ 默认值集中在 [`native-dist/defaults.json`](native-dist/defaults.json),面板读它来渲染选项与「恢复默认」,Host 用它做兜底——**改一个文件就能改默认值**。
108
+
109
+ | 参数 | 默认 | 可选 | 说明 |
110
+ |---|---|---|---|
111
+ | `enabled` | `true` | 开/关 | 关掉只移除背景层,设置页仍在 |
112
+ | `glass` | `60` (%) | 20–95 | 界面不透明度:控制背景滤镜;半透明档下也直接决定卡片、输入框、代码块、菜单等表面的不透明度 |
113
+ | `brightness` | `100` (%) | 30–180 | 背景亮度(着色器输出乘数)。黄昏、夜景类作品看着太暗就调高 |
114
+ | `panels` | `opaque` | opaque / half / clear | 不透明保留原生底色;半透明使用 `glass / 100`;透明移除表面底色(alpha 为 0)。新会话按钮、代码块顶部栏、输入框和插件设置页遵循同一规则 |
115
+ | `blur` | `0` px | 0–12 | 只在 > 0 时启用 CSS `filter` |
116
+ | `scale` | `1`× | 0.25 / 0.35 / 0.4 / 0.5 / 0.6 / 0.75 / 1 / 1.25 / 1.5 / 1.75 / 2 | 渲染分辨率倍率(DPR 上限 1.5)。下拉里**直接写实际分辨率**,例如 `1280 × 810(1×)`、`320 × 203(0.25×)`,窗口变大后这些数字会跟着刷新;显卡弱/想省电选 0.25–0.5×,追求锐利选 1.5–2× |
117
+ | `fps` | `30` | 15 / 20 / 30 / 60 | 渲染帧率上限;聊天时 30 足够 |
118
+ | `speed` | `1`× | 0–2 | 时间轴倍速 |
119
+ | `loop` / `loopSeconds` | `false` / `20` s | 开/关 · 5–120 s | **画面循环**:有的作品播一次就不动了,打开后每个周期把 `iTime` 归零重播(只重置画面,不影响声音)。带淡入淡出的作品(如马里奥)每轮会重新淡入,这是作品本身的效果 |
120
+ | `audioMode` / `audioSeconds` | `loop` / `60` s | loop / once · 10–600 s | **音乐播放方式**:ShaderToy 的曲子是有长度的(播完就静音),所以 `loop` = 每到「音乐时长」就把音乐时间轴归零重放(接缝有 40 ms 淡入淡出);`once` = 放完「音乐时长」就停、**画面继续常驻**(马里奥这种静态图 + 一首歌正合适) |
121
+ | `volume` / `muted` | `60` / `false` | 0–100 / 开/关 | 带 `mainSound` 的作品默认出声;浏览器可能拦截自动播放,点一下界面任意位置即可解锁 |
122
+
123
+ > **界面不透明度**控制背景滤镜和半透明表面的底色浓度,**背景亮度**控制画面本身的亮度。透明档始终移除表面底色;滑块仍可调整其下方背景的滤镜。
124
+
125
+ ## 状态
126
+
127
+ 渲染器、插件骨架、设置页、背景库、音频都已完成,剩下的是增强项:
128
+
129
+ - [x] WebGL2 ShaderToy 兼容运行时:`mainImage` / 旧式 `void main` / GLSL ES 3.00 + ES 1.00 回落 / uniform 自动补齐 / 行号可读的编译错误
130
+ - [x] 零依赖单文件播放器,`/shader-skin/player.html` 由 Host 半从磁盘实读(改代码刷新即可,无需重启)
131
+ - [x] Host 半:静态路由 + `$DSH_HOME/shader-skin.json` 原子状态存取 + `$DSH_HOME/shader-skin/presets/` 本地预设目录
132
+ - [x] Client 半:把播放器挂成 body 首子节点、转发 iMouse / 主题 / 可见性,全部资源走 `ctx.effect` 清理
133
+ - [x] 玻璃壳:外壳表面(AppFrame / 侧栏 / 页面容器)全透明,**暗色滤镜只由播放器画一层**(`tintMix`),不再靠多层半透明 token 叠出来(叠 N 层会把背景压到几乎全黑,旧版就栽在这)
134
+ - [x] 设置页:**左栏一行「Shader 背景」→ 主区域整页**(不是弹窗),带页头、参数 / 背景库 / 代码三个页签
135
+ - [x] **参数**:启用、作品切换、玻璃不透明度、背景亮度、卡片透明度、模糊、分辨率、帧率、速度、**画面循环**、**音乐只播一次**、音量/静音、本背景恢复默认
136
+ - [x] **音乐只播一次**:放完设定时长就停,画面继续常驻(适合马里奥这种静态图 + 一首歌);`loop` 则是按「音乐时长」把音乐时间轴归零重放,有限长度的曲子也能一直循环
137
+ - [x] **画面循环**:有些作品播一次就停住,可设周期把 `iTime` 归零重播(只重置画面)
138
+ - [x] 设置页采用 **DSH 原生中性色**:浅色白底、深色黑灰底,移除长说明与重复数值,自动跟随主题
139
+ - [x] **背景库**:内置 + 我的背景列表、切换、改名、删除;粘贴代码导入、文件导入(ShaderToy JSON / GLSL)、从 `$DSH_HOME/shader-skin/presets/` 导入
140
+ - [x] **随包 5 个预设**:自写的「极光 / 流体色带 / 脉冲」(MIT)+ 第三方「海面(Seascape)」「马里奥」(CC BY-NC-SA 3.0,署名/非商业/相同方式共享,背景库和下拉里带 `CC BY-NC-SA` 标)
141
+ - [x] **代码页**:查看当前运行作品的 Image / Sound 源码,直接改 → **保存并运行**(内置作品会自动另存为「我的副本」,原件不动;编辑器里 Ctrl/⌘+S 同样保存)
142
+ - [x] **iMouse 只在「按住左键 + 从空白处开始拖动」时驱动**:点按钮、拖滚动条、选中/复制回复文字都不会再带动背景;松手发一次释放(`iMouse.z < 0`)
143
+ - [x] **卡片透明度三档**(不透明 / 半透明 / 透明):控制卡片、代码块、弹层、输入框、聊天输入栏的底色,让背景能透进这些「框」里
144
+ - [x] **AI 回复里的「白块」也跟着透**:改动文件头、交付物卡片、markdown 代码块、行内代码、消息气泡原本直接读静态中性色(亮色下是不透明白),现在跟 `panels` 同档 alpha —— 亮色主题下不会再出现「别的卡片都透、就这几块死白」
145
+ - [x] **每背景独立参数**(`overrides`)
146
+ - [x] **`mainSound` 音频**:4096 采样块 → `readPixels` → WebAudio 前瞻调度 + Gain/限幅,音量与静音实时生效
147
+ - [x] **音频签名全兼容**:ShaderToy 音频 pass 的四种写法都接受 —— `vec2`/`float` 返回值 × `(float time)`/`(int samp, float time)` 参数(单声道自动复制到左右;`samp` 传绝对采样序号)
148
+ - [x] **参数真正落盘**:`brightness` / `panels` 之前被 Host 的状态白名单漏掉(PUT 成功但字段被丢,重启就回默认),已修好并加了回归测试
149
+ - [x] **自动解锁音频**:被浏览器 autoplay 策略拦下时,点一下界面任意位置就恢复出声(面板里也有「开声音」按钮)
150
+ - [x] 深浅色主题适配(设置页与玻璃都跟随 DSH;亮色主题滤镜走向白色)
151
+ - [x] **启动自愈**:桌面端 client 插件行与服务是并发激活的,首次启动时 `theme`/`slots` 可能还没就绪(旧版因此「重启后要手动关开一次插件」)。现在服务现取 + 启动后 10 秒内多次自检(背景层缺失就重建、token 被重置就重设、播放器没 `ready` 就重发 init、侧栏没注册上就补注册),**装好重启即生效**
152
+ - [ ] 多 pass(Buffer A–D)、音频可视化回馈、兼容性静态体检
153
+
154
+ ## 要求
155
+
156
+ - DeepSeek Harness **0.2.x**(桌面版或 `dsh web`)
157
+ - 支持 **WebGL2** 的显卡/驱动(Electron 走 ANGLE,绝大多数机器可用)
158
+
159
+ ## 安装
160
+
161
+ **桌面版(推荐)**:侧栏「插件」→「添加插件」→ 填 `dsh-shadertoy-skin` → 安装 → **完全退出并重启客户端**(首次安装需要,页面刷新不够)。
162
+
163
+ **命令行**
164
+
165
+ ```sh
166
+ dsh plugin --profile desktop add dsh-shadertoy-skin
167
+ # 或直接从 GitHub 装:
168
+ dsh plugin --profile desktop add github:zdjmrq/dsh-shadertoy-skin#main
169
+ ```
170
+
171
+ **Web 版(`dsh web`)**:把 `--profile desktop` 换成 `--profile web`,装完重启 `dsh web` 再刷新页面:
172
+
173
+ ```sh
174
+ dsh plugin --profile web add dsh-shadertoy-skin
175
+ ```
176
+
177
+ 安装后左侧栏会多一行 **「Shader 背景」**,点开在主区域就是整页设置(参数 / 背景库);默认背景是「极光」。升级到新版看下面「[更新](#更新)」。
178
+
179
+ **开发期的安全阀**:如果界面出现卡死等异常,新建一个空文件 `$DSH_HOME/shader-skin.safe` 再刷新页面——客户端会跳过侧边栏入口与整页设置(只保留背景层),界面立刻可用;删掉该文件再重启即恢复。
180
+
181
+ ## 更新
182
+
183
+ 先确认 npm 上的最新版本(也可以在 DSH 侧栏「插件」里看已安装版本):
184
+
185
+ ```sh
186
+ npm view dsh-shadertoy-skin version
187
+ ```
188
+
189
+ ### 桌面版(DeepSeek Harness 客户端)
190
+
191
+ 1. **完全退出客户端**(关窗口不算,要退出进程;插件命令会锁 profile);
192
+ 2. 任意终端执行(`@latest` 才会跨小版本升级):
193
+
194
+ ```sh
195
+ dsh plugin --profile desktop add dsh-shadertoy-skin@latest
196
+ ```
197
+
198
+ 3. 重新打开客户端 —— 左栏「Shader 背景」和整页设置就是新版。
199
+
200
+ > 不习惯命令行:侧栏「插件」→「已安装」→ 卸载 `dsh-shadertoy-skin` → 再「添加插件」填一次包名 → **完全退出并重启**。DSH 插件管理器对第三方插件只提供卸载 / 安装,没有「更新」按钮。
201
+ >
202
+ > 本地背景库、参数、代码页改过的作品都在 `$DSH_HOME/shader-skin.json`,重装/升级**不会丢**。
203
+
204
+ ### Web 版(`dsh web`)
205
+
206
+ `dsh web` 用的是 **`web` profile**(等价于 `dsh --profile web`),和桌面版的 `desktop` profile 是**两套独立依赖**,更新命令也不同:
207
+
208
+ ```sh
209
+ dsh plugin --profile web add dsh-shadertoy-skin@latest
210
+ ```
211
+
212
+ 然后在跑 `dsh web` 的终端里 `Ctrl+C` 停掉、重新 `dsh web`,再刷新浏览器页面(Web 版的 client 插件在页面加载时注入,**重启服务 + 刷新页面**才完整生效)。
213
+
214
+ | 你用的 | profile | 更新命令 |
215
+ |---|---|---|
216
+ | 桌面客户端 | `desktop` | `dsh plugin --profile desktop add dsh-shadertoy-skin@latest` |
217
+ | `dsh web` | `web` | `dsh plugin --profile web add dsh-shadertoy-skin@latest` |
218
+
219
+ 两个 profile 别弄混:桌面客户端只读 `~/.dsh/profiles/desktop`,`dsh web` 只读 `~/.dsh/profiles/web`;给桌面装的插件 Web 版不会自动有,反之亦然。
220
+
221
+ ### 只改了前端资源?
222
+
223
+ `player.html` / `panel.html` / `defaults.json` 由 Host 半**按请求读盘(no-cache)**,手动改这些文件后刷新页面即可;但 `index.js` / `client.js`(Host 半 / Client 半)的改动必须重启对应进程:桌面 = 退出重开客户端,Web = 重启 `dsh web` 并刷新页面。
224
+
225
+ ## 改代码 / 微调作品
226
+
227
+ 设置页第三个页签 **「代码」** 显示的就是**当前正在跑**的那份源码:
228
+
229
+ | 你想做的事 | 怎么做 |
230
+ |---|---|
231
+ | 看看它怎么写的 | 切到「代码」,Image(和可选 Sound)源码直接可读,顶部显示作品名与行数/字符数 |
232
+ | 改几行立刻看效果 | 改完点 **「保存并运行」**(或 Ctrl/⌘+S):保存状态 → 播放器重新编译 → 画面即时更新;编译错误会显示在按钮下方(带行号) |
233
+ | 改坏了想还原 | 点 **「放弃修改」**,重新读取当前已保存的版本(想彻底恢复默认就去「参数 → 本背景恢复默认」,或从「背景库」重新导入) |
234
+ | 内置作品能改吗 | 能改,但内置文件是只读的:保存时会自动另存为 **「<原名>(我的副本)」** 并切过去运行,内置原件不动 |
235
+ | 代码框太小/太大 | 两个代码框下方都有**整行拖动条**,可自由拉高(上限 4000 px);拖到页面边缘会自动滚动。双击拖动条还原高度;方向键微调、Shift + 方向键加大步长、Home / End 快速缩小或拉高。高度会记住 |
236
+ | 只想看 Image 或 Sound | 点对应代码框的**专注编辑**,铺满设置区域,保留原来的阅读位置;Esc 返回。可以单独收起暂时不用的代码框 |
237
+ | 长行难读、字太小 | 顶部可切换自动换行与 12–20 px 字号,自动记住阅读偏好。不换行时提供与代码同步滚动的行号 |
238
+
239
+ > 注意:ShaderToy 的 WebGL2 着色器语言是 ESSL 3.00,**不支持 `precise` 限定符**(那是 GLSL 4.0 / ESSL 3.20 的东西,ShaderToy 的 Vulkan 后端才有)。需要「共享晶格点必须同哈希」这类修复时,用**整数哈希**(`uint` + 位混合)代替 `precise`——效果是确定的,也不会被驱动 FMA 收缩影响。
240
+
241
+ ![代码页](https://raw.githubusercontent.com/zdjmrq/dsh-shadertoy-skin/main/docs/verify/page-code.png)
242
+
243
+ ## 预设与许可证(重要)
244
+
245
+ 随包预设分两类(完整清单见 [`THIRD-PARTY-NOTICES.md`](THIRD-PARTY-NOTICES.md)):
246
+
247
+ | 预设 | 来源 | 许可证 |
248
+ |---|---|---|
249
+ | `极光` / `流体色带` / `脉冲(带音乐)` | 本项目自写 | **MIT**(可商用、随便改) |
250
+ | `海面(Seascape)` | [Seascape](https://www.shadertoy.com/view/Ms2SD1),© Alexander Alekseev aka TDM | **CC BY-NC-SA 3.0**(非 MIT) |
251
+ | `马里奥(带音乐)` | [Mario](https://www.shadertoy.com/user/iq),© Inigo Quilez | **CC BY-NC-SA 3.0**(非 MIT) |
252
+
253
+ 两个第三方作品是**按上游许可证收录的**(上游允许再分发),所以:
254
+
255
+ - **署名**:保留作者与许可证声明(文件头、`presets/index.json`、背景库里的红色 `CC BY-NC-SA` 标记);
256
+ - **非商业**:这两个 shader 不能用于商业用途。要把这个插件用于商业产品,请先删掉 `native-dist/presets/seascape.glsl`、`mario.glsl`、`mario-sound.glsl`(或只保留自写预设);
257
+ - **相同方式共享**:改过的版本再分发时仍要留在 CC BY-NC-SA 3.0 下。设置页「代码」里另存的「我的副本」同样受这个约束。
258
+
259
+ 其余从 ShaderToy 导入的作品(默认 CC BY-NC-SA 3.0,作者可另行声明)**只存在本机** `$DSH_HOME/shader-skin.json`,不会上传,也不会进包;想把自己的修改提交进仓库/随包分发,先确认许可证允许,并带上署名与相同的许可证。
260
+
261
+ ## 开发
262
+
263
+ ```sh
264
+ npm run dev # http://127.0.0.1:8730/player.html?preset=aurora
265
+ npm run check # 包结构 / 许可卫生 / npm pack 内容检查(无依赖)
266
+ npm run test:host # Host 半路由 + 状态 v2 + 本地预设列表
267
+ npm run test:renderer # 真浏览器 WebGL2 渲染 + 设置页冒烟(需 playwright)
268
+ npm run test:audio # mainSound → readPixels → WebAudio 真实出声验证(需 playwright)
269
+ ```
270
+
271
+ Windows 上已装 Edge 可以跳过浏览器下载:`PLAYWRIGHT_CHANNEL=msedge npm run test:renderer`。
272
+
273
+ 开发服务器同时挂了本地预设目录(只读),可以直接预览你导出的作品、不用先导入:
274
+
275
+ ```
276
+ http://127.0.0.1:8730/player.html?preset=local/<file>.glsl
277
+ ```
278
+
279
+ 改 `native-dist/player.html`、`native-dist/panel.html`、`native-dist/defaults.json` 或 `native-dist/presets/*.glsl` → 刷新页面即生效(Host 半读盘、no-cache);**插件壳(`index.js` / `client.js`)改动要重启客户端**。开发时优先改 `native-dist/*`,`client.js` 的改动请集中在一次做完再重启验证。
280
+
281
+ 调试玻璃/亮度:`player.html` 支持 `?dim=`(0–2)、`?tint=`(十六进制)`&tintMix=`(0–1)直接看滤镜效果,例如 `?preset=seascape&dim=1.2&tint=090c10&tintMix=0.4`。
282
+
283
+ 架构与决策记录在 [`docs/00-决策与方案复核.md`](docs/00-决策与方案复核.md),渲染器说明在 [`docs/renderer-notes.md`](docs/renderer-notes.md),发布流程在 [`docs/PUBLISHING.md`](docs/PUBLISHING.md)。
284
+
285
+ ## 目录
286
+
287
+ ```
288
+ index.js Host 半:/shader-skin 路由 + 状态文件 + 本地预设目录 + safe-mode
289
+ client.js Client 半:背景 iframe + 玻璃 token + 设置页注册 + 事件转发
290
+ cordis.patch.yml bundle patch(插入 shadertoy-skin 行)
291
+ native-dist/
292
+ player.html 零依赖 WebGL2 播放器(渲染 + 滤镜 + mainSound 音频)
293
+ panel.html 设置页(参数 / 背景库 / 代码,深浅色自适应)
294
+ defaults.json 全部默认参数(改这里就改默认值)
295
+ presets/*.glsl 随包预设:3 个自写 MIT + 2 个第三方 CC BY-NC-SA 3.0(`seascape` / `mario`)
296
+ presets/dev/ 测试夹具(不进 npm 包)
297
+ locale/ icon.svg 插件管理器展示资源
298
+ tools/ 开发服务器 / 包检查 / 渲染冒烟 / 音频冒烟 / 实机检查
299
+ THIRD-PARTY-NOTICES.md 第三方作品的作者 / 来源 / 许可证清单
300
+ .github/workflows/ CI + npm 发布(OIDC trusted publishing)
301
+ ```
302
+
303
+ ## 参与(issue / PR 都欢迎)
304
+
305
+ - **报问题**:直接[开 Issue](https://github.com/zdjmrq/dsh-shadertoy-skin/issues)。附上 DSH 版本、系统/显卡、截图,以及 `$DSH_HOME/shader-skin.json` 里对应预设的条目(贴之前先删掉不想公开的内容);播放器自己的诊断行也能帮大忙。
306
+ - **提改进**:bug 修复、文档修正、新的自写预设都欢迎 [PR](https://github.com/zdjmrq/dsh-shadertoy-skin/pulls)。自写预设请标 MIT;第三方作品要带作者与许可证(参考 [`THIRD-PARTY-NOTICES.md`](THIRD-PARTY-NOTICES.md))。
307
+ - **分享 ShaderToy 作品**:发现了特别适合当聊天背景的作品,或者自己把它改得更好看、更省电(比如调机位、修 NaN、降负载),都欢迎[开 Issue](https://github.com/zdjmrq/dsh-shadertoy-skin/issues) 贴作品链接 + 截图 + 参数。想让它变成内置预设就提 PR:自写的标 MIT,第三方作品带作者与许可证(参考 [`THIRD-PARTY-NOTICES.md`](THIRD-PARTY-NOTICES.md))。
308
+ - **分享你的背景**:装了什么作品、参数怎么调的,开 Issue 贴截图就行。
309
+
310
+ ## License
311
+
312
+ [MIT](LICENSE) 适用于插件代码与三个自写预设。**随包的两个第三方作品(`seascape` / `mario`)不是 MIT**,它们按上游的 [CC BY-NC-SA 3.0](https://creativecommons.org/licenses/by-nc-sa/3.0/) 收录,署名见文件头与 [`THIRD-PARTY-NOTICES.md`](THIRD-PARTY-NOTICES.md)。