dsh-shadertoy-skin 0.2.1 → 0.2.2

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.
Files changed (6) hide show
  1. package/README.md +98 -85
  2. package/client.js +22 -0
  3. package/native-dist/defaults.json +1 -1
  4. package/native-dist/panel.html +111 -26
  5. package/native-dist/player.html +64 -12
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -8,11 +8,23 @@
8
8
 
9
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
10
 
11
- ![马里奥像素画背景](https://raw.githubusercontent.com/zdjmrq/dsh-shadertoy-skin/main/docs/verify/readme-mario.png)
12
- ![Seascape 海面背景](https://raw.githubusercontent.com/zdjmrq/dsh-shadertoy-skin/main/docs/verify/readme-seascape.png)
13
- ![代码页：查看 / 修改 / 保存并运行当前作品的着色器](https://raw.githubusercontent.com/zdjmrq/dsh-shadertoy-skin/main/docs/verify/readme-code.png)
11
+ > **推荐去 [www.shadertoy.com](https://www.shadertoy.com/) 逛逛** —— 插件自带的三个作品只是开胃菜。ShaderToy 上有几万个社区作品（搜 `background`、`seascape`、`raymarching` 这类关键词，或在 Browse 里按分类翻），挑喜欢的装进「背景库」、按自己的口味调亮度 / 速度 / 代码，就是一张专属桌面。
12
+ > **改好了欢迎分享**：截图、参数、改进思路都可以提到 [Issues](https://github.com/zdjmrq/dsh-shadertoy-skin/issues)，或者直接 PR（作品代码要看原作者的许可证，默认 CC BY-NC-SA 3.0：署名、非商业、同样方式共享；本仓库本身只收录 MIT 代码）。
13
+ >
14
+ > **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.
15
+
16
+ https://github.com/user-attachments/assets/c8801ca1-e96e-4bfe-83bc-6e99b5551cf4
17
+
18
+ *演示 1 · 像素马里奥：静态画 + 一首歌 —— 音乐「只播一次」，放完画面常驻*
19
+
20
+ https://github.com/user-attachments/assets/001acdf6-90e2-4b2c-85fc-e9d076678597
21
+
22
+ *演示 2 · [Seascape](https://www.shadertoy.com/view/Ms2SD1)（© TDM，CC BY-NC-SA 3.0）的个人修改版：摄像机抬到近地轨道，只留海面*
14
23
 
15
- > 截图里的 ShaderToy 作品版权归原作者：像素马里奥（作者见对应作品页）、Seascape（© TDM，CC BY-NC-SA 3.0）。**截图仅作效果展示**，本仓库代码仍是 MIT，且不收录这些作品代码。
24
+ ![马里奥像素画背景](https://raw.githubusercontent.com/zdjmrq/dsh-shadertoy-skin/main/docs/verify/readme-mario.jpg)
25
+ ![代码页：查看 / 修改 / 保存并运行当前作品的着色器](https://raw.githubusercontent.com/zdjmrq/dsh-shadertoy-skin/main/docs/verify/readme-code.jpg)
26
+
27
+ > 视频与截图里的 ShaderToy 作品版权归原作者：像素马里奥（作者见对应作品页）、Seascape（© TDM，CC BY-NC-SA 3.0）。**视频与截图仅作效果展示**，本仓库代码仍是 MIT，且不收录这些作品代码。
16
28
 
17
29
  ## 名字 / 包名（认准这两个）
18
30
 
@@ -27,6 +39,85 @@ npm 包名**没有 scope、也不带作者用户名**：不是 `@zdjmrq/dsh-shad
27
39
  npm view dsh-shadertoy-skin version # 确认 npm 上真实存在的版本
28
40
  ```
29
41
 
42
+ ## 从 ShaderToy 装一个作品
43
+
44
+ 插件自带三个 MIT 自写着色器，但真正好玩的是把你喜欢的 ShaderToy 作品装进来。**三种做法，任选一种：**
45
+
46
+ > **推荐一试**：[`shadertoy.com/view/4dfXWj`](https://www.shadertoy.com/view/4dfXWj) —— 装进来效果挺带感，导入方式见下面任意一种。
47
+ > 这只是个起点：**大家完全可以根据自己的喜好随便挑别的作品，也可以自己写着色器**（写好了走同样的导入流程）。ShaderToy 作品的许可证由原作者决定（默认 CC BY-NC-SA 3.0），装在本机自己玩没问题，但别把作品代码提交进仓库或随包再分发。
48
+
49
+ ### 1. 粘贴代码（最稳，不用抓网页）
50
+
51
+ 1. 打开作品页 `https://www.shadertoy.com/view/xxxxxxxx`，右上角 **Shader** 页签；
52
+ 2. 全选 `Image` 页签里的代码（如果作品用了 `Common`，把 Common 里的函数一起复制到开头；用了 Buffer 的作品暂不支持）；
53
+ 3. 回到插件设置页 → **背景库** → 「粘贴 ShaderToy 代码」→ 填名字 → 粘进 `Image 代码` → **加入背景库**；
54
+ 4. 列表里点 **使用** 即可，参数会即时生效。
55
+
56
+ 带声音的作品（代码里有 `mainSound`）把声音代码粘进 `Sound 代码`，切到它时会出声。声音签名支持这四种：
57
+
58
+ ```glsl
59
+ vec2 mainSound(float time) // 立体声
60
+ float mainSound(float time) // 单声道（自动复制到左右）
61
+ vec2 mainSound(int samp, float time) // 带采样序号
62
+ float mainSound(int samp, float time) // 单声道 + 采样序号
63
+ ```
64
+
65
+ 如果出声被浏览器拦住，点一下界面任意位置即可解锁（面板音量那一行也会提示）。
66
+
67
+ ### 2. 让 AI 帮你装（一条指令，把网址填进去就行）
68
+
69
+ 复制下面这段，把第一行的网址换成你要的作品链接，发给 DeepSeek Harness（或任何能操作文件的 AI）：
70
+
71
+ ```text
72
+ 帮我给 DeepSeek Harness 装一个 ShaderToy 背景皮肤。
73
+
74
+ 插件：dsh-shadertoy-skin（npm 包名就是 dsh-shadertoy-skin，GitHub: https://github.com/zdjmrq/dsh-shadertoy-skin）
75
+ 如果还没装：桌面版走「插件 → 添加插件 → 填 dsh-shadertoy-skin → 装完完全退出并重启客户端」；命令行用 dsh plugin --profile desktop add dsh-shadertoy-skin。
76
+
77
+ 要装的作品链接：<把你复制的 https://www.shadertoy.com/view/xxxxxxxx 粘在这里>
78
+
79
+ 做法：
80
+ 1. 打开上面的链接，拿到 Image pass 的 GLSL（若用了 Common，把 Common 的函数一起带上），以及可选的 mainSound。
81
+ 2. 打开插件设置页（左栏「Shader 背景」）→ 背景库 → 「粘贴 ShaderToy 代码」：名字用作品名，Image 粘主代码，Sound 可空。
82
+ 3. 导入后把它设为当前背景，确认背景真的渲染出来（不是黑屏、不是编译报错）；若报编译错误，按错误行号修好再试。
83
+ 4. 如果页面抓不到代码（反爬/需要登录/只给 WebGL 不给源码），直接让我手动复制粘贴，不要猜代码。
84
+ 5. 该作品的许可由原作者决定（ShaderToy 默认 CC BY-NC-SA 3.0）：只装在本机，不要提交进 git、不要随包发布。
85
+
86
+ 装好后告诉我：装的是哪个作品、是否带声音、需不需要我调亮度/玻璃。
87
+ ```
88
+
89
+ > AI 抓不到 ShaderToy 页面时（它经常挡爬虫），就走上面第 1 种的「手动粘贴」——一样能装好，而且不会有许可证问题。
90
+
91
+ ### 3. 从本地目录导入（批量最方便）
92
+
93
+ 把 `ShaderToy 导出的 JSON`、或直接是 `.glsl` / `.txt` 的代码文件放进：
94
+
95
+ ```
96
+ $DSH_HOME/shader-skin/presets/ （Windows 默认 C:\Users\<你>\.dsh\shader-skin\presets\）
97
+ ```
98
+
99
+ 设置页 → 背景库 → 「从本地目录导入」→ 点 **导入**。这个目录不进包、不进 git。
100
+
101
+ ## 参数与默认值
102
+
103
+ 默认值集中在 [`native-dist/defaults.json`](native-dist/defaults.json)，面板读它来渲染选项与「恢复默认」，Host 用它做兜底——**改一个文件就能改默认值**。
104
+
105
+ | 参数 | 默认 | 可选 | 说明 |
106
+ |---|---|---|---|
107
+ | `enabled` | `true` | 开/关 | 关掉只移除背景层，设置页仍在 |
108
+ | `glass` | `60` (%) | 20–95 | 玻璃不透明度：界面压住背景的程度。越高文字越清晰、背景越淡；越低背景越透亮 |
109
+ | `brightness` | `100` (%) | 30–180 | 背景亮度（着色器输出乘数）。黄昏、夜景类作品看着太暗就调高 |
110
+ | `panels` | `opaque` | opaque / half / clear | 卡片、代码块、弹层、**聊天输入框**、编辑器表面的底色：不透明 / 半透明 / 透明。想让背景从框里透出来就调它 |
111
+ | `blur` | `0` px | 0–12 | 只在 > 0 时启用 CSS `filter` |
112
+ | `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× |
113
+ | `fps` | `30` | 15 / 20 / 30 / 60 | 渲染帧率上限；聊天时 30 足够 |
114
+ | `speed` | `1`× | 0–2 | 时间轴倍速 |
115
+ | `loop` / `loopSeconds` | `false` / `20` s | 开/关 · 5–120 s | **画面循环**：有的作品播一次就不动了，打开后每个周期把 `iTime` 归零重播（只重置画面，不影响声音）。带淡入淡出的作品（如马里奥）每轮会重新淡入，这是作品本身的效果 |
116
+ | `audioMode` / `audioSeconds` | `loop` / `60` s | loop / once · 10–600 s | **音乐播放方式**：ShaderToy 的曲子是有长度的（播完就静音），所以 `loop` = 每到「音乐时长」就把音乐时间轴归零重放（接缝有 40 ms 淡入淡出）；`once` = 放完「音乐时长」就停、**画面继续常驻**（马里奥这种静态图 + 一首歌正合适） |
117
+ | `volume` / `muted` | `60` / `false` | 0–100 / 开/关 | 带 `mainSound` 的作品默认出声；浏览器可能拦截自动播放，点一下界面任意位置即可解锁 |
118
+
119
+ > 两个滑块的分工：**玻璃不透明度**控制「界面压暗多少」，**背景亮度**控制「画面本身多亮」。前者影响可读性，后者只影响画面。背景看着黑，先加亮度；文字看着花，再加玻璃。
120
+
30
121
  ## 状态
31
122
 
32
123
  渲染器、插件骨架、设置页、背景库、音频都已完成，剩下的是增强项：
@@ -38,13 +129,14 @@ npm view dsh-shadertoy-skin version # 确认 npm 上真实存在的版本
38
129
  - [x] 玻璃壳：外壳表面（AppFrame / 侧栏 / 页面容器）全透明，**暗色滤镜只由播放器画一层**（`tintMix`），不再靠多层半透明 token 叠出来（叠 N 层会把背景压到几乎全黑，旧版就栽在这）
39
130
  - [x] 设置页：**左栏一行「Shader 背景」→ 主区域整页**（不是弹窗），带页头、参数 / 背景库 / 代码三个页签
40
131
  - [x] **参数**：启用、作品切换、玻璃不透明度、背景亮度、卡片透明度、模糊、分辨率、帧率、速度、**画面循环**、**音乐只播一次**、音量/静音、本背景恢复默认
41
- - [x] **音乐只播一次**：放完设定时长就停，画面继续常驻（适合马里奥这种静态图 + 一首歌）；`loop` 则是一直放
132
+ - [x] **音乐只播一次**：放完设定时长就停，画面继续常驻（适合马里奥这种静态图 + 一首歌）；`loop` 则是按「音乐时长」把音乐时间轴归零重放，有限长度的曲子也能一直循环
42
133
  - [x] **画面循环**：有些作品播一次就停住，可设周期把 `iTime` 归零重播（只重置画面）
43
134
  - [x] 设置页配色改用 **DSH 品牌蓝**（亮色 `#3568dc` / 暗色 `#7aaaff`），小字号数值也清楚
44
135
  - [x] **背景库**：内置 + 我的背景列表、切换、改名、删除；粘贴代码导入、文件导入（ShaderToy JSON / GLSL）、从 `$DSH_HOME/shader-skin/presets/` 导入
45
136
  - [x] **代码页**：查看当前运行作品的 Image / Sound 源码，直接改 → **保存并运行**（内置作品会自动另存为「我的副本」，原件不动；编辑器里 Ctrl/⌘+S 同样保存）
46
137
  - [x] **iMouse 只在「按住左键 + 从空白处开始拖动」时驱动**：点按钮、拖滚动条、选中/复制回复文字都不会再带动背景；松手发一次释放（`iMouse.z < 0`）
47
138
  - [x] **卡片透明度三档**（不透明 / 半透明 / 透明）：控制卡片、代码块、弹层、输入框、聊天输入栏的底色，让背景能透进这些「框」里
139
+ - [x] **AI 回复里的「白块」也跟着透**：改动文件头、交付物卡片、markdown 代码块、行内代码、消息气泡原本直接读静态中性色（亮色下是不透明白），现在跟 `panels` 同档 alpha —— 亮色主题下不会再出现「别的卡片都透、就这几块死白」
48
140
  - [x] **每背景独立参数**（`overrides`）
49
141
  - [x] **`mainSound` 音频**：4096 采样块 → `readPixels` → WebAudio 前瞻调度 + Gain/限幅，音量与静音实时生效
50
142
  - [x] **音频签名全兼容**：ShaderToy 音频 pass 的四种写法都接受 —— `vec2`/`float` 返回值 × `(float time)`/`(int samp, float time)` 参数（单声道自动复制到左右；`samp` 传绝对采样序号）
@@ -54,26 +146,6 @@ npm view dsh-shadertoy-skin version # 确认 npm 上真实存在的版本
54
146
  - [x] **启动自愈**：桌面端 client 插件行与服务是并发激活的，首次启动时 `theme`/`slots` 可能还没就绪（旧版因此「重启后要手动关开一次插件」）。现在服务现取 + 启动后 10 秒内多次自检（背景层缺失就重建、token 被重置就重设、播放器没 `ready` 就重发 init、侧栏没注册上就补注册），**装好重启即生效**
55
147
  - [ ] 多 pass（Buffer A–D）、音频可视化回馈、兼容性静态体检
56
148
 
57
- ## 参数与默认值
58
-
59
- 默认值集中在 [`native-dist/defaults.json`](native-dist/defaults.json)，面板读它来渲染选项与「恢复默认」，Host 用它做兜底——**改一个文件就能改默认值**。
60
-
61
- | 参数 | 默认 | 可选 | 说明 |
62
- |---|---|---|---|
63
- | `enabled` | `true` | 开/关 | 关掉只移除背景层，设置页仍在 |
64
- | `glass` | `60` (%) | 20–95 | 玻璃不透明度：界面压住背景的程度。越高文字越清晰、背景越淡；越低背景越透亮 |
65
- | `brightness` | `100` (%) | 30–180 | 背景亮度（着色器输出乘数）。黄昏、夜景类作品看着太暗就调高 |
66
- | `panels` | `opaque` | opaque / half / clear | 卡片、代码块、弹层、**聊天输入框**、编辑器表面的底色：不透明 / 半透明 / 透明。想让背景从框里透出来就调它 |
67
- | `blur` | `0` px | 0–12 | 只在 > 0 时启用 CSS `filter` |
68
- | `scale` | `1`× | 0.5 / 0.75 / 1 / 1.25 / 1.5 | 渲染分辨率倍率（DPR 上限 1.5） |
69
- | `fps` | `30` | 15 / 20 / 30 / 60 | 渲染帧率上限；聊天时 30 足够 |
70
- | `speed` | `1`× | 0–2 | 时间轴倍速 |
71
- | `loop` / `loopSeconds` | `false` / `20` s | 开/关 · 5–120 s | **画面循环**：有的作品播一次就不动了，打开后每个周期把 `iTime` 归零重播（只重置画面，不影响声音） |
72
- | `audioMode` / `audioSeconds` | `loop` / `60` s | loop / once · 10–600 s | **音乐播放方式**：`loop` 一直放；`once` = 放完「音乐时长」就停、**画面继续常驻**（马里奥这种静态图 + 一首歌正合适） |
73
- | `volume` / `muted` | `60` / `false` | 0–100 / 开/关 | 带 `mainSound` 的作品默认出声；浏览器可能拦截自动播放，点一下界面任意位置即可解锁 |
74
-
75
- > 两个滑块的分工：**玻璃不透明度**控制「界面压暗多少」，**背景亮度**控制「画面本身多亮」。前者影响可读性，后者只影响画面。背景看着黑，先加亮度；文字看着花，再加玻璃。
76
-
77
149
  ## 要求
78
150
 
79
151
  - DeepSeek Harness **0.2.x**（桌面版或 `dsh web`）
@@ -145,65 +217,6 @@ dsh plugin --profile web add dsh-shadertoy-skin@latest
145
217
 
146
218
  `player.html` / `panel.html` / `defaults.json` 由 Host 半**按请求读盘（no-cache）**，手动改这些文件后刷新页面即可；但 `index.js` / `client.js`（Host 半 / Client 半）的改动必须重启对应进程：桌面 = 退出重开客户端，Web = 重启 `dsh web` 并刷新页面。
147
219
 
148
- ## 从 ShaderToy 装一个作品
149
-
150
- 插件自带三个 MIT 自写着色器，但真正好玩的是把你喜欢的 ShaderToy 作品装进来。**三种做法，任选一种：**
151
-
152
- > **推荐一试**：[`shadertoy.com/view/4dfXWj`](https://www.shadertoy.com/view/4dfXWj) —— 装进来效果挺带感，导入方式见下面任意一种。
153
- > 这只是个起点：**大家完全可以根据自己的喜好随便挑别的作品，也可以自己写着色器**（写好了走同样的导入流程）。ShaderToy 作品的许可证由原作者决定（默认 CC BY-NC-SA 3.0），装在本机自己玩没问题，但别把作品代码提交进仓库或随包再分发。
154
-
155
- ### 1. 粘贴代码（最稳，不用抓网页）
156
-
157
- 1. 打开作品页 `https://www.shadertoy.com/view/xxxxxxxx`，右上角 **Shader** 页签；
158
- 2. 全选 `Image` 页签里的代码（如果作品用了 `Common`，把 Common 里的函数一起复制到开头；用了 Buffer 的作品暂不支持）；
159
- 3. 回到插件设置页 → **背景库** → 「粘贴 ShaderToy 代码」→ 填名字 → 粘进 `Image 代码` → **加入背景库**；
160
- 4. 列表里点 **使用** 即可，参数会即时生效。
161
-
162
- 带声音的作品（代码里有 `mainSound`）把声音代码粘进 `Sound 代码`，切到它时会出声。声音签名支持这四种：
163
-
164
- ```glsl
165
- vec2 mainSound(float time) // 立体声
166
- float mainSound(float time) // 单声道（自动复制到左右）
167
- vec2 mainSound(int samp, float time) // 带采样序号
168
- float mainSound(int samp, float time) // 单声道 + 采样序号
169
- ```
170
-
171
- 如果出声被浏览器拦住，点一下界面任意位置即可解锁（面板音量那一行也会提示）。
172
-
173
- ### 2. 让 AI 帮你装（一条指令，把网址填进去就行）
174
-
175
- 复制下面这段，把第一行的网址换成你要的作品链接，发给 DeepSeek Harness（或任何能操作文件的 AI）：
176
-
177
- ```text
178
- 帮我给 DeepSeek Harness 装一个 ShaderToy 背景皮肤。
179
-
180
- 插件：dsh-shadertoy-skin（npm 包名就是 dsh-shadertoy-skin，GitHub: https://github.com/zdjmrq/dsh-shadertoy-skin）
181
- 如果还没装：桌面版走「插件 → 添加插件 → 填 dsh-shadertoy-skin → 装完完全退出并重启客户端」；命令行用 dsh plugin --profile desktop add dsh-shadertoy-skin。
182
-
183
- 要装的作品链接：<把你复制的 https://www.shadertoy.com/view/xxxxxxxx 粘在这里>
184
-
185
- 做法：
186
- 1. 打开上面的链接，拿到 Image pass 的 GLSL（若用了 Common，把 Common 的函数一起带上），以及可选的 mainSound。
187
- 2. 打开插件设置页（左栏「Shader 背景」）→ 背景库 → 「粘贴 ShaderToy 代码」：名字用作品名，Image 粘主代码，Sound 可空。
188
- 3. 导入后把它设为当前背景，确认背景真的渲染出来（不是黑屏、不是编译报错）；若报编译错误，按错误行号修好再试。
189
- 4. 如果页面抓不到代码（反爬/需要登录/只给 WebGL 不给源码），直接让我手动复制粘贴，不要猜代码。
190
- 5. 该作品的许可由原作者决定（ShaderToy 默认 CC BY-NC-SA 3.0）：只装在本机，不要提交进 git、不要随包发布。
191
-
192
- 装好后告诉我：装的是哪个作品、是否带声音、需不需要我调亮度/玻璃。
193
- ```
194
-
195
- > AI 抓不到 ShaderToy 页面时（它经常挡爬虫），就走上面第 1 种的「手动粘贴」——一样能装好，而且不会有许可证问题。
196
-
197
- ### 3. 从本地目录导入（批量最方便）
198
-
199
- 把 `ShaderToy 导出的 JSON`、或直接是 `.glsl` / `.txt` 的代码文件放进：
200
-
201
- ```
202
- $DSH_HOME/shader-skin/presets/ （Windows 默认 C:\Users\<你>\.dsh\shader-skin\presets\）
203
- ```
204
-
205
- 设置页 → 背景库 → 「从本地目录导入」→ 点 **导入**。这个目录不进包、不进 git。
206
-
207
220
  ## 改代码 / 微调作品
208
221
 
209
222
  设置页第三个页签 **「代码」** 显示的就是**当前正在跑**的那份源码：
@@ -214,7 +227,7 @@ $DSH_HOME/shader-skin/presets/ （Windows 默认 C:\Users\<你>\.dsh\shad
214
227
  | 改几行立刻看效果 | 改完点 **「保存并运行」**（或 Ctrl/⌘+S）：保存状态 → 播放器重新编译 → 画面即时更新；编译错误会显示在按钮下方（带行号） |
215
228
  | 改坏了想还原 | 点 **「放弃修改」**，重新读取当前已保存的版本（想彻底恢复默认就去「参数 → 本背景恢复默认」，或从「背景库」重新导入） |
216
229
  | 内置作品能改吗 | 能改，但内置文件是只读的：保存时会自动另存为 **「<原名>（我的副本）」** 并切过去运行，内置原件不动 |
217
- | 代码框太小/太大 | 两个代码框（Image / Sound）都能**拖右下角调整高度**，调整后的高度会记住（下次打开还是这个高度） |
230
+ | 代码框太小/太大 | 两个代码框（Image / Sound）下面都有一条**拖动把手**，上下拖动即可改高度（把手指到把手上按 ↑/↓ 也行）；调整后的高度会记住（下次打开还是这个高度） |
218
231
 
219
232
  > 注意：ShaderToy 的 WebGL2 着色器语言是 ESSL 3.00，**不支持 `precise` 限定符**（那是 GLSL 4.0 / ESSL 3.20 的东西，ShaderToy 的 Vulkan 后端才有）。需要「共享晶格点必须同哈希」这类修复时，用**整数哈希**（`uint` + 位混合）代替 `precise`——效果是确定的，也不会被驱动 FMA 收缩影响。
220
233
 
package/client.js CHANGED
@@ -207,6 +207,25 @@ window.__ModuleLoader__.load({
207
207
  const RAISED_TOKENS = [
208
208
  '--dsw-alias-bg-overlay', '--dsw-specific-menu',
209
209
  ]
210
+ /**
211
+ * Content fills that never go through the `bg-layer-*` tokens: the
212
+ * changed-files header strip, deliverable/plan cards, markdown code
213
+ * blocks + inline code, and the user-message bubble. In the light theme
214
+ * those default to opaque near-white (the static neutral-50/100 scale),
215
+ * which is what made some assistant replies look like solid white
216
+ * patches while every other card was translucent. Each entry is
217
+ * [token, weight]: the weight scales the current `panels` alpha.
218
+ */
219
+ const CONTENT_TOKENS = [
220
+ ['--dsw-static-neutral-50', 0.62],
221
+ ['--dsw-static-neutral-100', 0.62],
222
+ ['--dsw-static-neutral-800', 0.62],
223
+ ['--dsw-static-neutral-850', 0.62],
224
+ ['--dsw-alias-markdown-code-block', 0.9],
225
+ ['--dsw-alias-markdown-code-block-banner', 1],
226
+ ['--dsw-alias-markdown-inline-code', 0.7],
227
+ ['--dsw-specific-bubble', 1],
228
+ ]
210
229
 
211
230
  /** `panels` = opaque (leave theme fills) | half | clear. */
212
231
  const PANEL_ALPHA = { half: 0.62, clear: 0.22 }
@@ -230,6 +249,9 @@ window.__ModuleLoader__.load({
230
249
  const raised = Math.min(0.96, alpha + 0.32)
231
250
  for (const token of LAYER_TOKENS) tokens[token] = rgba('9, 12, 16', alpha)
232
251
  for (const token of RAISED_TOKENS) tokens[token] = rgba('9, 12, 16', raised)
252
+ for (const [token, weight] of CONTENT_TOKENS) {
253
+ tokens[token] = rgba('9, 12, 16', Math.min(0.96, alpha * weight))
254
+ }
233
255
  return tokens
234
256
  }
235
257
 
package/native-dist/defaults.json CHANGED
@@ -21,7 +21,7 @@
21
21
  "panels": { "values": ["opaque", "half", "clear"] },
22
22
  "blur": { "min": 0, "max": 12, "step": 0.5, "unit": "px" },
23
23
  "fps": { "values": [15, 20, 30, 60] },
24
- "scale": { "values": [0.5, 0.75, 1, 1.25, 1.5] },
24
+ "scale": { "values": [0.25, 0.35, 0.4, 0.5, 0.6, 0.75, 1, 1.25, 1.5, 1.75, 2] },
25
25
  "speed": { "min": 0, "max": 2, "step": 0.05, "unit": "x" },
26
26
  "loopSeconds": { "min": 5, "max": 120, "step": 1, "unit": "s" },
27
27
  "audioMode": { "values": ["loop", "once"] },
package/native-dist/panel.html CHANGED
@@ -134,14 +134,27 @@
134
134
  textarea { resize: vertical; min-height: 92px; font-family: ui-monospace, Consolas, monospace; font-size: 11px; line-height: 1.5; }
135
135
 
136
136
  /* code tab: editable shader source of the running skin.
137
- Both boxes are drag-resizable in height (bottom-right corner); the heights are
138
- remembered in localStorage so the layout survives reloads. */
137
+ Both boxes are drag-resizable in height. The native textarea resizer is
138
+ disabled on purpose: it is a 15px invisible corner chrome that Electron
139
+ users never find (and hit-testing it through our padding is fiddly), so a
140
+ real, visible grip sits right under each box. Heights are remembered in
141
+ localStorage so the layout survives reloads. */
139
142
  .code-area {
140
143
  min-height: 240px; max-height: none; white-space: pre; overflow: auto;
141
- tab-size: 2; font-size: 11.5px; line-height: 1.6; resize: vertical;
144
+ tab-size: 2; font-size: 11.5px; line-height: 1.6; resize: none;
142
145
  }
143
146
  .code-area.sound { min-height: 90px; }
144
- .code-area::-webkit-resizer { background: transparent; }
147
+ .code-grip {
148
+ display: flex; align-items: center; justify-content: center; gap: 4px;
149
+ height: 16px; margin: 2px 0 8px; border-radius: 6px; cursor: ns-resize;
150
+ touch-action: none; user-select: none; outline-offset: 2px;
151
+ }
152
+ .code-grip:hover { background: var(--field-hover); }
153
+ .code-grip:focus-visible { outline: 2px solid var(--accent); }
154
+ .code-grip::before, .code-grip::after {
155
+ content: ""; width: 14px; height: 2px; border-radius: 1px; background: var(--faint);
156
+ }
157
+ body.dragging-code { cursor: ns-resize; }
145
158
  #code-title { color: var(--accent); font-size: 11px; }
146
159
  #code-hint { margin: -2px 0 4px; }
147
160
 
@@ -283,24 +296,24 @@
283
296
  </div>
284
297
 
285
298
  <div class="row switch">
286
- <label for="loop">循环播放</label>
299
+ <label for="loop">画面循环</label>
287
300
  <input type="checkbox" id="loop">
288
301
  </div>
289
302
  <div class="row" id="loop-seconds-row">
290
303
  <div class="head"><label for="loop-seconds">循环周期</label><output id="loop-seconds-out"></output></div>
291
304
  <input type="range" id="loop-seconds" min="5" max="120" step="1">
292
- <div class="hint">有的作品播一次就停住了：打开后每到一个周期把画面时间轴（iTime）归零重播。只重置画面，不影响声音；带音乐的作品建议关闭，避免音画不同步。</div>
305
+ <div class="hint">有的作品播一次就停住了：打开后每到「循环周期」就把画面时间轴（iTime）归零重播，适合一次性的开场动画。带淡入淡出的作品（比如马里奥）每轮会看到它重新淡入，这是着色器本身的效果，不是没循环。只重置画面，不影响声音。</div>
293
306
  </div>
294
307
 
295
308
  <div class="row" id="audio-mode-row">
296
309
  <div class="head"><label>音乐播放</label><output id="audio-mode-out"></output></div>
297
310
  <div id="audio-mode-dd"></div>
298
- <div class="hint">「只播一次」= 放完「音乐时长」就停，画面继续常驻（像马里奥这种静态图 + 一首歌正合适）；「循环播放」= 一直放。</div>
311
+ <div class="hint">ShaderToy 的音乐通常是一段有长度的曲子（放完就静音），所以「循环重放」要配合下面的「音乐时长」：每到这个时长就把音乐时间轴归零再来一遍，接缝处做了 40ms 淡入淡出。「只播一次」= 放完就停，画面继续常驻。</div>
299
312
  </div>
300
313
  <div class="row" id="audio-seconds-row">
301
314
  <div class="head"><label for="audio-seconds">音乐时长</label><output id="audio-seconds-out"></output></div>
302
315
  <input type="range" id="audio-seconds" min="10" max="600" step="5">
303
- <div class="hint">从切到这个背景开始计时；到点后音乐停止，画面不受影响。</div>
316
+ <div class="hint">这首曲子有多长：循环重放时按它从头再来，只播一次时按它停止。从切到这个背景开始计时；开「画面循环」也建议把它设成和循环周期一致的时长。</div>
304
317
  </div>
305
318
 
306
319
  <div class="row" id="volume-row">
@@ -358,11 +371,13 @@
358
371
  <div class="row">
359
372
  <div class="head"><label for="code-image">Image 代码</label><output id="code-image-info"></output></div>
360
373
  <textarea id="code-image" class="code-area" spellcheck="false" autocapitalize="off" autocorrect="off" wrap="off" placeholder="void mainImage(out vec4 fragColor, in vec2 fragCoord) { ... }"></textarea>
374
+ <div class="code-grip" data-code="code-image" role="separator" aria-orientation="horizontal" aria-label="拖动调整 Image 代码框高度（上下方向键也可以）" tabindex="0" title="拖动调整高度"></div>
361
375
  </div>
362
376
 
363
377
  <div class="row">
364
378
  <div class="head"><label for="code-sound">Sound 代码（可选，mainSound）</label><output id="code-sound-info"></output></div>
365
379
  <textarea id="code-sound" class="code-area sound" spellcheck="false" autocapitalize="off" autocorrect="off" wrap="off" placeholder="vec2 mainSound(float time) { ... }"></textarea>
380
+ <div class="code-grip" data-code="code-sound" role="separator" aria-orientation="horizontal" aria-label="拖动调整 Sound 代码框高度（上下方向键也可以）" tabindex="0" title="拖动调整高度"></div>
366
381
  </div>
367
382
 
368
383
  <div class="actions">
@@ -631,7 +646,7 @@
631
646
  let audioModeDd
632
647
 
633
648
  const PANEL_KINDS = { opaque: '不透明', half: '半透明', clear: '透明' }
634
- const AUDIO_MODES = { loop: '循环播放', once: '只播一次' }
649
+ const AUDIO_MODES = { loop: '循环重放', once: '只播一次' }
635
650
 
636
651
  function sync() {
637
652
  const p = effective()
@@ -643,7 +658,7 @@
643
658
  $('panels-out').textContent = PANEL_KINDS[p.panels] ?? PANEL_KINDS.opaque
644
659
  $('blur').value = String(p.blur)
645
660
  $('blur-out').textContent = p.blur > 0 ? `${p.blur} px` : '关'
646
- $('scale-out').textContent = `${p.scale}×`
661
+ $('scale-out').textContent = bufferSizeFor(p.scale)
647
662
  $('fps-out').textContent = `${p.fps} fps`
648
663
  $('speed').value = String(p.speed)
649
664
  $('speed-out').textContent = `${Number(p.speed).toFixed(2)}×`
@@ -660,7 +675,7 @@
660
675
  $('audio-mode-out').textContent = AUDIO_MODES[p.audioMode] ?? AUDIO_MODES.loop
661
676
  $('audio-seconds').value = String(p.audioSeconds ?? 60)
662
677
  $('audio-seconds-out').textContent = `${Math.round(p.audioSeconds ?? 60)} s`
663
- $('audio-seconds-row').hidden = p.audioMode !== 'once'
678
+ $('audio-seconds-row').hidden = !sound
664
679
  $('volume').disabled = !sound
665
680
  $('muted').disabled = !sound
666
681
  $('muted').checked = p.muted === true
@@ -677,14 +692,43 @@
677
692
  if (fpsDd) fpsDd.setValue(String(p.fps))
678
693
  if (panelsDd) panelsDd.setValue(p.panels ?? 'opaque')
679
694
  if (audioModeDd) audioModeDd.setValue(p.audioMode === 'once' ? 'once' : 'loop')
680
- $('scale-hint').textContent = `实际渲染缓冲：${bufferSize()}（DPR ≤ 1.5）`
695
+ $('scale-hint').textContent = `实际渲染缓冲：${bufferSizeFor(p.scale)}（窗口 ${viewportBasePixels().cssW} × ${viewportBasePixels().cssH}，DPR 上限 1.5；换窗口大小这里的数字会跟着变）`
681
696
  $('preset-kind').textContent = state.activeId ? (entryById(state.activeId) ? '我的' : '内置') : ''
682
697
  }
683
698
 
684
- function bufferSize() {
685
- const dpr = Math.min(window.devicePixelRatio || 1, 1.5)
686
- const scale = Number(effective().scale) || 1
687
- return `${Math.round(window.innerWidth * dpr * scale)} × ${Math.round(window.innerHeight * dpr * scale)}`
699
+ /**
700
+ * The player iframe covers the whole app viewport, so the settings iframe has to
701
+ * ask its parent for the window size — `window.innerWidth` here is only the main
702
+ * column. DPR is capped at 1.5 by the player, match that.
703
+ */
704
+ function viewportBasePixels() {
705
+ let owner = window
706
+ try { if (!STANDALONE && parent) owner = parent } catch { /* cross-origin embed */ }
707
+ const cssW = Math.max(1, Math.round(Number(owner.innerWidth) || Number(window.innerWidth) || 1280))
708
+ const cssH = Math.max(1, Math.round(Number(owner.innerHeight) || Number(window.innerHeight) || 800))
709
+ const dpr = Math.min(Number(owner.devicePixelRatio) || Number(window.devicePixelRatio) || 1, 1.5)
710
+ return { cssW, cssH, dpr, w: Math.round(cssW * dpr), h: Math.round(cssH * dpr) }
711
+ }
712
+
713
+ /** "1280 × 810" — the drawing-buffer size this scale multiplies asks the player for. */
714
+ function bufferSizeFor(scale) {
715
+ const base = viewportBasePixels()
716
+ const factor = Math.min(2, Math.max(0.25, Number(scale) || 1))
717
+ return `${Math.round(base.w * factor)} × ${Math.round(base.h * factor)}`
718
+ }
719
+
720
+ function scaleOptions() {
721
+ const values = defaults.limits.scale?.values ?? [0.25, 0.35, 0.4, 0.5, 0.6, 0.75, 1, 1.25, 1.5, 1.75, 2]
722
+ return values.map(value => {
723
+ const note = value === 0.25 ? ' · 最省电' : value === 2 ? ' · 最吃显卡' : ''
724
+ return { value: String(value), text: `${bufferSizeFor(value)}（${value}×${note}）` }
725
+ })
726
+ }
727
+
728
+ /** Window size changes move every resolution label, so rebuild the list. */
729
+ function refreshScaleOptions() {
730
+ if (!scaleDd) return
731
+ scaleDd.setOptions(scaleOptions(), String(effective().scale))
688
732
  }
689
733
 
690
734
  function bindParams() {
@@ -693,9 +737,7 @@
693
737
  onChange: id => setActive(id),
694
738
  })
695
739
  scaleDd = makeDropdown($('scale-dd'), {
696
- options: (defaults.limits.scale?.values ?? [0.5, 0.75, 1, 1.25, 1.5]).map(value => ({
697
- value: String(value), text: value === 1 ? '1×（原生）' : `${value}×`,
698
- })),
740
+ options: scaleOptions(),
699
741
  value: String(effective().scale),
700
742
  onChange: value => setParam('scale', Number(value)),
701
743
  })
@@ -715,7 +757,7 @@
715
757
  })
716
758
  audioModeDd = makeDropdown($('audio-mode-dd'), {
717
759
  options: [
718
- { value: 'loop', text: '循环播放（一直放）' },
760
+ { value: 'loop', text: '循环重放（每「音乐时长」秒从头再来）' },
719
761
  { value: 'once', text: '只播一次（播完停，画面常驻）' },
720
762
  ],
721
763
  value: effective().audioMode === 'once' ? 'once' : 'loop',
@@ -747,7 +789,7 @@
747
789
  document.addEventListener('keydown', event => {
748
790
  if (event.key === 'Escape' && MODE === 'popup' && open && !document.querySelector('.dd.open')) setOpen(false)
749
791
  })
750
- window.addEventListener('resize', () => { sync(); reportSize() })
792
+ window.addEventListener('resize', () => { refreshScaleOptions(); sync(); reportSize() })
751
793
  }
752
794
 
753
795
  // ------------------------------------------------------------- library UI
@@ -981,7 +1023,7 @@
981
1023
  $('code-title').textContent = name
982
1024
  $('code-hint').textContent = `${editable
983
1025
  ? '正在编辑「我的」背景：保存后立刻重新编译运行，改动只存在本机。'
984
- : '内置作品只读：保存会另存为「我的副本」并立刻运行，内置原件不动。'} 两个代码框都能拖右下角调高度（会记住）。`
1026
+ : '内置作品只读：保存会另存为「我的副本」并立刻运行，内置原件不动。'} 两个代码框都能拖下面的把手调高度（聚焦把手后按 ↑/↓ 也行），会记住。`
985
1027
  updateCodeInfo()
986
1028
  setCodeNote('')
987
1029
  }
@@ -1040,6 +1082,52 @@
1040
1082
  }
1041
1083
  }
1042
1084
 
1085
+ /** Visible drag grips under the code boxes (the native textarea resizer is off). */
1086
+ function bindCodeGrips() {
1087
+ for (const grip of document.querySelectorAll('.code-grip')) {
1088
+ const area = $(grip.dataset.code)
1089
+ if (!area) continue
1090
+ const isSound = area.classList.contains('sound')
1091
+ const minHeight = isSound ? 80 : 160
1092
+ const maxHeight = () => Math.max(minHeight + 80, Math.round(window.innerHeight * 0.72))
1093
+ const setHeight = (height) => {
1094
+ const clamped = Math.min(maxHeight(), Math.max(minHeight, Math.round(height)))
1095
+ area.style.height = `${clamped}px`
1096
+ }
1097
+ let startY = 0
1098
+ let startHeight = 0
1099
+ const stop = () => {
1100
+ document.body.classList.remove('dragging-code')
1101
+ window.removeEventListener('pointermove', onMove)
1102
+ window.removeEventListener('pointerup', stop)
1103
+ window.removeEventListener('pointercancel', stop)
1104
+ saveCodeHeights()
1105
+ }
1106
+ const onMove = (event) => {
1107
+ if (typeof event.clientY !== 'number') return
1108
+ event.preventDefault()
1109
+ setHeight(startHeight + (event.clientY - startY))
1110
+ }
1111
+ grip.addEventListener('pointerdown', (event) => {
1112
+ if (event.button !== 0) return
1113
+ event.preventDefault()
1114
+ startY = event.clientY
1115
+ startHeight = area.offsetHeight
1116
+ document.body.classList.add('dragging-code')
1117
+ try { grip.setPointerCapture(event.pointerId) } catch { /* older engines */ }
1118
+ window.addEventListener('pointermove', onMove)
1119
+ window.addEventListener('pointerup', stop)
1120
+ window.addEventListener('pointercancel', stop)
1121
+ })
1122
+ grip.addEventListener('keydown', (event) => {
1123
+ if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return
1124
+ event.preventDefault()
1125
+ setHeight(area.offsetHeight + (event.key === 'ArrowDown' ? (event.shiftKey ? 64 : 16) : (event.shiftKey ? -64 : -16)))
1126
+ saveCodeHeights()
1127
+ })
1128
+ }
1129
+ }
1130
+
1043
1131
  function bindCode() {
1044
1132
  $('code-save').addEventListener('click', () => { void saveCode() })
1045
1133
  $('code-revert').addEventListener('click', () => {
@@ -1048,10 +1136,7 @@
1048
1136
  $('code-image').addEventListener('input', updateCodeInfo)
1049
1137
  $('code-sound').addEventListener('input', updateCodeInfo)
1050
1138
  restoreCodeHeights()
1051
- // remember a manually dragged box height (the native resize handle is at the
1052
- // bottom-right corner of each textarea)
1053
- $('view-code').addEventListener('pointerup', saveCodeHeights)
1054
- $('view-code').addEventListener('mouseup', saveCodeHeights)
1139
+ bindCodeGrips()
1055
1140
  // Ctrl/Cmd+S inside the editor saves & runs instead of the browser dialog
1056
1141
  $('view-code').addEventListener('keydown', event => {
1057
1142
  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') {
package/native-dist/player.html CHANGED
@@ -85,7 +85,7 @@
85
85
  if (!next || typeof next !== 'object') return
86
86
  const wasPaused = params.paused
87
87
  if ('speed' in next) params.speed = clamp(next.speed, 0, 2, 1)
88
- if ('scale' in next) params.scale = clamp(next.scale, 0.5, 2, 1)
88
+ if ('scale' in next) params.scale = clamp(next.scale, 0.25, 2, 1)
89
89
  if ('blur' in next) params.blur = clamp(next.blur, 0, 12, 0)
90
90
  if ('fps' in next) params.fps = clamp(next.fps, 1, 120, 30)
91
91
  if ('dim' in next) { params.dim = clamp(next.dim, 0, 2, 1); lookExplicit = true }
@@ -118,6 +118,11 @@
118
118
  if (params.audioMode === 'once' && audio.time >= params.audioSeconds) {
119
119
  stopAudioScheduler('once')
120
120
  setAudioState('ended', 'music played once')
121
+ } else if (params.audioMode === 'loop' && audioLoopPeriod() > 0 && audio.time >= params.audioSeconds) {
122
+ // once → loop after the piece already ended: play it again from the top
123
+ audio.time = 0
124
+ audio.chunks = 0
125
+ if (!audio.running) startAudioScheduler()
121
126
  } else if (!audio.running) {
122
127
  startAudioScheduler()
123
128
  }
@@ -132,7 +137,7 @@
132
137
  function line() {
133
138
  const mode = DEBUG_BG ? 'debug-bg' : (program ? 'running' : 'idle')
134
139
  const note = diag.note ? ` · ${diag.note}` : ''
135
- return `${mode} · gl=${diag.gl} · ${es3 ? 'es3' : 'es1'} · ${canvas.width}x${canvas.height} · ${state.fps}fps · frames=${state.frame} · audio=${audioStateLabel} · look=${params.dim.toFixed(2)}/${params.tintMix.toFixed(2)} · loop=${params.loop ? `${params.loopSeconds.toFixed(0)}s` : 'off'} · shader=${diag.preset}${note}`
140
+ return `${mode} · gl=${diag.gl} · ${es3 ? 'es3' : 'es1'} · ${canvas.width}x${canvas.height} · ${state.fps}fps · frames=${state.frame} · audio=${audioStateLabel} · look=${params.dim.toFixed(2)}/${params.tintMix.toFixed(2)} · loop=${params.loop ? `${params.loopSeconds.toFixed(0)}s` : 'off'} · music=${params.audioMode === 'once' ? `once/${params.audioSeconds.toFixed(0)}s` : `loop/${params.audioSeconds.toFixed(0)}s`} · shader=${diag.preset}${note}`
136
141
  }
137
142
  function refreshDiag() {
138
143
  diagBox.textContent = line()
@@ -558,8 +563,40 @@
558
563
  return true
559
564
  }
560
565
 
561
- /** Render one chunk into the FBO and decode it into audio.left/right. */
562
- function renderAudioChunk() {
566
+ /** Length of the music-loop seam fade, in seconds (keeps the repeat click-free). */
567
+ const AUDIO_SEAM_FADE = 0.04
568
+
569
+ /**
570
+ * Loop period for the *music* timeline. ShaderToy sound passes are finite pieces
571
+ * (they fade out and then stay silent), so "循环播放" cannot just keep feeding
572
+ * t=60,70,… — it has to wrap the audio clock at the configured length.
573
+ */
574
+ function audioLoopPeriod() {
575
+ const period = Number(params.audioSeconds)
576
+ return params.audioMode === 'loop' && Number.isFinite(period) && period > 0 ? period : 0
577
+ }
578
+
579
+ /** Per-sample gain that fades the music in/out at the loop seam and at "stop". */
580
+ function seamGain(time) {
581
+ let gain = 1
582
+ const period = audioLoopPeriod()
583
+ if (period > 0) {
584
+ if (time < AUDIO_SEAM_FADE) gain = Math.min(gain, Math.max(0, time) / AUDIO_SEAM_FADE)
585
+ const left = period - time
586
+ if (left < AUDIO_SEAM_FADE) gain = Math.min(gain, Math.max(0, left) / AUDIO_SEAM_FADE)
587
+ } else if (params.audioMode === 'once') {
588
+ const left = params.audioSeconds - time
589
+ if (left < AUDIO_SEAM_FADE) gain = Math.min(gain, Math.max(0, left) / AUDIO_SEAM_FADE)
590
+ }
591
+ return gain
592
+ }
593
+
594
+ /**
595
+ * Render one chunk that starts at `startTime` into the FBO and decode it into
596
+ * audio.left/right. The caller owns the clock (`audio.time` is not advanced here),
597
+ * so a chunk can be re-rendered at a wrapped time.
598
+ */
599
+ function renderAudioChunk(startTime, chunkSeconds) {
563
600
  if (!audio.program || !audio.sampleRate) return false
564
601
  if (!ensureAudioTarget()) return false
565
602
  const L = audio.locs
@@ -572,7 +609,7 @@
572
609
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0)
573
610
  for (let i = 0; i < 4; i++) { gl.activeTexture(gl.TEXTURE0 + i); gl.bindTexture(gl.TEXTURE_2D, blackTex) }
574
611
  if (L.iResolution) gl.uniform3f(L.iResolution, AUDIO_CHUNK, 1, 1)
575
- if (L.iTime) gl.uniform1f(L.iTime, audio.time)
612
+ if (L.iTime) gl.uniform1f(L.iTime, startTime)
576
613
  if (L.iTimeDelta) gl.uniform1f(L.iTimeDelta, 0)
577
614
  if (L.iFrame) gl.uniform1i(L.iFrame, audio.chunks)
578
615
  if (L.iMouse) gl.uniform4f(L.iMouse, 0, 0, 0, 0)
@@ -590,11 +627,14 @@
590
627
  gl.bindFramebuffer(gl.FRAMEBUFFER, null)
591
628
  }
592
629
  const bytes = audio.bytes
630
+ const perSample = chunkSeconds / AUDIO_CHUNK
593
631
  let peak = 0
594
632
  let sum = 0
595
633
  for (let i = 0; i < AUDIO_CHUNK; i++) {
596
- const l = (((bytes[i * 4] << 8) | bytes[i * 4 + 1]) / 65535) * 2 - 1
597
- const r = (((bytes[i * 4 + 2] << 8) | bytes[i * 4 + 3]) / 65535) * 2 - 1
634
+ const time = startTime + i * perSample
635
+ const gain = seamGain(time)
636
+ const l = ((((bytes[i * 4] << 8) | bytes[i * 4 + 1]) / 65535) * 2 - 1) * gain
637
+ const r = ((((bytes[i * 4 + 2] << 8) | bytes[i * 4 + 3]) / 65535) * 2 - 1) * gain
598
638
  audio.left[i] = l
599
639
  audio.right[i] = r
600
640
  const al = l < 0 ? -l : l
@@ -605,7 +645,6 @@
605
645
  }
606
646
  audio.peak = peak
607
647
  audio.rms = Math.sqrt(sum / (AUDIO_CHUNK * 2))
608
- audio.time += audioChunkSeconds() * Math.max(params.speed, 0)
609
648
  if (AUDIOPROBE) window.__audioProbe = { peak, rms: audio.rms, chunks: audio.chunks }
610
649
  return true
611
650
  }
@@ -613,7 +652,13 @@
613
652
  function scheduleAudioChunk(when) {
614
653
  const ctx = audio.ctx
615
654
  if (!ctx || !audio.gain) return false
616
- if (!renderAudioChunk()) return false
655
+ const chunkSeconds = audioChunkSeconds()
656
+ const period = audioLoopPeriod()
657
+ let start = audio.time
658
+ if (period > 0 && start >= period) start = start % period
659
+ if (params.audioMode === 'once' && start >= params.audioSeconds) return false
660
+ if (!renderAudioChunk(start, chunkSeconds)) return false
661
+ audio.time = start + chunkSeconds * Math.max(params.speed, 0)
617
662
  try {
618
663
  const buffer = ctx.createBuffer(2, AUDIO_CHUNK, audio.sampleRate)
619
664
  buffer.copyToChannel(audio.left, 0)
@@ -625,7 +670,7 @@
625
670
  source.start(when)
626
671
  audio.sources.add(source)
627
672
  audio.chunks++
628
- audio.scheduledUntil = when + audioChunkSeconds()
673
+ audio.scheduledUntil = when + chunkSeconds
629
674
  return true
630
675
  } catch (error) {
631
676
  setAudioState('error', `audio schedule: ${error.message}`)
@@ -640,6 +685,10 @@
640
685
  setAudioState('ended', 'music played once')
641
686
  return
642
687
  }
688
+ // music loop: switching modes (or shortening the length) may leave the clock
689
+ // past the new seam — restart the piece instead of playing silence forever
690
+ const period = audioLoopPeriod()
691
+ if (period > 0 && audio.time >= period) audio.time = audio.time % period
643
692
  audio.running = true
644
693
  const startAt = audio.ctx.currentTime + AUDIO_PREBUFFER
645
694
  audio.scheduledUntil = startAt
@@ -760,8 +809,11 @@
760
809
 
761
810
  function resize() {
762
811
  const dpr = Math.min(window.devicePixelRatio || 1, 1.5)
763
- const w = Math.max(1, Math.round((canvas.clientWidth || window.innerWidth) * dpr * params.scale))
764
- const h = Math.max(1, Math.round((canvas.clientHeight || window.innerHeight) * dpr * params.scale))
812
+ // 2× on a big window can ask for an 8k-wide drawing buffer; clamp each side to
813
+ // the WebGL texture limit instead of letting the context fail.
814
+ const MAX_SIDE = 8192
815
+ const w = Math.min(MAX_SIDE, Math.max(1, Math.round((canvas.clientWidth || window.innerWidth) * dpr * params.scale)))
816
+ const h = Math.min(MAX_SIDE, Math.max(1, Math.round((canvas.clientHeight || window.innerHeight) * dpr * params.scale)))
765
817
  if (w !== canvas.width || h !== canvas.height) { canvas.width = w; canvas.height = h }
766
818
  diag.w = canvas.width
767
819
  diag.h = canvas.height
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dsh-shadertoy-skin",
3
- "version": "0.2.1",
3
+ "version": "0.2.2",
4
4
  "description": "Realtime ShaderToy background skin for DeepSeek Harness — a zero-runtime-dependency WebGL2 player, background library and glass UI integration.",
5
5
  "type": "module",
6
6
  "license": "MIT",