# LUMEN 生成式着色器工作室

**[在线体验 →](https://lumenshaders.vercel.app/)**

一个自包含的 Web 工具，用于生成循环抽象着色器艺术：液态铬、丝带、柔和渐变绽放、光环、光线、半调场、数据字形、罗纹玻璃和像素马赛克。所有内容均通过 WebGL2 实时渲染，每段动画都是数学上的完美循环。

![液态铬](docs/preview-chrome.png)

![丝带](docs/preview-silk.png)

![数据字形](docs/preview-glyphs.png)

## 运行

无构建步骤，零依赖。

- **在线演示：** [lumenshaders.vercel.app](https://lumenshaders.vercel.app/)
- **本地：** 双击 `index.html`，或运行 `npx http-server . -p 8080`

需要支持 WebGL2 的浏览器（Chrome、Edge、Firefox）。

## 部署（Caddy）

```bash
mkdir -p /var/www/lumenshaders
cp -r /root/lumenshaders/* /var/www/lumenshaders/
sudo chown -R caddy:caddy /var/www/lumenshaders/
sudo find /var/www/lumenshaders/ -type d -exec chmod 755 {} \;
sudo find /var/www/lumenshaders/ -type f -exec chmod 644 {} \;
```

```Caddyfile
yourdomain.com {
    root * /var/www/lumenshaders
    file_server
    encode {
        zstd
        gzip
        minimum_length 512
    }
    header {
        X-Content-Type-Options "nosniff"
        X-Frame-Options "DENY"
        Referrer-Policy "strict-origin-when-cross-origin"
    }
    @static {
        file
        path *.ico *.css *.js *.gif *.jpg *.jpeg *.png *.svg *.woff *.woff2
    }
    header @static Cache-Control "public, max-age=31536000, must-revalidate"
}
```

## 控制

- **随机化**（或按 `R`）：新风格、调色板、形态、光照和种子，按艺术风格调校，确保结果始终出色。有时会发明全新的合成风格。
- **风格**：9 种艺术模式，每种都有独立的渲染器。"随机化时保持风格"在随机化时锁定模式。
- **生成风格**："新风格"运行 12 基因风格合成器（6 种场类型 × 5 种域几何 × 4 种色彩映射 × 4 种着色模型 × 4 种表面叠加），产生基础集合中不存在的独立风格，如 FLUX（通量）、RIDGE（脊线）、WAVE（波）、RING（环）、CELL（细胞）和 FLOW（流）原型。"保存风格"将收藏保存在浏览器中，以一键标签形式显示。
- **渐变套装**：套装按钮渲染当前设计的 4 至 12 个变体（相同风格和调色板，不同种子），并下载为 PNG 的 ZIP 文件，非常适合在网站上使用一致的视觉艺术。
- **色彩**：16 种精选调色板加和谐调色板生成器，4 个可编辑颜色 + 背景，色相/饱和度/曝光。
- **形态**：种子、缩放、fbm 细节、域扭曲、湍流、各向异性拉伸。
- **光照**：强度、光泽、光照角度、虹彩、辉光、对比度。
- **纹理**：胶片颗粒、半调/字形密度、脊线数量、色差、暗角、柔和度。
- **运动**：循环长度和行程距离。循环在构造上是无缝的（噪声场沿闭合圆采样）。
- **分享**：每个设计可序列化为紧凑代码（`LMN1.…`）。复制它，发送给任何人，粘贴到分享框即可重建完全相同的设计：风格、颜色、种子、所有参数。"复制链接"生成直接加载设计的 URL。
- `空格`暂停，`S` 保存 PNG。

完整指南：[文档页面](https://lumenshaders.vercel.app/docs.html)。

## 导出

每个导出按钮打开一个带有实时预览和设置的对话框，确认后下载。

- **PNG** 最高 3840×2160，离屏全质量渲染。
- **视频**（WebM VP9/VP8）使用 **WebCodecs**（`VideoEncoder`）离线编码，由内置无依赖 WebM 封装器封装：无 `MediaRecorder`，无实时捕获，无标签页崩溃。可配置帧率（24/30/60 帧/秒）、分辨率（720p–1440p）和精确时长（1–8 个循环或 5–60 秒）。
- **GIF** 逐帧确定性渲染，使用无依赖 GIF89a 编码器（中值切割调色板 + 有序抖动）在页面内编码。永久循环或播放一次。

## 文件

- `index.html` / `styles.css`：应用外壳和设计系统
- `js/shaders.js`：包含全部 9 种模式的超级片段着色器
- `js/engine.js`：WebGL2 引擎和渲染循环
- `js/gifenc.js`：GIF 编码器（量化器 + LZW）
- `js/webmmux.js`：WebCodecs 输出的 WebM/Matroska 封装器
- `js/exporter.js`：PNG / 视频 / GIF 管线
- `js/palettes.js`、`js/ui.js`、`js/main.js`：调色板、控件构建器、状态和随机化器